From 55375636445349ed8edfd034f10c72c262e626de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 19 Oct 2024 00:53:07 +0200
Subject: [PATCH] pl-fe: Exports cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-fe/src/components/account-search.tsx   |  2 +-
 .../components/autosuggest-account-input.tsx  |  2 +-
 .../src/components/autosuggest-input.tsx      |  2 +-
 packages/pl-fe/src/components/markup.tsx      |  2 +-
 .../src/components/relative-timestamp.tsx     |  2 +-
 .../pl-fe/src/components/status-content.tsx   |  2 +-
 .../ui/{accordion => }/accordion.tsx          |  6 +-
 .../ui/{avatar => }/avatar.test.tsx           |  0
 .../src/components/ui/{avatar => }/avatar.tsx |  2 +-
 .../src/components/ui/{banner => }/banner.tsx |  0
 .../{button.test.tsx => index.test.tsx}       |  2 +-
 .../ui/button/{button.tsx => index.tsx}       |  2 +-
 .../components/ui/{card => }/card.test.tsx    |  0
 .../src/components/ui/{card => }/card.tsx     |  6 +-
 .../components/ui/{carousel => }/carousel.tsx |  4 +-
 .../components/ui/{checkbox => }/checkbox.tsx |  0
 .../ui/{column => }/column.test.tsx           |  0
 .../src/components/ui/{column => }/column.tsx |  2 +-
 .../components/ui/{combobox => }/combobox.css |  0
 .../components/ui/{combobox => }/combobox.tsx |  0
 .../components/ui/{counter => }/counter.tsx   |  0
 .../ui/datepicker/datepicker.test.tsx         | 99 -------------------
 .../components/ui/datepicker/datepicker.tsx   | 92 -----------------
 .../ui/{divider => }/divider.test.tsx         |  0
 .../components/ui/{divider => }/divider.tsx   |  4 +-
 .../components/ui/{emoji => }/emoji.test.tsx  |  0
 .../src/components/ui/{emoji => }/emoji.tsx   |  0
 .../ui/{file-input => }/file-input.tsx        |  0
 .../{form-actions => }/form-actions.test.tsx  |  0
 .../ui/{form-actions => }/form-actions.tsx    |  2 +-
 .../ui/{form-group => }/form-group.test.tsx   |  0
 .../ui/{form-group => }/form-group.tsx        |  6 +-
 .../components/ui/{form => }/form.test.tsx    |  0
 .../src/components/ui/{form => }/form.tsx     |  0
 .../src/components/ui/{hstack => }/hstack.tsx |  0
 .../ui/{icon-button => }/icon-button.tsx      |  4 +-
 .../src/components/ui/{icon => }/icon.tsx     |  3 +-
 packages/pl-fe/src/components/ui/index.ts     | 79 ++++++++-------
 .../inline-multiselect.tsx                    |  0
 .../src/components/ui/{input => }/input.tsx   |  6 +-
 .../src/components/ui/{layout => }/layout.tsx |  0
 .../components/ui/{modal => }/modal.test.tsx  |  0
 .../src/components/ui/{modal => }/modal.tsx   |  8 +-
 .../components/ui/{popover => }/popover.tsx   |  2 +-
 .../src/components/ui/{portal => }/portal.tsx |  0
 .../ui/{progress-bar => }/progress-bar.tsx    |  0
 .../ui/{radio-button => }/radio-button.tsx    |  2 +-
 .../src/components/ui/{select => }/select.tsx |  0
 .../src/components/ui/{slider => }/slider.tsx |  0
 .../components/ui/{spinner => }/spinner.css   |  0
 .../components/ui/{spinner => }/spinner.tsx   |  4 +-
 .../src/components/ui/{stack => }/stack.tsx   |  0
 .../ui/{streamfield => }/streamfield.tsx      | 10 +-
 .../ui/{icon => }/svg-icon.test.tsx           |  0
 .../src/components/ui/{icon => }/svg-icon.tsx |  0
 .../src/components/ui/{tabs => }/tabs.css     |  0
 .../src/components/ui/{tabs => }/tabs.tsx     |  2 +-
 .../ui/{tag-input => }/tag-input.tsx          |  3 +-
 .../src/components/ui/{tag-input => }/tag.tsx |  4 +-
 .../src/components/ui/{text => }/text.tsx     |  0
 .../components/ui/{textarea => }/textarea.tsx |  4 +-
 .../src/components/ui/{toast => }/toast.tsx   |  8 +-
 .../src/components/ui/{toggle => }/toggle.tsx |  0
 .../components/ui/{tooltip => }/tooltip.tsx   |  0
 .../src/components/ui/{widget => }/widget.tsx |  8 +-
 .../features/developers/developers-menu.tsx   |  2 +-
 .../pl-fe/src/features/edit-profile/index.tsx |  2 +-
 .../src/features/filters/edit-filter.tsx      |  2 +-
 .../features/interaction-policies/index.tsx   |  2 +-
 .../notifications/components/filter-bar.tsx   |  2 +-
 .../components/crypto-address-input.tsx       |  2 +-
 .../components/footer-link-input.tsx          |  2 +-
 .../components/promo-panel-input.tsx          |  2 +-
 .../src/features/search/components/search.tsx |  2 +-
 .../ui/components/modals/reactions-modal.tsx  |  2 +-
 75 files changed, 106 insertions(+), 300 deletions(-)
 rename packages/pl-fe/src/components/ui/{accordion => }/accordion.tsx (96%)
 rename packages/pl-fe/src/components/ui/{avatar => }/avatar.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{avatar => }/avatar.tsx (97%)
 rename packages/pl-fe/src/components/ui/{banner => }/banner.tsx (100%)
 rename packages/pl-fe/src/components/ui/button/{button.test.tsx => index.test.tsx} (98%)
 rename packages/pl-fe/src/components/ui/button/{button.tsx => index.tsx} (98%)
 rename packages/pl-fe/src/components/ui/{card => }/card.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{card => }/card.tsx (96%)
 rename packages/pl-fe/src/components/ui/{carousel => }/carousel.tsx (97%)
 rename packages/pl-fe/src/components/ui/{checkbox => }/checkbox.tsx (100%)
 rename packages/pl-fe/src/components/ui/{column => }/column.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{column => }/column.tsx (99%)
 rename packages/pl-fe/src/components/ui/{combobox => }/combobox.css (100%)
 rename packages/pl-fe/src/components/ui/{combobox => }/combobox.tsx (100%)
 rename packages/pl-fe/src/components/ui/{counter => }/counter.tsx (100%)
 delete mode 100644 packages/pl-fe/src/components/ui/datepicker/datepicker.test.tsx
 delete mode 100644 packages/pl-fe/src/components/ui/datepicker/datepicker.tsx
 rename packages/pl-fe/src/components/ui/{divider => }/divider.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{divider => }/divider.tsx (89%)
 rename packages/pl-fe/src/components/ui/{emoji => }/emoji.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{emoji => }/emoji.tsx (100%)
 rename packages/pl-fe/src/components/ui/{file-input => }/file-input.tsx (100%)
 rename packages/pl-fe/src/components/ui/{form-actions => }/form-actions.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{form-actions => }/form-actions.tsx (88%)
 rename packages/pl-fe/src/components/ui/{form-group => }/form-group.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{form-group => }/form-group.tsx (96%)
 rename packages/pl-fe/src/components/ui/{form => }/form.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{form => }/form.tsx (100%)
 rename packages/pl-fe/src/components/ui/{hstack => }/hstack.tsx (100%)
 rename packages/pl-fe/src/components/ui/{icon-button => }/icon-button.tsx (96%)
 rename packages/pl-fe/src/components/ui/{icon => }/icon.tsx (96%)
 rename packages/pl-fe/src/components/ui/{inline-multiselect => }/inline-multiselect.tsx (100%)
 rename packages/pl-fe/src/components/ui/{input => }/input.tsx (97%)
 rename packages/pl-fe/src/components/ui/{layout => }/layout.tsx (100%)
 rename packages/pl-fe/src/components/ui/{modal => }/modal.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{modal => }/modal.tsx (96%)
 rename packages/pl-fe/src/components/ui/{popover => }/popover.tsx (98%)
 rename packages/pl-fe/src/components/ui/{portal => }/portal.tsx (100%)
 rename packages/pl-fe/src/components/ui/{progress-bar => }/progress-bar.tsx (100%)
 rename packages/pl-fe/src/components/ui/{radio-button => }/radio-button.tsx (95%)
 rename packages/pl-fe/src/components/ui/{select => }/select.tsx (100%)
 rename packages/pl-fe/src/components/ui/{slider => }/slider.tsx (100%)
 rename packages/pl-fe/src/components/ui/{spinner => }/spinner.css (100%)
 rename packages/pl-fe/src/components/ui/{spinner => }/spinner.tsx (92%)
 rename packages/pl-fe/src/components/ui/{stack => }/stack.tsx (100%)
 rename packages/pl-fe/src/components/ui/{streamfield => }/streamfield.tsx (94%)
 rename packages/pl-fe/src/components/ui/{icon => }/svg-icon.test.tsx (100%)
 rename packages/pl-fe/src/components/ui/{icon => }/svg-icon.tsx (100%)
 rename packages/pl-fe/src/components/ui/{tabs => }/tabs.css (100%)
 rename packages/pl-fe/src/components/ui/{tabs => }/tabs.tsx (99%)
 rename packages/pl-fe/src/components/ui/{tag-input => }/tag-input.tsx (98%)
 rename packages/pl-fe/src/components/ui/{tag-input => }/tag.tsx (87%)
 rename packages/pl-fe/src/components/ui/{text => }/text.tsx (100%)
 rename packages/pl-fe/src/components/ui/{textarea => }/textarea.tsx (98%)
 rename packages/pl-fe/src/components/ui/{toast => }/toast.tsx (96%)
 rename packages/pl-fe/src/components/ui/{toggle => }/toggle.tsx (100%)
 rename packages/pl-fe/src/components/ui/{tooltip => }/tooltip.tsx (100%)
 rename packages/pl-fe/src/components/ui/{widget => }/widget.tsx (87%)

