diff --git a/.changeset/tree-showAllExample.md b/.changeset/tree-showAllExample.md
new file mode 100644
index 000000000..01cb8f106
--- /dev/null
+++ b/.changeset/tree-showAllExample.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+fix(TreeView): Support "show all" button inside TreeView component
diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
index 4fafb935f..fa37ce94b 100644
--- a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
+++ b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { TreeView, TreeItem, TreeViewSelectable, TreeViewApi } from '.';
 import { magma } from '../../theme/magma';
-
 import {
   ArticleIcon,
   FolderIcon,
   FavoriteIcon,
   StarIcon,
   EmergencyIcon,
+  KeyboardArrowDownIcon,
+  KeyboardArrowUpIcon,
 } from 'react-magma-icons';
 import { Meta } from '@storybook/react/types-6-0';
 import { Card } from '../Card';
@@ -25,8 +26,13 @@ import {
   ButtonGroup,
   Spacer,
   SpacerAxis,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  IconButton,
 } from '../..';
-import { ButtonSize } from '../Button';
+import { ButtonColor, ButtonSize } from '../Button';
 import { FlexAlignContent, FlexAlignItems } from '../Flex';
 import { TagColor } from '../Tag';
 
@@ -1058,14 +1064,20 @@ export const InvalidTreeItems = (args: Partial<TreeViewProps>) => {
         </TreeItem>
         <TreeItem label="Node 1" itemId="item1" testId="item1">
           <TreeItem label="Child 1" itemId="item-child1">
-            <TreeItem label="Grandchild 1 - has tag content" itemId="item-gchild1">
+            <TreeItem
+              label="Grandchild 1 - has tag content"
+              itemId="item-gchild1"
+            >
               <Tag>This is a tag as a child of Grandchild 1</Tag>
             </TreeItem>
           </TreeItem>
         </TreeItem>
         <TreeItem label="Node 2" itemId="item2">
           <TreeItem label="Child 2" itemId="item-child2">
-            <TreeItem label="Grandchild 2 - has valid and invalid children" itemId="item-gchild2">
+            <TreeItem
+              label="Grandchild 2 - has valid and invalid children"
+              itemId="item-gchild2"
+            >
               <TreeItem label="Great-grandchild 2" itemId="item-ggchild2" />
               <TreeItem label="Great-grandchild 3" itemId="item-ggchild3">
                 <>Invalid child</>
@@ -1080,7 +1092,10 @@ export const InvalidTreeItems = (args: Partial<TreeViewProps>) => {
         <TreeItem label="Node 5 - has null content" itemId="item5">
           {null}
         </TreeItem>
-        <TreeItem label="Node 6 - has undefined and valid children" itemId="item6">
+        <TreeItem
+          label="Node 6 - has undefined and valid children"
+          itemId="item6"
+        >
           {undefined}
           <TreeItem label="Node 7" itemId="item7" />
           <TreeItem label="Node 8 - has undefined content" itemId="item8">
@@ -1097,3 +1112,458 @@ InvalidTreeItems.parameters = {
     exclude: ['isInverse', 'initialExpandedItems', 'ariaLabelledBy'],
   },
 };
+
+// MAST Tree example with hidden items
+
+const renderTreeItemsRecursively = (terms: any[], depth: number) => {
+  const labelStyles = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: 230 - depth * 24 + 'px',
+    display: 'inline-block',
+  };
+  return terms.map(term => {
+    return (
+      <TreeItem
+        itemId={term.id}
+        testId={term.id}
+        key={term.id}
+        label={term.title}
+        labelStyle={labelStyles}
+        title={term.title}
+        isDisabled={term.title === 'item-title-1'}
+      >
+        {term.children?.length ? (
+          renderTreeItemsRecursively(term.children, depth + 1)
+        ) : (
+          <></>
+        )}
+      </TreeItem>
+    );
+  });
+};
+
+const AccordionSectionWithTreeView = (props: any) => {
+  const {
+    trees,
+    title,
+    keyForRerenderOfTagsTree,
+    id,
+    isDisabled,
+    onSelectedItemChange,
+    apiRef,
+    ...rest
+  } = props;
+  const [isShowAll, setIsShowAll] = React.useState(false);
+  const isSingeTaxonomyOfSuchType = trees.length === 1;
+  const customIndex = Number(id) || 0;
+
+  const getTermsForRender = (terms: any) => {
+    if (isShowAll || terms.length <= 5) return terms;
+    return terms.slice(0, 5);
+  };
+  const getTreesForRender = () => {
+    if (isShowAll || trees.length <= 5) return trees;
+    return trees.slice(0, 5);
+  };
+
+  const toggleShowAll = () => {
+    setIsShowAll(prev => !prev);
+    if (!isShowAll) {
+      apiRef.current?.showMore();
+    }
+  };
+
+  const renderTrees = () => {
+    return (
+      <>
+        {getTreesForRender().map(
+          (tree: {
+            id: any;
+            preselectedItems: TreeItemSelectedInterface[] | undefined;
+            items: any[];
+          }) => {
+            return (
+              <TreeView
+                key={JSON.stringify(`${keyForRerenderOfTagsTree}-${tree.id}`)}
+                preselectedItems={tree.preselectedItems}
+                selectable={TreeViewSelectable.multi}
+                onSelectedItemChange={onSelectedItemChange}
+                apiRef={apiRef}
+                {...rest}
+              >
+                {renderTreeItemsRecursively(
+                  isSingeTaxonomyOfSuchType
+                    ? getTermsForRender(tree.items)
+                    : tree.items,
+                  0
+                )}
+              </TreeView>
+            );
+          }
+        )}
+      </>
+    );
+  };
+
+  return (
+    <AccordionItem {...rest} index={customIndex} isDisabled={isDisabled}>
+      <AccordionButton>{title}</AccordionButton>
+      <AccordionPanel>
+        {renderTrees()}
+        <Spacer axis={SpacerAxis.vertical} size={16} />
+        <IconButton
+          disabled={isDisabled}
+          onClick={toggleShowAll}
+          size={ButtonSize.small}
+          variant={ButtonVariant.link}
+          testId="showAllBtn"
+          icon={isShowAll ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+        >
+          {isShowAll ? 'Show Less' : 'Show All'}
+        </IconButton>
+      </AccordionPanel>
+    </AccordionItem>
+  );
+};
+
+const flatTree = {
+  title: 'Chapter/Subchapter',
+  trees: [
+    {
+      id: 'tree-id',
+      groupName: 'book-table-of-contents',
+      items: [
+        {
+          id: 'item-id-1',
+          title: 'item-title-1',
+          children: [],
+        },
+        {
+          id: 'item-id-2',
+          title: 'item-title-2',
+          children: [],
+        },
+        {
+          id: 'item-id-3',
+          title: 'item-title-3',
+          children: [],
+        },
+        {
+          id: 'item-id-4',
+          title: 'item-title-4',
+          children: [
+            {
+              id: 'item-id-4.1',
+              title: 'item-title-4.1',
+              children: [],
+            },
+          ],
+        },
+        {
+          id: 'item-id-5',
+          title: 'item-title-5',
+          children: [],
+        },
+        {
+          id: 'item-id-6',
+          title: 'item-title-6',
+          children: [],
+        },
+      ],
+      preselectedItems: [
+        {
+          itemId: 'item-id-2',
+          checkedStatus: IndeterminateCheckboxStatus.checked,
+        },
+      ],
+    },
+  ],
+  keyForRerenderOfTagsTree: true,
+};
+
+// This example is used in unit tests - modifying it may cause broken tests
+export const AccordionTreeWithShowAll = (props: any) => {
+  const apiRef = React.useRef<TreeViewApi>();
+
+  function onSelection(items: TreeItemSelectedInterface[]) {
+    props.onSelectedItemChange(items);
+  }
+
+  return (
+    <Accordion index={[0]} isMulti testId="accordion">
+      <AccordionSectionWithTreeView
+        apiRef={apiRef}
+        {...flatTree}
+        {...props}
+        onSelectedItemChange={onSelection}
+      />
+    </Accordion>
+  );
+};
+
+AccordionTreeWithShowAll.parameters = {
+  controls: {
+    exclude: [
+      'isInverse',
+      'initialExpandedItems',
+      'ariaLabelledBy',
+      'ariaLabel',
+      'testId',
+      'selectable',
+      'checkChildren',
+      'checkParents',
+    ],
+  },
+};
+
+// END of MAST Tree example with hidden items
+
+export const ComplexTreeWithShowAll = (args: Partial<TreeViewProps>) => {
+  const treeContent = {
+    id: 'tree-id',
+    groupName: 'disciplines',
+    items: [
+      {
+        id: 'discipline-arts-design',
+        title: 'Arts and Design',
+        children: [
+          {
+            id: 'ad-1',
+            title: 'Animation',
+            children: [],
+          },
+          {
+            id: 'ad-2',
+            title: 'Photography',
+            children: [],
+          },
+          {
+            id: 'ad-3',
+            title: 'Web Design',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-business',
+        title: 'Business',
+        children: [
+          {
+            id: 'bsn-1',
+            title: 'Accounting',
+            children: [],
+          },
+          {
+            id: 'bsn-2',
+            title: 'Finance',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-cs',
+        title: 'Computer Science',
+        children: [
+          {
+            id: 'cs-1',
+            title: 'Software Engineering',
+            children: [],
+          },
+          {
+            id: 'cs-2',
+            title: 'Information Technology',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-geography',
+        title: 'Geography',
+        children: [],
+      },
+      {
+        id: 'discipline-his',
+        title: 'History',
+        children: [
+          {
+            id: 'his-1',
+            title: 'American History',
+            children: [],
+          },
+          {
+            id: 'his-2',
+            title: 'World History',
+            children: [],
+          },
+          {
+            id: 'his-3',
+            title: 'Western Civilization',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-math',
+        title: 'Mathematics',
+        children: [
+          {
+            id: 'math-1',
+            title: 'Precalculus',
+            children: [],
+          },
+          {
+            id: 'math-2',
+            title: 'Calculus',
+            children: [],
+          },
+          {
+            id: 'math-3',
+            title: 'Finite Math',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-nutr',
+        title: 'Nutrition',
+        children: [
+          {
+            id: 'nutr-1',
+            title: 'Community Nutrition',
+            children: [],
+          },
+          {
+            id: 'nutr-2',
+            title: 'Sports Nutrition',
+            children: [],
+          },
+        ],
+      },
+    ],
+    preselectedItems: [
+      {
+        itemId: 'bsn-1',
+        checkedStatus: IndeterminateCheckboxStatus.checked,
+      },
+    ],
+  };
+
+  const apiRef = React.useRef<TreeViewApi>();
+  const [isShowAll, setIsShowAll] = React.useState(false);
+  const [selectedItems, setSelectedItems] =
+    React.useState<TreeItemSelectedInterface[]>();
+  const total = selectedItems?.length ?? 0;
+  const { selected, indeterminate } = createControlledTags(
+    selectedItems,
+    apiRef?.current
+  );
+
+  function onSelection(items: TreeItemSelectedInterface[]) {
+    setSelectedItems(items);
+  }
+
+  const getTermsForRender = (terms: any) => {
+    if (isShowAll || terms.length <= 5) {
+      return terms;
+    } else {
+      return terms.slice(0, 5);
+    }
+  };
+
+  const toggleShowAll = () => {
+    setIsShowAll(prev => !prev);
+    if (isShowAll) {
+      apiRef.current?.showLess();
+    } else {
+      apiRef.current?.showMore();
+    }
+  };
+
+  const onSelectAll = () => {
+    if (isShowAll) {
+      apiRef.current?.showLess();
+    } else {
+      apiRef.current?.showMore();
+      setIsShowAll(prev => !prev);
+    }
+    setTimeout(() => {
+      apiRef.current?.selectAll();
+    }, 50)
+  };
+
+  const renderTreeItemsRecursively = (discipline: any[], depth: number) => {
+    return discipline.map(term => {
+      return (
+        <TreeItem
+          key={term.id}
+          itemId={term.id}
+          testId={term.id}
+          label={term.title}
+        >
+          {term.children?.length ? (
+            renderTreeItemsRecursively(term.children, depth + 1)
+          ) : (
+            <></>
+          )}
+        </TreeItem>
+      );
+    });
+  };
+
+  return (
+    <>
+      <ButtonGroup
+        size={ButtonSize.small}
+        variant={ButtonVariant.solid}
+        color={ButtonColor.subtle}
+      >
+        <Button onClick={onSelectAll}>Select all</Button>
+        <Button onClick={() => apiRef.current?.clearAll()}>Clear all</Button>
+      </ButtonGroup>
+
+      <Spacer size={24} axis={SpacerAxis.vertical} />
+
+      <TreeView
+        key={treeContent.id}
+        {...args}
+        preselectedItems={treeContent.preselectedItems}
+        onSelectedItemChange={onSelection}
+        apiRef={apiRef}
+      >
+        {renderTreeItemsRecursively(getTermsForRender(treeContent.items), 0)}
+      </TreeView>
+
+      <Spacer size={16} axis={SpacerAxis.vertical} />
+
+      <IconButton
+        onClick={toggleShowAll}
+        size={ButtonSize.small}
+        variant={ButtonVariant.link}
+        testId="showAllBtn"
+        icon={isShowAll ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+      >
+        {isShowAll ? 'Show Less' : 'Show All'}
+      </IconButton>
+
+      <Spacer size={24} axis={SpacerAxis.vertical} />
+
+      <p>{total} total</p>
+      <p>Selected: {selected}</p>
+      <p>Indeterminate: {indeterminate}</p>
+    </>
+  );
+};
+
+ComplexTreeWithShowAll.args = {
+  checkParents: true,
+  checkChildren: true,
+  selectable: TreeViewSelectable.multi,
+  ariaLabel: 'Disciplines',
+};
+
+ComplexTreeWithShowAll.parameters = {
+  controls: {
+    exclude: ['isInverse', 'initialExpandedItems', 'ariaLabelledBy', 'testId'],
+  },
+};
diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js
index 33cfd80da..878c2aee3 100644
--- a/packages/react-magma-dom/src/components/TreeView/TreeView.test.js
+++ b/packages/react-magma-dom/src/components/TreeView/TreeView.test.js
@@ -9,6 +9,7 @@ import { transparentize } from 'polished';
 import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
 import { Tag } from '../Tag';
 import { Paragraph } from '../Paragraph';
+import { AccordionTreeWithShowAll } from './TreeView.stories';
 
 const TEXT = 'Test Text Tree Item';
 const testId = 'tree-view';
@@ -2326,7 +2327,7 @@ describe('TreeView', () => {
       const disabledItemId = 'item-ggchild1';
   
       const onSelectedItemChange = jest.fn();
-      const { getByTestId, debug } = render(
+      const { getByTestId } = render(
         <TreeItemsMultiLevelControlledOutside
           onSelectedItemChange={onSelectedItemChange}
           preselectedItems={[
@@ -2596,4 +2597,317 @@ describe('TreeView', () => {
       expect(queryByTestId('item1-expand')).not.toBeInTheDocument();
     });
   });
+
+  describe('tree with hidden items', () => {
+    const propsFlatTree = {
+      title: 'Chapter/Subchapter',
+      trees: [
+        {
+          id: 'tree-id',
+          groupName: 'book-table-of-contents',
+          items: [
+            {
+              id: 'item-id-1',
+              title: 'item-title-1',
+              children: [],
+            },
+            {
+              id: 'item-id-2',
+              title: 'item-title-2',
+              children: [],
+            },
+            {
+              id: 'item-id-3',
+              title: 'item-title-3',
+              children: [],
+            },
+            {
+              id: 'item-id-4',
+              title: 'item-title-4',
+              children: [
+                {
+                  id: 'item-id-4.1',
+                  title: 'item-title-4.1',
+                  children: [],
+                },
+              ],
+            },
+            {
+              id: 'item-id-5',
+              title: 'item-title-5',
+              children: [],
+            },
+            {
+              id: 'item-id-6',
+              title: 'item-title-6',
+              children: [],
+            },
+          ],
+          preselectedItems: [
+            {
+              itemId: 'item-id-2',
+              checkedStatus: IndeterminateCheckboxStatus.checked,
+            },
+          ],
+        },
+      ],
+      keyForRerenderOfTagsTree: true,
+    };
+
+    const propsTreeWithParent = {
+      title: 'Chapter/Subchapter',
+      trees: [
+        {
+          id: 'tree-id',
+          groupName: 'book-table-of-contents',
+          items: [
+            {
+              id: 'item-id-1',
+              title: 'item-title-1',
+              children: [],
+            },
+            {
+              id: 'item-id-2',
+              title: 'item-title-2',
+              children: [],
+            },
+            {
+              id: 'item-id-3',
+              title: 'item-title-3',
+              children: [],
+            },
+            {
+              id: 'item-id-4',
+              title: 'item-title-4',
+              children: [],
+            },
+            {
+              id: 'item-id-5',
+              title: 'item-title-5',
+              children: [
+                {
+                  id: 'item-id-6',
+                  title: 'item-title-6',
+                  children: [],
+                },
+              ],
+            },
+            {
+              id: 'item-id-7',
+              title: 'item-title-7',
+              children: [
+                {
+                  id: 'item-id-8',
+                  title: 'item-title-8',
+                  children: [],
+                },
+                {
+                  id: 'item-id-9',
+                  title: 'item-title-9',
+                  children: [
+                    {
+                      id: 'item-id-10',
+                      title: 'item-title-10',
+                      children: [],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+          preselectedItems: [
+            {
+              itemId: 'item-id-2',
+              checkedStatus: IndeterminateCheckboxStatus.checked,
+            },
+          ],
+        },
+      ],
+      keyForRerenderOfTagsTree: true,
+    };
+
+    it('renders tree with some items, and clicking show all displays the rest of the tree', () => {
+      const onSelectedItemChange = jest.fn();
+      const { asFragment, getByLabelText, getByTestId } = render(
+        <AccordionTreeWithShowAll
+          {...propsFlatTree}
+          onSelectedItemChange={onSelectedItemChange}
+          preselectedItems={[]}
+        />
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+
+      expect(getByLabelText('item-title-1')).toBeInTheDocument();
+      expect(getByLabelText('item-title-2')).toBeInTheDocument();
+      expect(getByLabelText('item-title-3')).toBeInTheDocument();
+      expect(getByLabelText('item-title-4')).toBeInTheDocument();
+      expect(getByLabelText('item-title-5')).toBeInTheDocument();
+
+      userEvent.click(getByTestId('showAllBtn'));
+      expect(getByLabelText('item-title-6')).toBeInTheDocument();
+      userEvent.click(getByLabelText('item-title-6'));
+      expect(getByTestId('item-id-6')).toHaveAttribute('aria-checked', 'true');
+      expect(onSelectedItemChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders tree with some items preselected, clicking show all displays the rest of the tree and preselected items remain selected', () => {
+      const onSelectedItemChange = jest.fn();
+      const { asFragment, getByLabelText, getByTestId } = render(
+        <AccordionTreeWithShowAll
+          {...propsFlatTree}
+          onSelectedItemChange={onSelectedItemChange}
+          preselectedItems={[
+            {
+              itemId: 'item-id-2',
+              checkedStatus: IndeterminateCheckboxStatus.checked,
+            },
+          ]}
+        />
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+
+      expect(getByLabelText('item-title-1')).toBeInTheDocument();
+      expect(getByLabelText('item-title-2')).toBeInTheDocument();
+      expect(getByLabelText('item-title-3')).toBeInTheDocument();
+      expect(getByLabelText('item-title-4')).toBeInTheDocument();
+      expect(getByLabelText('item-title-5')).toBeInTheDocument();
+
+      expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true');
+      userEvent.click(getByTestId('showAllBtn'));
+      expect(getByLabelText('item-title-6')).toBeInTheDocument();
+      userEvent.click(getByLabelText('item-title-6'));
+      expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true');
+      expect(onSelectedItemChange).toHaveBeenCalledWith([
+        {
+          itemId: 'item-id-2',
+          checkedStatus: IndeterminateCheckboxStatus.checked,
+        },
+        {
+          itemId: 'item-id-6',
+          checkedStatus: IndeterminateCheckboxStatus.checked,
+        },
+      ]);
+    });
+
+    it('renders tree with some items preselected, deselecting preselected items, clicking show all displays the rest of the tree and preselected items remain deselected', () => {
+      const onSelectedItemChange = jest.fn();
+      const { asFragment, getByLabelText, getByTestId } = render(
+        <AccordionTreeWithShowAll
+          {...propsFlatTree}
+          onSelectedItemChange={onSelectedItemChange}
+          preselectedItems={[
+            {
+              itemId: 'item-id-2',
+              checkedStatus: IndeterminateCheckboxStatus.checked,
+            },
+          ]}
+        />
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+
+      expect(getByLabelText('item-title-1')).toBeInTheDocument();
+      expect(getByLabelText('item-title-2')).toBeInTheDocument();
+      expect(getByLabelText('item-title-3')).toBeInTheDocument();
+      expect(getByLabelText('item-title-4')).toBeInTheDocument();
+      expect(getByLabelText('item-title-5')).toBeInTheDocument();
+
+      expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true');
+      userEvent.click(getByLabelText('item-title-2'));
+      userEvent.click(getByTestId('showAllBtn'));
+      expect(getByLabelText('item-title-6')).toBeInTheDocument();
+      userEvent.click(getByLabelText('item-title-6'));
+      expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'false');
+      expect(onSelectedItemChange).toHaveBeenCalledWith([
+        {
+          itemId: 'item-id-6',
+          checkedStatus: IndeterminateCheckboxStatus.checked,
+        },
+      ]);
+    });
+
+    it('clicking show all displays the rest of the tree, preselected items remain selected, and clicking show less maintains selected items', () => {
+      const onSelectedItemChange = jest.fn();
+      const { asFragment, getByLabelText, getByTestId } = render(
+        <AccordionTreeWithShowAll
+          {...propsFlatTree}
+          onSelectedItemChange={onSelectedItemChange}
+          preselectedItems={[
+            {
+              itemId: 'item-id-2',
+              checkedStatus: IndeterminateCheckboxStatus.checked,
+            },
+          ]}
+        />
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+
+      expect(getByLabelText('item-title-1')).toBeInTheDocument();
+      expect(getByLabelText('item-title-2')).toBeInTheDocument();
+      expect(getByLabelText('item-title-3')).toBeInTheDocument();
+      expect(getByLabelText('item-title-4')).toBeInTheDocument();
+      expect(getByLabelText('item-title-5')).toBeInTheDocument();
+
+      expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true');
+      userEvent.click(getByTestId('showAllBtn'));
+      expect(getByLabelText('item-title-6')).toBeInTheDocument();
+      userEvent.click(getByLabelText('item-title-6'));
+      expect(getByTestId('item-id-2')).toHaveAttribute('aria-checked', 'true');
+      userEvent.click(getByTestId('showAllBtn'));
+      expect(onSelectedItemChange).toHaveBeenCalledTimes(2);
+      expect(onSelectedItemChange).toHaveBeenCalledWith([
+        {
+          itemId: 'item-id-2',
+          checkedStatus: IndeterminateCheckboxStatus.checked,
+        },
+        {
+          itemId: 'item-id-6',
+          checkedStatus: IndeterminateCheckboxStatus.checked,
+        },
+      ]);
+    });
+
+    it('can uncheck all items by clicking on the parent (including hidden one)', () => {
+      const onSelectedItemChange = jest.fn();
+      const { asFragment, getByLabelText, getByTestId } = render(
+        <AccordionTreeWithShowAll
+          {...propsTreeWithParent}
+          onSelectedItemChange={onSelectedItemChange}
+          preselectedItems={[]}
+        />
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+
+      expect(getByLabelText('item-title-1')).toBeInTheDocument();
+      expect(getByLabelText('item-title-2')).toBeInTheDocument();
+      expect(getByLabelText('item-title-3')).toBeInTheDocument();
+      expect(getByLabelText('item-title-4')).toBeInTheDocument();
+      expect(getByLabelText('item-title-5')).toBeInTheDocument();
+
+      userEvent.click(getByTestId('showAllBtn'));
+      expect(getByLabelText('item-title-7')).toBeInTheDocument();
+
+      userEvent.click(getByLabelText('item-title-7'));
+      userEvent.click(getByTestId('item-id-7-expand'));
+      expect(getByTestId('item-id-8')).toHaveAttribute('aria-checked', 'true');
+      expect(getByTestId('item-id-9')).toHaveAttribute('aria-checked', 'true');
+
+      userEvent.click(getByLabelText('item-title-7'));
+      expect(getByTestId('item-id-8')).toHaveAttribute('aria-checked', 'false');
+      expect(getByTestId('item-id-9')).toHaveAttribute('aria-checked', 'false');
+
+      userEvent.click(getByTestId('item-id-9-expand'));
+      userEvent.click(getByLabelText('item-title-10'));
+      expect(getByTestId('item-id-10')).toHaveAttribute('aria-checked', 'true');
+      expect(getByTestId('item-id-9')).toHaveAttribute('aria-checked', 'true');
+      expect(getByTestId('item-id-7')).toHaveAttribute('aria-checked', 'mixed');
+
+      userEvent.click(getByTestId('showAllBtn')); // show less
+      expect(onSelectedItemChange).toHaveBeenCalledTimes(3);
+    });
+  });
 });
diff --git a/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap b/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap
new file mode 100644
index 000000000..73bc72a36
--- /dev/null
+++ b/packages/react-magma-dom/src/components/TreeView/__snapshots__/TreeView.test.js.snap
@@ -0,0 +1,8409 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeView tree with hidden items can uncheck all items by clicking on the parent (including hidden one) 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-78 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-78:focus {
+  outline: none;
+}
+
+.emotion-78:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-78>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-78>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-82 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-96 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+.emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-78 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-78:focus {
+  outline: none;
+}
+
+.emotion-78:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-78>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-78>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-82 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-96 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    data-testid="accordion"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <button
+        aria-controls="0_panel"
+        aria-expanded="true"
+        class="emotion-4 emotion-5"
+        id="0_btn"
+      >
+        <span
+          class="emotion-6 emotion-7"
+        >
+          Chapter/Subchapter
+        </span>
+        <span
+          class="emotion-8 emotion-9"
+          size="12"
+        />
+        <div
+          style="height: 24px; transform: none;"
+        >
+          <svg
+            class="icon"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.88 9.29L12 13.17 8.12 9.29a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        style="overflow: visible; height: 0px; opacity: 0;"
+      >
+        <div
+          aria-hidden="false"
+          class="emotion-10 emotion-11"
+          id="0_panel"
+        >
+          <ul
+            aria-multiselectable="true"
+            class="emotion-12 emotion-13"
+            role="tree"
+          >
+            <li
+              aria-checked="false"
+              class="emotion-14 emotion-15"
+              data-testid="item-id-1"
+              id="item-id-1"
+              role="treeitem"
+              title="item-title-1"
+            >
+              <div
+                class="emotion-16 emotion-17"
+                data-testid="item-id-1-itemwrapper"
+                id="item-id-1-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-1"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-1-checkbox"
+                      disabled=""
+                      id="item-id-1-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-1-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-26 emotion-27"
+                        color="#3942B0"
+                        disabled=""
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-28 emotion-29"
+                        data-testid="item-id-1-label"
+                        id="item-id-1-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-1
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-2"
+              id="item-id-2"
+              role="treeitem"
+              tabindex="0"
+              title="item-title-2"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-2-itemwrapper"
+                id="item-id-2-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-2"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-2-checkbox"
+                      id="item-id-2-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-2-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-2-label"
+                        id="item-id-2-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-2
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-3"
+              id="item-id-3"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-3"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-3-itemwrapper"
+                id="item-id-3-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-3"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-3-checkbox"
+                      id="item-id-3-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-3-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-3-label"
+                        id="item-id-3-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-3
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-4"
+              id="item-id-4"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-4"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-4-itemwrapper"
+                id="item-id-4-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-4"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-4-checkbox"
+                      id="item-id-4-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-4-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-4-label"
+                        id="item-id-4-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-4
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              aria-expanded="false"
+              class="emotion-78 emotion-15"
+              data-testid="item-id-5"
+              id="item-id-5"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-5"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-5-itemwrapper"
+                id="item-id-5-itemwrapper"
+              >
+                <div
+                  aria-hidden="true"
+                  class="emotion-82 emotion-83"
+                  data-testid="item-id-5-expand"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="currentColor"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-checked="false"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-5-checkbox"
+                      id="item-id-5-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-5-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-5-label"
+                        id="item-id-5-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-5
+                      </span>
+                    </label>
+                    <div
+                      aria-live="polite"
+                    >
+                      <div
+                        class="emotion-96 emotion-97"
+                      >
+                        No subitems are checked for item-title-5 checkbox
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <span
+            class="emotion-98 emotion-9"
+            size="16"
+          />
+          <button
+            class="emotion-100 emotion-101"
+            color="primary"
+            data-testid="showAllBtn"
+            shape="fill"
+            type="button"
+          >
+            <span
+              class="emotion-102 emotion-103"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 010-1.41c.39-.38 1.03-.39 1.42 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <span
+                class="emotion-104 emotion-105"
+              >
+                Show All
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TreeView tree with hidden items clicking show all displays the rest of the tree, preselected items remain selected, and clicking show less maintains selected items 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #3942B0;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-58 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-58:before,
+.emotion-58:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-58:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-58 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-58:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-58:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+.emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #3942B0;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-58 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-58:before,
+.emotion-58:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-58:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-58 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-58:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-58:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    data-testid="accordion"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <button
+        aria-controls="0_panel"
+        aria-expanded="true"
+        class="emotion-4 emotion-5"
+        id="0_btn"
+      >
+        <span
+          class="emotion-6 emotion-7"
+        >
+          Chapter/Subchapter
+        </span>
+        <span
+          class="emotion-8 emotion-9"
+          size="12"
+        />
+        <div
+          style="height: 24px; transform: none;"
+        >
+          <svg
+            class="icon"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.88 9.29L12 13.17 8.12 9.29a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        style="overflow: visible; height: 0px; opacity: 0;"
+      >
+        <div
+          aria-hidden="false"
+          class="emotion-10 emotion-11"
+          id="0_panel"
+        >
+          <ul
+            aria-multiselectable="true"
+            class="emotion-12 emotion-13"
+            role="tree"
+          >
+            <li
+              aria-checked="false"
+              class="emotion-14 emotion-15"
+              data-testid="item-id-1"
+              id="item-id-1"
+              role="treeitem"
+              title="item-title-1"
+            >
+              <div
+                class="emotion-16 emotion-17"
+                data-testid="item-id-1-itemwrapper"
+                id="item-id-1-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-1"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-1-checkbox"
+                      disabled=""
+                      id="item-id-1-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-1-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-26 emotion-27"
+                        color="#3942B0"
+                        disabled=""
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-28 emotion-29"
+                        data-testid="item-id-1-label"
+                        id="item-id-1-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-1
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="true"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-2"
+              id="item-id-2"
+              role="treeitem"
+              tabindex="0"
+              title="item-title-2"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-2-itemwrapper"
+                id="item-id-2-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-2"
+                      checked=""
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-2-checkbox"
+                      id="item-id-2-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-2-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.29 13.29c-.39.39-1.02.39-1.41 0L5.71 12.7a.9959.9959 0 010-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.58 7.59z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-2-label"
+                        id="item-id-2-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-2
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-3"
+              id="item-id-3"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-3"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-3-itemwrapper"
+                id="item-id-3-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-3"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-3-checkbox"
+                      id="item-id-3-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-3-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-3-label"
+                        id="item-id-3-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-3
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              aria-expanded="false"
+              class="emotion-62 emotion-15"
+              data-testid="item-id-4"
+              id="item-id-4"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-4"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-4-itemwrapper"
+                id="item-id-4-itemwrapper"
+              >
+                <div
+                  aria-hidden="true"
+                  class="emotion-66 emotion-67"
+                  data-testid="item-id-4-expand"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="currentColor"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-checked="false"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-4-checkbox"
+                      id="item-id-4-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-4-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-4-label"
+                        id="item-id-4-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-4
+                      </span>
+                    </label>
+                    <div
+                      aria-live="polite"
+                    >
+                      <div
+                        class="emotion-80 emotion-81"
+                      >
+                        No subitems are checked for item-title-4 checkbox
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-5"
+              id="item-id-5"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-5"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-5-itemwrapper"
+                id="item-id-5-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-5"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-5-checkbox"
+                      id="item-id-5-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-5-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-5-label"
+                        id="item-id-5-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-5
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <span
+            class="emotion-98 emotion-9"
+            size="16"
+          />
+          <button
+            class="emotion-100 emotion-101"
+            color="primary"
+            data-testid="showAllBtn"
+            shape="fill"
+            type="button"
+          >
+            <span
+              class="emotion-102 emotion-103"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 010-1.41c.39-.38 1.03-.39 1.42 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <span
+                class="emotion-104 emotion-105"
+              >
+                Show All
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TreeView tree with hidden items renders tree with some items preselected, clicking show all displays the rest of the tree and preselected items remain selected 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #3942B0;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-58 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-58:before,
+.emotion-58:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-58:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-58 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-58:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-58:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+.emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #3942B0;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-58 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-58:before,
+.emotion-58:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-58:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-58 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-58:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-58:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    data-testid="accordion"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <button
+        aria-controls="0_panel"
+        aria-expanded="true"
+        class="emotion-4 emotion-5"
+        id="0_btn"
+      >
+        <span
+          class="emotion-6 emotion-7"
+        >
+          Chapter/Subchapter
+        </span>
+        <span
+          class="emotion-8 emotion-9"
+          size="12"
+        />
+        <div
+          style="height: 24px; transform: none;"
+        >
+          <svg
+            class="icon"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.88 9.29L12 13.17 8.12 9.29a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        style="overflow: visible; height: 0px; opacity: 0;"
+      >
+        <div
+          aria-hidden="false"
+          class="emotion-10 emotion-11"
+          id="0_panel"
+        >
+          <ul
+            aria-multiselectable="true"
+            class="emotion-12 emotion-13"
+            role="tree"
+          >
+            <li
+              aria-checked="false"
+              class="emotion-14 emotion-15"
+              data-testid="item-id-1"
+              id="item-id-1"
+              role="treeitem"
+              title="item-title-1"
+            >
+              <div
+                class="emotion-16 emotion-17"
+                data-testid="item-id-1-itemwrapper"
+                id="item-id-1-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-1"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-1-checkbox"
+                      disabled=""
+                      id="item-id-1-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-1-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-26 emotion-27"
+                        color="#3942B0"
+                        disabled=""
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-28 emotion-29"
+                        data-testid="item-id-1-label"
+                        id="item-id-1-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-1
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="true"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-2"
+              id="item-id-2"
+              role="treeitem"
+              tabindex="0"
+              title="item-title-2"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-2-itemwrapper"
+                id="item-id-2-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-2"
+                      checked=""
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-2-checkbox"
+                      id="item-id-2-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-2-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.29 13.29c-.39.39-1.02.39-1.41 0L5.71 12.7a.9959.9959 0 010-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.58 7.59z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-2-label"
+                        id="item-id-2-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-2
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-3"
+              id="item-id-3"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-3"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-3-itemwrapper"
+                id="item-id-3-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-3"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-3-checkbox"
+                      id="item-id-3-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-3-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-3-label"
+                        id="item-id-3-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-3
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              aria-expanded="false"
+              class="emotion-62 emotion-15"
+              data-testid="item-id-4"
+              id="item-id-4"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-4"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-4-itemwrapper"
+                id="item-id-4-itemwrapper"
+              >
+                <div
+                  aria-hidden="true"
+                  class="emotion-66 emotion-67"
+                  data-testid="item-id-4-expand"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="currentColor"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-checked="false"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-4-checkbox"
+                      id="item-id-4-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-4-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-4-label"
+                        id="item-id-4-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-4
+                      </span>
+                    </label>
+                    <div
+                      aria-live="polite"
+                    >
+                      <div
+                        class="emotion-80 emotion-81"
+                      >
+                        No subitems are checked for item-title-4 checkbox
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-5"
+              id="item-id-5"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-5"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-5-itemwrapper"
+                id="item-id-5-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-5"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-5-checkbox"
+                      id="item-id-5-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-5-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-5-label"
+                        id="item-id-5-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-5
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <span
+            class="emotion-98 emotion-9"
+            size="16"
+          />
+          <button
+            class="emotion-100 emotion-101"
+            color="primary"
+            data-testid="showAllBtn"
+            shape="fill"
+            type="button"
+          >
+            <span
+              class="emotion-102 emotion-103"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 010-1.41c.39-.38 1.03-.39 1.42 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <span
+                class="emotion-104 emotion-105"
+              >
+                Show All
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TreeView tree with hidden items renders tree with some items preselected, deselecting preselected items, clicking show all displays the rest of the tree and preselected items remain deselected 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #3942B0;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-58 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-58:before,
+.emotion-58:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-58:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-58 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-58:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-58:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+.emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #3942B0;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-58 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-58:before,
+.emotion-58:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-58:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-58 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-58:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-58:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    data-testid="accordion"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <button
+        aria-controls="0_panel"
+        aria-expanded="true"
+        class="emotion-4 emotion-5"
+        id="0_btn"
+      >
+        <span
+          class="emotion-6 emotion-7"
+        >
+          Chapter/Subchapter
+        </span>
+        <span
+          class="emotion-8 emotion-9"
+          size="12"
+        />
+        <div
+          style="height: 24px; transform: none;"
+        >
+          <svg
+            class="icon"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.88 9.29L12 13.17 8.12 9.29a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        style="overflow: visible; height: 0px; opacity: 0;"
+      >
+        <div
+          aria-hidden="false"
+          class="emotion-10 emotion-11"
+          id="0_panel"
+        >
+          <ul
+            aria-multiselectable="true"
+            class="emotion-12 emotion-13"
+            role="tree"
+          >
+            <li
+              aria-checked="false"
+              class="emotion-14 emotion-15"
+              data-testid="item-id-1"
+              id="item-id-1"
+              role="treeitem"
+              title="item-title-1"
+            >
+              <div
+                class="emotion-16 emotion-17"
+                data-testid="item-id-1-itemwrapper"
+                id="item-id-1-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-1"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-1-checkbox"
+                      disabled=""
+                      id="item-id-1-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-1-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-26 emotion-27"
+                        color="#3942B0"
+                        disabled=""
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-28 emotion-29"
+                        data-testid="item-id-1-label"
+                        id="item-id-1-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-1
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="true"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-2"
+              id="item-id-2"
+              role="treeitem"
+              tabindex="0"
+              title="item-title-2"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-2-itemwrapper"
+                id="item-id-2-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-2"
+                      checked=""
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-2-checkbox"
+                      id="item-id-2-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-2-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.29 13.29c-.39.39-1.02.39-1.41 0L5.71 12.7a.9959.9959 0 010-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.58 7.59z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-2-label"
+                        id="item-id-2-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-2
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-3"
+              id="item-id-3"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-3"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-3-itemwrapper"
+                id="item-id-3-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-3"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-3-checkbox"
+                      id="item-id-3-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-3-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-3-label"
+                        id="item-id-3-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-3
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              aria-expanded="false"
+              class="emotion-62 emotion-15"
+              data-testid="item-id-4"
+              id="item-id-4"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-4"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-4-itemwrapper"
+                id="item-id-4-itemwrapper"
+              >
+                <div
+                  aria-hidden="true"
+                  class="emotion-66 emotion-67"
+                  data-testid="item-id-4-expand"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="currentColor"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-checked="false"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-4-checkbox"
+                      id="item-id-4-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-4-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-4-label"
+                        id="item-id-4-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-4
+                      </span>
+                    </label>
+                    <div
+                      aria-live="polite"
+                    >
+                      <div
+                        class="emotion-80 emotion-81"
+                      >
+                        No subitems are checked for item-title-4 checkbox
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-5"
+              id="item-id-5"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-5"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-5-itemwrapper"
+                id="item-id-5-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-5"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-5-checkbox"
+                      id="item-id-5-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-5-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-58 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-5-label"
+                        id="item-id-5-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-5
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <span
+            class="emotion-98 emotion-9"
+            size="16"
+          />
+          <button
+            class="emotion-100 emotion-101"
+            color="primary"
+            data-testid="showAllBtn"
+            shape="fill"
+            type="button"
+          >
+            <span
+              class="emotion-102 emotion-103"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 010-1.41c.39-.38 1.03-.39 1.42 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <span
+                class="emotion-104 emotion-105"
+              >
+                Show All
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TreeView tree with hidden items renders tree with some items, and clicking show all displays the rest of the tree 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+.emotion-0 {
+  background: transparent;
+  border-bottom: 1px solid #D4D4D4;
+  color: #707070;
+  font-family: "Work Sans",Helvetica,sans-serif;
+}
+
+.emotion-2 h1,
+.emotion-2 h2,
+.emotion-2 h3,
+.emotion-2 h4,
+.emotion-2 h5,
+.emotion-2 h6 {
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.emotion-4 {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #D4D4D4;
+  color: #454545;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  font-weight: 500;
+  padding: 12px 16px;
+  text-align: left;
+  width: 100%;
+}
+
+.emotion-4:focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 0;
+}
+
+.emotion-4.emotion-4[disabled] {
+  color: rgba(112,112,112,0.6);
+  cursor: not-allowed;
+}
+
+.emotion-4.emotion-4[disabled] svg {
+  color: rgba(112,112,112,0.6);
+}
+
+.emotion-4 svg {
+  color: #707070;
+}
+
+.emotion-6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-8 {
+  display: block;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  width: 12px;
+}
+
+.emotion-10 {
+  background: transparent;
+  color: #454545;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  padding: 8px 16px 12px;
+}
+
+.emotion-12 {
+  padding: 0;
+  margin: 0;
+  color: #707070;
+}
+
+.emotion-12 ul {
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 ul li {
+  margin: 0;
+}
+
+.emotion-14 {
+  color: #454545;
+  list-style-type: none;
+  cursor: not-allowed;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-14:focus {
+  outline: none;
+}
+
+.emotion-14:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-14>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: not-allowed;
+}
+
+.emotion-18 {
+  margin-right: 8px;
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-20 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.emotion-22 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-24 {
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  line-height: 24px;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.emotion-26 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #D4D4D4;
+  cursor: not-allowed;
+  margin: 0 8px 0 0;
+}
+
+.emotion-26:before,
+.emotion-26:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-26:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-26 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-26:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-26:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: rgba(112,112,112,0.4);
+  width: 100%;
+}
+
+.emotion-30 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+}
+
+.emotion-30:focus {
+  outline: none;
+}
+
+.emotion-30:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-30>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 40px;
+  padding-inline-start: 40px;
+  -webkit-margin-start: -40px;
+  margin-inline-start: -40px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-30>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: default;
+}
+
+.emotion-42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  width: 24px;
+  border: 2px solid;
+  border-color: transparent;
+  color: #454545;
+  cursor: pointer;
+  margin: 0 8px 0 0;
+}
+
+.emotion-42:before,
+.emotion-42:after {
+  content: '';
+  position: absolute;
+}
+
+.emotion-42:after {
+  border-radius: 50%;
+  height: 40px;
+  left: -8px;
+  opacity: 0;
+  padding: 50%;
+  top: -8px;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: opacity 1s,-webkit-transform 0.5s;
+  transition: opacity 1s,transform 0.5s;
+  width: 40px;
+}
+
+.emotion-42 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.emotion-42:after {
+  background: #3942B0;
+  top: -10px;
+  left: -10px;
+}
+
+.emotion-23:not(:disabled):active+label .emotion-42:after {
+  opacity: 0.4;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  color: #454545;
+  width: 100%;
+}
+
+.emotion-62 {
+  color: #454545;
+  list-style-type: none;
+  cursor: default;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.emotion-62:focus {
+  outline: none;
+}
+
+.emotion-62:focus>*:first-child {
+  outline-offset: -2px;
+  outline: 2px solid #0074B7;
+}
+
+.emotion-62>div:first-of-type {
+  position: relative;
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  padding-block-end: 4px;
+  padding-block-start: 4px;
+  padding-right: 4px;
+}
+
+.emotion-62>div:first-of-type:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.emotion-66 {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #454545;
+  border-radius: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.emotion-80 {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  top: auto;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.emotion-98 {
+  display: block;
+  height: 16px;
+  min-height: 16px;
+  min-width: 1px;
+  width: 1px;
+}
+
+.emotion-100 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  color: #3942B0;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: "Work Sans",Helvetica,sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  height: 28px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  letter-spacing: .32px;
+  line-height: 16px;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  -webkit-transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  transition: background 0.35s,border-color 0.35s,box-shadow 0.35s,color 0.35s;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
+
+.emotion-100:not(:disabled):focus {
+  outline: 2px solid #0074B7;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.emotion-100:not(:disabled):hover,
+.emotion-100:not(:disabled):focus {
+  background: #E8E9F8;
+  color: #3942B0;
+}
+
+.emotion-100:not(:disabled):active {
+  background: #BABDE9;
+  color: #292F7C;
+}
+
+.emotion-100:not(:disabled):active:after {
+  opacity: 0.4;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+  -moz-transform: translate(-50%, -50%) scale(0);
+  -ms-transform: translate(-50%, -50%) scale(0);
+  transform: translate(-50%, -50%) scale(0);
+  -webkit-transition: -webkit-transform 0s;
+  transition: transform 0s;
+}
+
+.emotion-100 svg {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-102 {
+  visibility: visible;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-104 {
+  padding-left: 4px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+    data-testid="accordion"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <button
+        aria-controls="0_panel"
+        aria-expanded="true"
+        class="emotion-4 emotion-5"
+        id="0_btn"
+      >
+        <span
+          class="emotion-6 emotion-7"
+        >
+          Chapter/Subchapter
+        </span>
+        <span
+          class="emotion-8 emotion-9"
+          size="12"
+        />
+        <div
+          style="height: 24px; transform: none;"
+        >
+          <svg
+            class="icon"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.88 9.29L12 13.17 8.12 9.29a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        style="overflow: visible; height: 0px; opacity: 0;"
+      >
+        <div
+          aria-hidden="false"
+          class="emotion-10 emotion-11"
+          id="0_panel"
+        >
+          <ul
+            aria-multiselectable="true"
+            class="emotion-12 emotion-13"
+            role="tree"
+          >
+            <li
+              aria-checked="false"
+              class="emotion-14 emotion-15"
+              data-testid="item-id-1"
+              id="item-id-1"
+              role="treeitem"
+              title="item-title-1"
+            >
+              <div
+                class="emotion-16 emotion-17"
+                data-testid="item-id-1-itemwrapper"
+                id="item-id-1-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-1"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-1-checkbox"
+                      disabled=""
+                      id="item-id-1-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-1-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-26 emotion-27"
+                        color="#3942B0"
+                        disabled=""
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-28 emotion-29"
+                        data-testid="item-id-1-label"
+                        id="item-id-1-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-1
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-2"
+              id="item-id-2"
+              role="treeitem"
+              tabindex="0"
+              title="item-title-2"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-2-itemwrapper"
+                id="item-id-2-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-2"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-2-checkbox"
+                      id="item-id-2-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-2-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-2-label"
+                        id="item-id-2-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-2
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-3"
+              id="item-id-3"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-3"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-3-itemwrapper"
+                id="item-id-3-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-3"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-3-checkbox"
+                      id="item-id-3-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-3-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-3-label"
+                        id="item-id-3-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-3
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              aria-expanded="false"
+              class="emotion-62 emotion-15"
+              data-testid="item-id-4"
+              id="item-id-4"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-4"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-4-itemwrapper"
+                id="item-id-4-itemwrapper"
+              >
+                <div
+                  aria-hidden="true"
+                  class="emotion-66 emotion-67"
+                  data-testid="item-id-4-expand"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="currentColor"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-checked="false"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-4-checkbox"
+                      id="item-id-4-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-4-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-4-label"
+                        id="item-id-4-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-4
+                      </span>
+                    </label>
+                    <div
+                      aria-live="polite"
+                    >
+                      <div
+                        class="emotion-80 emotion-81"
+                      >
+                        No subitems are checked for item-title-4 checkbox
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="emotion-30 emotion-15"
+              data-testid="item-id-5"
+              id="item-id-5"
+              role="treeitem"
+              tabindex="-1"
+              title="item-title-5"
+            >
+              <div
+                class="emotion-32 emotion-17"
+                data-testid="item-id-5-itemwrapper"
+                id="item-id-5-itemwrapper"
+              >
+                <div
+                  class="emotion-18 emotion-19"
+                >
+                  <div
+                    class="emotion-20 emotion-21"
+                  >
+                    <input
+                      aria-label="item-title-5"
+                      class="emotion-22 emotion-23"
+                      data-testid="item-id-5-checkbox"
+                      id="item-id-5-checkbox"
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                    <label
+                      class="emotion-24 emotion-25"
+                      for="item-id-5-checkbox"
+                      style="padding: 0px;"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="emotion-42 emotion-27"
+                        color="#3942B0"
+                        style="margin-right: 8px;"
+                      >
+                        <svg
+                          class="icon"
+                          fill="currentColor"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="emotion-44 emotion-29"
+                        data-testid="item-id-5-label"
+                        id="item-id-5-label"
+                        style="overflow: hidden; text-overflow: ellipsis; width: 230px; display: inline-block;"
+                      >
+                        item-title-5
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <span
+            class="emotion-98 emotion-9"
+            size="16"
+          />
+          <button
+            class="emotion-100 emotion-101"
+            color="primary"
+            data-testid="showAllBtn"
+            shape="fill"
+            type="button"
+          >
+            <span
+              class="emotion-102 emotion-103"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 010-1.41c.39-.38 1.03-.39 1.42 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <span
+                class="emotion-104 emotion-105"
+              >
+                Show All
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-magma-dom/src/components/TreeView/index.ts b/packages/react-magma-dom/src/components/TreeView/index.ts
index 9292309bb..15ae6bbae 100644
--- a/packages/react-magma-dom/src/components/TreeView/index.ts
+++ b/packages/react-magma-dom/src/components/TreeView/index.ts
@@ -3,4 +3,5 @@ export * from './TreeItem';
 export * from './useTreeItem';
 export * from './useTreeView';
 export * from './utils';
-export * from './types';
\ No newline at end of file
+export * from './types';
+export { TreeItemSelectedInterface, TreeViewApi } from './useTreeView';
diff --git a/packages/react-magma-dom/src/components/TreeView/useTreeView.ts b/packages/react-magma-dom/src/components/TreeView/useTreeView.ts
index 11b221ea8..28f9c8ae9 100644
--- a/packages/react-magma-dom/src/components/TreeView/useTreeView.ts
+++ b/packages/react-magma-dom/src/components/TreeView/useTreeView.ts
@@ -26,6 +26,8 @@ export interface TreeViewApi {
   }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void;
   selectAll(): void;
   clearAll(): void;
+  showMore(): void;
+  showLess(): void;
 }
 
 export interface UseTreeViewProps {
@@ -99,6 +101,8 @@ export interface UseTreeViewProps {
    * selectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,
    * selectAll(): void - action that allows to select all items,
    * clearAll(): void - action that allows to unselect all items.
+   * showMore(): void - action that gets called when a tree has hidden items and they get expanded.
+   * showLess(): void - action that gets called when a tree has hidden items and they get collapsed.
    */
   apiRef?: React.MutableRefObject<TreeViewApi | undefined>;
   /**
@@ -148,6 +152,8 @@ export function useTreeView(props: UseTreeViewProps) {
   });
 
   const selectedItems = React.useMemo(() => {
+    console.log(items);
+    
     return items.filter(
       item => item.checkedStatus === IndeterminateCheckboxStatus.checked
     );
@@ -189,9 +195,12 @@ export function useTreeView(props: UseTreeViewProps) {
 
   const prevSelectedItemsRef = React.useRef(null);
   const prevPreselectedItemsRef = React.useRef(preselectedItems);
-
+  const prevChildrenRef = React.useRef(children);
   const initializationRef = React.useRef(true);
 
+  // Used for showAll button
+  const [itemsNeedUpdate, setItemsNeedUpdate] = React.useState(null);
+
   React.useEffect(() => {
     if (isEqualArrays(prevPreselectedItemsRef.current, preselectedItems)) {
       return;
@@ -326,15 +335,7 @@ export function useTreeView(props: UseTreeViewProps) {
           ) {
             return;
           }
-
-          setItems(prevItems => {
-            return toggleAllMulti({
-              items,
-              checkedStatus: IndeterminateCheckboxStatus.checked,
-              checkChildren,
-              checkParents,
-            });
-          });
+          this.showMore(true);
         },
 
         clearAll() {
@@ -342,7 +343,7 @@ export function useTreeView(props: UseTreeViewProps) {
             return;
           }
 
-          setItems(prevItems => {
+          setItems(() => {
             return toggleAllMulti({
               items,
               checkedStatus: IndeterminateCheckboxStatus.unchecked,
@@ -351,9 +352,55 @@ export function useTreeView(props: UseTreeViewProps) {
             });
           });
         },
+
+        showMore(fromSelectAll: boolean = false) {
+          if (fromSelectAll) {
+            setItems(() => {
+              return toggleAllMulti({
+                items,
+                checkedStatus: IndeterminateCheckboxStatus.checked,
+                checkChildren,
+                checkParents,
+              });
+            });
+          } else {
+            setItemsNeedUpdate(true);
+          }
+        },
+
+        showLess() {
+          setItems(
+            getInitialItems({
+              children,
+              preselectedItems: selectedItems,
+              checkParents,
+              checkChildren,
+              selectable,
+              isDisabled,
+            })
+          );
+        }
       };
     }
-  }, [selectItem, isDisabled]);
+  }, [selectItem, isDisabled, children]);
+
+  React.useEffect(() => {
+    if (itemsNeedUpdate) {
+      setItems(
+        getInitialItems({
+          children,
+          preselectedItems: selectedItems,
+          checkParents,
+          checkChildren,
+          selectable,
+          isDisabled,
+        })
+      );
+      prevChildrenRef.current = children;
+
+      setItemsNeedUpdate(false);
+    }
+  }, [itemsNeedUpdate, children]);
 
   const [initialExpandedItemsNeedUpdate, setInitialExpandedItemsNeedUpdate] =
     React.useState(false);
diff --git a/website/react-magma-docs/src/pages/api/tree-view.mdx b/website/react-magma-docs/src/pages/api/tree-view.mdx
index 65a35cbf5..d65a53690 100644
--- a/website/react-magma-docs/src/pages/api/tree-view.mdx
+++ b/website/react-magma-docs/src/pages/api/tree-view.mdx
@@ -880,6 +880,230 @@ export function Example() {
 }
 ```
 
+## Show All / Show Less Button
+
+Use the `apiRef.showMore()` prop when using a Show All button inside a tree, and `apiRef.showLess()` when using a Show Less button.
+
+```typescript
+import React from 'react';
+import {
+  ButtonSize,
+  ButtonVariant,
+  IconButton,
+  IndeterminateCheckboxStatus,
+  Spacer,
+  SpacerAxis,
+  TreeItem,
+  TreeItemSelectedInterface,
+  TreeView,
+  TreeViewApi,
+  TreeViewSelectable
+} from 'react-magma-dom';
+import { KeyboardArrowUpIcon, KeyboardArrowDownIcon } from 'react-magma-icons';
+
+export function Example() {
+  const treeContent = {
+    id: 'tree-id',
+    groupName: 'disciplines',
+    items: [
+      {
+        id: 'discipline-arts-design',
+        title: 'Arts and Design',
+        children: [
+          {
+            id: 'ad-1',
+            title: 'Animation',
+            children: [],
+          },
+          {
+            id: 'ad-2',
+            title: 'Photography',
+            children: [],
+          },
+          {
+            id: 'ad-3',
+            title: 'Web Design',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-business',
+        title: 'Business',
+        children: [
+          {
+            id: 'bsn-1',
+            title: 'Accounting',
+            children: [],
+          },
+          {
+            id: 'bsn-2',
+            title: 'Finance',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-cs',
+        title: 'Computer Science',
+        children: [
+          {
+            id: 'cs-1',
+            title: 'Software Engineering',
+            children: [],
+          },
+          {
+            id: 'cs-2',
+            title: 'Information Technology',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-geography',
+        title: 'Geography',
+        children: [],
+      },
+      {
+        id: 'discipline-his',
+        title: 'History',
+        children: [
+          {
+            id: 'his-1',
+            title: 'American History',
+            children: [],
+          },
+          {
+            id: 'his-2',
+            title: 'World History',
+            children: [],
+          },
+          {
+            id: 'his-3',
+            title: 'Western Civilization',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-math',
+        title: 'Mathematics',
+        children: [
+          {
+            id: 'math-1',
+            title: 'Precalculus',
+            children: [],
+          },
+          {
+            id: 'math-2',
+            title: 'Calculus',
+            children: [],
+          },
+          {
+            id: 'math-3',
+            title: 'Finite Math',
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'discipline-nutr',
+        title: 'Nutrition',
+        children: [
+          {
+            id: 'nutr-1',
+            title: 'Community Nutrition',
+            children: [],
+          },
+          {
+            id: 'nutr-2',
+            title: 'Sports Nutrition',
+            children: [],
+          },
+        ],
+      },
+    ],
+    preselectedItems: [
+      {
+        itemId: 'bsn-1',
+        checkedStatus: IndeterminateCheckboxStatus.checked,
+      },
+    ],
+  };
+
+  const apiRef = React.useRef<TreeViewApi>();
+  const [isShowAll, setIsShowAll] = React.useState(false);
+  const [selectedItems, setSelectedItems] =
+    React.useState<TreeItemSelectedInterface[]>();
+
+  function onSelection(items: TreeItemSelectedInterface[]) {
+    setSelectedItems(items);
+  }
+
+  const getTermsForRender = (terms: any) => {
+    if (isShowAll || terms.length <= 5) {
+      return terms;
+    } else {
+      return terms.slice(0, 5);
+    }
+  };
+
+  const toggleShowAll = () => {
+    if (isShowAll) {
+      apiRef && apiRef.current && apiRef.current.showLess();
+    } else {
+      apiRef && apiRef.current && apiRef.current.showMore();
+    }
+    setIsShowAll(prev => !prev);
+  };
+
+  const renderTreeItemsRecursively = (discipline: any[], depth: number) => {
+    return discipline.map(term => {
+      return (
+        <TreeItem
+          key={term.id}
+          itemId={term.id}
+          testId={term.id}
+          label={term.title}
+        >
+          {term.children.length ? (
+            renderTreeItemsRecursively(term.children, depth + 1)
+          ) : (
+            <></>
+          )}
+        </TreeItem>
+      );
+    });
+  };
+
+  return (
+    <>
+      <TreeView
+        key={treeContent.id}
+        preselectedItems={treeContent.preselectedItems}
+        selectable={TreeViewSelectable.multi}
+        onSelectedItemChange={onSelection}
+        apiRef={apiRef}
+      >
+        {renderTreeItemsRecursively(getTermsForRender(treeContent.items), 0)}
+      </TreeView>
+
+      <Spacer size={16} axis={SpacerAxis.vertical} />
+
+      <IconButton
+        onClick={toggleShowAll}
+        size={ButtonSize.small}
+        variant={ButtonVariant.link}
+        testId="showAllBtn"
+        icon={isShowAll ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+      >
+        {isShowAll ? 'Show Less' : 'Show All'}
+      </IconButton>
+    </>
+  );
+}
+```
+
 ## Inverse
 
 ```typescript