diff --git a/desktop/app/src/chrome/ConsoleLogs.tsx b/desktop/app/src/chrome/ConsoleLogs.tsx index 427595f68..cc0beae84 100644 --- a/desktop/app/src/chrome/ConsoleLogs.tsx +++ b/desktop/app/src/chrome/ConsoleLogs.tsx @@ -15,8 +15,9 @@ import type {Methods} from 'console-feed/lib/definitions/Methods'; import type {Styles} from 'console-feed/lib/definitions/Styles'; import {createState, useValue} from 'flipper-plugin'; import {useLocalStorage} from '../utils/useLocalStorage'; -import {theme, useIsDarkMode} from '../sandy-chrome/theme'; +import {theme} from 'flipper-plugin'; import {useIsSandy} from '../sandy-chrome/SandyContext'; +import {useIsDarkMode} from '../utils/useIsDarkMode'; const MAX_LOG_ITEMS = 1000; diff --git a/desktop/app/src/chrome/settings/ToggledSection.tsx b/desktop/app/src/chrome/settings/ToggledSection.tsx index 387b41873..5e025c214 100644 --- a/desktop/app/src/chrome/settings/ToggledSection.tsx +++ b/desktop/app/src/chrome/settings/ToggledSection.tsx @@ -9,7 +9,7 @@ import {FlexColumn, styled, FlexRow, ToggleButton} from '../../ui'; import React from 'react'; -import {theme} from '../../sandy-chrome/theme'; +import {theme} from 'flipper-plugin'; const IndentedSection = styled(FlexColumn)({ paddingLeft: 50, diff --git a/desktop/app/src/sandy-chrome/ContentContainer.tsx b/desktop/app/src/sandy-chrome/ContentContainer.tsx index ea6e9be62..4a25fa4c4 100644 --- a/desktop/app/src/sandy-chrome/ContentContainer.tsx +++ b/desktop/app/src/sandy-chrome/ContentContainer.tsx @@ -8,7 +8,7 @@ */ import {Layout, styled} from '../ui'; -import {theme} from './theme'; +import {theme} from 'flipper-plugin'; export const ContentContainer = styled(Layout.Container)({ flex: 1, diff --git a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx index 6f69e3c1c..3925ee499 100644 --- a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx +++ b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx @@ -10,7 +10,7 @@ import React from 'react'; import {Typography, Card, Table, Collapse, Button, Tabs} from 'antd'; import {Layout} from '../ui'; -import {theme} from './theme'; +import {theme} from 'flipper-plugin'; import reactElementToJSXString from 'react-element-to-jsx-string'; import {CodeOutlined} from '@ant-design/icons'; diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx index 099e79619..bf0606dfa 100644 --- a/desktop/app/src/sandy-chrome/LeftRail.tsx +++ b/desktop/app/src/sandy-chrome/LeftRail.tsx @@ -26,7 +26,7 @@ import { toggleLeftSidebarVisible, toggleRightSidebarVisible, } from '../reducers/application'; -import {theme} from './theme'; +import {theme, Layout} from 'flipper-plugin'; import SetupDoctorScreen, {checkHasNewProblem} from './SetupDoctorScreen'; import SettingsSheet from '../chrome/SettingsSheet'; import WelcomeScreen from './WelcomeScreen'; @@ -36,7 +36,6 @@ import {ToplevelProps} from './SandyApp'; import {useValue} from 'flipper-plugin'; import {logout} from '../reducers/user'; import config from '../fb-stubs/config'; -import {Layout} from '../ui/components/Layout'; import styled from '@emotion/styled'; const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({ diff --git a/desktop/app/src/sandy-chrome/LeftSidebar.tsx b/desktop/app/src/sandy-chrome/LeftSidebar.tsx index 9f0187684..371d8863b 100644 --- a/desktop/app/src/sandy-chrome/LeftSidebar.tsx +++ b/desktop/app/src/sandy-chrome/LeftSidebar.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import {theme} from './theme'; +import {theme} from 'flipper-plugin'; import styled from '@emotion/styled'; import {Layout} from '../ui'; import {Button, Tooltip, Typography} from 'antd'; diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx index a879223e9..6d1012647 100644 --- a/desktop/app/src/sandy-chrome/SandyApp.tsx +++ b/desktop/app/src/sandy-chrome/SandyApp.tsx @@ -10,7 +10,7 @@ import React, {useEffect, useState, useCallback} from 'react'; import {styled} from '../ui'; import {Layout, Sidebar} from '../ui'; -import {theme} from './theme'; +import {theme} from 'flipper-plugin'; import {Logger} from '../fb-interfaces/Logger'; import {LeftRail} from './LeftRail'; diff --git a/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx b/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx index 4e4385b14..5275d0035 100644 --- a/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx +++ b/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx @@ -10,7 +10,7 @@ import React from 'react'; import {Typography, Button, Space, Input, Card, Alert, List} from 'antd'; import {Layout} from '../ui'; -import {theme} from './theme'; +import {theme} from 'flipper-plugin'; import {css} from 'emotion'; import {DesignComponentDemos} from './DesignComponentDemos'; diff --git a/desktop/app/src/sandy-chrome/SetupDoctorScreen.tsx b/desktop/app/src/sandy-chrome/SetupDoctorScreen.tsx index 5769ce100..9ee27e58e 100644 --- a/desktop/app/src/sandy-chrome/SetupDoctorScreen.tsx +++ b/desktop/app/src/sandy-chrome/SetupDoctorScreen.tsx @@ -26,7 +26,7 @@ import { HealthcheckStatus, HealthcheckResult, } from '../reducers/healthchecks'; -import {theme} from './theme'; +import {theme} from 'flipper-plugin'; import { startHealthchecks, updateHealthcheckResult, diff --git a/desktop/app/src/sandy-chrome/WelcomeScreen.tsx b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx index 99fc7616f..c04ead97e 100644 --- a/desktop/app/src/sandy-chrome/WelcomeScreen.tsx +++ b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx @@ -16,7 +16,7 @@ import { CodeOutlined, BugOutlined, } from '@ant-design/icons'; -import {theme} from './theme'; +import {theme} from 'flipper-plugin'; const {Text, Title} = Typography; diff --git a/desktop/app/src/sandy-chrome/appinspect/AppInspect.tsx b/desktop/app/src/sandy-chrome/appinspect/AppInspect.tsx index c6369e0df..5b9ff84bf 100644 --- a/desktop/app/src/sandy-chrome/appinspect/AppInspect.tsx +++ b/desktop/app/src/sandy-chrome/appinspect/AppInspect.tsx @@ -12,7 +12,7 @@ import {Alert, Button, Input} from 'antd'; import {LeftSidebar, SidebarTitle, InfoIcon} from '../LeftSidebar'; import {SettingOutlined, RocketOutlined} from '@ant-design/icons'; import {Layout, Link} from '../../ui'; -import {theme} from '../theme'; +import {theme} from 'flipper-plugin'; import {useStore as useReduxStore} from 'react-redux'; import {showEmulatorLauncher} from './LaunchEmulator'; import {AppSelector} from './AppSelector'; diff --git a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx index d9a03d310..a2960586b 100644 --- a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx +++ b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx @@ -16,7 +16,7 @@ import { CaretDownOutlined, } from '@ant-design/icons'; import {Layout, styled} from '../../ui'; -import {theme} from '../theme'; +import {theme} from 'flipper-plugin'; import {batch} from 'react-redux'; import {Dispatch, useDispatch, useStore} from '../../utils/useStore'; import { diff --git a/desktop/app/src/sandy-chrome/appinspect/LaunchEmulator.tsx b/desktop/app/src/sandy-chrome/appinspect/LaunchEmulator.tsx index 43d99cb0f..dc3be0a9e 100644 --- a/desktop/app/src/sandy-chrome/appinspect/LaunchEmulator.tsx +++ b/desktop/app/src/sandy-chrome/appinspect/LaunchEmulator.tsx @@ -14,7 +14,7 @@ import {renderReactRoot} from '../../utils/renderReactRoot'; import {Store} from '../../reducers'; import {useStore} from '../../utils/useStore'; import {launchEmulator} from '../../devices/AndroidDevice'; -import {Layout} from '../../ui/components/Layout'; +import {Layout} from 'flipper-plugin'; import { launchSimulator, getSimulators, diff --git a/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx b/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx index 027d8bb28..5e5540d60 100644 --- a/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx +++ b/desktop/app/src/sandy-chrome/appinspect/PluginList.tsx @@ -12,7 +12,7 @@ import {Badge, Button, Menu, Tooltip, Typography} from 'antd'; import {InfoIcon, SidebarTitle} from '../LeftSidebar'; import {PlusOutlined, MinusOutlined} from '@ant-design/icons'; import {Glyph, Layout, styled} from '../../ui'; -import {theme} from '../theme'; +import {theme} from 'flipper-plugin'; import {useDispatch, useStore} from '../../utils/useStore'; import {getPluginTitle, sortPluginsByName} from '../../utils/pluginUtils'; import {ClientPluginDefinition, DevicePluginDefinition} from '../../plugin'; diff --git a/desktop/app/src/sandy-chrome/notification/Notification.tsx b/desktop/app/src/sandy-chrome/notification/Notification.tsx index 0d61a289e..353d35801 100644 --- a/desktop/app/src/sandy-chrome/notification/Notification.tsx +++ b/desktop/app/src/sandy-chrome/notification/Notification.tsx @@ -8,7 +8,8 @@ */ import React from 'react'; -import {Layout, styled} from '../../ui'; +import {Layout, theme} from 'flipper-plugin'; +import {styled} from '../../ui'; import {Input, Typography, Button, Collapse} from 'antd'; import { DownOutlined, @@ -20,7 +21,6 @@ import { } from '@ant-design/icons'; import {LeftSidebar, SidebarTitle} from '../LeftSidebar'; import {PluginNotification} from '../../reducers/notifications'; -import {theme} from '../theme'; const {Title, Text, Paragraph} = Typography; diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx index e26958e00..8c71d5b97 100644 --- a/desktop/app/src/ui/components/Button.tsx +++ b/desktop/app/src/ui/components/Button.tsx @@ -21,7 +21,7 @@ import {useStore} from '../../utils/useStore'; import {useIsSandy} from '../../sandy-chrome/SandyContext'; import type {ButtonProps} from 'antd/lib/button'; import {DownOutlined, CheckOutlined} from '@ant-design/icons'; -import {theme} from '../../sandy-chrome/theme'; +import {theme} from 'flipper-plugin'; type ButtonType = 'primary' | 'success' | 'warning' | 'danger'; diff --git a/desktop/app/src/ui/components/FlexBox.tsx b/desktop/app/src/ui/components/FlexBox.tsx index f53ed9b4c..7f68f5da8 100644 --- a/desktop/app/src/ui/components/FlexBox.tsx +++ b/desktop/app/src/ui/components/FlexBox.tsx @@ -16,6 +16,7 @@ type Props = { }; /** + * @deprecated use `Layout.Container` from flipper-plugin instead * A container using flexbox to layout its children */ const FlexBox = styled(View)(({shrink}) => ({ diff --git a/desktop/app/src/ui/components/FlexCenter.tsx b/desktop/app/src/ui/components/FlexCenter.tsx index a81a75db7..5a5c20742 100644 --- a/desktop/app/src/ui/components/FlexCenter.tsx +++ b/desktop/app/src/ui/components/FlexCenter.tsx @@ -11,6 +11,7 @@ import View from './View'; import styled from '@emotion/styled'; /** + * @deprecated use `Layout.Container` from flipper-plugin instead * A container displaying its children horizontally and vertically centered. */ const FlexCenter = styled(View)({ diff --git a/desktop/app/src/ui/components/FlexColumn.tsx b/desktop/app/src/ui/components/FlexColumn.tsx index de9242a07..35e86c2b6 100644 --- a/desktop/app/src/ui/components/FlexColumn.tsx +++ b/desktop/app/src/ui/components/FlexColumn.tsx @@ -11,6 +11,7 @@ import FlexBox from './FlexBox'; import styled from '@emotion/styled'; /** + * @deprecated use `Layout.Container` from flipper-plugin instead * A container displaying its children in a column */ const FlexColumn = styled(FlexBox)({ diff --git a/desktop/app/src/ui/components/FlexRow.tsx b/desktop/app/src/ui/components/FlexRow.tsx index 8a674f46c..8882c64f3 100644 --- a/desktop/app/src/ui/components/FlexRow.tsx +++ b/desktop/app/src/ui/components/FlexRow.tsx @@ -11,6 +11,7 @@ import FlexBox from './FlexBox'; import styled from '@emotion/styled'; /** + * @deprecated use `Layout.Horizontal` from flipper-plugin instead * A container displaying its children in a row */ const FlexRow = styled(FlexBox)({ diff --git a/desktop/app/src/ui/components/HBox.tsx b/desktop/app/src/ui/components/HBox.tsx index 75db68f64..06227c1a9 100644 --- a/desktop/app/src/ui/components/HBox.tsx +++ b/desktop/app/src/ui/components/HBox.tsx @@ -25,6 +25,9 @@ const HBoxContainer = styled(FlexRow)<{verticalAlign: string}>( HBoxContainer.displayName = 'HBoxContainer'; +/** + * @deprecated use Layout.Left / Layout.Right or Layout.Horizonta from flipper-plugin instead + */ const HBox: React.FC<{ children: [] | [React.ReactNode] | [React.ReactNode, React.ReactNode]; grow?: 'left' | 'right' | 'auto'; diff --git a/desktop/app/src/ui/components/LegacyLayout.tsx b/desktop/app/src/ui/components/LegacyLayout.tsx deleted file mode 100644 index 4acf2a382..000000000 --- a/desktop/app/src/ui/components/LegacyLayout.tsx +++ /dev/null @@ -1,76 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -import React from 'react'; -import styled from '@emotion/styled'; - -const FixedContainer = styled.div({ - flex: 'none', - height: 'auto', - overflow: 'hidden', -}); -FixedContainer.displayName = 'Layout:FixedContainer'; - -const SplitScrollContainer = styled.div<{scrollable: boolean}>( - ({scrollable}) => ({ - overflow: scrollable ? 'auto' : 'hidden', - flex: 'auto', - display: 'flex', - }), -); -SplitScrollContainer.displayName = 'Layout:SplitScrollContainer'; - -const SplitContainer = styled.div<{horizontal: boolean; center?: boolean}>( - ({horizontal, center}) => ({ - display: 'flex', - flex: 'auto', - flexDirection: horizontal ? 'row' : 'column', - height: '100%', - width: '100%', - overflow: 'hidden', - alignItems: center ? 'center' : undefined, - }), -); -SplitContainer.displayName = 'Layout:SplitContainer'; - -/** - * @deprecated use Layout.Top|Left|Right|Bottom instead - */ -export function renderLayout( - { - children, - scrollable, - }: {scrollable?: boolean; children: [React.ReactNode, React.ReactNode]}, - horizontal: boolean, - reverse: boolean, -) { - if (children.length !== 2) { - throw new Error('Layout expects exactly 2 children'); - } - const fixedChild = reverse ? children[1] : children[0]; - - const fixedElement = {fixedChild}; - - const dynamicElement = ( - - {reverse ? children[0] : children[1]} - - ); - return reverse ? ( - - {dynamicElement} - {fixedElement} - - ) : ( - - {fixedElement} - {dynamicElement} - - ); -} diff --git a/desktop/app/src/ui/components/Sidebar.tsx b/desktop/app/src/ui/components/Sidebar.tsx index dfbd13e40..124d46237 100644 --- a/desktop/app/src/ui/components/Sidebar.tsx +++ b/desktop/app/src/ui/components/Sidebar.tsx @@ -21,7 +21,7 @@ import { import React from 'react'; import FlexRow from './FlexRow'; import {MoreOutlined} from '@ant-design/icons'; -import {theme} from '../../sandy-chrome/theme'; +import {theme} from 'flipper-plugin'; const SidebarInteractiveContainer = styled(Interactive)({ flex: 'none', diff --git a/desktop/app/src/ui/components/Toolbar.tsx b/desktop/app/src/ui/components/Toolbar.tsx index 9de45c186..bf975c629 100644 --- a/desktop/app/src/ui/components/Toolbar.tsx +++ b/desktop/app/src/ui/components/Toolbar.tsx @@ -13,8 +13,7 @@ import FlexRow from './FlexRow'; import FlexBox from './FlexBox'; import styled from '@emotion/styled'; import {useIsSandy} from '../../sandy-chrome/SandyContext'; -import {theme} from '../../sandy-chrome/theme'; -import {Layout} from './Layout'; +import {theme, Layout} from 'flipper-plugin'; /** * A toolbar. diff --git a/desktop/app/src/ui/components/VBox.tsx b/desktop/app/src/ui/components/VBox.tsx index ba00d4bec..35bcad3d4 100644 --- a/desktop/app/src/ui/components/VBox.tsx +++ b/desktop/app/src/ui/components/VBox.tsx @@ -11,6 +11,7 @@ import styled from '@emotion/styled'; import FlexColumn from './FlexColumn'; /** + * @deprecated use `Layout.Container` from flipper-plugin instead * Container that applies a standardized bottom margin for vertical spacing */ const VBox = styled(FlexColumn)({ diff --git a/desktop/app/src/ui/components/View.tsx b/desktop/app/src/ui/components/View.tsx index e4c8df464..4a0f5a683 100644 --- a/desktop/app/src/ui/components/View.tsx +++ b/desktop/app/src/ui/components/View.tsx @@ -15,6 +15,10 @@ type Props = { maxHeight?: number; }; +/** + * + * @deprecated use `Layout.Container` from flipper-plugin instead + */ const View = styled.div((props) => ({ height: props.grow ? '100%' : 'auto', overflow: props.scrollable ? 'auto' : 'visible', diff --git a/desktop/app/src/ui/components/colors.tsx b/desktop/app/src/ui/components/colors.tsx index c043b568e..8de8d0850 100644 --- a/desktop/app/src/ui/components/colors.tsx +++ b/desktop/app/src/ui/components/colors.tsx @@ -7,7 +7,7 @@ * @format */ -import {theme} from '../../sandy-chrome/theme'; +import {theme} from 'flipper-plugin'; // Last updated: Jan 30 2016 diff --git a/desktop/app/src/ui/components/searchable/Searchable.tsx b/desktop/app/src/ui/components/searchable/Searchable.tsx index 861f6fa55..b5ccfece9 100644 --- a/desktop/app/src/ui/components/searchable/Searchable.tsx +++ b/desktop/app/src/ui/components/searchable/Searchable.tsx @@ -21,8 +21,7 @@ import styled from '@emotion/styled'; import {debounce} from 'lodash'; import ToggleButton from '../ToggleSwitch'; import React from 'react'; -import {Layout} from '../Layout'; -import {theme} from '../../../sandy-chrome/theme'; +import {Layout, theme} from 'flipper-plugin'; const SearchBar = styled(Toolbar)({ height: 42, diff --git a/desktop/app/src/ui/index.tsx b/desktop/app/src/ui/index.tsx index c27c2ecf9..01a233602 100644 --- a/desktop/app/src/ui/index.tsx +++ b/desktop/app/src/ui/index.tsx @@ -178,7 +178,7 @@ export {default as CenteredView} from './components/CenteredView'; export {default as Info} from './components/Info'; export {default as Bordered} from './components/Bordered'; export {default as AlternatingRows} from './components/AlternatingRows'; -export {Layout} from './components/Layout'; +export {Layout} from 'flipper-plugin'; export {default as Scrollable} from './components/Scrollable'; export * from './components/Highlight'; diff --git a/desktop/app/src/utils/useIsDarkMode.tsx b/desktop/app/src/utils/useIsDarkMode.tsx new file mode 100644 index 000000000..5844070f2 --- /dev/null +++ b/desktop/app/src/utils/useIsDarkMode.tsx @@ -0,0 +1,20 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {useStore} from '../../../app/src/utils/useStore'; +/** + * This hook returns whether dark mode is currently being used. + * Generally should be avoided in favor of using the above theme object, + * which will provide colors that reflect the theme + */ +export function useIsDarkMode(): boolean { + return useStore( + (state) => state.settingsState.enableSandy && state.settingsState.darkMode, + ); +} diff --git a/desktop/flipper-plugin/src/index.ts b/desktop/flipper-plugin/src/index.ts index 8cef79061..5cf7a5802 100644 --- a/desktop/flipper-plugin/src/index.ts +++ b/desktop/flipper-plugin/src/index.ts @@ -32,6 +32,9 @@ export { DefaultKeyboardAction, } from './plugin/MenuEntry'; +export {theme} from './ui/theme'; +export {Layout} from './ui/Layout'; + // It's not ideal that this exists in flipper-plugin sources directly, // but is the least pain for plugin authors. // Probably we should make sure that testing-library doesn't end up in our final Flipper bundle (which packages flipper-plugin) diff --git a/desktop/app/src/ui/components/Layout.tsx b/desktop/flipper-plugin/src/ui/Layout.tsx similarity index 95% rename from desktop/app/src/ui/components/Layout.tsx rename to desktop/flipper-plugin/src/ui/Layout.tsx index e2a53757e..462a80e93 100644 --- a/desktop/app/src/ui/components/Layout.tsx +++ b/desktop/flipper-plugin/src/ui/Layout.tsx @@ -15,9 +15,7 @@ import { PaddingProps, Spacing, theme, -} from '../../sandy-chrome/theme'; -import {useIsSandy} from '../../sandy-chrome/SandyContext'; -import {renderLayout} from './LegacyLayout'; +} from './theme'; type ContainerProps = { children?: React.ReactNode; @@ -148,9 +146,6 @@ function renderSplitLayout( direction: 'column' | 'row', grow: 1 | 2, ) { - // eslint-disable-next-line - const isSandy = useIsSandy(); - if (!isSandy) return renderLayout(props, direction === 'row', grow === 1); const [child1, child2] = props.children; return ( diff --git a/desktop/app/src/sandy-chrome/theme.tsx b/desktop/flipper-plugin/src/ui/theme.tsx similarity index 84% rename from desktop/app/src/sandy-chrome/theme.tsx rename to desktop/flipper-plugin/src/ui/theme.tsx index c808651d5..aea99c9dc 100644 --- a/desktop/app/src/sandy-chrome/theme.tsx +++ b/desktop/flipper-plugin/src/ui/theme.tsx @@ -7,8 +7,6 @@ * @format */ -import {useStore} from '../utils/useStore'; - // Exposes all the variables defined in themes/base.less: export const theme = { @@ -43,17 +41,6 @@ export const theme = { } as const, } as const; -/** - * This hook returns whether dark mode is currently being used. - * Generally should be avoided in favor of using the above theme object, - * which will provide colors that reflect the theme - */ -export function useIsDarkMode(): boolean { - return useStore( - (state) => state.settingsState.enableSandy && state.settingsState.darkMode, - ); -} - export type Spacing = keyof typeof theme['space'] | number | undefined | true; export type PaddingProps = {