diff --git a/packages/pl-fe/src/components/account-search.tsx b/packages/pl-fe/src/components/account-search.tsx
index 1571dcc1d..8e0509045 100644
--- a/packages/pl-fe/src/components/account-search.tsx
+++ b/packages/pl-fe/src/components/account-search.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import AutosuggestAccountInput from 'pl-fe/components/autosuggest-account-input';
 
-import SvgIcon from './ui/icon/svg-icon';
+import SvgIcon from './ui/svg-icon';
 
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
diff --git a/packages/pl-fe/src/components/autosuggest-account-input.tsx b/packages/pl-fe/src/components/autosuggest-account-input.tsx
index 90ef70f9e..a7e867a15 100644
--- a/packages/pl-fe/src/components/autosuggest-account-input.tsx
+++ b/packages/pl-fe/src/components/autosuggest-account-input.tsx
@@ -7,7 +7,7 @@ import AutosuggestInput, { AutoSuggestion } from 'pl-fe/components/autosuggest-i
 import { useAppDispatch } from 'pl-fe/hooks';
 
 import type { Menu } from 'pl-fe/components/dropdown-menu';
-import type { InputThemes } from 'pl-fe/components/ui/input/input';
+import type { InputThemes } from 'pl-fe/components/ui/input';
 
 const noOp = () => { };
 
diff --git a/packages/pl-fe/src/components/autosuggest-input.tsx b/packages/pl-fe/src/components/autosuggest-input.tsx
index 340c70b54..4ad75ab1b 100644
--- a/packages/pl-fe/src/components/autosuggest-input.tsx
+++ b/packages/pl-fe/src/components/autosuggest-input.tsx
@@ -9,7 +9,7 @@ import AutosuggestAccount from 'pl-fe/features/compose/components/autosuggest-ac
 import { textAtCursorMatchesToken } from 'pl-fe/utils/suggestions';
 
 import type { Menu, MenuItem } from 'pl-fe/components/dropdown-menu';
-import type { InputThemes } from 'pl-fe/components/ui/input/input';
+import type { InputThemes } from 'pl-fe/components/ui/input';
 import type { Emoji } from 'pl-fe/features/emoji';
 
 type AutoSuggestion = string | Emoji;
diff --git a/packages/pl-fe/src/components/markup.tsx b/packages/pl-fe/src/components/markup.tsx
index 898bf68d9..058bf8070 100644
--- a/packages/pl-fe/src/components/markup.tsx
+++ b/packages/pl-fe/src/components/markup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text';
 
 interface IMarkup extends IText {
 }
diff --git a/packages/pl-fe/src/components/relative-timestamp.tsx b/packages/pl-fe/src/components/relative-timestamp.tsx
index af74b9232..cd6c890c4 100644
--- a/packages/pl-fe/src/components/relative-timestamp.tsx
+++ b/packages/pl-fe/src/components/relative-timestamp.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectIntl, defineMessages, IntlShape, FormatDateOptions } from 'react-intl';
 
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text';
 
 const messages = defineMessages({
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index 02f8f6103..2ac55a89c 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -14,7 +14,7 @@ import Markup from './markup';
 import { ParsedContent } from './parsed-content';
 import Poll from './polls/poll';
 
-import type { Sizes } from 'pl-fe/components/ui/text/text';
+import type { Sizes } from 'pl-fe/components/ui/text';
 import type { MinifiedStatus } from 'pl-fe/reducers/statuses';
 
 const BIG_EMOJI_LIMIT = 10;
diff --git a/packages/pl-fe/src/components/ui/accordion/accordion.tsx b/packages/pl-fe/src/components/ui/accordion.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/accordion/accordion.tsx
rename to packages/pl-fe/src/components/ui/accordion.tsx
index 3cb98101f..069b96cbf 100644
--- a/packages/pl-fe/src/components/ui/accordion/accordion.tsx
+++ b/packages/pl-fe/src/components/ui/accordion.tsx
@@ -4,9 +4,9 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
-import Text from '../text/text';
+import HStack from './hstack';
+import Icon from './icon';
+import Text from './text';
 
 import type { Menu } from 'pl-fe/components/dropdown-menu';
 
diff --git a/packages/pl-fe/src/components/ui/avatar/avatar.test.tsx b/packages/pl-fe/src/components/ui/avatar.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/avatar/avatar.test.tsx
rename to packages/pl-fe/src/components/ui/avatar.test.tsx
diff --git a/packages/pl-fe/src/components/ui/avatar/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx
similarity index 97%
rename from packages/pl-fe/src/components/ui/avatar/avatar.tsx
rename to packages/pl-fe/src/components/ui/avatar.tsx
index 8f02060a8..c18f45bf6 100644
--- a/packages/pl-fe/src/components/ui/avatar/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import StillImage, { IStillImage } from 'pl-fe/components/still-image';
 
-import Icon from '../icon/icon';
+import Icon from './icon';
 
 const AVATAR_SIZE = 42;
 
diff --git a/packages/pl-fe/src/components/ui/banner/banner.tsx b/packages/pl-fe/src/components/ui/banner.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/banner/banner.tsx
rename to packages/pl-fe/src/components/ui/banner.tsx
diff --git a/packages/pl-fe/src/components/ui/button/button.test.tsx b/packages/pl-fe/src/components/ui/button/index.test.tsx
similarity index 98%
rename from packages/pl-fe/src/components/ui/button/button.test.tsx
rename to packages/pl-fe/src/components/ui/button/index.test.tsx
index f2335cb68..6e74963ce 100644
--- a/packages/pl-fe/src/components/ui/button/button.test.tsx
+++ b/packages/pl-fe/src/components/ui/button/index.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { fireEvent, render, screen } from 'pl-fe/jest/test-helpers';
 
-import Button from './button';
+import Button from '.';
 
 describe('<Button />', () => {
   it('renders the given text', () => {
diff --git a/packages/pl-fe/src/components/ui/button/button.tsx b/packages/pl-fe/src/components/ui/button/index.tsx
similarity index 98%
rename from packages/pl-fe/src/components/ui/button/button.tsx
rename to packages/pl-fe/src/components/ui/button/index.tsx
index 8df66dce4..373b10754 100644
--- a/packages/pl-fe/src/components/ui/button/button.tsx
+++ b/packages/pl-fe/src/components/ui/button/index.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import Icon from '../icon/icon';
+import Icon from '../icon';
 
 import { useButtonStyles } from './useButtonStyles';
 
diff --git a/packages/pl-fe/src/components/ui/card/card.test.tsx b/packages/pl-fe/src/components/ui/card.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/card/card.test.tsx
rename to packages/pl-fe/src/components/ui/card.test.tsx
diff --git a/packages/pl-fe/src/components/ui/card/card.tsx b/packages/pl-fe/src/components/ui/card.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/card/card.tsx
rename to packages/pl-fe/src/components/ui/card.tsx
index 7bc67acd3..c10dae442 100644
--- a/packages/pl-fe/src/components/ui/card/card.tsx
+++ b/packages/pl-fe/src/components/ui/card.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import SvgIcon from 'pl-fe/components/ui/icon/svg-icon';
+import SvgIcon from 'pl-fe/components/ui/svg-icon';
 
-import HStack from '../hstack/hstack';
-import Text from '../text/text';
+import HStack from './hstack';
+import Text from './text';
 
 const sizes = {
   md: 'p-4 sm:rounded-xl',
diff --git a/packages/pl-fe/src/components/ui/carousel/carousel.tsx b/packages/pl-fe/src/components/ui/carousel.tsx
similarity index 97%
rename from packages/pl-fe/src/components/ui/carousel/carousel.tsx
rename to packages/pl-fe/src/components/ui/carousel.tsx
index 414ae24ac..5442b2a6d 100644
--- a/packages/pl-fe/src/components/ui/carousel/carousel.tsx
+++ b/packages/pl-fe/src/components/ui/carousel.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 
 import { useDimensions } from 'pl-fe/hooks';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
+import HStack from './hstack';
+import Icon from './icon';
 
 interface ICarousel {
   children: any;
diff --git a/packages/pl-fe/src/components/ui/checkbox/checkbox.tsx b/packages/pl-fe/src/components/ui/checkbox.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/checkbox/checkbox.tsx
rename to packages/pl-fe/src/components/ui/checkbox.tsx
diff --git a/packages/pl-fe/src/components/ui/column/column.test.tsx b/packages/pl-fe/src/components/ui/column.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/column/column.test.tsx
rename to packages/pl-fe/src/components/ui/column.test.tsx
diff --git a/packages/pl-fe/src/components/ui/column/column.tsx b/packages/pl-fe/src/components/ui/column.tsx
similarity index 99%
rename from packages/pl-fe/src/components/ui/column/column.tsx
rename to packages/pl-fe/src/components/ui/column.tsx
index 5c43e98c6..f98d5ba21 100644
--- a/packages/pl-fe/src/components/ui/column/column.tsx
+++ b/packages/pl-fe/src/components/ui/column.tsx
@@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom';
 import Helmet from 'pl-fe/components/helmet';
 import { usePlFeConfig } from 'pl-fe/hooks';
 
-import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card';
+import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from './card';
 
 type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;
 
diff --git a/packages/pl-fe/src/components/ui/combobox/combobox.css b/packages/pl-fe/src/components/ui/combobox.css
similarity index 100%
rename from packages/pl-fe/src/components/ui/combobox/combobox.css
rename to packages/pl-fe/src/components/ui/combobox.css
diff --git a/packages/pl-fe/src/components/ui/combobox/combobox.tsx b/packages/pl-fe/src/components/ui/combobox.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/combobox/combobox.tsx
rename to packages/pl-fe/src/components/ui/combobox.tsx
diff --git a/packages/pl-fe/src/components/ui/counter/counter.tsx b/packages/pl-fe/src/components/ui/counter.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/counter/counter.tsx
rename to packages/pl-fe/src/components/ui/counter.tsx
diff --git a/packages/pl-fe/src/components/ui/datepicker/datepicker.test.tsx b/packages/pl-fe/src/components/ui/datepicker/datepicker.test.tsx
deleted file mode 100644
index 27ee06f99..000000000
--- a/packages/pl-fe/src/components/ui/datepicker/datepicker.test.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-
-import { queryAllByRole, render, screen } from 'pl-fe/jest/test-helpers';
-
-import Datepicker from './datepicker';
-
-describe('<Datepicker />', () => {
-  it('defaults to the current date', () => {
-    const handler = vi.fn();
-    render(<Datepicker onChange={handler} />);
-    const today = new Date();
-
-    expect(screen.getByTestId('datepicker-month')).toHaveValue(String(today.getMonth()));
-    expect(screen.getByTestId('datepicker-day')).toHaveValue(String(today.getDate()));
-    expect(screen.getByTestId('datepicker-year')).toHaveValue(String(today.getFullYear()));
-  });
-
-  it('changes number of days based on selected month and year', async() => {
-    const handler = vi.fn();
-    render(<Datepicker onChange={handler} />);
-
-    await userEvent.selectOptions(
-      screen.getByTestId('datepicker-month'),
-      screen.getByRole('option', { name: 'February' }),
-    );
-
-    await userEvent.selectOptions(
-      screen.getByTestId('datepicker-year'),
-      screen.getByRole('option', { name: '2020' }),
-    );
-
-    let daySelect: HTMLElement;
-    daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
-    expect(queryAllByRole(daySelect, 'option')).toHaveLength(29);
-
-    await userEvent.selectOptions(
-      screen.getByTestId('datepicker-year'),
-      screen.getByRole('option', { name: '2021' }),
-    );
-
-    daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
-    expect(queryAllByRole(daySelect, 'option')).toHaveLength(28);
-  });
-
-  it('ranges from the current year to 120 years ago', () => {
-    const handler = vi.fn();
-    render(<Datepicker onChange={handler} />);
-    const today = new Date();
-
-    const yearSelect = document.querySelector('[data-testid="datepicker-year"]') as HTMLElement;
-    expect(queryAllByRole(yearSelect, 'option')).toHaveLength(121);
-    expect(queryAllByRole(yearSelect, 'option')[0]).toHaveValue(String(today.getFullYear()));
-    expect(queryAllByRole(yearSelect, 'option')[120]).toHaveValue(String(today.getFullYear() - 120));
-  });
-
-  it('calls the onChange function when the inputs change', async() => {
-    const handler = vi.fn();
-    render(<Datepicker onChange={handler} />);
-    const today = new Date();
-
-    /**
-     * A date with a different day, month, and year than today
-     * so this test will always pass!
-     */
-    const notToday = new Date(
-      today.getFullYear() - 1, // last year
-      (today.getMonth() + 2) % 11, // two months from now (mod 11 because it's 0-indexed)
-      (today.getDate() + 2) % 28, // 2 days from now (for timezone stuff)
-    );
-
-    const month = notToday.toLocaleString('en-us', { month: 'long' });
-    const year = String(notToday.getFullYear());
-    const day = String(notToday.getDate());
-
-    expect(handler.mock.calls.length).toEqual(1);
-
-    await userEvent.selectOptions(
-      screen.getByTestId('datepicker-month'),
-      screen.getByRole('option', { name: month }),
-    );
-
-    expect(handler.mock.calls.length).toEqual(2);
-
-    await userEvent.selectOptions(
-      screen.getByTestId('datepicker-year'),
-      screen.getByRole('option', { name: year }),
-    );
-
-    expect(handler.mock.calls.length).toEqual(3);
-
-    await userEvent.selectOptions(
-      screen.getByTestId('datepicker-day'),
-      screen.getByRole('option', { name: day }),
-    );
-
-    expect(handler.mock.calls.length).toEqual(4);
-  });
-});
diff --git a/packages/pl-fe/src/components/ui/datepicker/datepicker.tsx b/packages/pl-fe/src/components/ui/datepicker/datepicker.tsx
deleted file mode 100644
index 2b3e27e0a..000000000
--- a/packages/pl-fe/src/components/ui/datepicker/datepicker.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-
-import Select from '../select/select';
-import Stack from '../stack/stack';
-import Text from '../text/text';
-
-const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1, 0).getDate();
-const currentYear = new Date().getFullYear();
-
-interface IDatepicker {
-  onChange(date: Date): void;
-}
-
-/**
- * Datepicker that allows a user to select month, day, and year.
- */
-const Datepicker = ({ onChange }: IDatepicker) => {
-  const intl = useIntl();
-
-  const [month, setMonth] = useState<number>(new Date().getMonth());
-  const [day, setDay] = useState<number>(new Date().getDate());
-  const [year, setYear] = useState<number>(new Date().getFullYear());
-
-  const numberOfDays = useMemo(() => getDaysInMonth(month, year), [month, year]);
-
-  useEffect(() => {
-    onChange(new Date(year, month, day));
-  }, [month, day, year]);
-
-  return (
-    <div className='grid grid-cols-1 gap-2 sm:grid-cols-3'>
-      <div className='sm:col-span-1'>
-        <Stack>
-          <Text size='sm' weight='medium' theme='muted'>
-            <FormattedMessage id='datepicker.month' defaultMessage='Month' />
-          </Text>
-
-          <Select
-            value={month}
-            onChange={(event) => setMonth(Number(event.target.value))}
-            data-testid='datepicker-month'
-          >
-            {[...Array(12)].map((_, idx) => (
-              <option key={idx} value={idx}>
-                {intl.formatDate(new Date(year, idx, 1), { month: 'long' })}
-              </option>
-            ))}
-          </Select>
-        </Stack>
-      </div>
-
-      <div className='sm:col-span-1'>
-        <Stack>
-          <Text size='sm' weight='medium' theme='muted'>
-            <FormattedMessage id='datepicker.day' defaultMessage='Day' />
-          </Text>
-
-          <Select
-            value={day}
-            onChange={(event) => setDay(Number(event.target.value))}
-            data-testid='datepicker-day'
-          >
-            {[...Array(numberOfDays)].map((_, idx) => (
-              <option key={idx} value={idx + 1}>{idx + 1}</option>
-            ))}
-          </Select>
-        </Stack>
-      </div>
-
-      <div className='sm:col-span-1'>
-        <Stack>
-          <Text size='sm' weight='medium' theme='muted'>
-            <FormattedMessage id='datepicker.year' defaultMessage='Year' />
-          </Text>
-
-          <Select
-            value={year}
-            onChange={(event) => setYear(Number(event.target.value))}
-            data-testid='datepicker-year'
-          >
-            {[...Array(121)].map((_, idx) => (
-              <option key={idx} value={currentYear - idx}>{currentYear - idx}</option>
-            ))}
-          </Select>
-        </Stack>
-      </div>
-    </div>
-  );
-};
-
-export { Datepicker as default };
diff --git a/packages/pl-fe/src/components/ui/divider/divider.test.tsx b/packages/pl-fe/src/components/ui/divider.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/divider/divider.test.tsx
rename to packages/pl-fe/src/components/ui/divider.test.tsx
diff --git a/packages/pl-fe/src/components/ui/divider/divider.tsx b/packages/pl-fe/src/components/ui/divider.tsx
similarity index 89%
rename from packages/pl-fe/src/components/ui/divider/divider.tsx
rename to packages/pl-fe/src/components/ui/divider.tsx
index db50f4f65..03bf34fa1 100644
--- a/packages/pl-fe/src/components/ui/divider/divider.tsx
+++ b/packages/pl-fe/src/components/ui/divider.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Text from '../text/text';
+import Text from './text';
 
-import type { Sizes as TextSizes } from '../text/text';
+import type { Sizes as TextSizes } from './text';
 
 interface IDivider {
   text?: string;
diff --git a/packages/pl-fe/src/components/ui/emoji/emoji.test.tsx b/packages/pl-fe/src/components/ui/emoji.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/emoji/emoji.test.tsx
rename to packages/pl-fe/src/components/ui/emoji.test.tsx
diff --git a/packages/pl-fe/src/components/ui/emoji/emoji.tsx b/packages/pl-fe/src/components/ui/emoji.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/emoji/emoji.tsx
rename to packages/pl-fe/src/components/ui/emoji.tsx
diff --git a/packages/pl-fe/src/components/ui/file-input/file-input.tsx b/packages/pl-fe/src/components/ui/file-input.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/file-input/file-input.tsx
rename to packages/pl-fe/src/components/ui/file-input.tsx
diff --git a/packages/pl-fe/src/components/ui/form-actions/form-actions.test.tsx b/packages/pl-fe/src/components/ui/form-actions.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form-actions/form-actions.test.tsx
rename to packages/pl-fe/src/components/ui/form-actions.test.tsx
diff --git a/packages/pl-fe/src/components/ui/form-actions/form-actions.tsx b/packages/pl-fe/src/components/ui/form-actions.tsx
similarity index 88%
rename from packages/pl-fe/src/components/ui/form-actions/form-actions.tsx
rename to packages/pl-fe/src/components/ui/form-actions.tsx
index 17da7ba5f..e49cf30ab 100644
--- a/packages/pl-fe/src/components/ui/form-actions/form-actions.tsx
+++ b/packages/pl-fe/src/components/ui/form-actions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import HStack from '../hstack/hstack';
+import HStack from './hstack';
 
 interface IFormActions {
   children: React.ReactNode;
diff --git a/packages/pl-fe/src/components/ui/form-group/form-group.test.tsx b/packages/pl-fe/src/components/ui/form-group.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form-group/form-group.test.tsx
rename to packages/pl-fe/src/components/ui/form-group.test.tsx
diff --git a/packages/pl-fe/src/components/ui/form-group/form-group.tsx b/packages/pl-fe/src/components/ui/form-group.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/form-group/form-group.tsx
rename to packages/pl-fe/src/components/ui/form-group.tsx
index 100cfffe7..99f8679df 100644
--- a/packages/pl-fe/src/components/ui/form-group/form-group.tsx
+++ b/packages/pl-fe/src/components/ui/form-group.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 
-import Checkbox from '../checkbox/checkbox';
-import HStack from '../hstack/hstack';
-import Stack from '../stack/stack';
+import Checkbox from './checkbox';
+import HStack from './hstack';
+import Stack from './stack';
 
 interface IFormGroup {
   /** Input label message. */
diff --git a/packages/pl-fe/src/components/ui/form/form.test.tsx b/packages/pl-fe/src/components/ui/form.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form/form.test.tsx
rename to packages/pl-fe/src/components/ui/form.test.tsx
diff --git a/packages/pl-fe/src/components/ui/form/form.tsx b/packages/pl-fe/src/components/ui/form.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/form/form.tsx
rename to packages/pl-fe/src/components/ui/form.tsx
diff --git a/packages/pl-fe/src/components/ui/hstack/hstack.tsx b/packages/pl-fe/src/components/ui/hstack.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/hstack/hstack.tsx
rename to packages/pl-fe/src/components/ui/hstack.tsx
diff --git a/packages/pl-fe/src/components/ui/icon-button/icon-button.tsx b/packages/pl-fe/src/components/ui/icon-button.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/icon-button/icon-button.tsx
rename to packages/pl-fe/src/components/ui/icon-button.tsx
index cca72073c..a4b21924f 100644
--- a/packages/pl-fe/src/components/ui/icon-button/icon-button.tsx
+++ b/packages/pl-fe/src/components/ui/icon-button.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import SvgIcon from '../icon/svg-icon';
-import Text from '../text/text';
+import SvgIcon from './svg-icon';
+import Text from './text';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Class name for the <svg> icon. */
diff --git a/packages/pl-fe/src/components/ui/icon/icon.tsx b/packages/pl-fe/src/components/ui/icon.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/icon/icon.tsx
rename to packages/pl-fe/src/components/ui/icon.tsx
index 70038b6dc..0c9c5004e 100644
--- a/packages/pl-fe/src/components/ui/icon/icon.tsx
+++ b/packages/pl-fe/src/components/ui/icon.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import Counter from '../counter/counter';
-
+import Counter from './counter';
 import SvgIcon from './svg-icon';
 
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
diff --git a/packages/pl-fe/src/components/ui/index.ts b/packages/pl-fe/src/components/ui/index.ts
index 16eccf912..61bb106b7 100644
--- a/packages/pl-fe/src/components/ui/index.ts
+++ b/packages/pl-fe/src/components/ui/index.ts
@@ -1,11 +1,11 @@
-export { default as Accordion } from './accordion/accordion';
-export { default as Avatar } from './avatar/avatar';
-export { default as Banner } from './banner/banner';
-export { default as Button } from './button/button';
-export { default as Carousel } from './carousel/carousel';
-export { Card, CardBody, CardHeader, CardTitle } from './card/card';
-export { default as Checkbox } from './checkbox/checkbox';
-export { Column, ColumnHeader } from './column/column';
+export { default as Accordion } from './accordion';
+export { default as Avatar } from './avatar';
+export { default as Banner } from './banner';
+export { default as Button } from './button';
+export { default as Carousel } from './carousel';
+export { Card, CardBody, CardHeader, CardTitle } from './card';
+export { default as Checkbox } from './checkbox';
+export { Column, ColumnHeader } from './column';
 export {
   Combobox,
   ComboboxInput,
@@ -13,35 +13,34 @@ export {
   ComboboxList,
   ComboboxOption,
   ComboboxOptionText,
-} from './combobox/combobox';
-export { default as Counter } from './counter/counter';
-export { default as Datepicker } from './datepicker/datepicker';
-export { default as Divider } from './divider/divider';
-export { default as Emoji } from './emoji/emoji';
-export { default as FileInput } from './file-input/file-input';
-export { default as Form } from './form/form';
-export { default as FormActions } from './form-actions/form-actions';
-export { default as FormGroup } from './form-group/form-group';
-export { default as HStack } from './hstack/hstack';
-export { default as Icon } from './icon/icon';
-export { default as IconButton } from './icon-button/icon-button';
-export { default as Input } from './input/input';
-export { default as Layout } from './layout/layout';
-export { default as Modal } from './modal/modal';
-export { default as Popover } from './popover/popover';
-export { default as Portal } from './portal/portal';
-export { default as ProgressBar } from './progress-bar/progress-bar';
-export { default as RadioButton } from './radio-button/radio-button';
-export { default as Select } from './select/select';
-export { default as Slider } from './slider/slider';
-export { default as Spinner } from './spinner/spinner';
-export { default as Stack } from './stack/stack';
-export { default as Streamfield } from './streamfield/streamfield';
-export { default as Tabs } from './tabs/tabs';
-export { default as TagInput } from './tag-input/tag-input';
-export { default as Text } from './text/text';
-export { default as Textarea } from './textarea/textarea';
-export { default as Toast } from './toast/toast';
-export { default as Toggle } from './toggle/toggle';
-export { default as Tooltip } from './tooltip/tooltip';
-export { default as Widget } from './widget/widget';
+} from './combobox';
+export { default as Counter } from './counter';
+export { default as Divider } from './divider';
+export { default as Emoji } from './emoji';
+export { default as FileInput } from './file-input';
+export { default as Form } from './form';
+export { default as FormActions } from './form-actions';
+export { default as FormGroup } from './form-group';
+export { default as HStack } from './hstack';
+export { default as Icon } from './icon';
+export { default as IconButton } from './icon-button';
+export { default as Input } from './input';
+export { default as Layout } from './layout';
+export { default as Modal } from './modal';
+export { default as Popover } from './popover';
+export { default as Portal } from './portal';
+export { default as ProgressBar } from './progress-bar';
+export { default as RadioButton } from './radio-button';
+export { default as Select } from './select';
+export { default as Slider } from './slider';
+export { default as Spinner } from './spinner';
+export { default as Stack } from './stack';
+export { default as Streamfield } from './streamfield';
+export { default as Tabs } from './tabs';
+export { default as TagInput } from './tag-input';
+export { default as Text } from './text';
+export { default as Textarea } from './textarea';
+export { default as Toast } from './toast';
+export { default as Toggle } from './toggle';
+export { default as Tooltip } from './tooltip';
+export { default as Widget } from './widget';
diff --git a/packages/pl-fe/src/components/ui/inline-multiselect/inline-multiselect.tsx b/packages/pl-fe/src/components/ui/inline-multiselect.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/inline-multiselect/inline-multiselect.tsx
rename to packages/pl-fe/src/components/ui/inline-multiselect.tsx
diff --git a/packages/pl-fe/src/components/ui/input/input.tsx b/packages/pl-fe/src/components/ui/input.tsx
similarity index 97%
rename from packages/pl-fe/src/components/ui/input/input.tsx
rename to packages/pl-fe/src/components/ui/input.tsx
index 5e5a60875..9a7de9cda 100644
--- a/packages/pl-fe/src/components/ui/input/input.tsx
+++ b/packages/pl-fe/src/components/ui/input.tsx
@@ -5,9 +5,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useLocale } from 'pl-fe/hooks';
 import { getTextDirection } from 'pl-fe/utils/rtl';
 
-import Icon from '../icon/icon';
-import SvgIcon from '../icon/svg-icon';
-import Tooltip from '../tooltip/tooltip';
+import Icon from './icon';
+import SvgIcon from './svg-icon';
+import Tooltip from './tooltip';
 
 const messages = defineMessages({
   showPassword: { id: 'input.password.show_password', defaultMessage: 'Show password' },
diff --git a/packages/pl-fe/src/components/ui/layout/layout.tsx b/packages/pl-fe/src/components/ui/layout.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/layout/layout.tsx
rename to packages/pl-fe/src/components/ui/layout.tsx
diff --git a/packages/pl-fe/src/components/ui/modal/modal.test.tsx b/packages/pl-fe/src/components/ui/modal.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/modal/modal.test.tsx
rename to packages/pl-fe/src/components/ui/modal.test.tsx
diff --git a/packages/pl-fe/src/components/ui/modal/modal.tsx b/packages/pl-fe/src/components/ui/modal.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/modal/modal.tsx
rename to packages/pl-fe/src/components/ui/modal.tsx
index eb9c91c0f..ce90bd1ca 100644
--- a/packages/pl-fe/src/components/ui/modal/modal.tsx
+++ b/packages/pl-fe/src/components/ui/modal.tsx
@@ -2,10 +2,10 @@ import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Button from '../button/button';
-import { ButtonThemes } from '../button/useButtonStyles';
-import HStack from '../hstack/hstack';
-import IconButton from '../icon-button/icon-button';
+import Button from './button';
+import { ButtonThemes } from './button/useButtonStyles';
+import HStack from './hstack';
+import IconButton from './icon-button';
 
 const messages = defineMessages({
   back: { id: 'card.back.label', defaultMessage: 'Back' },
diff --git a/packages/pl-fe/src/components/ui/popover/popover.tsx b/packages/pl-fe/src/components/ui/popover.tsx
similarity index 98%
rename from packages/pl-fe/src/components/ui/popover/popover.tsx
rename to packages/pl-fe/src/components/ui/popover.tsx
index 2a614507d..7b419c192 100644
--- a/packages/pl-fe/src/components/ui/popover/popover.tsx
+++ b/packages/pl-fe/src/components/ui/popover.tsx
@@ -16,7 +16,7 @@ import {
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 
-import Portal from '../portal/portal';
+import Portal from './portal';
 
 interface IPopover {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
diff --git a/packages/pl-fe/src/components/ui/portal/portal.tsx b/packages/pl-fe/src/components/ui/portal.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/portal/portal.tsx
rename to packages/pl-fe/src/components/ui/portal.tsx
diff --git a/packages/pl-fe/src/components/ui/progress-bar/progress-bar.tsx b/packages/pl-fe/src/components/ui/progress-bar.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/progress-bar/progress-bar.tsx
rename to packages/pl-fe/src/components/ui/progress-bar.tsx
diff --git a/packages/pl-fe/src/components/ui/radio-button/radio-button.tsx b/packages/pl-fe/src/components/ui/radio-button.tsx
similarity index 95%
rename from packages/pl-fe/src/components/ui/radio-button/radio-button.tsx
rename to packages/pl-fe/src/components/ui/radio-button.tsx
index d6b9c6590..d72cbc74e 100644
--- a/packages/pl-fe/src/components/ui/radio-button/radio-button.tsx
+++ b/packages/pl-fe/src/components/ui/radio-button.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import HStack from '../hstack/hstack';
+import HStack from './hstack';
 
 interface IRadioButton {
   value: string;
diff --git a/packages/pl-fe/src/components/ui/select/select.tsx b/packages/pl-fe/src/components/ui/select.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/select/select.tsx
rename to packages/pl-fe/src/components/ui/select.tsx
diff --git a/packages/pl-fe/src/components/ui/slider/slider.tsx b/packages/pl-fe/src/components/ui/slider.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/slider/slider.tsx
rename to packages/pl-fe/src/components/ui/slider.tsx
diff --git a/packages/pl-fe/src/components/ui/spinner/spinner.css b/packages/pl-fe/src/components/ui/spinner.css
similarity index 100%
rename from packages/pl-fe/src/components/ui/spinner/spinner.css
rename to packages/pl-fe/src/components/ui/spinner.css
diff --git a/packages/pl-fe/src/components/ui/spinner/spinner.tsx b/packages/pl-fe/src/components/ui/spinner.tsx
similarity index 92%
rename from packages/pl-fe/src/components/ui/spinner/spinner.tsx
rename to packages/pl-fe/src/components/ui/spinner.tsx
index b81769da2..41036b2a8 100644
--- a/packages/pl-fe/src/components/ui/spinner/spinner.tsx
+++ b/packages/pl-fe/src/components/ui/spinner.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Stack from './stack';
+import Text from './text';
 
 import './spinner.css';
 
diff --git a/packages/pl-fe/src/components/ui/stack/stack.tsx b/packages/pl-fe/src/components/ui/stack.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/stack/stack.tsx
rename to packages/pl-fe/src/components/ui/stack.tsx
diff --git a/packages/pl-fe/src/components/ui/streamfield/streamfield.tsx b/packages/pl-fe/src/components/ui/streamfield.tsx
similarity index 94%
rename from packages/pl-fe/src/components/ui/streamfield/streamfield.tsx
rename to packages/pl-fe/src/components/ui/streamfield.tsx
index 66fee9649..0bb65ce4a 100644
--- a/packages/pl-fe/src/components/ui/streamfield/streamfield.tsx
+++ b/packages/pl-fe/src/components/ui/streamfield.tsx
@@ -1,11 +1,11 @@
 import React, { useRef } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Button from '../button/button';
-import HStack from '../hstack/hstack';
-import IconButton from '../icon-button/icon-button';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Button from './button';
+import HStack from './hstack';
+import IconButton from './icon-button';
+import Stack from './stack';
+import Text from './text';
 
 const messages = defineMessages({
   add: { id: 'streamfield.add', defaultMessage: 'Add' },
diff --git a/packages/pl-fe/src/components/ui/icon/svg-icon.test.tsx b/packages/pl-fe/src/components/ui/svg-icon.test.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/icon/svg-icon.test.tsx
rename to packages/pl-fe/src/components/ui/svg-icon.test.tsx
diff --git a/packages/pl-fe/src/components/ui/icon/svg-icon.tsx b/packages/pl-fe/src/components/ui/svg-icon.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/icon/svg-icon.tsx
rename to packages/pl-fe/src/components/ui/svg-icon.tsx
diff --git a/packages/pl-fe/src/components/ui/tabs/tabs.css b/packages/pl-fe/src/components/ui/tabs.css
similarity index 100%
rename from packages/pl-fe/src/components/ui/tabs/tabs.css
rename to packages/pl-fe/src/components/ui/tabs.css
diff --git a/packages/pl-fe/src/components/ui/tabs/tabs.tsx b/packages/pl-fe/src/components/ui/tabs.tsx
similarity index 99%
rename from packages/pl-fe/src/components/ui/tabs/tabs.tsx
rename to packages/pl-fe/src/components/ui/tabs.tsx
index 27177d70a..bc4a7721e 100644
--- a/packages/pl-fe/src/components/ui/tabs/tabs.tsx
+++ b/packages/pl-fe/src/components/ui/tabs.tsx
@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import Counter from '../counter/counter';
+import Counter from './counter';
 
 import './tabs.css';
 
diff --git a/packages/pl-fe/src/components/ui/tag-input/tag-input.tsx b/packages/pl-fe/src/components/ui/tag-input.tsx
similarity index 98%
rename from packages/pl-fe/src/components/ui/tag-input/tag-input.tsx
rename to packages/pl-fe/src/components/ui/tag-input.tsx
index 039291d53..e31351681 100644
--- a/packages/pl-fe/src/components/ui/tag-input/tag-input.tsx
+++ b/packages/pl-fe/src/components/ui/tag-input.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 
-import HStack from '../hstack/hstack';
-
+import HStack from './hstack';
 import Tag from './tag';
 
 interface ITagInput {
diff --git a/packages/pl-fe/src/components/ui/tag-input/tag.tsx b/packages/pl-fe/src/components/ui/tag.tsx
similarity index 87%
rename from packages/pl-fe/src/components/ui/tag-input/tag.tsx
rename to packages/pl-fe/src/components/ui/tag.tsx
index c897e10a9..91e2e657a 100644
--- a/packages/pl-fe/src/components/ui/tag-input/tag.tsx
+++ b/packages/pl-fe/src/components/ui/tag.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import IconButton from '../icon-button/icon-button';
-import Text from '../text/text';
+import IconButton from './icon-button';
+import Text from './text';
 
 interface ITag {
   /** Name of the tag. */
diff --git a/packages/pl-fe/src/components/ui/text/text.tsx b/packages/pl-fe/src/components/ui/text.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/text/text.tsx
rename to packages/pl-fe/src/components/ui/text.tsx
diff --git a/packages/pl-fe/src/components/ui/textarea/textarea.tsx b/packages/pl-fe/src/components/ui/textarea.tsx
similarity index 98%
rename from packages/pl-fe/src/components/ui/textarea/textarea.tsx
rename to packages/pl-fe/src/components/ui/textarea.tsx
index d0d4594e2..7e05aa7f0 100644
--- a/packages/pl-fe/src/components/ui/textarea/textarea.tsx
+++ b/packages/pl-fe/src/components/ui/textarea.tsx
@@ -5,8 +5,8 @@ import { FormattedMessage } from 'react-intl';
 import { useLocale } from 'pl-fe/hooks';
 import { getTextDirection } from 'pl-fe/utils/rtl';
 
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Stack from './stack';
+import Text from './text';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'maxLength' | 'onChange' | 'onClick' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
diff --git a/packages/pl-fe/src/components/ui/toast/toast.tsx b/packages/pl-fe/src/components/ui/toast.tsx
similarity index 96%
rename from packages/pl-fe/src/components/ui/toast/toast.tsx
rename to packages/pl-fe/src/components/ui/toast.tsx
index b7e11a2f1..b1c1e5a74 100644
--- a/packages/pl-fe/src/components/ui/toast/toast.tsx
+++ b/packages/pl-fe/src/components/ui/toast.tsx
@@ -6,10 +6,10 @@ import { Link } from 'react-router-dom';
 
 import { ToastText, ToastType } from 'pl-fe/toast';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import HStack from './hstack';
+import Icon from './icon';
+import Stack from './stack';
+import Text from './text';
 
 const renderText = (text: ToastText) => {
   if (typeof text === 'string') {
diff --git a/packages/pl-fe/src/components/ui/toggle/toggle.tsx b/packages/pl-fe/src/components/ui/toggle.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/toggle/toggle.tsx
rename to packages/pl-fe/src/components/ui/toggle.tsx
diff --git a/packages/pl-fe/src/components/ui/tooltip/tooltip.tsx b/packages/pl-fe/src/components/ui/tooltip.tsx
similarity index 100%
rename from packages/pl-fe/src/components/ui/tooltip/tooltip.tsx
rename to packages/pl-fe/src/components/ui/tooltip.tsx
diff --git a/packages/pl-fe/src/components/ui/widget/widget.tsx b/packages/pl-fe/src/components/ui/widget.tsx
similarity index 87%
rename from packages/pl-fe/src/components/ui/widget/widget.tsx
rename to packages/pl-fe/src/components/ui/widget.tsx
index dcea8f6b9..845a430db 100644
--- a/packages/pl-fe/src/components/ui/widget/widget.tsx
+++ b/packages/pl-fe/src/components/ui/widget.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import HStack from 'pl-fe/components/ui/hstack/hstack';
-import IconButton from 'pl-fe/components/ui/icon-button/icon-button';
-import Stack from 'pl-fe/components/ui/stack/stack';
-import Text from 'pl-fe/components/ui/text/text';
+import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
+import Stack from 'pl-fe/components/ui/stack';
+import Text from 'pl-fe/components/ui/text';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
diff --git a/packages/pl-fe/src/features/developers/developers-menu.tsx b/packages/pl-fe/src/features/developers/developers-menu.tsx
index 234e8fa46..733beac8c 100644
--- a/packages/pl-fe/src/features/developers/developers-menu.tsx
+++ b/packages/pl-fe/src/features/developers/developers-menu.tsx
@@ -4,7 +4,7 @@ import { Link, useHistory } from 'react-router-dom';
 
 import { changeSetting } from 'pl-fe/actions/settings';
 import { Column, Text } from 'pl-fe/components/ui';
-import SvgIcon from 'pl-fe/components/ui/icon/svg-icon';
+import SvgIcon from 'pl-fe/components/ui/svg-icon';
 import { useAppDispatch } from 'pl-fe/hooks';
 import toast from 'pl-fe/toast';
 import sourceCode from 'pl-fe/utils/code';
diff --git a/packages/pl-fe/src/features/edit-profile/index.tsx b/packages/pl-fe/src/features/edit-profile/index.tsx
index 00441f62d..e68fa8d07 100644
--- a/packages/pl-fe/src/features/edit-profile/index.tsx
+++ b/packages/pl-fe/src/features/edit-profile/index.tsx
@@ -27,7 +27,7 @@ import { isDefaultAvatar, isDefaultHeader } from 'pl-fe/utils/accounts';
 import AvatarPicker from './components/avatar-picker';
 import HeaderPicker from './components/header-picker';
 
-import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 import type { Account } from 'pl-fe/normalizers';
 
 const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
diff --git a/packages/pl-fe/src/features/filters/edit-filter.tsx b/packages/pl-fe/src/features/filters/edit-filter.tsx
index 3d747b2df..edfdfe5ef 100644
--- a/packages/pl-fe/src/features/filters/edit-filter.tsx
+++ b/packages/pl-fe/src/features/filters/edit-filter.tsx
@@ -12,7 +12,7 @@ import toast from 'pl-fe/toast';
 import { SelectDropdown } from '../forms';
 
 import type { FilterContext } from 'pl-api';
-import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 
 interface IFilterField {
   id?: string;
diff --git a/packages/pl-fe/src/features/interaction-policies/index.tsx b/packages/pl-fe/src/features/interaction-policies/index.tsx
index c4a9fb555..1ab6f24ba 100644
--- a/packages/pl-fe/src/features/interaction-policies/index.tsx
+++ b/packages/pl-fe/src/features/interaction-policies/index.tsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useInteractionPolicies } from 'pl-fe/api/hooks';
 import List, { ListItem } from 'pl-fe/components/list';
 import { Button, CardTitle, Column, Form, FormActions, Tabs } from 'pl-fe/components/ui';
-import { InlineMultiselect } from 'pl-fe/components/ui/inline-multiselect/inline-multiselect';
+import { InlineMultiselect } from 'pl-fe/components/ui/inline-multiselect';
 import toast from 'pl-fe/toast';
 
 import Warning from '../compose/components/warning';
diff --git a/packages/pl-fe/src/features/notifications/components/filter-bar.tsx b/packages/pl-fe/src/features/notifications/components/filter-bar.tsx
index 6e76d5747..e40e7116a 100644
--- a/packages/pl-fe/src/features/notifications/components/filter-bar.tsx
+++ b/packages/pl-fe/src/features/notifications/components/filter-bar.tsx
@@ -5,7 +5,7 @@ import { type FilterType, setFilter } from 'pl-fe/actions/notifications';
 import { Icon, Tabs } from 'pl-fe/components/ui';
 import { useAppDispatch, useFeatures, useSettings } from 'pl-fe/hooks';
 
-import type { Item } from 'pl-fe/components/ui/tabs/tabs';
+import type { Item } from 'pl-fe/components/ui/tabs';
 
 const messages = defineMessages({
   all: { id: 'notifications.filter.all', defaultMessage: 'All' },
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx b/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx
index 3e8aa2b60..9d3d4faa5 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/crypto-address-input.tsx
@@ -3,7 +3,7 @@ import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'pl-fe/components/ui';
 
-import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 import type { CryptoAddress } from 'pl-fe/types/pl-fe';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx b/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx
index 74d6c353d..0af7bb1f5 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/footer-link-input.tsx
@@ -3,7 +3,7 @@ import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'pl-fe/components/ui';
 
-import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 import type { FooterItem } from 'pl-fe/types/pl-fe';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx b/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx
index 48f9fa880..5f621a14d 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/promo-panel-input.tsx
@@ -5,7 +5,7 @@ import { HStack, Input } from 'pl-fe/components/ui';
 
 import IconPicker from './icon-picker';
 
-import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 import type { PromoPanelItem } from 'pl-fe/types/pl-fe';
 
 const messages = defineMessages({
diff --git a/packages/pl-fe/src/features/search/components/search.tsx b/packages/pl-fe/src/features/search/components/search.tsx
index c8d485c3b..ac57ab571 100644
--- a/packages/pl-fe/src/features/search/components/search.tsx
+++ b/packages/pl-fe/src/features/search/components/search.tsx
@@ -13,7 +13,7 @@ import {
 } from 'pl-fe/actions/search';
 import AutosuggestAccountInput from 'pl-fe/components/autosuggest-account-input';
 import { Input } from 'pl-fe/components/ui';
-import SvgIcon from 'pl-fe/components/ui/icon/svg-icon';
+import SvgIcon from 'pl-fe/components/ui/svg-icon';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 import { selectAccount } from 'pl-fe/selectors';
 import { AppDispatch, RootState } from 'pl-fe/store';
diff --git a/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
index d3d9d7158..990f0e2b3 100644
--- a/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
@@ -10,7 +10,7 @@ import AccountContainer from 'pl-fe/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'pl-fe/hooks';
 
 import type { BaseModalProps } from '../modal-root';
-import type { Item } from 'pl-fe/components/ui/tabs/tabs';
+import type { Item } from 'pl-fe/components/ui/tabs';
 
 const messages = defineMessages({
   all: { id: 'reactions.all', defaultMessage: 'All' },