` element.
-
- } />`}
-/>
-
-
- ` element.
-
-
- (
-
- )} />
-
-
- It's the edge of the world and all of Western civilization
- The sun may rise in the East, at least it settled in a final location
- It's understood that Hollywood sells Californication
-
-
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/collapsible/props.ts b/canon-docs/src/app/(docs)/components/collapsible/props.ts
deleted file mode 100644
index 02c62dc89e..0000000000
--- a/canon-docs/src/app/(docs)/components/collapsible/props.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- renderPropDefs,
-} from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const collapsibleRootPropDefs: Record = {
- defaultOpen: {
- type: 'boolean',
- default: 'false',
- },
- open: {
- type: 'boolean',
- },
- onOpenChange: {
- type: 'enum',
- values: ['(open) => void'],
- },
- ...renderPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const collapsibleTriggerPropDefs: Record = {
- ...renderPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const collapsiblePanelPropDefs: Record = {
- hiddenUntilFound: {
- type: 'boolean',
- default: 'false',
- },
- keepMounted: {
- type: 'boolean',
- default: 'false',
- },
- ...renderPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/container/page.mdx b/canon-docs/src/app/(docs)/components/container/page.mdx
deleted file mode 100644
index 40f0321624..0000000000
--- a/canon-docs/src/app/(docs)/components/container/page.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-import { PropsTable } from '@/components/PropsTable';
-import { Tabs } from '@/components/Tabs';
-import { Snippet } from '@/components/Snippet';
-import { ContainerSnippet } from '@/snippets/stories-snippets';
-import { containerPropDefs } from './props';
-
-# Container
-
-The container component let you use our default max-width and center the
-content on the page.
-
-
- `}
-/>
-
-
-
- Usage
-
-
- Hello World!
-`} />
-
-
-
-## API reference
-
-
- Hello World
- Hello World
- Hello World
-`}
-/>
-
-### Responsive padding & margin
-
-The Container component also supports responsive values, making it easy to
-create responsive designs.
-
-
- Hello World
- Hello World
- Hello World
-`}
-/>
diff --git a/canon-docs/src/app/(docs)/components/container/props.ts b/canon-docs/src/app/(docs)/components/container/props.ts
deleted file mode 100644
index 4a3410ec12..0000000000
--- a/canon-docs/src/app/(docs)/components/container/props.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- gapPropDefs,
-} from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const containerPropDefs: Record = {
- ...gapPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/flex/page.mdx b/canon-docs/src/app/(docs)/components/flex/page.mdx
deleted file mode 100644
index 8150f3e3c5..0000000000
--- a/canon-docs/src/app/(docs)/components/flex/page.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import {
- flexFAQ1,
- flexSimple,
- flexResponsive,
- flexAlign,
-} from '@/snippets/code-snippets';
-import { Snippet } from '@/components/Snippet';
-import { FlexSnippet } from '@/snippets/stories-snippets';
-import { flexPropDefs } from './props';
-import { spacingPropDefs } from '../../../../utils/propDefs';
-
-# Flex
-
-This is the flex container component. It will help to define the number of
-columns that will be used in the grid. You can also define the gap between the
-columns. All values are responsive.
-
-
- `}
-/>
-
-
-
- Usage
-
-
-
-
-
-## API reference
-
- = {
- align: {
- type: 'enum',
- values: ['start', 'center', 'end', 'baseline', 'stretch'],
- responsive: true,
- },
- direction: {
- type: 'enum',
- values: ['row', 'column', 'row-reverse', 'column-reverse'],
- responsive: true,
- },
- justify: {
- type: 'enum',
- values: ['start', 'center', 'end', 'between'],
- responsive: true,
- },
- ...childrenPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/grid/props.ts b/canon-docs/src/app/(docs)/components/grid/props.ts
deleted file mode 100644
index a9e8717fa1..0000000000
--- a/canon-docs/src/app/(docs)/components/grid/props.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
- PropDef,
- childrenPropDefs,
- classNamePropDefs,
- stylePropDefs,
-} from '../../../../utils/propDefs';
-
-const columnsValues = [
- '1',
- '2',
- '3',
- '4',
- '5',
- '6',
- '7',
- '8',
- '9',
- '10',
- '11',
- '12',
-];
-
-export const gridPropDefs: Record = {
- columns: {
- type: 'enum | string',
- values: [...columnsValues, 'auto'],
- responsive: true,
- default: 'auto',
- },
- ...childrenPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const gridItemPropDefs: Record = {
- colSpan: {
- type: 'enum | string',
- values: [...columnsValues, 'full'],
- responsive: true,
- },
- rowSpan: {
- type: 'enum | string',
- values: [...columnsValues, 'full'],
- responsive: true,
- },
- start: {
- type: 'enum | string',
- values: [...columnsValues, 'auto'],
- responsive: true,
- },
- end: {
- type: 'enum | string',
- values: [...columnsValues, 'auto'],
- responsive: true,
- },
- ...childrenPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
deleted file mode 100644
index 10fd60bef1..0000000000
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { HeadingSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { headingPropDefs } from './props';
-
-# Heading
-
-Headings are used to structure the content of your page.
-
-Hello World! `}
-/>
-
-
-
- Usage
- Theming
-
-
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
-
-
-
-## API reference
-
-
- Display
- Title 1
- Title 2
- Title 3
- Title 4
- `}
-/>
-
-### Responsive
-
-You can also use the `variant` prop to change the appearance of the text based
-on the screen size.
-
-
- Responsive heading
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/heading/props.ts b/canon-docs/src/app/(docs)/components/heading/props.ts
deleted file mode 100644
index a3dd3288ff..0000000000
--- a/canon-docs/src/app/(docs)/components/heading/props.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const headingPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
- responsive: true,
- },
- children: {
- type: 'enum',
- values: ['ReactNode'],
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
deleted file mode 100644
index 60530ec9ea..0000000000
--- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { IconButtonSnippet } from '@/snippets/stories-snippets';
-import { iconButtonVariants } from '@/snippets/code-snippets';
-import { iconButtonPropDefs } from './props';
-
-# Icon Button
-
-A button component with a single icon that can be used to trigger actions.
-
-
- `}
-/>
-
-
-
- Usage
- Theming
-
-
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
-
-
-
-## API reference
-
-
- `}
-/>
-
-### Disabled
-
-Here's a view when buttons are disabled.
-
- = {
- variant: {
- type: 'enum',
- values: ['primary', 'secondary'],
- default: 'primary',
- responsive: true,
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: true,
- },
- icon: { type: 'enum', values: 'icon', responsive: false },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
deleted file mode 100644
index 66be460d13..0000000000
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { IconSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { iconPropDefs } from './props';
-
-# Icon
-
-Icons are used to represent an action or a state.
-
-
-
- Usage
- Theming
-
-
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
-
-
-
-## API reference
-
- = {
- name: {
- type: 'enum',
- values: 'icon',
- responsive: false,
- },
- size: {
- type: 'number',
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/link/page.mdx b/canon-docs/src/app/(docs)/components/link/page.mdx
deleted file mode 100644
index 64a3261590..0000000000
--- a/canon-docs/src/app/(docs)/components/link/page.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import {
- MenuSnippet,
- ButtonSnippet,
- LinkSnippet,
-} from '@/snippets/stories-snippets';
-import { linkPropDefs } from './props';
-
-# Link
-
-A link component that renders a `` element.
-
-
-
- Usage
- Theming
-
-
- Sign up for Backstage`}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- - `canon-Link`
- - `canon-Link[data-variant='body']`
- - `canon-Link[data-variant='subtitle']`
- - `canon-Link[data-variant='caption']`
- - `canon-Link[data-variant='label']`
- - `canon-Link[data-weight='regular']`
- - `canon-Link[data-weight='bold']`
-
-
-
-## API reference
-
-
-
-
-
-
- `}
-/>
-
-### Weights
-
-Here's a view when links have different weights.
-
-
-
-
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/link/props.ts b/canon-docs/src/app/(docs)/components/link/props.ts
deleted file mode 100644
index 83507c5594..0000000000
--- a/canon-docs/src/app/(docs)/components/link/props.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const linkPropDefs: Record = {
- to: {
- type: 'string',
- },
- variant: {
- type: 'enum',
- values: ['subtitle', 'body', 'caption', 'label'],
- default: 'body',
- responsive: true,
- },
- weight: {
- type: 'enum',
- values: ['regular', 'bold'],
- default: 'regular',
- responsive: true,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/menu/page.mdx b/canon-docs/src/app/(docs)/components/menu/page.mdx
deleted file mode 100644
index 98c4949438..0000000000
--- a/canon-docs/src/app/(docs)/components/menu/page.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { MenuSnippet } from '@/snippets/stories-snippets';
-import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
-import {
- menuRootPropDefs,
- menuTriggerPropDefs,
- menuPositionerPropDefs,
- menuItemPropDefs,
-} from './props';
-
-# Menu
-
-A list of actions in a dropdown, enhanced with keyboard navigation.
-
-
- (
-
- )}
- />
-
-
-
- Settings
- Invite new members
- Download app
- Log out
-
-
-
- `}
-/>
-
-
-
- Usage
- Theming
-
-
-
-
-
-
-
-
-
- `}
- />
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
- - `canon-MenuTrigger`
- - `canon-MenuBackdrop`
- - `canon-MenuPositioner`
- - `canon-MenuPopup`
- - `canon-MenuArrow`
- - `canon-MenuItem`
- - `canon-MenuGroup`
- - `canon-MenuGroupLabel`
- - `canon-MenuRadioGroup`
- - `canon-MenuRadioItem`
- - `canon-MenuRadioItemIndicator`
- - `canon-MenuCheckboxItem`
- - `canon-MenuCheckboxItemIndicator`
- - `canon-MenuSubmenuTrigger`
- - `canon-MenuSeparator`
-
-
-
-## API reference
-
- } />`} />
-
-
` element.
-
-
diff --git a/canon-docs/src/components/CustomTheme/index.ts b/docs-ui/src/components/CustomTheme/index.ts
similarity index 100%
rename from canon-docs/src/components/CustomTheme/index.ts
rename to docs-ui/src/components/CustomTheme/index.ts
diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/docs-ui/src/components/CustomTheme/styles.module.css
similarity index 94%
rename from canon-docs/src/components/CustomTheme/styles.module.css
rename to docs-ui/src/components/CustomTheme/styles.module.css
index 3f0a5eb14e..dddd3ff7e4 100644
--- a/canon-docs/src/components/CustomTheme/styles.module.css
+++ b/docs-ui/src/components/CustomTheme/styles.module.css
@@ -1,10 +1,11 @@
.container {
position: fixed;
+ z-index: 100;
bottom: 16px;
right: 16px;
width: 240px;
height: 47px;
- background-color: var(--panel);
+ background-color: var(--bg);
border-radius: 0.375rem;
border: 1px solid var(--border);
display: flex;
@@ -32,7 +33,7 @@
height: 46px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
- background-color: var(--panel);
+ background-color: var(--bg);
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/canon-docs/src/components/DecorativeBox/index.tsx b/docs-ui/src/components/DecorativeBox/index.tsx
similarity index 100%
rename from canon-docs/src/components/DecorativeBox/index.tsx
rename to docs-ui/src/components/DecorativeBox/index.tsx
diff --git a/canon-docs/src/components/DecorativeBox/styles.module.css b/docs-ui/src/components/DecorativeBox/styles.module.css
similarity index 100%
rename from canon-docs/src/components/DecorativeBox/styles.module.css
rename to docs-ui/src/components/DecorativeBox/styles.module.css
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/docs-ui/src/components/HeadlessBanners/BaseUI.tsx
similarity index 95%
rename from canon-docs/src/components/HeadlessBanners/BaseUI.tsx
rename to docs-ui/src/components/HeadlessBanners/BaseUI.tsx
index 86a0e1ecbd..69f8e41df0 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/docs-ui/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,6 @@
'use client';
-import { Icon, Text } from '../../../../packages/canon';
+import { Icon, Text } from '../../../../packages/ui';
import styles from './styles.module.css';
interface BaseUIProps {
diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/docs-ui/src/components/HeadlessBanners/styles.module.css
similarity index 56%
rename from canon-docs/src/components/HeadlessBanners/styles.module.css
rename to docs-ui/src/components/HeadlessBanners/styles.module.css
index c87787634e..c0066eccff 100644
--- a/canon-docs/src/components/HeadlessBanners/styles.module.css
+++ b/docs-ui/src/components/HeadlessBanners/styles.module.css
@@ -1,16 +1,16 @@
.container {
display: flex;
- background-color: var(--panel);
- padding: var(--canon-space-6);
- border-radius: var(--canon-radius-2);
+ background-color: var(--bg);
+ padding: 1.5rem;
+ border-radius: 0.25rem;
border: 1px solid var(--border);
- margin-bottom: var(--canon-space-6);
- gap: var(--canon-space-6);
+ margin-bottom: 1.5rem;
+ gap: 1.5rem;
transition: background-color 0.2s ease-in-out;
}
.icon path {
- fill: var(--canon-fg-primary);
+ fill: var(--primary);
}
.content {
@@ -31,12 +31,12 @@
cursor: pointer;
background-color: var(--bg);
border: 1px solid var(--border);
- border-radius: var(--canon-radius-2);
- padding: 0 var(--canon-space-3);
+ border-radius: 0.25rem;
+ padding: 0 0.75rem;
height: 28px;
border-radius: 100px;
- margin-top: var(--canon-space-3);
- font-size: var(--canon-font-size-3);
+ margin-top: 0.75rem;
+ font-size: 0.875rem;
color: var(--primary);
- gap: var(--canon-space-2);
+ gap: 0.5rem;
}
diff --git a/docs-ui/src/components/LayoutComponents/LayoutComponents.module.css b/docs-ui/src/components/LayoutComponents/LayoutComponents.module.css
new file mode 100644
index 0000000000..9009cdb6a4
--- /dev/null
+++ b/docs-ui/src/components/LayoutComponents/LayoutComponents.module.css
@@ -0,0 +1,48 @@
+.layoutComponents {
+ display: flex;
+ justify-content: flex-start;
+ gap: 1rem;
+ flex-wrap: wrap;
+ margin-top: 2rem;
+
+ & svg rect {
+ transition: fill 0.2s ease-in-out;
+ }
+
+ & .box {
+ display: flex;
+ flex-direction: column;
+ width: calc(50% - 0.5rem);
+ margin-bottom: 1rem;
+ align-items: flex-start;
+ }
+
+ & .content {
+ flex: none;
+ background-color: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ width: 100%;
+ height: 180px;
+ transition: all 0.2s ease-in-out;
+ margin-bottom: 0.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ transform: translateY(-4px);
+ }
+ }
+
+ & .title {
+ font-size: 16px;
+ transition: color 0.2s ease-in-out;
+ margin-bottom: 0.25rem;
+ }
+
+ & .description {
+ font-size: 16px;
+ color: var(--secondary);
+ }
+}
diff --git a/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx b/docs-ui/src/components/LayoutComponents/LayoutComponents.tsx
similarity index 81%
rename from canon-docs/src/components/LayoutComponents/LayoutComponents.tsx
rename to docs-ui/src/components/LayoutComponents/LayoutComponents.tsx
index ac31381cd8..0bf822526e 100644
--- a/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx
+++ b/docs-ui/src/components/LayoutComponents/LayoutComponents.tsx
@@ -1,7 +1,6 @@
import { BoxSvg } from './svgs/box';
import { FlexSvg } from './svgs/flex';
import { GridSvg } from './svgs/grid';
-import { InlineSvg } from './svgs/inline';
import { ContainerSvg } from './svgs/container';
import styles from './LayoutComponents.module.css';
import Link from 'next/link';
@@ -36,15 +35,6 @@ export const LayoutComponents = () => {
Arrange your components in a grid
` element.
-
-
- (
-
- )}
- />
-
-
-
- Settings
- Invite new members
- Download app
- Log out
-
-
-
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/menu/props.ts b/canon-docs/src/app/(docs)/components/menu/props.ts
deleted file mode 100644
index 5cf41fa5f9..0000000000
--- a/canon-docs/src/app/(docs)/components/menu/props.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- renderPropDefs,
-} from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const menuRootPropDefs: Record = {
- defaultOpen: {
- type: 'boolean',
- default: 'false',
- },
- open: {
- type: 'boolean',
- },
- onOpenChange: {
- type: 'enum',
- values: ['(open, event) => void'],
- },
- closeParentOnEsc: {
- type: 'boolean',
- default: 'true',
- },
- modal: {
- type: 'boolean',
- default: 'true',
- },
- onOpenChangeComplete: {
- type: 'enum',
- values: ['(open) => void'],
- },
- disabled: {
- type: 'boolean',
- default: 'false',
- },
- openOnHover: {
- type: 'boolean',
- },
- delay: {
- type: 'number',
- default: '100',
- },
- loop: {
- type: 'boolean',
- default: 'true',
- },
- orientation: {
- type: 'enum',
- values: ['horizontal', 'vertical'],
- default: 'vertical',
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const menuTriggerPropDefs: Record = {
- ...renderPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const menuPositionerPropDefs: Record = {
- align: {
- type: 'enum',
- values: ['start', 'center', 'end'],
- default: 'center',
- },
- alignOffset: {
- type: 'enum',
- values: ['number', '(data) => number'],
- default: '0',
- },
- side: {
- type: 'enum',
- values: ['bottom', 'inline-end', 'inline-start', 'left', 'right', 'top'],
- default: 'bottom',
- },
- sideOffset: {
- type: 'enum',
- values: ['number', '(data) => number'],
- default: '0',
- },
- arrowPadding: {
- type: 'number',
- default: '5',
- },
- anchor: {
- type: 'enum',
- values: [
- 'React.Ref',
- 'Element',
- 'VirtualElement',
- '(() => Element | VirtualElement | null)',
- 'null',
- ],
- },
- collisionBoundary: {
- type: 'enum',
- values: ['clipping-ancestors', 'Element', 'Element[]', 'Rect'],
- default: 'clipping-ancestors',
- },
- collisionPadding: {
- type: 'enum',
- values: ['number', 'Rect'],
- default: '5',
- },
- sticky: {
- type: 'boolean',
- default: 'false',
- },
- positionMethod: {
- type: 'enum',
- values: ['absolute', 'fixed'],
- default: 'absolute',
- },
- trackAnchor: {
- type: 'boolean',
- default: 'true',
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const menuItemPropDefs: Record = {
- label: {
- type: 'string',
- },
- onClick: {
- type: 'enum',
- values: ['(event) => void'],
- },
- closeOnClick: {
- type: 'boolean',
- default: 'true',
- },
- disabled: {
- type: 'boolean',
- default: 'false',
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/select/page.mdx b/canon-docs/src/app/(docs)/components/select/page.mdx
deleted file mode 100644
index 4399f62235..0000000000
--- a/canon-docs/src/app/(docs)/components/select/page.mdx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { SelectSnippet } from '@/snippets/stories-snippets';
-import { selectPropDefs } from './props';
-
-# Select
-
-A common form component for choosing a predefined value in a dropdown menu.
-
-
-
- Usage
- Theming
-
-
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
-
-
-
-## API reference
-
-
-
-
- `}
-/>
-
-### Disabled
-
-Here's a view when the select is disabled.
-
- = {
- label: {
- type: 'string',
- default: 'Select an option',
- responsive: false,
- },
- description: {
- type: 'string',
- responsive: false,
- },
- name: {
- type: 'string',
- responsive: false,
- required: true,
- },
- options: {
- type: 'enum',
- values: ['Array<{ value: string, label: string }>'],
- required: true,
- },
- value: {
- type: 'string',
- responsive: false,
- },
- defaultValue: {
- type: 'string',
- responsive: false,
- },
- placeholder: {
- type: 'string',
- responsive: false,
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: true,
- },
- onValueChange: {
- type: 'enum',
- values: ['(value: string) => void'],
- responsive: false,
- },
- onOpenChange: {
- type: 'enum',
- values: ['(open: boolean) => void'],
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/table/page.mdx b/canon-docs/src/app/(docs)/components/table/page.mdx
deleted file mode 100644
index f169bcd7f9..0000000000
--- a/canon-docs/src/app/(docs)/components/table/page.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# Table (Coming soon)
diff --git a/canon-docs/src/app/(docs)/components/text-field/page.mdx b/canon-docs/src/app/(docs)/components/text-field/page.mdx
deleted file mode 100644
index bd5fa31025..0000000000
--- a/canon-docs/src/app/(docs)/components/text-field/page.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { TextFieldSnippet } from '@/snippets/stories-snippets';
-import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
-import { inputPropDefs } from './props';
-
-# TextField
-
-A text field component for your forms.
-
-
-
- Usage
- Theming
-
-
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
-
-
-
-## API reference
-
-
- `}
-/>
-
-### With description
-
-Here's a simple TextField with a description.
-
- = {
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: false,
- },
- label: {
- type: 'string',
- },
- description: {
- type: 'string',
- },
- name: {
- type: 'string',
- required: true,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
deleted file mode 100644
index 70d5de5504..0000000000
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { TextSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { Tabs } from '@/components/Tabs';
-import { CodeBlock } from '@/components/CodeBlock';
-import { textPropDefs } from './props';
-
-# Text
-
-The `Text` component is used to display content on your page.
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is in
- the painting?
- `}
-/>
-
-
-
- Usage
- Theming
-
-
-
-
- We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
- your brand. For additional flexibility, you can use the provided class names for each element listed below.
-
-
-
-## API reference
-
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
- `}
-/>
-
-### All weights
-
-The `Text` component has a `weight` prop that can be used to change the
-appearance of the text.
-
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
- `}
-/>
-
-### Responsive
-
-You can also use the `variant` prop to change the appearance of the text based
-on the screen size.
-
-
- Responsive text
- `}
-/>
diff --git a/canon-docs/src/app/(docs)/components/text/props.ts b/canon-docs/src/app/(docs)/components/text/props.ts
deleted file mode 100644
index 53413dc9e7..0000000000
--- a/canon-docs/src/app/(docs)/components/text/props.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {
- childrenPropDefs,
- classNamePropDefs,
- stylePropDefs,
-} from '../../../../utils/propDefs';
-import type { PropDef } from '../../../../utils/propDefs';
-
-export const textPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
- responsive: true,
- },
- weight: {
- type: 'enum',
- values: ['regular', 'bold'],
- responsive: true,
- },
- ...childrenPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
diff --git a/canon-docs/src/app/(docs)/layout.module.css b/canon-docs/src/app/(docs)/layout.module.css
deleted file mode 100644
index fa94ef3a13..0000000000
--- a/canon-docs/src/app/(docs)/layout.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.pageContainer {
- width: 100%;
- max-width: 960px;
- margin: 0 auto;
- padding: 0 24px 64px;
-}
diff --git a/canon-docs/src/app/(docs)/layout.tsx b/canon-docs/src/app/(docs)/layout.tsx
deleted file mode 100644
index 161523bbf5..0000000000
--- a/canon-docs/src/app/(docs)/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Metadata } from 'next';
-
-import styles from './layout.module.css';
-
-export const metadata: Metadata = {
- title: 'Canon',
- description: 'UI library for Backstage',
-};
-
-export default function DocsLayout({
- children,
-}: Readonly<{
- children: React.ReactNode;
-}>) {
- return 
-
-Welcome to the Canon, the new design library for Backstage plugins. This
-project is still under active development but we will make sure to document
-the API as we go. We are aiming to improve the general UI of Backstage and
-plugins across Backstage. This new library will take time to build but we are
-building it incrementally with not conflict with the existing theming system.
-
-## Installation
-
-### 1. Install canon
-
-Install Canon using a package manager.
-
-
- Hello World
-
- ;
-```
-
-## Roadmap
-
-You can check our roadmap [on GitHub](https://github.com/orgs/backstage/projects/10). We'll do our best to keep you updated on the progress.
-
-## Next steps
-
-Now that you have the basics down, you can start building your plugin using the new design system.
-Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.
-If you have any questions, please reach out to us on [Discord](https://discord.gg/MUpMjP2).
diff --git a/canon-docs/src/app/(docs)/releases/page.mdx b/canon-docs/src/app/(docs)/releases/page.mdx
deleted file mode 100644
index e71779e854..0000000000
--- a/canon-docs/src/app/(docs)/releases/page.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-# Releases
-
-## Version 0.3.0
-
-### Main updates
-
-- Add `DataTable` component - ([#29484](https://github.com/backstage/backstage/pull/29484), [#29603](https://github.com/backstage/backstage/pull/29603))
-- Add `Select` component - ([#29440](https://github.com/backstage/backstage/pull/29440))
-- Add `Avatar` component - ([#29594](https://github.com/backstage/backstage/pull/29594))
-- Add `Collapsible` component - ([#29617](https://github.com/backstage/backstage/pull/29617))
-- Add `TextField` component instead of `Field` + `Input` - ([#29364](https://github.com/backstage/backstage/pull/29364))
-- Add `TableCellProfile` - ([#29600](https://github.com/backstage/backstage/pull/29600))
-- Add breakpoint hooks - `up()` and `down()` - ([#29564](https://github.com/backstage/backstage/pull/29564))
-- Add gray scale css tokens - ([#29543](https://github.com/backstage/backstage/pull/29543))
-- Update CSS styling API using `[data-___]` instead of class names for props - ([#29560](https://github.com/backstage/backstage/pull/29560))
-- Update `Checkbox` dark mode - ([#29544](https://github.com/backstage/backstage/pull/29544))
-- Update `Container` styles - ([#29475](https://github.com/backstage/backstage/pull/29475))
-- Update `Menu` styles - ([#29351](https://github.com/backstage/backstage/pull/29351))
-- Fix `Select` styles on small sizes + with long option names - ([#29545](https://github.com/backstage/backstage/pull/29545))
-- Fix render prop on `Link` - ([#29247](https://github.com/backstage/backstage/pull/29247))
-- Remove `Field` from `TextField` + `Select` - ([#29482](https://github.com/backstage/backstage/pull/29482))
-- Update `textDecoration` to `none` on `Text` / `Heading` - ([#29357](https://github.com/backstage/backstage/pull/29357))
-
-### Notable fixes
-
-- Docs - Use stories from Storybook for all examples in Nextjs - ([#29306](https://github.com/backstage/backstage/pull/29306))
-- Docs - Add release page (this one 🤗) - ([#29461](https://github.com/backstage/backstage/pull/29461))
-- Docs - Add docs for Menu, Link - ([#29576](https://github.com/backstage/backstage/pull/29576))
-- Fix CSS watch mode - ([#29352](https://github.com/backstage/backstage/pull/29352))
-
-## Version 0.2.0
-
-### Main updates
-
-- New `Tooltip` component ([#29241](https://github.com/backstage/backstage/pull/29241))
-- New `Menu` component. ([#29151](https://github.com/backstage/backstage/pull/29151))
-- New `IconButton` component. ([#29239](https://github.com/backstage/backstage/pull/29239))
-- New `ScrollArea` component. ([#29240](https://github.com/backstage/backstage/pull/29240))
-- Improve `Button` & `Checkbox` styles. ([#29127](https://github.com/backstage/backstage/pull/29127)) ([#28789](https://github.com/backstage/backstage/pull/28789))
-- Improve `Text` styles. ([#29200](https://github.com/backstage/backstage/pull/29200))
-- Renamed `CanonProvider` to `IconProvider`. ([#29002](https://github.com/backstage/backstage/pull/29002))
-- Added about 40+ new icons. ([#29264](https://github.com/backstage/backstage/pull/29264))
-- Simplified styling into a unique styles.css file ([#29199](https://github.com/backstage/backstage/pull/29199))
-- Added Canon styles to Backstage ([#29137](https://github.com/backstage/backstage/pull/29137))
-- Update global CSS tokens ([#28804](https://github.com/backstage/backstage/pull/28804))
-- Merge Stack + Inline into Flex ([#28634](https://github.com/backstage/backstage/pull/28634))
-
-### Notable fixes:
-
-- Improve `Button` types. ([#29205](https://github.com/backstage/backstage/pull/29205))
-- Move font weight and family back to each components ([#28972](https://github.com/backstage/backstage/pull/28972))
-- Fix custom values in spacing props ([#28770](https://github.com/backstage/backstage/pull/28770))
-- Multiple updates on the Canon Docs site ([#28760](https://github.com/backstage/backstage/pull/28760)) ([#28591](https://github.com/backstage/backstage/pull/28591))
-
-## Version 0.1.0
-
-We're excited to share the initial release of Canon 💚 In this first alpha version, you'll find the foundation of our design system:
-a set of versatile layout components and a handful of essential atomic elements to help you get started. While Canon is still in its
-early stages, it's ready for exploration and we'd love for you to give it a try and share your feedback.
diff --git a/canon-docs/src/app/(docs)/theme/iconography/page.mdx b/canon-docs/src/app/(docs)/theme/iconography/page.mdx
deleted file mode 100644
index b4b1aa2183..0000000000
--- a/canon-docs/src/app/(docs)/theme/iconography/page.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-import { IconLibrary } from '@/components/IconLibrary';
-
-# Iconography
-
-All our default icons are provided by [Remix Icon](https://remixicon.com/). We
-don't import all icons to reduce the bundle size but we cherry pick a nice
-selection for you to use in your application. The list of names is set down
-below. To use an icon, you can use the `Icon` component and pass the name of
-the icon you want to use.
-
-
- Hello World
-
- Project 1
- Project 2
-
-
-`}
-/>
-
-
-
-
- Breakpoint prefix
- Minimum width
- CSS
-
-
-
-
-
- xs
-
-
- 0px
-
-
- {`{ ... }`}
-
-
-
-
- sm
-
-
- 640px
-
-
- {`@media (min-width: 640px) { ... }`}
-
-
-
-
- md
-
-
- 768px
-
-
- {`@media (min-width: 768px) { ... }`}
-
-
-
-
- lg
-
-
- 1024px
-
-
- {`@media (min-width: 1024px) { ... }`}
-
-
-
-
- xl
-
-
- 1280px
-
-
- {`@media (min-width: 1280px) { ... }`}
-
-
-
-
- 2xl
-
-
- 1536px
-
-
- {`@media (min-width: 1536px) { ... }`}
-
-
-
-
-
-## Responsive components
-
-Canon components are designed to be responsive, meaning that they will adapt
-to different screen sizes. Not every component is responsive, but the ones
-that are will have a prop to control the responsive behavior.
-
-The behaviour is the same for each component. For each prop, instead of adding
-the value, you add an object with the value and the breakpoint prefix.
-
-Button
-
-// Responsive value
-
-`} />
diff --git a/canon-docs/src/app/(docs)/theme/typography/page.mdx b/canon-docs/src/app/(docs)/theme/typography/page.mdx
deleted file mode 100644
index 98a342bc91..0000000000
--- a/canon-docs/src/app/(docs)/theme/typography/page.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { HeadingSnippet, TextSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-
-# Typography
-
-Canon offers a suite of typography components designed to seamlessly align
-with the rest of your Backstage instance. While you can customize their
-appearance to match your brand, the underlying API remains consistent and
-unchanged. Each component is built on a responsive structure, allowing you to
-define different typography values for various breakpoints.
-
-## Headings
-
-Headings are used to structure the content of your page. They are used to
-create a hierarchy of information and to make the content more readable. The
-best way to use add these headings to your page is to import the [Heading
-component](?path=/docs/components-heading--docs).
-
-
- Display
- Title 1
- Title 2
- Title 3
- Title 4
- `}
-/>
-
-## Text
-
-Canon provides four distinct text variants, each offering different font sizes
-carefully designed to cover the majority of use cases. These variants are
-versatile and can be paired with regular and bold of font weights. You can use
-the [Text component](?path=/docs/components-text--docs) to add text to your
-page.
-
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
-
- A man looks at a painting in a museum and says, “Brothers and sisters I
- have none, but that man's father is my father's son.” Who is
- in the painting?
-
- `}
-/>
diff --git a/canon-docs/src/app/(playground)/playground/page.tsx b/canon-docs/src/app/(playground)/playground/page.tsx
deleted file mode 100644
index 3f1675551e..0000000000
--- a/canon-docs/src/app/(playground)/playground/page.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-import { Grid, Flex, Text } from '../../../../../packages/canon';
-import { screenSizes } from '@/utils/data';
-import { Frame } from '@/components/Frame';
-import { usePlayground } from '@/utils/playground-context';
-import {
- ButtonSnippet,
- CheckboxSnippet,
- HeadingSnippet,
- TextSnippet,
-} from '@/snippets/stories-snippets';
-
-import styles from './styles.module.css';
-
-export default function PlaygroundPage() {
- const { selectedScreenSizes } = usePlayground();
-
- const filteredScreenSizes = screenSizes.filter(item =>
- selectedScreenSizes.includes(item.slug),
- );
-
- if (filteredScreenSizes.length === 0) {
- return (
-
- {selectedComponents.find(c => c === 'button') && (
-
- );
-};
-
-const Line = ({ content, title }: { content: ReactNode; title: string }) => {
- return (
-
-
- {title}
-
- {content}
-
- );
-};
diff --git a/canon-docs/src/app/(playground)/playground/styles.module.css b/canon-docs/src/app/(playground)/playground/styles.module.css
deleted file mode 100644
index 026e8a1bd4..0000000000
--- a/canon-docs/src/app/(playground)/playground/styles.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.container {
- height: 100vh;
- display: flex;
- flex-direction: row;
- gap: 24px;
- overflow-x: scroll;
-}
-
-.containerEmpty {
- padding: 78px 40px;
-}
-
-.breakpointContainer {
- flex-shrink: 0;
- margin-top: 40px;
- height: calc(100vh - 86px);
- display: flex;
- flex-direction: column;
- gap: 8px;
-
- &:first-child {
- margin-left: 48px;
- }
-
- &:last-child {
- margin-right: 48px;
- }
-}
-
-.breakpointContent {
- height: 100%;
- border-radius: 4px;
- border: 1px solid var(--border);
- background-color: var(--bg);
- padding: 16px;
-}
diff --git a/canon-docs/src/app/icon.svg b/canon-docs/src/app/icon.svg
deleted file mode 100644
index 12cad81e95..0000000000
--- a/canon-docs/src/app/icon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/canon-docs/src/app/layout.tsx b/canon-docs/src/app/layout.tsx
deleted file mode 100644
index b32622e4ae..0000000000
--- a/canon-docs/src/app/layout.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Metadata } from 'next';
-import { Sidebar } from '../components/Sidebar';
-import { Toolbar } from '@/components/Toolbar';
-import { Providers } from './providers';
-import { CustomTheme } from '@/components/CustomTheme';
-import styles from '../css/page.module.css';
-
-import '../css/globals.css';
-import '/public/core.css';
-import '/public/components.css';
-
-export const metadata: Metadata = {
- title: 'Canon',
- description: 'UI library for Backstage',
- metadataBase: new URL('https://canon.backstage.io'),
-};
-
-export default function RootLayout({
- children,
-}: Readonly<{
- children: React.ReactNode;
-}>) {
- return (
-
-
-
-
-
-
- );
-}
diff --git a/canon-docs/src/app/opengraph-image.jpg b/canon-docs/src/app/opengraph-image.jpg
deleted file mode 100644
index 4dc9025ec5..0000000000
Binary files a/canon-docs/src/app/opengraph-image.jpg and /dev/null differ
diff --git a/canon-docs/src/components/Chip/Chip.tsx b/canon-docs/src/components/Chip/Chip.tsx
deleted file mode 100644
index fd9a9f84c3..0000000000
--- a/canon-docs/src/components/Chip/Chip.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { ReactNode } from 'react';
-import styles from './styles.module.css';
-
-export const Chip = ({
- children,
- head = false,
-}: {
- children: ReactNode;
- head?: boolean;
-}) => {
- return (
-
- {children}
-
- );
-};
diff --git a/canon-docs/src/components/Chip/styles.module.css b/canon-docs/src/components/Chip/styles.module.css
deleted file mode 100644
index 44337afb0a..0000000000
--- a/canon-docs/src/components/Chip/styles.module.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.chip {
- display: inline-flex;
- align-items: center;
- font-family: monospace;
- font-size: 13px;
- border-radius: 6px;
- padding: 0px 8px;
- height: 24px;
- margin-right: 4px;
- background-color: #f0f0f0;
- color: #5d5d5d;
- transition: background-color 0.2s ease-in-out;
-}
-
-.head {
- background-color: #eaf2fd;
- color: #2563eb;
-}
-
-[data-theme='dark'] .chip {
- background-color: #2c2c2c;
- color: #fff;
-}
-
-[data-theme='dark'] .chip.head {
- background-color: #26417b;
-}
diff --git a/canon-docs/src/components/CodeBlock/index.tsx b/canon-docs/src/components/CodeBlock/index.tsx
deleted file mode 100644
index 4c0fe72960..0000000000
--- a/canon-docs/src/components/CodeBlock/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { BundledLanguage } from 'shiki';
-import { codeToHtml } from 'shiki';
-import { CodeBlockClient } from './client';
-
-export interface CodeBlockProps {
- lang?: BundledLanguage;
- title?: string;
- code?: string;
-}
-
-export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
- const out = await codeToHtml(code || '', {
- lang: lang,
- themes: {
- light: 'min-light',
- dark: 'min-dark',
- },
- });
-
- return `}
- mountTarget=".frame-root"
- head={
- <>
-
-
-
-
- }
- >
- {children}
-
- );
-};
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
deleted file mode 100644
index be666fc896..0000000000
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-'use client';
-
-import { Text, Icon, icons } from '../../../../packages/canon';
-import type { IconNames } from '../../../../packages/canon';
-import styles from './styles.module.css';
-
-export const IconLibrary = () => {
- const list = Object.keys(icons);
-
- return (
-
- {data.map(section => {
- return (
-
-
- );
- })}
-
- );
-};
diff --git a/canon-docs/src/components/Sidebar/index.tsx b/canon-docs/src/components/Sidebar/index.tsx
deleted file mode 100644
index ad6df68b97..0000000000
--- a/canon-docs/src/components/Sidebar/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import styles from './Sidebar.module.css';
-import { Docs } from './docs';
-import { Playground } from './playground';
-import Link from 'next/link';
-import { ScrollArea } from '@base-ui-components/react/scroll-area';
-
-export const Sidebar = () => {
- return (
-
-
- );
-};
diff --git a/canon-docs/src/components/Table/index.ts b/canon-docs/src/components/Table/index.ts
deleted file mode 100644
index 7419aa83a8..0000000000
--- a/canon-docs/src/components/Table/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table';
diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css
deleted file mode 100644
index 82e744b8b2..0000000000
--- a/canon-docs/src/components/Tabs/styles.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.root {
- margin-top: 40px;
-}
-
-.list {
- display: flex;
- gap: var(--canon-space-6);
- border-bottom: 1px solid var(--border);
- position: relative;
- margin-bottom: var(--canon-space-6);
-}
-
-.tab {
- all: unset;
- cursor: pointer;
- padding-bottom: 8px;
-}
-
-.indicator {
- position: absolute;
- bottom: -1px;
- left: var(--active-tab-left);
- width: var(--active-tab-width);
- height: 1px;
- background-color: var(--primary);
- transition: all 0.2s ease-in-out;
-}
diff --git a/canon-docs/src/components/Toolbar/index.tsx b/canon-docs/src/components/Toolbar/index.tsx
deleted file mode 100644
index eac51f1857..0000000000
--- a/canon-docs/src/components/Toolbar/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ThemeSelector } from './theme';
-import { ThemeNameSelector } from './theme-name';
-import styles from './styles.module.css';
-import { Nav } from './nav';
-
-export const Toolbar = () => {
- return (
-
-
- {
- router.push('/');
- }}
- >
- Documentation
-
- {
- router.push('/playground');
- }}
- >
- Playground
-
-
-
- );
-};
diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css
deleted file mode 100644
index ff85129441..0000000000
--- a/canon-docs/src/components/Toolbar/styles.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.toolbar {
- position: sticky;
- top: 16px;
- left: 0;
- right: 0;
- border-radius: 8px;
- z-index: 10;
- background-color: var(--panel);
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 var(--canon-space-6);
- transition: background-color 0.2s ease-in-out;
- box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
-}
-
-.actions {
- display: flex;
- align-items: center;
- gap: var(--canon-space-4);
-}
diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css
deleted file mode 100644
index ca06762e23..0000000000
--- a/canon-docs/src/components/Toolbar/theme-name.module.css
+++ /dev/null
@@ -1,137 +0,0 @@
-.Select {
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 0.75rem;
- height: 2rem;
- padding-left: 0.875rem;
- padding-right: 0.75rem;
- margin: 0;
- outline: 0;
- border: 1px solid var(--color-gray-200);
- border-radius: 0.375rem;
- font-family: inherit;
- font-size: 1rem;
- line-height: 1.5rem;
- color: var(--color-gray-900);
- cursor: pointer;
- user-select: none;
- background-color: var(--bg);
- transition: background-color 0.2s ease-in-out;
-
- &:focus-visible {
- outline: 2px solid var(--color-blue);
- outline-offset: -1px;
- }
-}
-
-.SelectIcon {
- display: flex;
-}
-
-.SelectValue {
- font-size: var(--canon-font-size-3);
- font-weight: var(--canon-font-weight-regular);
-}
-
-.Positioner {
- z-index: 20;
-}
-
-.Popup {
- box-sizing: border-box;
- padding-block: 0.25rem;
- border-radius: 0.375rem;
- background-color: var(--panel);
- color: var(--color-gray-900);
- border: 1px solid var(--border);
- padding-inline: 0.25rem;
- transform-origin: var(--transform-origin);
- transition: transform 150ms, opacity 150ms;
-
- &[data-starting-style],
- &[data-ending-style] {
- opacity: 0;
- transform: scale(0.9);
- }
-
- &[data-side='none'] {
- transition: none;
- transform: none;
- opacity: 1;
- }
-
- @media (prefers-color-scheme: light) {
- outline: 1px solid var(--color-gray-200);
- box-shadow: 0px 10px 15px -3px var(--color-gray-200),
- 0px 4px 6px -4px var(--color-gray-200);
- }
-
- @media (prefers-color-scheme: dark) {
- outline: 1px solid var(--color-gray-300);
- outline-offset: -1px;
- }
-}
-
-.Item {
- box-sizing: border-box;
- outline: 0;
- font-size: 0.875rem;
- line-height: 1rem;
- padding-block: 0.5rem;
- padding-left: 0.625rem;
- padding-right: 1rem;
- font-size: var(--canon-font-size-3);
- font-weight: var(--canon-font-weight-bold);
- display: grid;
- gap: 0.5rem;
- align-items: center;
- grid-template-columns: 0.75rem 1fr;
- cursor: default;
- user-select: none;
- border-radius: 0.25rem;
- cursor: pointer;
- transition: background-color 0.2s ease-in-out;
-
- [data-side='none'] & {
- font-size: 1rem;
- padding-right: 3rem;
- min-width: calc(var(--anchor-width) + 1rem);
- }
-
- &[data-highlighted] {
- z-index: 0;
- position: relative;
- color: var(--color-gray-50);
- background-color: var(--bg);
- }
-
- &[data-highlighted]::before {
- content: '';
- z-index: -1;
- position: absolute;
- inset-block: 0;
- inset-inline: 0.25rem;
- border-radius: 0.25rem;
- background-color: var(--color-gray-900);
- }
-}
-
-.ItemIndicator {
- grid-column-start: 1;
- width: 1rem;
- height: 1rem;
- display: flex;
- align-items: center;
-}
-
-.ItemIndicatorIcon {
- display: block;
- width: 0.75rem;
- height: 0.75rem;
-}
-
-.ItemText {
- grid-column-start: 2;
-}
diff --git a/canon-docs/src/components/Toolbar/theme-name.tsx b/canon-docs/src/components/Toolbar/theme-name.tsx
deleted file mode 100644
index 277ecad9df..0000000000
--- a/canon-docs/src/components/Toolbar/theme-name.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import { Select } from '@base-ui-components/react/select';
-import styles from './theme-name.module.css';
-import { Icon } from '@backstage/canon';
-import { usePlayground } from '@/utils/playground-context';
-
-const themes = [
- { name: 'Backstage', value: 'default' },
- { name: 'Custom theme', value: 'custom' },
-];
-
-export const ThemeNameSelector = () => {
- const { selectedThemeName, setSelectedThemeName } = usePlayground();
-
- return (
-
-
-
-
-
-
-
-
- {themes.map(({ name, value }) => (
-
-
-
-
- {name}
-
-
- ))}
-
-
-
-
- );
-};
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
deleted file mode 100644
index 37ccb25249..0000000000
--- a/canon-docs/src/components/Toolbar/theme.module.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.tabs {
- border-radius: 0.375rem;
- width: 100%;
- background-color: var(--bg);
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-}
-
-.tabsTheme {
- width: 100px;
- border-radius: 0.375rem;
- background-color: var(--bg);
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-}
-
-.list {
- display: flex;
- position: relative;
- z-index: 0;
- padding-inline: 0.25rem;
- gap: 0.25rem;
-}
-
-.tab {
- display: flex;
- align-items: center;
- justify-content: center;
- border: 0;
- margin: 0;
- outline: 0;
- background: none;
- appearance: none;
- color: var(--secondary);
- user-select: none;
- height: 2rem;
- flex: 1;
- cursor: pointer;
-
- &[data-selected] {
- color: var(--primary);
-
- & p {
- color: var(--primary);
- }
- }
-
- @media (hover: hover) {
- &:hover {
- color: var(--primary);
- }
- }
-
- &:focus-visible {
- position: relative;
-
- &::before {
- content: '';
- position: absolute;
- inset: 0.25rem 0;
- border-radius: 0.25rem;
- outline: 2px solid var(--panel);
- outline-offset: -1px;
- }
- }
-}
-
-.tab p {
- color: var(--secondary) !important;
-}
-
-.indicator {
- position: absolute;
- z-index: -1;
- left: 0;
- top: 50%;
- translate: var(--active-tab-left) -50%;
- width: var(--active-tab-width);
- height: 1.5rem;
- border-radius: 0.25rem;
- background-color: var(--panel);
- transition-property: translate, width, background-color;
- transition-duration: 200ms;
- transition-timing-function: ease-in-out;
-}
diff --git a/canon-docs/src/components/Toolbar/theme.tsx b/canon-docs/src/components/Toolbar/theme.tsx
deleted file mode 100644
index 94224048ea..0000000000
--- a/canon-docs/src/components/Toolbar/theme.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { Tabs } from '@base-ui-components/react/tabs';
-import { Icon } from '@backstage/canon';
-import { usePlayground } from '@/utils/playground-context';
-import styles from './theme.module.css';
-
-export const ThemeSelector = () => {
- const { selectedTheme, setSelectedTheme } = usePlayground();
-
- return (
-
-
-
-
-
-
-
-
- );
-};
diff --git a/canon-docs/src/css/page.module.css b/canon-docs/src/css/page.module.css
deleted file mode 100644
index 3a0bb492d8..0000000000
--- a/canon-docs/src/css/page.module.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.global {
- width: 100%;
-}
-
-.container {
- width: 100%;
- padding: 0 16px;
-}
-
-@media (min-width: 768px) {
- .container {
- padding-left: 332px;
- }
-}
-
-.page {
- flex: 1;
-}
-
-.page p {
- color: var(--primary);
- font-size: 1rem;
- line-height: 1.5rem;
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-.content {
- width: 100%;
- max-width: 960px;
- margin: 0 auto;
- padding: 64px 24px 64px;
-}
-
-.header {
- width: 100%;
- margin-bottom: 64px;
-}
-
-.header img {
- width: 100%;
- height: auto;
-}
-
-.pageContainer {
- width: 100%;
- max-width: 960px;
- margin: 0 auto;
- padding: 0 24px 64px;
-}
diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx
deleted file mode 100644
index 22b389a641..0000000000
--- a/canon-docs/src/mdx-components.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { isValidElement, ReactNode } from 'react';
-import type { MDXComponents } from 'mdx/types';
-import Image, { ImageProps } from 'next/image';
-import { CodeBlock } from '@/components/CodeBlock';
-import styles from './css/mdx.module.css';
-
-export function useMDXComponents(components: MDXComponents): MDXComponents {
- return {
- h1: ({ children }) => (
- {children as ReactNode}
- ),
- pre: ({ children }) => {
- const codeContent = isValidElement(children)
- ? (children.props as { children: string }).children
- : '';
-
- return
-
-`;
-
-export const buttonVariants = `
-
-
-
-
-`;
-
-export const iconButtonVariants = `
-
-`;
-
-export const flexFAQ1 = `
- Hello World
- Hello World
- Hello World
- `;
-
-export const flexSimple = `
- Hello World
- Hello World
- Hello World
- `;
-
-export const flexResponsive = `
- Hello World
- Hello World
- Hello World
- `;
-
-export const flexAlign = `
- Hello World
- Hello World
- Hello World
- `;
diff --git a/canon-docs/src/snippets/stories-snippets.tsx b/canon-docs/src/snippets/stories-snippets.tsx
deleted file mode 100644
index 75ee2e31c3..0000000000
--- a/canon-docs/src/snippets/stories-snippets.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
-import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
-import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
-import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
-import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
-import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
-import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
-import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
-import * as TextFieldStories from '../../../packages/canon/src/components/TextField/TextField.stories';
-import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
-import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
-import * as SelectStories from '../../../packages/canon/src/components/Select/Select.stories';
-import * as MenuStories from '../../../packages/canon/src/components/Menu/Menu.stories';
-import * as LinkStories from '../../../packages/canon/src/components/Link/Link.stories';
-import * as AvatarStories from '../../../packages/canon/src/components/Avatar/Avatar.stories';
-import * as CollapsibleStories from '../../../packages/canon/src/components/Collapsible/Collapsible.stories';
-
-export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
- const stories = composeStories(BoxStories);
- const StoryComponent = stories[story as keyof typeof stories];
-
- return StoryComponent ? {
+ return this.#read.getEntities(request, options);
+ }
+
+ getEntitiesByRefs(
+ request: GetEntitiesByRefsRequest,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getEntitiesByRefs(request, options);
+ }
+
+ queryEntities(
+ request?: QueryEntitiesRequest,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.queryEntities(request, options);
+ }
+
+ getEntityAncestors(
+ request: GetEntityAncestorsRequest,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getEntityAncestors(request, options);
+ }
+
+ getEntityByRef(
+ entityRef: string | CompoundEntityRef,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getEntityByRef(entityRef, options);
+ }
+
+ removeEntityByUid(
+ uid: string,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#write.removeEntityByUid(uid, options);
+ }
+
+ refreshEntity(
+ entityRef: string,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#write.refreshEntity(entityRef, options);
+ }
+
+ getEntityFacets(
+ request: GetEntityFacetsRequest,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getEntityFacets(request, options);
+ }
+
+ getLocations(
+ request?: {},
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getLocations(request, options);
+ }
+
+ getLocationById(
+ id: string,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getLocationById(id, options);
+ }
+
+ getLocationByRef(
+ locationRef: string,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getLocationByRef(locationRef, options);
+ }
+
+ addLocation(
+ location: AddLocationRequest,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#write.addLocation(location, options);
+ }
+
+ removeLocationById(
+ id: string,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#write.removeLocationById(id, options);
+ }
+
+ getLocationByEntity(
+ entityRef: string | CompoundEntityRef,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#read.getLocationByEntity(entityRef, options);
+ }
+
+ validateEntity(
+ entity: Entity,
+ locationRef: string,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#write.validateEntity(entity, locationRef, options);
+ }
+
+ analyzeLocation(
+ location: AnalyzeLocationRequest,
+ options?: CatalogRequestOptions,
+ ): Promise {
+ return this.#write.analyzeLocation(location, options);
+ }
+}
+
+// You should pass this to createApp.
+export const catalogApiFactory = createApiFactory({
+ api: catalogApiRef,
+ deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
+ factory: ({ discoveryApi, fetchApi }) => {
+ return new ReadWriteSplitCatalogClient({
+ discoveryApi,
+ fetchApi,
+ });
+ },
+});
diff --git a/contrib/catalog/read-write-split/workspace/packages/backend/src/catalogService.ts b/contrib/catalog/read-write-split/workspace/packages/backend/src/catalogService.ts
new file mode 100644
index 0000000000..44119947e6
--- /dev/null
+++ b/contrib/catalog/read-write-split/workspace/packages/backend/src/catalogService.ts
@@ -0,0 +1,245 @@
+import {
+ AuthService,
+ coreServices,
+ createServiceFactory,
+ DiscoveryService,
+} from '@backstage/backend-plugin-api';
+import {
+ AddLocationRequest,
+ AddLocationResponse,
+ CatalogApi,
+ CatalogClient,
+ CatalogRequestOptions,
+ GetEntitiesByRefsRequest,
+ GetEntitiesByRefsResponse,
+ GetEntitiesRequest,
+ GetEntitiesResponse,
+ GetEntityAncestorsRequest,
+ GetEntityAncestorsResponse,
+ GetEntityFacetsRequest,
+ GetEntityFacetsResponse,
+ GetLocationsResponse,
+ Location,
+ QueryEntitiesRequest,
+ QueryEntitiesResponse,
+ ValidateEntityResponse,
+} from '@backstage/catalog-client';
+import { CompoundEntityRef, Entity } from '@backstage/catalog-model';
+import {
+ AnalyzeLocationRequest,
+ AnalyzeLocationResponse,
+} from '@backstage/plugin-catalog-common';
+import {
+ CatalogService,
+ CatalogServiceRequestOptions,
+ catalogServiceRef,
+} from '@backstage/plugin-catalog-node';
+
+/**
+ * Implements the catalog client for backends, by using a custom service
+ * discovery to achieve read/write segregation.
+ */
+export class ReadWriteSplitCatalogService implements CatalogService {
+ readonly #auth: AuthService;
+ readonly #catalogRead: CatalogApi;
+ readonly #catalogWrite: CatalogApi;
+
+ constructor(options: { auth: AuthService; discovery: DiscoveryService }) {
+ this.#auth = options.auth;
+ this.#catalogRead = new CatalogClient({
+ discoveryApi: {
+ // This uses the normal "catalog" plugin ID
+ getBaseUrl: () => options.discovery.getBaseUrl('catalog'),
+ },
+ });
+ this.#catalogWrite = new CatalogClient({
+ discoveryApi: {
+ // This uses the made-up "catalog-write" plugin ID (see app-config.yaml
+ // which defines a custom discovery endpoint for this)
+ getBaseUrl: () => options.discovery.getBaseUrl('catalog-write'),
+ },
+ });
+ }
+
+ async getEntities(
+ request: GetEntitiesRequest | undefined,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getEntities(
+ request,
+ await this.#getOptions(options),
+ );
+ }
+
+ async getEntitiesByRefs(
+ request: GetEntitiesByRefsRequest,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getEntitiesByRefs(
+ request,
+ await this.#getOptions(options),
+ );
+ }
+
+ async queryEntities(
+ request: QueryEntitiesRequest | undefined,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.queryEntities(
+ request,
+ await this.#getOptions(options),
+ );
+ }
+
+ async getEntityAncestors(
+ request: GetEntityAncestorsRequest,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getEntityAncestors(
+ request,
+ await this.#getOptions(options),
+ );
+ }
+
+ async getEntityByRef(
+ entityRef: string | CompoundEntityRef,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getEntityByRef(
+ entityRef,
+ await this.#getOptions(options),
+ );
+ }
+
+ async removeEntityByUid(
+ uid: string,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogWrite.removeEntityByUid(
+ uid,
+ await this.#getOptions(options),
+ );
+ }
+
+ async refreshEntity(
+ entityRef: string,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogWrite.refreshEntity(
+ entityRef,
+ await this.#getOptions(options),
+ );
+ }
+
+ async getEntityFacets(
+ request: GetEntityFacetsRequest,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getEntityFacets(
+ request,
+ await this.#getOptions(options),
+ );
+ }
+
+ async getLocations(
+ options: CatalogRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getLocations(options);
+ }
+
+ async getLocationById(
+ id: string,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getLocationById(
+ id,
+ await this.#getOptions(options),
+ );
+ }
+
+ async getLocationByRef(
+ locationRef: string,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getLocationByRef(
+ locationRef,
+ await this.#getOptions(options),
+ );
+ }
+
+ async addLocation(
+ location: AddLocationRequest,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogWrite.addLocation(
+ location,
+ await this.#getOptions(options),
+ );
+ }
+
+ async removeLocationById(
+ id: string,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogWrite.removeLocationById(
+ id,
+ await this.#getOptions(options),
+ );
+ }
+
+ async getLocationByEntity(
+ entityRef: string | CompoundEntityRef,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogRead.getLocationByEntity(
+ entityRef,
+ await this.#getOptions(options),
+ );
+ }
+
+ async validateEntity(
+ entity: Entity,
+ locationRef: string,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogWrite.validateEntity(
+ entity,
+ locationRef,
+ await this.#getOptions(options),
+ );
+ }
+
+ async analyzeLocation(
+ location: AnalyzeLocationRequest,
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#catalogWrite.analyzeLocation(
+ location,
+ await this.#getOptions(options),
+ );
+ }
+
+ async #getOptions(
+ options: CatalogServiceRequestOptions,
+ ): Promise {
+ return this.#auth.getPluginRequestToken({
+ onBehalfOf: options.credentials,
+ targetPluginId: 'catalog',
+ });
+ }
+}
+
+// You should register this in your backend.
+export const catalogService = createServiceFactory({
+ service: catalogServiceRef,
+ deps: {
+ auth: coreServices.auth,
+ discovery: coreServices.discovery,
+ },
+ async factory({ auth, discovery }) {
+ return new ReadWriteSplitCatalogService({
+ auth,
+ discovery,
+ });
+ },
+});
diff --git a/contrib/catalog/read-write-split/workspace/packages/backend/src/index.ts b/contrib/catalog/read-write-split/workspace/packages/backend/src/index.ts
new file mode 100644
index 0000000000..0d8e9e41d9
--- /dev/null
+++ b/contrib/catalog/read-write-split/workspace/packages/backend/src/index.ts
@@ -0,0 +1,34 @@
+import { createBackend } from '@backstage/backend-defaults';
+import {
+ coreServices,
+ createBackendFeatureLoader,
+} from '@backstage/backend-plugin-api';
+import { catalogService } from './catalogService';
+
+const backend = createBackend();
+
+backend.add(import('@backstage/plugin-catalog-backend'));
+backend.add(catalogService);
+// Here at the root level, you can add more features that you want to apply to
+// BOTH the read and write nodes, as needed.
+
+backend.add(
+ createBackendFeatureLoader({
+ deps: { config: coreServices.rootConfig },
+ async *loader({ config }) {
+ if (config.getString('catalog.role') !== 'write') {
+ return;
+ }
+
+ // Here inside the loader, you can add more features that you want to
+ // apply to ONLY the write nodes, as needed. This is where providers and
+ // processors go, for example. The incremental ingestion provider line
+ // below is just an example.
+ yield import(
+ '@backstage/plugin-catalog-backend-module-incremental-ingestion'
+ );
+ },
+ }),
+);
+
+backend.start();
diff --git a/contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild b/contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild
index 47fd506a34..6c87681391 100644
--- a/contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild
+++ b/contrib/docker/frontend-with-nginx/Dockerfile.dockerbuild
@@ -6,7 +6,7 @@
# This dockerfile also performs the build first inside docker. This may come
# with a build time impact, but is sometimes desirable. If you want to run the
-# build on the host instead, use the file simply named Dockerfile in this folder
+# build on the host instead, use the file simply named Dockerfile.hostbuild in this folder
# instead.
# USAGE:
diff --git a/docker-compose.deps.yml b/docker-compose.deps.yml
new file mode 100644
index 0000000000..c7515eca04
--- /dev/null
+++ b/docker-compose.deps.yml
@@ -0,0 +1,39 @@
+#!/usr/bin/env docker compose -f
+name: backstage
+services:
+ psql:
+ image: postgres:17.6
+ environment:
+ POSTGRES_USER: postgres
+ POSTGRES_PASSWORD: postgres
+ ports:
+ - '5432:5432'
+ healthcheck:
+ test: ['CMD-SHELL', 'pg_isready']
+ interval: 10s
+ retries: 5
+ start_period: 30s
+ timeout: 10s
+ redis:
+ image: redis:8.2.1-alpine
+ ports:
+ - '6379:6379'
+ healthcheck:
+ test: ['CMD-SHELL', 'redis-cli ping | grep PONG']
+ interval: 1s
+ timeout: 3s
+ retries: 5
+ opensearch:
+ image: opensearchproject/opensearch:2.19.3
+ environment:
+ plugins.security.disabled: true
+ discovery.type: single-node
+ OPENSEARCH_INITIAL_ADMIN_PASSWORD: Opensearch1!
+ ports:
+ - '9200:9200'
+ - '9600:9600'
+ healthcheck:
+ test: 'curl --fail opensearch:9200/_cat/health >/dev/null || exit 1'
+ interval: 5s
+ timeout: 5s
+ retries: 30
diff --git a/canon-docs/.eslintrc.json b/docs-ui/.eslintrc.json
similarity index 100%
rename from canon-docs/.eslintrc.json
rename to docs-ui/.eslintrc.json
diff --git a/canon-docs/.gitignore b/docs-ui/.gitignore
similarity index 100%
rename from canon-docs/.gitignore
rename to docs-ui/.gitignore
diff --git a/canon-docs/README.md b/docs-ui/README.md
similarity index 60%
rename from canon-docs/README.md
rename to docs-ui/README.md
index d91076c4cd..41b9921413 100644
--- a/canon-docs/README.md
+++ b/docs-ui/README.md
@@ -1,6 +1,6 @@
-# Canon Docs
+# Backstage UI Docs
-Canon is our internal UI library built for Backstage. We built this website to document the library and its components. You can view this website [here](https://canon.backstage.io).
+Backstage UI is our internal UI library built for Backstage. We built this website to document the library and its components. You can view this website [here](https://ui.backstage.io).
## How to run locally
diff --git a/docs-ui/next.config.mjs b/docs-ui/next.config.mjs
new file mode 100644
index 0000000000..2ff341b609
--- /dev/null
+++ b/docs-ui/next.config.mjs
@@ -0,0 +1,26 @@
+import createMDX from '@next/mdx';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const nextConfig = {
+ pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+ output: 'export',
+ assetPrefix: '/',
+ distDir: 'dist',
+ images: {
+ unoptimized: true,
+ },
+ typescript: {
+ // Ignore TypeScript errors during build - safe for React 18/19 compatibility issues
+ // These are type-level conflicts that don't affect runtime behavior
+ ignoreBuildErrors: true,
+ },
+ outputFileTracingRoot: path.join(
+ path.dirname(fileURLToPath(import.meta.url)),
+ '..',
+ ),
+};
+
+const withMDX = createMDX({});
+
+export default withMDX(nextConfig);
diff --git a/docs-ui/package.json b/docs-ui/package.json
new file mode 100644
index 0000000000..75b79d1000
--- /dev/null
+++ b/docs-ui/package.json
@@ -0,0 +1,52 @@
+{
+ "name": "docs-ui",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "prebuild": "yarn sync:css",
+ "build": "next build",
+ "lint": "next lint",
+ "prestart": "yarn sync:css",
+ "start": "next dev",
+ "sync:css": "node scripts/sync-css.js",
+ "sync:css:watch": "node scripts/sync-css.js --watch"
+ },
+ "resolutions": {
+ "@types/react": "19.1.9",
+ "@types/react-dom": "19.1.7"
+ },
+ "dependencies": {
+ "@codemirror/lang-sass": "^6.0.2",
+ "@codemirror/view": "^6.34.4",
+ "@lezer/highlight": "^1.2.1",
+ "@mdx-js/loader": "^3.1.0",
+ "@mdx-js/react": "^3.1.0",
+ "@next/mdx": "15.3.4",
+ "@remixicon/react": "^4.6.0",
+ "@storybook/react": "^8.6.12",
+ "@uiw/codemirror-themes": "^4.23.7",
+ "@uiw/react-codemirror": "^4.23.7",
+ "clsx": "^2.1.1",
+ "html-react-parser": "^5.2.5",
+ "motion": "^12.4.1",
+ "next": "15.4.7",
+ "next-mdx-remote-client": "^2.1.2",
+ "prop-types": "^15.8.1",
+ "react": "19.1.1",
+ "react-dom": "19.1.1",
+ "shiki": "^3.13.0",
+ "storybook": "^8.6.12"
+ },
+ "devDependencies": {
+ "@shikijs/transformers": "^3.13.0",
+ "@types/mdx": "^2.0.13",
+ "@types/node": "^20",
+ "@types/react": "19.1.9",
+ "@types/react-dom": "19.1.7",
+ "chokidar": "^3.6.0",
+ "eslint": "^8",
+ "eslint-config-next": "15.3.4",
+ "lightningcss": "^1.28.2",
+ "typescript": "^5"
+ }
+}
diff --git a/canon-docs/public/.nojekyll b/docs-ui/public/.nojekyll
similarity index 100%
rename from canon-docs/public/.nojekyll
rename to docs-ui/public/.nojekyll
diff --git a/docs-ui/public/CNAME b/docs-ui/public/CNAME
new file mode 100644
index 0000000000..21060e506a
--- /dev/null
+++ b/docs-ui/public/CNAME
@@ -0,0 +1 @@
+ui.backstage.io
diff --git a/docs-ui/public/css-classname-structure.png b/docs-ui/public/css-classname-structure.png
new file mode 100644
index 0000000000..c241b182cc
Binary files /dev/null and b/docs-ui/public/css-classname-structure.png differ
diff --git a/docs-ui/public/theme-backstage.css b/docs-ui/public/theme-backstage.css
new file mode 100644
index 0000000000..59a5b986be
--- /dev/null
+++ b/docs-ui/public/theme-backstage.css
@@ -0,0 +1 @@
+@layer tokens{:root{--bui-font-regular:system-ui;--bui-font-monospace:ui-monospace,"Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;--bui-font-weight-regular:400;--bui-font-weight-bold:600;--bui-font-size-1:.625rem;--bui-font-size-2:.75rem;--bui-font-size-3:.875rem;--bui-font-size-4:1rem;--bui-font-size-5:1.25rem;--bui-font-size-6:1.5rem;--bui-font-size-7:2rem;--bui-font-size-8:3rem;--bui-font-size-9:4rem;--bui-font-size-10:5.75rem;--bui-space:.25rem;--bui-space-0_5:calc(var(--bui-space)*.5);--bui-space-1:var(--bui-space);--bui-space-1_5:calc(var(--bui-space)*1.5);--bui-space-2:calc(var(--bui-space)*2);--bui-space-3:calc(var(--bui-space)*3);--bui-space-4:calc(var(--bui-space)*4);--bui-space-5:calc(var(--bui-space)*5);--bui-space-6:calc(var(--bui-space)*6);--bui-space-7:calc(var(--bui-space)*7);--bui-space-8:calc(var(--bui-space)*8);--bui-space-9:calc(var(--bui-space)*9);--bui-space-10:calc(var(--bui-space)*10);--bui-space-11:calc(var(--bui-space)*11);--bui-space-12:calc(var(--bui-space)*12);--bui-space-13:calc(var(--bui-space)*13);--bui-space-14:calc(var(--bui-space)*14);--bui-radius-1:calc(.125rem);--bui-radius-2:calc(.25rem);--bui-radius-3:calc(.5rem);--bui-radius-4:calc(.75rem);--bui-radius-5:calc(1rem);--bui-radius-6:calc(1.25rem);--bui-radius-full:9999px;--bui-black:#000;--bui-white:#fff;--bui-gray-1:#f8f8f8;--bui-gray-2:#ececec;--bui-gray-3:#d9d9d9;--bui-gray-4:#c1c1c1;--bui-gray-5:#9e9e9e;--bui-gray-6:#8c8c8c;--bui-gray-7:#757575;--bui-gray-8:#595959;--bui-bg:var(--bui-gray-1);--bui-bg-surface-1:var(--bui-white);--bui-bg-surface-2:var(--bui-gray-2);--bui-bg-solid:#1f5493;--bui-bg-solid-hover:#163a66;--bui-bg-solid-pressed:#0f2b4e;--bui-bg-solid-disabled:#ebebeb;--bui-bg-tint:transparent;--bui-bg-tint-hover:#1f549366;--bui-bg-tint-pressed:#1f549399;--bui-bg-tint-disabled:#ebebeb;--bui-bg-danger:#feebe7;--bui-bg-warning:#fff2b2;--bui-bg-success:#e6f6eb;--bui-fg-primary:var(--bui-black);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:#1f5493;--bui-fg-link-hover:#1f2d5c;--bui-fg-disabled:#9e9e9e;--bui-fg-solid:var(--bui-white);--bui-fg-solid-disabled:#9c9c9c;--bui-fg-tint:#1f5493;--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#e22b2b;--bui-fg-warning:#e36d05;--bui-fg-success:#1db954;--bui-border:#0000001a;--bui-border-hover:#0003;--bui-border-pressed:#0006;--bui-border-disabled:#0000001a;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#1f5493;--bui-scrollbar:#a0a0a03b;--bui-scrollbar-thumb:#a0a0a0;--bui-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite}[data-theme-mode=dark]{--bui-gray-1:#191919;--bui-gray-2:#242424;--bui-gray-3:#373737;--bui-gray-4:#464646;--bui-gray-5:#575757;--bui-gray-6:#7b7b7b;--bui-gray-7:#9e9e9e;--bui-gray-8:#b4b4b4;--bui-bg:#333;--bui-bg-surface-1:#424242;--bui-bg-surface-2:var(--bui-gray-2);--bui-bg-solid:#9cc9ff;--bui-bg-solid-hover:#83b9fd;--bui-bg-solid-pressed:#83b9fd;--bui-bg-solid-disabled:#222;--bui-bg-tint:transparent;--bui-bg-tint-hover:#9cc9ff1f;--bui-bg-tint-pressed:#9cc9ff29;--bui-bg-tint-disabled:transparent;--bui-bg-danger:#3b1219;--bui-bg-warning:#302008;--bui-bg-success:#132d21;--bui-fg-primary:var(--bui-white);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:#9cc9ff;--bui-fg-link-hover:#7eb5f7;--bui-fg-disabled:var(--bui-gray-7);--bui-fg-solid:#101821;--bui-fg-solid-disabled:var(--bui-gray-5);--bui-fg-tint:#9cc9ff;--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#e22b2b;--bui-fg-warning:#e36d05;--bui-fg-success:#1db954;--bui-border:#ffffff1f;--bui-border-hover:#fff6;--bui-border-pressed:#ffffff80;--bui-border-disabled:#fff3;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#1f5493;--bui-scrollbar:#3636363a;--bui-scrollbar-thumb:#575757}}@layer base{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:where(a){color:inherit;text-decoration:none}@keyframes pulse{50%{opacity:.5}}body{background-color:var(--bui-bg);color:var(--bui-fg-primary);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular);font-size:var(--bui-font-size-3);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@layer components;@layer utilities{.bui-p{padding:var(--p)}.bui-p-0\.5{padding:var(--bui-space-0_5)}.bui-p-1{padding:var(--bui-space-1)}.bui-p-1\.5{padding:var(--bui-space-1_5)}.bui-p-2{padding:var(--bui-space-2)}.bui-p-3{padding:var(--bui-space-3)}.bui-p-4{padding:var(--bui-space-4)}.bui-p-5{padding:var(--bui-space-5)}.bui-p-6{padding:var(--bui-space-6)}.bui-p-7{padding:var(--bui-space-7)}.bui-p-8{padding:var(--bui-space-8)}.bui-p-9{padding:var(--bui-space-9)}.bui-p-10{padding:var(--bui-space-10)}.bui-p-11{padding:var(--bui-space-11)}.bui-p-12{padding:var(--bui-space-12)}.bui-p-13{padding:var(--bui-space-13)}.bui-p-14{padding:var(--bui-space-14)}@media (width>=640px){.xs\:bui-p{padding:var(--p-xs)}.xs\:bui-p-0\.5{padding:var(--bui-space-0_5)}.xs\:bui-p-1{padding:var(--bui-space-1)}.xs\:bui-p-1\.5{padding:var(--bui-space-1_5)}.xs\:bui-p-2{padding:var(--bui-space-2)}.xs\:bui-p-3{padding:var(--bui-space-3)}.xs\:bui-p-4{padding:var(--bui-space-4)}.xs\:bui-p-5{padding:var(--bui-space-5)}.xs\:bui-p-6{padding:var(--bui-space-6)}.xs\:bui-p-7{padding:var(--bui-space-7)}.xs\:bui-p-8{padding:var(--bui-space-8)}.xs\:bui-p-9{padding:var(--bui-space-9)}.xs\:bui-p-10{padding:var(--bui-space-10)}.xs\:bui-p-11{padding:var(--bui-space-11)}.xs\:bui-p-12{padding:var(--bui-space-12)}.xs\:bui-p-13{padding:var(--bui-space-13)}.xs\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-p{padding:var(--p-sm)}.sm\:bui-p-0\.5{padding:var(--bui-space-0_5)}.sm\:bui-p-1{padding:var(--bui-space-1)}.sm\:bui-p-1\.5{padding:var(--bui-space-1_5)}.sm\:bui-p-2{padding:var(--bui-space-2)}.sm\:bui-p-3{padding:var(--bui-space-3)}.sm\:bui-p-4{padding:var(--bui-space-4)}.sm\:bui-p-5{padding:var(--bui-space-5)}.sm\:bui-p-6{padding:var(--bui-space-6)}.sm\:bui-p-7{padding:var(--bui-space-7)}.sm\:bui-p-8{padding:var(--bui-space-8)}.sm\:bui-p-9{padding:var(--bui-space-9)}.sm\:bui-p-10{padding:var(--bui-space-10)}.sm\:bui-p-11{padding:var(--bui-space-11)}.sm\:bui-p-12{padding:var(--bui-space-12)}.sm\:bui-p-13{padding:var(--bui-space-13)}.sm\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-p{padding:var(--p-md)}.md\:bui-p-0\.5{padding:var(--bui-space-0_5)}.md\:bui-p-1{padding:var(--bui-space-1)}.md\:bui-p-1\.5{padding:var(--bui-space-1_5)}.md\:bui-p-2{padding:var(--bui-space-2)}.md\:bui-p-3{padding:var(--bui-space-3)}.md\:bui-p-4{padding:var(--bui-space-4)}.md\:bui-p-5{padding:var(--bui-space-5)}.md\:bui-p-6{padding:var(--bui-space-6)}.md\:bui-p-7{padding:var(--bui-space-7)}.md\:bui-p-8{padding:var(--bui-space-8)}.md\:bui-p-9{padding:var(--bui-space-9)}.md\:bui-p-10{padding:var(--bui-space-10)}.md\:bui-p-11{padding:var(--bui-space-11)}.md\:bui-p-12{padding:var(--bui-space-12)}.md\:bui-p-13{padding:var(--bui-space-13)}.md\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-p{padding:var(--p-lg)}.lg\:bui-p-0\.5{padding:var(--bui-space-0_5)}.lg\:bui-p-1{padding:var(--bui-space-1)}.lg\:bui-p-1\.5{padding:var(--bui-space-1_5)}.lg\:bui-p-2{padding:var(--bui-space-2)}.lg\:bui-p-3{padding:var(--bui-space-3)}.lg\:bui-p-4{padding:var(--bui-space-4)}.lg\:bui-p-5{padding:var(--bui-space-5)}.lg\:bui-p-6{padding:var(--bui-space-6)}.lg\:bui-p-7{padding:var(--bui-space-7)}.lg\:bui-p-8{padding:var(--bui-space-8)}.lg\:bui-p-9{padding:var(--bui-space-9)}.lg\:bui-p-10{padding:var(--bui-space-10)}.lg\:bui-p-11{padding:var(--bui-space-11)}.lg\:bui-p-12{padding:var(--bui-space-12)}.lg\:bui-p-13{padding:var(--bui-space-13)}.lg\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-p{padding:var(--p-xl)}.xl\:bui-p-0\.5{padding:var(--bui-space-0_5)}.xl\:bui-p-1{padding:var(--bui-space-1)}.xl\:bui-p-1\.5{padding:var(--bui-space-1_5)}.xl\:bui-p-2{padding:var(--bui-space-2)}.xl\:bui-p-3{padding:var(--bui-space-3)}.xl\:bui-p-4{padding:var(--bui-space-4)}.xl\:bui-p-5{padding:var(--bui-space-5)}.xl\:bui-p-6{padding:var(--bui-space-6)}.xl\:bui-p-7{padding:var(--bui-space-7)}.xl\:bui-p-8{padding:var(--bui-space-8)}.xl\:bui-p-9{padding:var(--bui-space-9)}.xl\:bui-p-10{padding:var(--bui-space-10)}.xl\:bui-p-11{padding:var(--bui-space-11)}.xl\:bui-p-12{padding:var(--bui-space-12)}.xl\:bui-p-13{padding:var(--bui-space-13)}.xl\:bui-p-14{padding:var(--bui-space-14)}}.bui-pl{padding-left:var(--pl)}.bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.bui-pl-1{padding-left:var(--bui-space-1)}.bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.bui-pl-2{padding-left:var(--bui-space-2)}.bui-pl-3{padding-left:var(--bui-space-3)}.bui-pl-4{padding-left:var(--bui-space-4)}.bui-pl-5{padding-left:var(--bui-space-5)}.bui-pl-6{padding-left:var(--bui-space-6)}.bui-pl-7{padding-left:var(--bui-space-7)}.bui-pl-8{padding-left:var(--bui-space-8)}.bui-pl-9{padding-left:var(--bui-space-9)}.bui-pl-10{padding-left:var(--bui-space-10)}.bui-pl-11{padding-left:var(--bui-space-11)}.bui-pl-12{padding-left:var(--bui-space-12)}.bui-pl-13{padding-left:var(--bui-space-13)}.bui-pl-14{padding-left:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pl{padding-left:var(--pl-xs)}.xs\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.xs\:bui-pl-1{padding-left:var(--bui-space-1)}.xs\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.xs\:bui-pl-2{padding-left:var(--bui-space-2)}.xs\:bui-pl-3{padding-left:var(--bui-space-3)}.xs\:bui-pl-4{padding-left:var(--bui-space-4)}.xs\:bui-pl-5{padding-left:var(--bui-space-5)}.xs\:bui-pl-6{padding-left:var(--bui-space-6)}.xs\:bui-pl-7{padding-left:var(--bui-space-7)}.xs\:bui-pl-8{padding-left:var(--bui-space-8)}.xs\:bui-pl-9{padding-left:var(--bui-space-9)}.xs\:bui-pl-10{padding-left:var(--bui-space-10)}.xs\:bui-pl-11{padding-left:var(--bui-space-11)}.xs\:bui-pl-12{padding-left:var(--bui-space-12)}.xs\:bui-pl-13{padding-left:var(--bui-space-13)}.xs\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pl{padding-left:var(--pl-sm)}.sm\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.sm\:bui-pl-1{padding-left:var(--bui-space-1)}.sm\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.sm\:bui-pl-2{padding-left:var(--bui-space-2)}.sm\:bui-pl-3{padding-left:var(--bui-space-3)}.sm\:bui-pl-4{padding-left:var(--bui-space-4)}.sm\:bui-pl-5{padding-left:var(--bui-space-5)}.sm\:bui-pl-6{padding-left:var(--bui-space-6)}.sm\:bui-pl-7{padding-left:var(--bui-space-7)}.sm\:bui-pl-8{padding-left:var(--bui-space-8)}.sm\:bui-pl-9{padding-left:var(--bui-space-9)}.sm\:bui-pl-10{padding-left:var(--bui-space-10)}.sm\:bui-pl-11{padding-left:var(--bui-space-11)}.sm\:bui-pl-12{padding-left:var(--bui-space-12)}.sm\:bui-pl-13{padding-left:var(--bui-space-13)}.sm\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pl{padding-left:var(--pl-md)}.md\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.md\:bui-pl-1{padding-left:var(--bui-space-1)}.md\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.md\:bui-pl-2{padding-left:var(--bui-space-2)}.md\:bui-pl-3{padding-left:var(--bui-space-3)}.md\:bui-pl-4{padding-left:var(--bui-space-4)}.md\:bui-pl-5{padding-left:var(--bui-space-5)}.md\:bui-pl-6{padding-left:var(--bui-space-6)}.md\:bui-pl-7{padding-left:var(--bui-space-7)}.md\:bui-pl-8{padding-left:var(--bui-space-8)}.md\:bui-pl-9{padding-left:var(--bui-space-9)}.md\:bui-pl-10{padding-left:var(--bui-space-10)}.md\:bui-pl-11{padding-left:var(--bui-space-11)}.md\:bui-pl-12{padding-left:var(--bui-space-12)}.md\:bui-pl-13{padding-left:var(--bui-space-13)}.md\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pl{padding-left:var(--pl-lg)}.lg\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.lg\:bui-pl-1{padding-left:var(--bui-space-1)}.lg\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.lg\:bui-pl-2{padding-left:var(--bui-space-2)}.lg\:bui-pl-3{padding-left:var(--bui-space-3)}.lg\:bui-pl-4{padding-left:var(--bui-space-4)}.lg\:bui-pl-5{padding-left:var(--bui-space-5)}.lg\:bui-pl-6{padding-left:var(--bui-space-6)}.lg\:bui-pl-7{padding-left:var(--bui-space-7)}.lg\:bui-pl-8{padding-left:var(--bui-space-8)}.lg\:bui-pl-9{padding-left:var(--bui-space-9)}.lg\:bui-pl-10{padding-left:var(--bui-space-10)}.lg\:bui-pl-11{padding-left:var(--bui-space-11)}.lg\:bui-pl-12{padding-left:var(--bui-space-12)}.lg\:bui-pl-13{padding-left:var(--bui-space-13)}.lg\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pl{padding-left:var(--pl-xl)}.xl\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.xl\:bui-pl-1{padding-left:var(--bui-space-1)}.xl\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.xl\:bui-pl-2{padding-left:var(--bui-space-2)}.xl\:bui-pl-3{padding-left:var(--bui-space-3)}.xl\:bui-pl-4{padding-left:var(--bui-space-4)}.xl\:bui-pl-5{padding-left:var(--bui-space-5)}.xl\:bui-pl-6{padding-left:var(--bui-space-6)}.xl\:bui-pl-7{padding-left:var(--bui-space-7)}.xl\:bui-pl-8{padding-left:var(--bui-space-8)}.xl\:bui-pl-9{padding-left:var(--bui-space-9)}.xl\:bui-pl-10{padding-left:var(--bui-space-10)}.xl\:bui-pl-11{padding-left:var(--bui-space-11)}.xl\:bui-pl-12{padding-left:var(--bui-space-12)}.xl\:bui-pl-13{padding-left:var(--bui-space-13)}.xl\:bui-pl-14{padding-left:var(--bui-space-14)}}.bui-pr{padding-right:var(--pr)}.bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.bui-pr-1{padding-right:var(--bui-space-1)}.bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.bui-pr-2{padding-right:var(--bui-space-2)}.bui-pr-3{padding-right:var(--bui-space-3)}.bui-pr-4{padding-right:var(--bui-space-4)}.bui-pr-5{padding-right:var(--bui-space-5)}.bui-pr-6{padding-right:var(--bui-space-6)}.bui-pr-7{padding-right:var(--bui-space-7)}.bui-pr-8{padding-right:var(--bui-space-8)}.bui-pr-9{padding-right:var(--bui-space-9)}.bui-pr-10{padding-right:var(--bui-space-10)}.bui-pr-11{padding-right:var(--bui-space-11)}.bui-pr-12{padding-right:var(--bui-space-12)}.bui-pr-13{padding-right:var(--bui-space-13)}.bui-pr-14{padding-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pr{padding-right:var(--pr-xs)}.xs\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.xs\:bui-pr-1{padding-right:var(--bui-space-1)}.xs\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.xs\:bui-pr-2{padding-right:var(--bui-space-2)}.xs\:bui-pr-3{padding-right:var(--bui-space-3)}.xs\:bui-pr-4{padding-right:var(--bui-space-4)}.xs\:bui-pr-5{padding-right:var(--bui-space-5)}.xs\:bui-pr-6{padding-right:var(--bui-space-6)}.xs\:bui-pr-7{padding-right:var(--bui-space-7)}.xs\:bui-pr-8{padding-right:var(--bui-space-8)}.xs\:bui-pr-9{padding-right:var(--bui-space-9)}.xs\:bui-pr-10{padding-right:var(--bui-space-10)}.xs\:bui-pr-11{padding-right:var(--bui-space-11)}.xs\:bui-pr-12{padding-right:var(--bui-space-12)}.xs\:bui-pr-13{padding-right:var(--bui-space-13)}.xs\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pr{padding-right:var(--pr-sm)}.sm\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.sm\:bui-pr-1{padding-right:var(--bui-space-1)}.sm\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.sm\:bui-pr-2{padding-right:var(--bui-space-2)}.sm\:bui-pr-3{padding-right:var(--bui-space-3)}.sm\:bui-pr-4{padding-right:var(--bui-space-4)}.sm\:bui-pr-5{padding-right:var(--bui-space-5)}.sm\:bui-pr-6{padding-right:var(--bui-space-6)}.sm\:bui-pr-7{padding-right:var(--bui-space-7)}.sm\:bui-pr-8{padding-right:var(--bui-space-8)}.sm\:bui-pr-9{padding-right:var(--bui-space-9)}.sm\:bui-pr-10{padding-right:var(--bui-space-10)}.sm\:bui-pr-11{padding-right:var(--bui-space-11)}.sm\:bui-pr-12{padding-right:var(--bui-space-12)}.sm\:bui-pr-13{padding-right:var(--bui-space-13)}.sm\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pr{padding-right:var(--pr-md)}.md\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.md\:bui-pr-1{padding-right:var(--bui-space-1)}.md\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.md\:bui-pr-2{padding-right:var(--bui-space-2)}.md\:bui-pr-3{padding-right:var(--bui-space-3)}.md\:bui-pr-4{padding-right:var(--bui-space-4)}.md\:bui-pr-5{padding-right:var(--bui-space-5)}.md\:bui-pr-6{padding-right:var(--bui-space-6)}.md\:bui-pr-7{padding-right:var(--bui-space-7)}.md\:bui-pr-8{padding-right:var(--bui-space-8)}.md\:bui-pr-9{padding-right:var(--bui-space-9)}.md\:bui-pr-10{padding-right:var(--bui-space-10)}.md\:bui-pr-11{padding-right:var(--bui-space-11)}.md\:bui-pr-12{padding-right:var(--bui-space-12)}.md\:bui-pr-13{padding-right:var(--bui-space-13)}.md\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pr{padding-right:var(--pr-lg)}.lg\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.lg\:bui-pr-1{padding-right:var(--bui-space-1)}.lg\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.lg\:bui-pr-2{padding-right:var(--bui-space-2)}.lg\:bui-pr-3{padding-right:var(--bui-space-3)}.lg\:bui-pr-4{padding-right:var(--bui-space-4)}.lg\:bui-pr-5{padding-right:var(--bui-space-5)}.lg\:bui-pr-6{padding-right:var(--bui-space-6)}.lg\:bui-pr-7{padding-right:var(--bui-space-7)}.lg\:bui-pr-8{padding-right:var(--bui-space-8)}.lg\:bui-pr-9{padding-right:var(--bui-space-9)}.lg\:bui-pr-10{padding-right:var(--bui-space-10)}.lg\:bui-pr-11{padding-right:var(--bui-space-11)}.lg\:bui-pr-12{padding-right:var(--bui-space-12)}.lg\:bui-pr-13{padding-right:var(--bui-space-13)}.lg\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pr{padding-right:var(--pr-xl)}.xl\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.xl\:bui-pr-1{padding-right:var(--bui-space-1)}.xl\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.xl\:bui-pr-2{padding-right:var(--bui-space-2)}.xl\:bui-pr-3{padding-right:var(--bui-space-3)}.xl\:bui-pr-4{padding-right:var(--bui-space-4)}.xl\:bui-pr-5{padding-right:var(--bui-space-5)}.xl\:bui-pr-6{padding-right:var(--bui-space-6)}.xl\:bui-pr-7{padding-right:var(--bui-space-7)}.xl\:bui-pr-8{padding-right:var(--bui-space-8)}.xl\:bui-pr-9{padding-right:var(--bui-space-9)}.xl\:bui-pr-10{padding-right:var(--bui-space-10)}.xl\:bui-pr-11{padding-right:var(--bui-space-11)}.xl\:bui-pr-12{padding-right:var(--bui-space-12)}.xl\:bui-pr-13{padding-right:var(--bui-space-13)}.xl\:bui-pr-14{padding-right:var(--bui-space-14)}}.bui-pt{padding-top:var(--pt)}.bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.bui-pt-1{padding-top:var(--bui-space-1)}.bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.bui-pt-2{padding-top:var(--bui-space-2)}.bui-pt-3{padding-top:var(--bui-space-3)}.bui-pt-4{padding-top:var(--bui-space-4)}.bui-pt-5{padding-top:var(--bui-space-5)}.bui-pt-6{padding-top:var(--bui-space-6)}.bui-pt-7{padding-top:var(--bui-space-7)}.bui-pt-8{padding-top:var(--bui-space-8)}.bui-pt-9{padding-top:var(--bui-space-9)}.bui-pt-10{padding-top:var(--bui-space-10)}.bui-pt-11{padding-top:var(--bui-space-11)}.bui-pt-12{padding-top:var(--bui-space-12)}.bui-pt-13{padding-top:var(--bui-space-13)}.bui-pt-14{padding-top:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pt{padding-top:var(--pt-xs)}.xs\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.xs\:bui-pt-1{padding-top:var(--bui-space-1)}.xs\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.xs\:bui-pt-2{padding-top:var(--bui-space-2)}.xs\:bui-pt-3{padding-top:var(--bui-space-3)}.xs\:bui-pt-4{padding-top:var(--bui-space-4)}.xs\:bui-pt-5{padding-top:var(--bui-space-5)}.xs\:bui-pt-6{padding-top:var(--bui-space-6)}.xs\:bui-pt-7{padding-top:var(--bui-space-7)}.xs\:bui-pt-8{padding-top:var(--bui-space-8)}.xs\:bui-pt-9{padding-top:var(--bui-space-9)}.xs\:bui-pt-10{padding-top:var(--bui-space-10)}.xs\:bui-pt-11{padding-top:var(--bui-space-11)}.xs\:bui-pt-12{padding-top:var(--bui-space-12)}.xs\:bui-pt-13{padding-top:var(--bui-space-13)}.xs\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pt{padding-top:var(--pt-sm)}.sm\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.sm\:bui-pt-1{padding-top:var(--bui-space-1)}.sm\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.sm\:bui-pt-2{padding-top:var(--bui-space-2)}.sm\:bui-pt-3{padding-top:var(--bui-space-3)}.sm\:bui-pt-4{padding-top:var(--bui-space-4)}.sm\:bui-pt-5{padding-top:var(--bui-space-5)}.sm\:bui-pt-6{padding-top:var(--bui-space-6)}.sm\:bui-pt-7{padding-top:var(--bui-space-7)}.sm\:bui-pt-8{padding-top:var(--bui-space-8)}.sm\:bui-pt-9{padding-top:var(--bui-space-9)}.sm\:bui-pt-10{padding-top:var(--bui-space-10)}.sm\:bui-pt-11{padding-top:var(--bui-space-11)}.sm\:bui-pt-12{padding-top:var(--bui-space-12)}.sm\:bui-pt-13{padding-top:var(--bui-space-13)}.sm\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pt{padding-top:var(--pt-md)}.md\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.md\:bui-pt-1{padding-top:var(--bui-space-1)}.md\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.md\:bui-pt-2{padding-top:var(--bui-space-2)}.md\:bui-pt-3{padding-top:var(--bui-space-3)}.md\:bui-pt-4{padding-top:var(--bui-space-4)}.md\:bui-pt-5{padding-top:var(--bui-space-5)}.md\:bui-pt-6{padding-top:var(--bui-space-6)}.md\:bui-pt-7{padding-top:var(--bui-space-7)}.md\:bui-pt-8{padding-top:var(--bui-space-8)}.md\:bui-pt-9{padding-top:var(--bui-space-9)}.md\:bui-pt-10{padding-top:var(--bui-space-10)}.md\:bui-pt-11{padding-top:var(--bui-space-11)}.md\:bui-pt-12{padding-top:var(--bui-space-12)}.md\:bui-pt-13{padding-top:var(--bui-space-13)}.md\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pt{padding-top:var(--pt-lg)}.lg\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.lg\:bui-pt-1{padding-top:var(--bui-space-1)}.lg\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.lg\:bui-pt-2{padding-top:var(--bui-space-2)}.lg\:bui-pt-3{padding-top:var(--bui-space-3)}.lg\:bui-pt-4{padding-top:var(--bui-space-4)}.lg\:bui-pt-5{padding-top:var(--bui-space-5)}.lg\:bui-pt-6{padding-top:var(--bui-space-6)}.lg\:bui-pt-7{padding-top:var(--bui-space-7)}.lg\:bui-pt-8{padding-top:var(--bui-space-8)}.lg\:bui-pt-9{padding-top:var(--bui-space-9)}.lg\:bui-pt-10{padding-top:var(--bui-space-10)}.lg\:bui-pt-11{padding-top:var(--bui-space-11)}.lg\:bui-pt-12{padding-top:var(--bui-space-12)}.lg\:bui-pt-13{padding-top:var(--bui-space-13)}.lg\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pt{padding-top:var(--pt-xl)}.xl\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.xl\:bui-pt-1{padding-top:var(--bui-space-1)}.xl\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.xl\:bui-pt-2{padding-top:var(--bui-space-2)}.xl\:bui-pt-3{padding-top:var(--bui-space-3)}.xl\:bui-pt-4{padding-top:var(--bui-space-4)}.xl\:bui-pt-5{padding-top:var(--bui-space-5)}.xl\:bui-pt-6{padding-top:var(--bui-space-6)}.xl\:bui-pt-7{padding-top:var(--bui-space-7)}.xl\:bui-pt-8{padding-top:var(--bui-space-8)}.xl\:bui-pt-9{padding-top:var(--bui-space-9)}.xl\:bui-pt-10{padding-top:var(--bui-space-10)}.xl\:bui-pt-11{padding-top:var(--bui-space-11)}.xl\:bui-pt-12{padding-top:var(--bui-space-12)}.xl\:bui-pt-13{padding-top:var(--bui-space-13)}.xl\:bui-pt-14{padding-top:var(--bui-space-14)}}.bui-pb{padding-bottom:var(--pb)}.bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.bui-pb-1{padding-bottom:var(--bui-space-1)}.bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.bui-pb-2{padding-bottom:var(--bui-space-2)}.bui-pb-3{padding-bottom:var(--bui-space-3)}.bui-pb-4{padding-bottom:var(--bui-space-4)}.bui-pb-5{padding-bottom:var(--bui-space-5)}.bui-pb-6{padding-bottom:var(--bui-space-6)}.bui-pb-7{padding-bottom:var(--bui-space-7)}.bui-pb-8{padding-bottom:var(--bui-space-8)}.bui-pb-9{padding-bottom:var(--bui-space-9)}.bui-pb-10{padding-bottom:var(--bui-space-10)}.bui-pb-11{padding-bottom:var(--bui-space-11)}.bui-pb-12{padding-bottom:var(--bui-space-12)}.bui-pb-13{padding-bottom:var(--bui-space-13)}.bui-pb-14{padding-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pb{padding-bottom:var(--pb-xs)}.xs\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.xs\:bui-pb-1{padding-bottom:var(--bui-space-1)}.xs\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.xs\:bui-pb-2{padding-bottom:var(--bui-space-2)}.xs\:bui-pb-3{padding-bottom:var(--bui-space-3)}.xs\:bui-pb-4{padding-bottom:var(--bui-space-4)}.xs\:bui-pb-5{padding-bottom:var(--bui-space-5)}.xs\:bui-pb-6{padding-bottom:var(--bui-space-6)}.xs\:bui-pb-7{padding-bottom:var(--bui-space-7)}.xs\:bui-pb-8{padding-bottom:var(--bui-space-8)}.xs\:bui-pb-9{padding-bottom:var(--bui-space-9)}.xs\:bui-pb-10{padding-bottom:var(--bui-space-10)}.xs\:bui-pb-11{padding-bottom:var(--bui-space-11)}.xs\:bui-pb-12{padding-bottom:var(--bui-space-12)}.xs\:bui-pb-13{padding-bottom:var(--bui-space-13)}.xs\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pb{padding-bottom:var(--pb-sm)}.sm\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.sm\:bui-pb-1{padding-bottom:var(--bui-space-1)}.sm\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.sm\:bui-pb-2{padding-bottom:var(--bui-space-2)}.sm\:bui-pb-3{padding-bottom:var(--bui-space-3)}.sm\:bui-pb-4{padding-bottom:var(--bui-space-4)}.sm\:bui-pb-5{padding-bottom:var(--bui-space-5)}.sm\:bui-pb-6{padding-bottom:var(--bui-space-6)}.sm\:bui-pb-7{padding-bottom:var(--bui-space-7)}.sm\:bui-pb-8{padding-bottom:var(--bui-space-8)}.sm\:bui-pb-9{padding-bottom:var(--bui-space-9)}.sm\:bui-pb-10{padding-bottom:var(--bui-space-10)}.sm\:bui-pb-11{padding-bottom:var(--bui-space-11)}.sm\:bui-pb-12{padding-bottom:var(--bui-space-12)}.sm\:bui-pb-13{padding-bottom:var(--bui-space-13)}.sm\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pb{padding-bottom:var(--pb-md)}.md\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.md\:bui-pb-1{padding-bottom:var(--bui-space-1)}.md\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.md\:bui-pb-2{padding-bottom:var(--bui-space-2)}.md\:bui-pb-3{padding-bottom:var(--bui-space-3)}.md\:bui-pb-4{padding-bottom:var(--bui-space-4)}.md\:bui-pb-5{padding-bottom:var(--bui-space-5)}.md\:bui-pb-6{padding-bottom:var(--bui-space-6)}.md\:bui-pb-7{padding-bottom:var(--bui-space-7)}.md\:bui-pb-8{padding-bottom:var(--bui-space-8)}.md\:bui-pb-9{padding-bottom:var(--bui-space-9)}.md\:bui-pb-10{padding-bottom:var(--bui-space-10)}.md\:bui-pb-11{padding-bottom:var(--bui-space-11)}.md\:bui-pb-12{padding-bottom:var(--bui-space-12)}.md\:bui-pb-13{padding-bottom:var(--bui-space-13)}.md\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pb{padding-bottom:var(--pb-lg)}.lg\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.lg\:bui-pb-1{padding-bottom:var(--bui-space-1)}.lg\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.lg\:bui-pb-2{padding-bottom:var(--bui-space-2)}.lg\:bui-pb-3{padding-bottom:var(--bui-space-3)}.lg\:bui-pb-4{padding-bottom:var(--bui-space-4)}.lg\:bui-pb-5{padding-bottom:var(--bui-space-5)}.lg\:bui-pb-6{padding-bottom:var(--bui-space-6)}.lg\:bui-pb-7{padding-bottom:var(--bui-space-7)}.lg\:bui-pb-8{padding-bottom:var(--bui-space-8)}.lg\:bui-pb-9{padding-bottom:var(--bui-space-9)}.lg\:bui-pb-10{padding-bottom:var(--bui-space-10)}.lg\:bui-pb-11{padding-bottom:var(--bui-space-11)}.lg\:bui-pb-12{padding-bottom:var(--bui-space-12)}.lg\:bui-pb-13{padding-bottom:var(--bui-space-13)}.lg\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pb{padding-bottom:var(--pb-xl)}.xl\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.xl\:bui-pb-1{padding-bottom:var(--bui-space-1)}.xl\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.xl\:bui-pb-2{padding-bottom:var(--bui-space-2)}.xl\:bui-pb-3{padding-bottom:var(--bui-space-3)}.xl\:bui-pb-4{padding-bottom:var(--bui-space-4)}.xl\:bui-pb-5{padding-bottom:var(--bui-space-5)}.xl\:bui-pb-6{padding-bottom:var(--bui-space-6)}.xl\:bui-pb-7{padding-bottom:var(--bui-space-7)}.xl\:bui-pb-8{padding-bottom:var(--bui-space-8)}.xl\:bui-pb-9{padding-bottom:var(--bui-space-9)}.xl\:bui-pb-10{padding-bottom:var(--bui-space-10)}.xl\:bui-pb-11{padding-bottom:var(--bui-space-11)}.xl\:bui-pb-12{padding-bottom:var(--bui-space-12)}.xl\:bui-pb-13{padding-bottom:var(--bui-space-13)}.xl\:bui-pb-14{padding-bottom:var(--bui-space-14)}}.bui-py{padding-top:var(--py);padding-bottom:var(--py)}.bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-py{padding-top:var(--py-xs);padding-bottom:var(--py-xs)}.xs\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.xs\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.xs\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.xs\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.xs\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.xs\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.xs\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.xs\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.xs\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.xs\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.xs\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.xs\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.xs\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.xs\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.xs\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.xs\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-py{padding-top:var(--py-sm);padding-bottom:var(--py-sm)}.sm\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.sm\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.sm\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.sm\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.sm\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.sm\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.sm\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.sm\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.sm\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.sm\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.sm\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.sm\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.sm\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.sm\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.sm\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.sm\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-py{padding-top:var(--py-md);padding-bottom:var(--py-md)}.md\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.md\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.md\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.md\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.md\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.md\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.md\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.md\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.md\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.md\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.md\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.md\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.md\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.md\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.md\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.md\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-py{padding-top:var(--py-lg);padding-bottom:var(--py-lg)}.lg\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.lg\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.lg\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.lg\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.lg\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.lg\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.lg\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.lg\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.lg\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.lg\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.lg\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.lg\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.lg\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.lg\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.lg\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.lg\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-py{padding-top:var(--py-xl);padding-bottom:var(--py-xl)}.xl\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.xl\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.xl\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.xl\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.xl\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.xl\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.xl\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.xl\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.xl\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.xl\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.xl\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.xl\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.xl\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.xl\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.xl\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.xl\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}.bui-px{padding-left:var(--px);padding-right:var(--px)}.bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-px{padding-left:var(--px-xs);padding-right:var(--px-xs)}.xs\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.xs\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.xs\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.xs\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.xs\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.xs\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.xs\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.xs\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.xs\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.xs\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.xs\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.xs\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.xs\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.xs\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.xs\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.xs\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-px{padding-left:var(--px-sm);padding-right:var(--px-sm)}.sm\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.sm\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.sm\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.sm\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.sm\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.sm\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.sm\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.sm\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.sm\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.sm\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.sm\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.sm\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.sm\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.sm\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.sm\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.sm\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-px{padding-left:var(--px-md);padding-right:var(--px-md)}.md\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.md\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.md\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.md\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.md\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.md\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.md\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.md\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.md\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.md\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.md\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.md\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.md\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.md\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.md\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.md\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-px{padding-left:var(--px-lg);padding-right:var(--px-lg)}.lg\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.lg\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.lg\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.lg\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.lg\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.lg\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.lg\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.lg\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.lg\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.lg\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.lg\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.lg\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.lg\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.lg\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.lg\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.lg\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-px{padding-left:var(--px-xl);padding-right:var(--px-xl)}.xl\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.xl\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.xl\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.xl\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.xl\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.xl\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.xl\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.xl\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.xl\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.xl\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.xl\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.xl\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.xl\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.xl\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.xl\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.xl\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}.bui-m{margin:var(--m)}.bui-m-0\.5{margin:var(--bui-space-0_5)}.bui-m-1{margin:var(--bui-space-1)}.bui-m-1\.5{margin:var(--bui-space-1_5)}.bui-m-2{margin:var(--bui-space-2)}.bui-m-3{margin:var(--bui-space-3)}.bui-m-4{margin:var(--bui-space-4)}.bui-m-5{margin:var(--bui-space-5)}.bui-m-6{margin:var(--bui-space-6)}.bui-m-7{margin:var(--bui-space-7)}.bui-m-8{margin:var(--bui-space-8)}.bui-m-9{margin:var(--bui-space-9)}.bui-m-10{margin:var(--bui-space-10)}.bui-m-11{margin:var(--bui-space-11)}.bui-m-12{margin:var(--bui-space-12)}.bui-m-13{margin:var(--bui-space-13)}.bui-m-14{margin:var(--bui-space-14)}@media (width>=640px){.xs\:bui-m{margin:var(--p-xs)}.xs\:bui-m-0\.5{margin:var(--bui-space-0_5)}.xs\:bui-m-1{margin:var(--bui-space-1)}.xs\:bui-m-1\.5{margin:var(--bui-space-1_5)}.xs\:bui-m-2{margin:var(--bui-space-2)}.xs\:bui-m-3{margin:var(--bui-space-3)}.xs\:bui-m-4{margin:var(--bui-space-4)}.xs\:bui-m-5{margin:var(--bui-space-5)}.xs\:bui-m-6{margin:var(--bui-space-6)}.xs\:bui-m-7{margin:var(--bui-space-7)}.xs\:bui-m-8{margin:var(--bui-space-8)}.xs\:bui-m-9{margin:var(--bui-space-9)}.xs\:bui-m-10{margin:var(--bui-space-10)}.xs\:bui-m-11{margin:var(--bui-space-11)}.xs\:bui-m-12{margin:var(--bui-space-12)}.xs\:bui-m-13{margin:var(--bui-space-13)}.xs\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-m{margin:var(--p-sm)}.sm\:bui-m-0\.5{margin:var(--bui-space-0_5)}.sm\:bui-m-1{margin:var(--bui-space-1)}.sm\:bui-m-1\.5{margin:var(--bui-space-1_5)}.sm\:bui-m-2{margin:var(--bui-space-2)}.sm\:bui-m-3{margin:var(--bui-space-3)}.sm\:bui-m-4{margin:var(--bui-space-4)}.sm\:bui-m-5{margin:var(--bui-space-5)}.sm\:bui-m-6{margin:var(--bui-space-6)}.sm\:bui-m-7{margin:var(--bui-space-7)}.sm\:bui-m-8{margin:var(--bui-space-8)}.sm\:bui-m-9{margin:var(--bui-space-9)}.sm\:bui-m-10{margin:var(--bui-space-10)}.sm\:bui-m-11{margin:var(--bui-space-11)}.sm\:bui-m-12{margin:var(--bui-space-12)}.sm\:bui-m-13{margin:var(--bui-space-13)}.sm\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-m{margin:var(--p-md)}.md\:bui-m-0\.5{margin:var(--bui-space-0_5)}.md\:bui-m-1{margin:var(--bui-space-1)}.md\:bui-m-1\.5{margin:var(--bui-space-1_5)}.md\:bui-m-2{margin:var(--bui-space-2)}.md\:bui-m-3{margin:var(--bui-space-3)}.md\:bui-m-4{margin:var(--bui-space-4)}.md\:bui-m-5{margin:var(--bui-space-5)}.md\:bui-m-6{margin:var(--bui-space-6)}.md\:bui-m-7{margin:var(--bui-space-7)}.md\:bui-m-8{margin:var(--bui-space-8)}.md\:bui-m-9{margin:var(--bui-space-9)}.md\:bui-m-10{margin:var(--bui-space-10)}.md\:bui-m-11{margin:var(--bui-space-11)}.md\:bui-m-12{margin:var(--bui-space-12)}.md\:bui-m-13{margin:var(--bui-space-13)}.md\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-m{margin:var(--p-lg)}.lg\:bui-m-0\.5{margin:var(--bui-space-0_5)}.lg\:bui-m-1{margin:var(--bui-space-1)}.lg\:bui-m-1\.5{margin:var(--bui-space-1_5)}.lg\:bui-m-2{margin:var(--bui-space-2)}.lg\:bui-m-3{margin:var(--bui-space-3)}.lg\:bui-m-4{margin:var(--bui-space-4)}.lg\:bui-m-5{margin:var(--bui-space-5)}.lg\:bui-m-6{margin:var(--bui-space-6)}.lg\:bui-m-7{margin:var(--bui-space-7)}.lg\:bui-m-8{margin:var(--bui-space-8)}.lg\:bui-m-9{margin:var(--bui-space-9)}.lg\:bui-m-10{margin:var(--bui-space-10)}.lg\:bui-m-11{margin:var(--bui-space-11)}.lg\:bui-m-12{margin:var(--bui-space-12)}.lg\:bui-m-13{margin:var(--bui-space-13)}.lg\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-m{margin:var(--p-xl)}.xl\:bui-m-0\.5{margin:var(--bui-space-0_5)}.xl\:bui-m-1{margin:var(--bui-space-1)}.xl\:bui-m-1\.5{margin:var(--bui-space-1_5)}.xl\:bui-m-2{margin:var(--bui-space-2)}.xl\:bui-m-3{margin:var(--bui-space-3)}.xl\:bui-m-4{margin:var(--bui-space-4)}.xl\:bui-m-5{margin:var(--bui-space-5)}.xl\:bui-m-6{margin:var(--bui-space-6)}.xl\:bui-m-7{margin:var(--bui-space-7)}.xl\:bui-m-8{margin:var(--bui-space-8)}.xl\:bui-m-9{margin:var(--bui-space-9)}.xl\:bui-m-10{margin:var(--bui-space-10)}.xl\:bui-m-11{margin:var(--bui-space-11)}.xl\:bui-m-12{margin:var(--bui-space-12)}.xl\:bui-m-13{margin:var(--bui-space-13)}.xl\:bui-m-14{margin:var(--bui-space-14)}}.bui-ml{margin-left:var(--ml)}.bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.bui-ml-1{margin-left:var(--bui-space-1)}.bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.bui-ml-2{margin-left:var(--bui-space-2)}.bui-ml-3{margin-left:var(--bui-space-3)}.bui-ml-4{margin-left:var(--bui-space-4)}.bui-ml-5{margin-left:var(--bui-space-5)}.bui-ml-6{margin-left:var(--bui-space-6)}.bui-ml-7{margin-left:var(--bui-space-7)}.bui-ml-8{margin-left:var(--bui-space-8)}.bui-ml-9{margin-left:var(--bui-space-9)}.bui-ml-10{margin-left:var(--bui-space-10)}.bui-ml-11{margin-left:var(--bui-space-11)}.bui-ml-12{margin-left:var(--bui-space-12)}.bui-ml-13{margin-left:var(--bui-space-13)}.bui-ml-14{margin-left:var(--bui-space-14)}@media (width>=640px){.xs\:bui-ml{margin-left:var(--ml-xs)}.xs\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.xs\:bui-ml-1{margin-left:var(--bui-space-1)}.xs\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.xs\:bui-ml-2{margin-left:var(--bui-space-2)}.xs\:bui-ml-3{margin-left:var(--bui-space-3)}.xs\:bui-ml-4{margin-left:var(--bui-space-4)}.xs\:bui-ml-5{margin-left:var(--bui-space-5)}.xs\:bui-ml-6{margin-left:var(--bui-space-6)}.xs\:bui-ml-7{margin-left:var(--bui-space-7)}.xs\:bui-ml-8{margin-left:var(--bui-space-8)}.xs\:bui-ml-9{margin-left:var(--bui-space-9)}.xs\:bui-ml-10{margin-left:var(--bui-space-10)}.xs\:bui-ml-11{margin-left:var(--bui-space-11)}.xs\:bui-ml-12{margin-left:var(--bui-space-12)}.xs\:bui-ml-13{margin-left:var(--bui-space-13)}.xs\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-ml{margin-left:var(--ml-sm)}.sm\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.sm\:bui-ml-1{margin-left:var(--bui-space-1)}.sm\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.sm\:bui-ml-2{margin-left:var(--bui-space-2)}.sm\:bui-ml-3{margin-left:var(--bui-space-3)}.sm\:bui-ml-4{margin-left:var(--bui-space-4)}.sm\:bui-ml-5{margin-left:var(--bui-space-5)}.sm\:bui-ml-6{margin-left:var(--bui-space-6)}.sm\:bui-ml-7{margin-left:var(--bui-space-7)}.sm\:bui-ml-8{margin-left:var(--bui-space-8)}.sm\:bui-ml-9{margin-left:var(--bui-space-9)}.sm\:bui-ml-10{margin-left:var(--bui-space-10)}.sm\:bui-ml-11{margin-left:var(--bui-space-11)}.sm\:bui-ml-12{margin-left:var(--bui-space-12)}.sm\:bui-ml-13{margin-left:var(--bui-space-13)}.sm\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-ml{margin-left:var(--ml-md)}.md\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.md\:bui-ml-1{margin-left:var(--bui-space-1)}.md\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.md\:bui-ml-2{margin-left:var(--bui-space-2)}.md\:bui-ml-3{margin-left:var(--bui-space-3)}.md\:bui-ml-4{margin-left:var(--bui-space-4)}.md\:bui-ml-5{margin-left:var(--bui-space-5)}.md\:bui-ml-6{margin-left:var(--bui-space-6)}.md\:bui-ml-7{margin-left:var(--bui-space-7)}.md\:bui-ml-8{margin-left:var(--bui-space-8)}.md\:bui-ml-9{margin-left:var(--bui-space-9)}.md\:bui-ml-10{margin-left:var(--bui-space-10)}.md\:bui-ml-11{margin-left:var(--bui-space-11)}.md\:bui-ml-12{margin-left:var(--bui-space-12)}.md\:bui-ml-13{margin-left:var(--bui-space-13)}.md\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-ml{margin-left:var(--ml-lg)}.lg\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.lg\:bui-ml-1{margin-left:var(--bui-space-1)}.lg\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.lg\:bui-ml-2{margin-left:var(--bui-space-2)}.lg\:bui-ml-3{margin-left:var(--bui-space-3)}.lg\:bui-ml-4{margin-left:var(--bui-space-4)}.lg\:bui-ml-5{margin-left:var(--bui-space-5)}.lg\:bui-ml-6{margin-left:var(--bui-space-6)}.lg\:bui-ml-7{margin-left:var(--bui-space-7)}.lg\:bui-ml-8{margin-left:var(--bui-space-8)}.lg\:bui-ml-9{margin-left:var(--bui-space-9)}.lg\:bui-ml-10{margin-left:var(--bui-space-10)}.lg\:bui-ml-11{margin-left:var(--bui-space-11)}.lg\:bui-ml-12{margin-left:var(--bui-space-12)}.lg\:bui-ml-13{margin-left:var(--bui-space-13)}.lg\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-ml{margin-left:var(--ml-xl)}.xl\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.xl\:bui-ml-1{margin-left:var(--bui-space-1)}.xl\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.xl\:bui-ml-2{margin-left:var(--bui-space-2)}.xl\:bui-ml-3{margin-left:var(--bui-space-3)}.xl\:bui-ml-4{margin-left:var(--bui-space-4)}.xl\:bui-ml-5{margin-left:var(--bui-space-5)}.xl\:bui-ml-6{margin-left:var(--bui-space-6)}.xl\:bui-ml-7{margin-left:var(--bui-space-7)}.xl\:bui-ml-8{margin-left:var(--bui-space-8)}.xl\:bui-ml-9{margin-left:var(--bui-space-9)}.xl\:bui-ml-10{margin-left:var(--bui-space-10)}.xl\:bui-ml-11{margin-left:var(--bui-space-11)}.xl\:bui-ml-12{margin-left:var(--bui-space-12)}.xl\:bui-ml-13{margin-left:var(--bui-space-13)}.xl\:bui-ml-14{margin-left:var(--bui-space-14)}}.bui-mr{margin-right:var(--mr)}.bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.bui-mr-1{margin-right:var(--bui-space-1)}.bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.bui-mr-2{margin-right:var(--bui-space-2)}.bui-mr-3{margin-right:var(--bui-space-3)}.bui-mr-4{margin-right:var(--bui-space-4)}.bui-mr-5{margin-right:var(--bui-space-5)}.bui-mr-6{margin-right:var(--bui-space-6)}.bui-mr-7{margin-right:var(--bui-space-7)}.bui-mr-8{margin-right:var(--bui-space-8)}.bui-mr-9{margin-right:var(--bui-space-9)}.bui-mr-10{margin-right:var(--bui-space-10)}.bui-mr-11{margin-right:var(--bui-space-11)}.bui-mr-12{margin-right:var(--bui-space-12)}.bui-mr-13{margin-right:var(--bui-space-13)}.bui-mr-14{margin-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mr{margin-right:var(--mr-xs)}.xs\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.xs\:bui-mr-1{margin-right:var(--bui-space-1)}.xs\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.xs\:bui-mr-2{margin-right:var(--bui-space-2)}.xs\:bui-mr-3{margin-right:var(--bui-space-3)}.xs\:bui-mr-4{margin-right:var(--bui-space-4)}.xs\:bui-mr-5{margin-right:var(--bui-space-5)}.xs\:bui-mr-6{margin-right:var(--bui-space-6)}.xs\:bui-mr-7{margin-right:var(--bui-space-7)}.xs\:bui-mr-8{margin-right:var(--bui-space-8)}.xs\:bui-mr-9{margin-right:var(--bui-space-9)}.xs\:bui-mr-10{margin-right:var(--bui-space-10)}.xs\:bui-mr-11{margin-right:var(--bui-space-11)}.xs\:bui-mr-12{margin-right:var(--bui-space-12)}.xs\:bui-mr-13{margin-right:var(--bui-space-13)}.xs\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mr{margin-right:var(--mr-sm)}.sm\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.sm\:bui-mr-1{margin-right:var(--bui-space-1)}.sm\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.sm\:bui-mr-2{margin-right:var(--bui-space-2)}.sm\:bui-mr-3{margin-right:var(--bui-space-3)}.sm\:bui-mr-4{margin-right:var(--bui-space-4)}.sm\:bui-mr-5{margin-right:var(--bui-space-5)}.sm\:bui-mr-6{margin-right:var(--bui-space-6)}.sm\:bui-mr-7{margin-right:var(--bui-space-7)}.sm\:bui-mr-8{margin-right:var(--bui-space-8)}.sm\:bui-mr-9{margin-right:var(--bui-space-9)}.sm\:bui-mr-10{margin-right:var(--bui-space-10)}.sm\:bui-mr-11{margin-right:var(--bui-space-11)}.sm\:bui-mr-12{margin-right:var(--bui-space-12)}.sm\:bui-mr-13{margin-right:var(--bui-space-13)}.sm\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mr{margin-right:var(--mr-md)}.md\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.md\:bui-mr-1{margin-right:var(--bui-space-1)}.md\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.md\:bui-mr-2{margin-right:var(--bui-space-2)}.md\:bui-mr-3{margin-right:var(--bui-space-3)}.md\:bui-mr-4{margin-right:var(--bui-space-4)}.md\:bui-mr-5{margin-right:var(--bui-space-5)}.md\:bui-mr-6{margin-right:var(--bui-space-6)}.md\:bui-mr-7{margin-right:var(--bui-space-7)}.md\:bui-mr-8{margin-right:var(--bui-space-8)}.md\:bui-mr-9{margin-right:var(--bui-space-9)}.md\:bui-mr-10{margin-right:var(--bui-space-10)}.md\:bui-mr-11{margin-right:var(--bui-space-11)}.md\:bui-mr-12{margin-right:var(--bui-space-12)}.md\:bui-mr-13{margin-right:var(--bui-space-13)}.md\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mr{margin-right:var(--mr-lg)}.lg\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.lg\:bui-mr-1{margin-right:var(--bui-space-1)}.lg\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.lg\:bui-mr-2{margin-right:var(--bui-space-2)}.lg\:bui-mr-3{margin-right:var(--bui-space-3)}.lg\:bui-mr-4{margin-right:var(--bui-space-4)}.lg\:bui-mr-5{margin-right:var(--bui-space-5)}.lg\:bui-mr-6{margin-right:var(--bui-space-6)}.lg\:bui-mr-7{margin-right:var(--bui-space-7)}.lg\:bui-mr-8{margin-right:var(--bui-space-8)}.lg\:bui-mr-9{margin-right:var(--bui-space-9)}.lg\:bui-mr-10{margin-right:var(--bui-space-10)}.lg\:bui-mr-11{margin-right:var(--bui-space-11)}.lg\:bui-mr-12{margin-right:var(--bui-space-12)}.lg\:bui-mr-13{margin-right:var(--bui-space-13)}.lg\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mr{margin-right:var(--mr-xl)}.xl\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.xl\:bui-mr-1{margin-right:var(--bui-space-1)}.xl\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.xl\:bui-mr-2{margin-right:var(--bui-space-2)}.xl\:bui-mr-3{margin-right:var(--bui-space-3)}.xl\:bui-mr-4{margin-right:var(--bui-space-4)}.xl\:bui-mr-5{margin-right:var(--bui-space-5)}.xl\:bui-mr-6{margin-right:var(--bui-space-6)}.xl\:bui-mr-7{margin-right:var(--bui-space-7)}.xl\:bui-mr-8{margin-right:var(--bui-space-8)}.xl\:bui-mr-9{margin-right:var(--bui-space-9)}.xl\:bui-mr-10{margin-right:var(--bui-space-10)}.xl\:bui-mr-11{margin-right:var(--bui-space-11)}.xl\:bui-mr-12{margin-right:var(--bui-space-12)}.xl\:bui-mr-13{margin-right:var(--bui-space-13)}.xl\:bui-mr-14{margin-right:var(--bui-space-14)}}.bui-mt{margin-top:var(--mt)}.bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.bui-mt-1{margin-top:var(--bui-space-1)}.bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.bui-mt-2{margin-top:var(--bui-space-2)}.bui-mt-3{margin-top:var(--bui-space-3)}.bui-mt-4{margin-top:var(--bui-space-4)}.bui-mt-5{margin-top:var(--bui-space-5)}.bui-mt-6{margin-top:var(--bui-space-6)}.bui-mt-7{margin-top:var(--bui-space-7)}.bui-mt-8{margin-top:var(--bui-space-8)}.bui-mt-9{margin-top:var(--bui-space-9)}.bui-mt-10{margin-top:var(--bui-space-10)}.bui-mt-11{margin-top:var(--bui-space-11)}.bui-mt-12{margin-top:var(--bui-space-12)}.bui-mt-13{margin-top:var(--bui-space-13)}.bui-mt-14{margin-top:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mt{margin-top:var(--mt-xs)}.xs\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.xs\:bui-mt-1{margin-top:var(--bui-space-1)}.xs\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.xs\:bui-mt-2{margin-top:var(--bui-space-2)}.xs\:bui-mt-3{margin-top:var(--bui-space-3)}.xs\:bui-mt-4{margin-top:var(--bui-space-4)}.xs\:bui-mt-5{margin-top:var(--bui-space-5)}.xs\:bui-mt-6{margin-top:var(--bui-space-6)}.xs\:bui-mt-7{margin-top:var(--bui-space-7)}.xs\:bui-mt-8{margin-top:var(--bui-space-8)}.xs\:bui-mt-9{margin-top:var(--bui-space-9)}.xs\:bui-mt-10{margin-top:var(--bui-space-10)}.xs\:bui-mt-11{margin-top:var(--bui-space-11)}.xs\:bui-mt-12{margin-top:var(--bui-space-12)}.xs\:bui-mt-13{margin-top:var(--bui-space-13)}.xs\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mt{margin-top:var(--mt-sm)}.sm\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.sm\:bui-mt-1{margin-top:var(--bui-space-1)}.sm\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.sm\:bui-mt-2{margin-top:var(--bui-space-2)}.sm\:bui-mt-3{margin-top:var(--bui-space-3)}.sm\:bui-mt-4{margin-top:var(--bui-space-4)}.sm\:bui-mt-5{margin-top:var(--bui-space-5)}.sm\:bui-mt-6{margin-top:var(--bui-space-6)}.sm\:bui-mt-7{margin-top:var(--bui-space-7)}.sm\:bui-mt-8{margin-top:var(--bui-space-8)}.sm\:bui-mt-9{margin-top:var(--bui-space-9)}.sm\:bui-mt-10{margin-top:var(--bui-space-10)}.sm\:bui-mt-11{margin-top:var(--bui-space-11)}.sm\:bui-mt-12{margin-top:var(--bui-space-12)}.sm\:bui-mt-13{margin-top:var(--bui-space-13)}.sm\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mt{margin-top:var(--mt-md)}.md\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.md\:bui-mt-1{margin-top:var(--bui-space-1)}.md\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.md\:bui-mt-2{margin-top:var(--bui-space-2)}.md\:bui-mt-3{margin-top:var(--bui-space-3)}.md\:bui-mt-4{margin-top:var(--bui-space-4)}.md\:bui-mt-5{margin-top:var(--bui-space-5)}.md\:bui-mt-6{margin-top:var(--bui-space-6)}.md\:bui-mt-7{margin-top:var(--bui-space-7)}.md\:bui-mt-8{margin-top:var(--bui-space-8)}.md\:bui-mt-9{margin-top:var(--bui-space-9)}.md\:bui-mt-10{margin-top:var(--bui-space-10)}.md\:bui-mt-11{margin-top:var(--bui-space-11)}.md\:bui-mt-12{margin-top:var(--bui-space-12)}.md\:bui-mt-13{margin-top:var(--bui-space-13)}.md\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mt{margin-top:var(--mt-lg)}.lg\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.lg\:bui-mt-1{margin-top:var(--bui-space-1)}.lg\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.lg\:bui-mt-2{margin-top:var(--bui-space-2)}.lg\:bui-mt-3{margin-top:var(--bui-space-3)}.lg\:bui-mt-4{margin-top:var(--bui-space-4)}.lg\:bui-mt-5{margin-top:var(--bui-space-5)}.lg\:bui-mt-6{margin-top:var(--bui-space-6)}.lg\:bui-mt-7{margin-top:var(--bui-space-7)}.lg\:bui-mt-8{margin-top:var(--bui-space-8)}.lg\:bui-mt-9{margin-top:var(--bui-space-9)}.lg\:bui-mt-10{margin-top:var(--bui-space-10)}.lg\:bui-mt-11{margin-top:var(--bui-space-11)}.lg\:bui-mt-12{margin-top:var(--bui-space-12)}.lg\:bui-mt-13{margin-top:var(--bui-space-13)}.lg\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mt{margin-top:var(--mt-xl)}.xl\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.xl\:bui-mt-1{margin-top:var(--bui-space-1)}.xl\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.xl\:bui-mt-2{margin-top:var(--bui-space-2)}.xl\:bui-mt-3{margin-top:var(--bui-space-3)}.xl\:bui-mt-4{margin-top:var(--bui-space-4)}.xl\:bui-mt-5{margin-top:var(--bui-space-5)}.xl\:bui-mt-6{margin-top:var(--bui-space-6)}.xl\:bui-mt-7{margin-top:var(--bui-space-7)}.xl\:bui-mt-8{margin-top:var(--bui-space-8)}.xl\:bui-mt-9{margin-top:var(--bui-space-9)}.xl\:bui-mt-10{margin-top:var(--bui-space-10)}.xl\:bui-mt-11{margin-top:var(--bui-space-11)}.xl\:bui-mt-12{margin-top:var(--bui-space-12)}.xl\:bui-mt-13{margin-top:var(--bui-space-13)}.xl\:bui-mt-14{margin-top:var(--bui-space-14)}}.bui-mb{margin-bottom:var(--mb)}.bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.bui-mb-1{margin-bottom:var(--bui-space-1)}.bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.bui-mb-2{margin-bottom:var(--bui-space-2)}.bui-mb-3{margin-bottom:var(--bui-space-3)}.bui-mb-4{margin-bottom:var(--bui-space-4)}.bui-mb-5{margin-bottom:var(--bui-space-5)}.bui-mb-6{margin-bottom:var(--bui-space-6)}.bui-mb-7{margin-bottom:var(--bui-space-7)}.bui-mb-8{margin-bottom:var(--bui-space-8)}.bui-mb-9{margin-bottom:var(--bui-space-9)}.bui-mb-10{margin-bottom:var(--bui-space-10)}.bui-mb-11{margin-bottom:var(--bui-space-11)}.bui-mb-12{margin-bottom:var(--bui-space-12)}.bui-mb-13{margin-bottom:var(--bui-space-13)}.bui-mb-14{margin-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mb{margin-bottom:var(--mb-xs)}.xs\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.xs\:bui-mb-1{margin-bottom:var(--bui-space-1)}.xs\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.xs\:bui-mb-2{margin-bottom:var(--bui-space-2)}.xs\:bui-mb-3{margin-bottom:var(--bui-space-3)}.xs\:bui-mb-4{margin-bottom:var(--bui-space-4)}.xs\:bui-mb-5{margin-bottom:var(--bui-space-5)}.xs\:bui-mb-6{margin-bottom:var(--bui-space-6)}.xs\:bui-mb-7{margin-bottom:var(--bui-space-7)}.xs\:bui-mb-8{margin-bottom:var(--bui-space-8)}.xs\:bui-mb-9{margin-bottom:var(--bui-space-9)}.xs\:bui-mb-10{margin-bottom:var(--bui-space-10)}.xs\:bui-mb-11{margin-bottom:var(--bui-space-11)}.xs\:bui-mb-12{margin-bottom:var(--bui-space-12)}.xs\:bui-mb-13{margin-bottom:var(--bui-space-13)}.xs\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mb{margin-bottom:var(--mb-sm)}.sm\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.sm\:bui-mb-1{margin-bottom:var(--bui-space-1)}.sm\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.sm\:bui-mb-2{margin-bottom:var(--bui-space-2)}.sm\:bui-mb-3{margin-bottom:var(--bui-space-3)}.sm\:bui-mb-4{margin-bottom:var(--bui-space-4)}.sm\:bui-mb-5{margin-bottom:var(--bui-space-5)}.sm\:bui-mb-6{margin-bottom:var(--bui-space-6)}.sm\:bui-mb-7{margin-bottom:var(--bui-space-7)}.sm\:bui-mb-8{margin-bottom:var(--bui-space-8)}.sm\:bui-mb-9{margin-bottom:var(--bui-space-9)}.sm\:bui-mb-10{margin-bottom:var(--bui-space-10)}.sm\:bui-mb-11{margin-bottom:var(--bui-space-11)}.sm\:bui-mb-12{margin-bottom:var(--bui-space-12)}.sm\:bui-mb-13{margin-bottom:var(--bui-space-13)}.sm\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mb{margin-bottom:var(--mb-md)}.md\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.md\:bui-mb-1{margin-bottom:var(--bui-space-1)}.md\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.md\:bui-mb-2{margin-bottom:var(--bui-space-2)}.md\:bui-mb-3{margin-bottom:var(--bui-space-3)}.md\:bui-mb-4{margin-bottom:var(--bui-space-4)}.md\:bui-mb-5{margin-bottom:var(--bui-space-5)}.md\:bui-mb-6{margin-bottom:var(--bui-space-6)}.md\:bui-mb-7{margin-bottom:var(--bui-space-7)}.md\:bui-mb-8{margin-bottom:var(--bui-space-8)}.md\:bui-mb-9{margin-bottom:var(--bui-space-9)}.md\:bui-mb-10{margin-bottom:var(--bui-space-10)}.md\:bui-mb-11{margin-bottom:var(--bui-space-11)}.md\:bui-mb-12{margin-bottom:var(--bui-space-12)}.md\:bui-mb-13{margin-bottom:var(--bui-space-13)}.md\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mb{margin-bottom:var(--mb-lg)}.lg\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.lg\:bui-mb-1{margin-bottom:var(--bui-space-1)}.lg\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.lg\:bui-mb-2{margin-bottom:var(--bui-space-2)}.lg\:bui-mb-3{margin-bottom:var(--bui-space-3)}.lg\:bui-mb-4{margin-bottom:var(--bui-space-4)}.lg\:bui-mb-5{margin-bottom:var(--bui-space-5)}.lg\:bui-mb-6{margin-bottom:var(--bui-space-6)}.lg\:bui-mb-7{margin-bottom:var(--bui-space-7)}.lg\:bui-mb-8{margin-bottom:var(--bui-space-8)}.lg\:bui-mb-9{margin-bottom:var(--bui-space-9)}.lg\:bui-mb-10{margin-bottom:var(--bui-space-10)}.lg\:bui-mb-11{margin-bottom:var(--bui-space-11)}.lg\:bui-mb-12{margin-bottom:var(--bui-space-12)}.lg\:bui-mb-13{margin-bottom:var(--bui-space-13)}.lg\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mb{margin-bottom:var(--mb-xl)}.xl\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.xl\:bui-mb-1{margin-bottom:var(--bui-space-1)}.xl\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.xl\:bui-mb-2{margin-bottom:var(--bui-space-2)}.xl\:bui-mb-3{margin-bottom:var(--bui-space-3)}.xl\:bui-mb-4{margin-bottom:var(--bui-space-4)}.xl\:bui-mb-5{margin-bottom:var(--bui-space-5)}.xl\:bui-mb-6{margin-bottom:var(--bui-space-6)}.xl\:bui-mb-7{margin-bottom:var(--bui-space-7)}.xl\:bui-mb-8{margin-bottom:var(--bui-space-8)}.xl\:bui-mb-9{margin-bottom:var(--bui-space-9)}.xl\:bui-mb-10{margin-bottom:var(--bui-space-10)}.xl\:bui-mb-11{margin-bottom:var(--bui-space-11)}.xl\:bui-mb-12{margin-bottom:var(--bui-space-12)}.xl\:bui-mb-13{margin-bottom:var(--bui-space-13)}.xl\:bui-mb-14{margin-bottom:var(--bui-space-14)}}.bui-my{margin-top:var(--my);margin-bottom:var(--my)}.bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-my{margin-top:var(--my-xs);margin-bottom:var(--my-xs)}.xs\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.xs\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.xs\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.xs\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.xs\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.xs\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.xs\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.xs\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.xs\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.xs\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.xs\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.xs\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.xs\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.xs\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.xs\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.xs\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-my{margin-top:var(--my-sm);margin-bottom:var(--my-sm)}.sm\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.sm\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.sm\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.sm\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.sm\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.sm\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.sm\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.sm\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.sm\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.sm\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.sm\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.sm\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.sm\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.sm\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.sm\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.sm\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-my{margin-top:var(--my-md);margin-bottom:var(--my-md)}.md\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.md\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.md\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.md\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.md\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.md\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.md\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.md\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.md\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.md\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.md\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.md\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.md\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.md\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.md\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.md\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-my{margin-top:var(--my-lg);margin-bottom:var(--my-lg)}.lg\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.lg\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.lg\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.lg\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.lg\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.lg\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.lg\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.lg\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.lg\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.lg\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.lg\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.lg\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.lg\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.lg\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.lg\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.lg\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-my{margin-top:var(--my-xl);margin-bottom:var(--my-xl)}.xl\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.xl\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.xl\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.xl\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.xl\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.xl\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.xl\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.xl\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.xl\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.xl\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.xl\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.xl\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.xl\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.xl\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.xl\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.xl\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}.bui-mx{margin-left:var(--mx);margin-right:var(--mx)}.bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mx{margin-left:var(--mx-xs);margin-right:var(--mx-xs)}.xs\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.xs\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.xs\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.xs\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.xs\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.xs\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.xs\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.xs\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.xs\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.xs\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.xs\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.xs\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.xs\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.xs\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.xs\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.xs\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mx{margin-left:var(--mx-sm);margin-right:var(--mx-sm)}.sm\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.sm\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.sm\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.sm\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.sm\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.sm\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.sm\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.sm\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.sm\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.sm\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.sm\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.sm\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.sm\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.sm\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.sm\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.sm\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mx{margin-left:var(--mx-md);margin-right:var(--mx-md)}.md\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.md\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.md\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.md\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.md\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.md\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.md\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.md\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.md\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.md\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.md\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.md\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.md\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.md\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.md\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.md\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mx{margin-left:var(--mx-lg);margin-right:var(--mx-lg)}.lg\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.lg\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.lg\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.lg\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.lg\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.lg\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.lg\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.lg\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.lg\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.lg\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.lg\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.lg\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.lg\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.lg\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.lg\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.lg\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mx{margin-left:var(--mx-xl);margin-right:var(--mx-xl)}.xl\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.xl\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.xl\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.xl\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.xl\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.xl\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.xl\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.xl\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.xl\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.xl\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.xl\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.xl\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.xl\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.xl\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.xl\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.xl\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}.bui-display-none{display:none}.bui-display-inline{display:inline}.bui-display-inline-block{display:inline-block}.bui-display-block{display:block}@media (width>=640px){.xs\:bui-display-none{display:none}.xs\:bui-display-inline{display:inline}.xs\:bui-display-inline-block{display:inline-block}.xs\:bui-display-block{display:block}}@media (width>=768px){.sm\:bui-display-none{display:none}.sm\:bui-display-inline{display:inline}.sm\:bui-display-inline-block{display:inline-block}.sm\:bui-display-block{display:block}}@media (width>=1024px){.md\:bui-display-none{display:none}.md\:bui-display-inline{display:inline}.md\:bui-display-inline-block{display:inline-block}.md\:bui-display-block{display:block}}@media (width>=1280px){.lg\:bui-display-none{display:none}.lg\:bui-display-inline{display:inline}.lg\:bui-display-inline-block{display:inline-block}.lg\:bui-display-block{display:block}}@media (width>=1536px){.xl\:bui-display-none{display:none}.xl\:bui-display-inline{display:inline}.xl\:bui-display-inline-block{display:inline-block}.xl\:bui-display-block{display:block}}.bui-w{width:var(--width)}.bui-min-w{min-width:var(--min-width)}.bui-max-w{max-width:var(--max-width)}@media (width>=640px){.xs\:bui-w{width:var(--width)}.xs\:bui-min-w{min-width:var(--min-width)}.xs\:bui-max-w{max-width:var(--max-width)}}@media (width>=768px){.sm\:bui-w{width:var(--width)}.sm\:bui-min-w{min-width:var(--min-width)}.sm\:bui-max-w{max-width:var(--max-width)}}@media (width>=1024px){.md\:bui-w{width:var(--width)}.md\:bui-min-w{min-width:var(--min-width)}.md\:bui-max-w{max-width:var(--max-width)}}@media (width>=1280px){.lg\:bui-w{width:var(--width)}.lg\:bui-min-w{min-width:var(--min-width)}.lg\:bui-max-w{max-width:var(--max-width)}}@media (width>=1536px){.xl\:bui-w{width:var(--width)}.xl\:bui-min-w{min-width:var(--min-width)}.xl\:bui-max-w{max-width:var(--max-width)}}.bui-h{height:var(--height)}.bui-min-h{min-height:var(--min-height)}.bui-max-h{max-height:var(--max-height)}@media (width>=640px){.xs\:bui-h{height:var(--height)}.xs\:bui-min-h{min-height:var(--min-height)}.xs\:bui-max-h{max-height:var(--max-height)}}@media (width>=768px){.sm\:bui-h{height:var(--height)}.sm\:bui-min-h{min-height:var(--min-height)}.sm\:bui-max-h{max-height:var(--max-height)}}@media (width>=1024px){.md\:bui-h{height:var(--height)}.md\:bui-min-h{min-height:var(--min-height)}.md\:bui-max-h{max-height:var(--max-height)}}@media (width>=1280px){.lg\:bui-h{height:var(--height)}.lg\:bui-min-h{min-height:var(--min-height)}.lg\:bui-max-h{max-height:var(--max-height)}}@media (width>=1536px){.xl\:bui-h{height:var(--height)}.xl\:bui-min-h{min-height:var(--min-height)}.xl\:bui-max-h{max-height:var(--max-height)}}.bui-position-absolute{position:absolute}.bui-position-fixed{position:fixed}.bui-position-sticky{position:sticky}.bui-position-relative{position:relative}.bui-position-static{position:static}@media (width>=640px){.xs\:bui-position-absolute{position:absolute}.xs\:bui-position-fixed{position:fixed}.xs\:bui-position-sticky{position:sticky}.xs\:bui-position-relative{position:relative}.xs\:bui-position-static{position:static}}@media (width>=768px){.sm\:bui-position-absolute{position:absolute}.sm\:bui-position-fixed{position:fixed}.sm\:bui-position-sticky{position:sticky}.sm\:bui-position-relative{position:relative}.sm\:bui-position-static{position:static}}@media (width>=1024px){.md\:bui-position-absolute{position:absolute}.md\:bui-position-fixed{position:fixed}.md\:bui-position-sticky{position:sticky}.md\:bui-position-relative{position:relative}.md\:bui-position-static{position:static}}@media (width>=1280px){.lg\:bui-position-absolute{position:absolute}.lg\:bui-position-fixed{position:fixed}.lg\:bui-position-sticky{position:sticky}.lg\:bui-position-relative{position:relative}.lg\:bui-position-static{position:static}}@media (width>=1536px){.xl\:bui-position-absolute{position:absolute}.xl\:bui-position-fixed{position:fixed}.xl\:bui-position-sticky{position:sticky}.xl\:bui-position-relative{position:relative}.xl\:bui-position-static{position:static}}.bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.bui-col-span-1{grid-column:span 1/span 1}.bui-col-span-2{grid-column:span 2/span 2}.bui-col-span-3{grid-column:span 3/span 3}.bui-col-span-4{grid-column:span 4/span 4}.bui-col-span-5{grid-column:span 5/span 5}.bui-col-span-6{grid-column:span 6/span 6}.bui-col-span-7{grid-column:span 7/span 7}.bui-col-span-8{grid-column:span 8/span 8}.bui-col-span-9{grid-column:span 9/span 9}.bui-col-span-10{grid-column:span 10/span 10}.bui-col-span-11{grid-column:span 11/span 11}.bui-col-span-12{grid-column:span 12/span 12}.bui-col-span-auto{grid-column:span auto/span auto}.bui-col-start-1{grid-column-start:1}.bui-col-start-2{grid-column-start:2}.bui-col-start-3{grid-column-start:3}.bui-col-start-4{grid-column-start:4}.bui-col-start-5{grid-column-start:5}.bui-col-start-6{grid-column-start:6}.bui-col-start-7{grid-column-start:7}.bui-col-start-8{grid-column-start:8}.bui-col-start-9{grid-column-start:9}.bui-col-start-10{grid-column-start:10}.bui-col-start-11{grid-column-start:11}.bui-col-start-12{grid-column-start:12}.bui-col-start-13{grid-column-start:13}.bui-col-start-auto{grid-column-start:auto}.bui-col-end-1{grid-column-end:1}.bui-col-end-2{grid-column-end:2}.bui-col-end-3{grid-column-end:3}.bui-col-end-4{grid-column-end:4}.bui-col-end-5{grid-column-end:5}.bui-col-end-6{grid-column-end:6}.bui-col-end-7{grid-column-end:7}.bui-col-end-8{grid-column-end:8}.bui-col-end-9{grid-column-end:9}.bui-col-end-10{grid-column-end:10}.bui-col-end-11{grid-column-end:11}.bui-col-end-12{grid-column-end:12}.bui-col-end-13{grid-column-end:13}.bui-col-end-auto{grid-column-end:auto}.bui-row-span-1{grid-row:span 1/span 1}.bui-row-span-2{grid-row:span 2/span 2}.bui-row-span-3{grid-row:span 3/span 3}.bui-row-span-4{grid-row:span 4/span 4}.bui-row-span-5{grid-row:span 5/span 5}.bui-row-span-6{grid-row:span 6/span 6}.bui-row-span-7{grid-row:span 7/span 7}.bui-row-span-8{grid-row:span 8/span 8}.bui-row-span-9{grid-row:span 9/span 9}.bui-row-span-10{grid-row:span 10/span 10}.bui-row-span-11{grid-row:span 11/span 11}.bui-row-span-12{grid-row:span 12/span 12}.bui-row-span-auto{grid-row:span auto/span auto}@media (width>=640px){.xs\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xs\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xs\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xs\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xs\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xs\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xs\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xs\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xs\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xs\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xs\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xs\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xs\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.xs\:bui-col-span-1{grid-column:span 1/span 1}.xs\:bui-col-span-2{grid-column:span 2/span 2}.xs\:bui-col-span-3{grid-column:span 3/span 3}.xs\:bui-col-span-4{grid-column:span 4/span 4}.xs\:bui-col-span-5{grid-column:span 5/span 5}.xs\:bui-col-span-6{grid-column:span 6/span 6}.xs\:bui-col-span-7{grid-column:span 7/span 7}.xs\:bui-col-span-8{grid-column:span 8/span 8}.xs\:bui-col-span-9{grid-column:span 9/span 9}.xs\:bui-col-span-10{grid-column:span 10/span 10}.xs\:bui-col-span-11{grid-column:span 11/span 11}.xs\:bui-col-span-12{grid-column:span 12/span 12}.xs\:bui-col-span-auto{grid-column:span auto/span auto}.xs\:bui-col-start-1{grid-column-start:1}.xs\:bui-col-start-2{grid-column-start:2}.xs\:bui-col-start-3{grid-column-start:3}.xs\:bui-col-start-4{grid-column-start:4}.xs\:bui-col-start-5{grid-column-start:5}.xs\:bui-col-start-6{grid-column-start:6}.xs\:bui-col-start-7{grid-column-start:7}.xs\:bui-col-start-8{grid-column-start:8}.xs\:bui-col-start-9{grid-column-start:9}.xs\:bui-col-start-10{grid-column-start:10}.xs\:bui-col-start-11{grid-column-start:11}.xs\:bui-col-start-12{grid-column-start:12}.xs\:bui-col-start-13{grid-column-start:13}.xs\:bui-col-start-auto{grid-column-start:auto}.xs\:bui-col-end-1{grid-column-end:1}.xs\:bui-col-end-2{grid-column-end:2}.xs\:bui-col-end-3{grid-column-end:3}.xs\:bui-col-end-4{grid-column-end:4}.xs\:bui-col-end-5{grid-column-end:5}.xs\:bui-col-end-6{grid-column-end:6}.xs\:bui-col-end-7{grid-column-end:7}.xs\:bui-col-end-8{grid-column-end:8}.xs\:bui-col-end-9{grid-column-end:9}.xs\:bui-col-end-10{grid-column-end:10}.xs\:bui-col-end-11{grid-column-end:11}.xs\:bui-col-end-12{grid-column-end:12}.xs\:bui-col-end-13{grid-column-end:13}.xs\:bui-col-end-auto{grid-column-end:auto}.xs\:bui-row-span-1{grid-row:span 1/span 1}.xs\:bui-row-span-2{grid-row:span 2/span 2}.xs\:bui-row-span-3{grid-row:span 3/span 3}.xs\:bui-row-span-4{grid-row:span 4/span 4}.xs\:bui-row-span-5{grid-row:span 5/span 5}.xs\:bui-row-span-6{grid-row:span 6/span 6}.xs\:bui-row-span-7{grid-row:span 7/span 7}.xs\:bui-row-span-8{grid-row:span 8/span 8}.xs\:bui-row-span-9{grid-row:span 9/span 9}.xs\:bui-row-span-10{grid-row:span 10/span 10}.xs\:bui-row-span-11{grid-row:span 11/span 11}.xs\:bui-row-span-12{grid-row:span 12/span 12}.xs\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=768px){.sm\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.sm\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.sm\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.sm\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.sm\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.sm\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.sm\:bui-col-span-1{grid-column:span 1/span 1}.sm\:bui-col-span-2{grid-column:span 2/span 2}.sm\:bui-col-span-3{grid-column:span 3/span 3}.sm\:bui-col-span-4{grid-column:span 4/span 4}.sm\:bui-col-span-5{grid-column:span 5/span 5}.sm\:bui-col-span-6{grid-column:span 6/span 6}.sm\:bui-col-span-7{grid-column:span 7/span 7}.sm\:bui-col-span-8{grid-column:span 8/span 8}.sm\:bui-col-span-9{grid-column:span 9/span 9}.sm\:bui-col-span-10{grid-column:span 10/span 10}.sm\:bui-col-span-11{grid-column:span 11/span 11}.sm\:bui-col-span-12{grid-column:span 12/span 12}.sm\:bui-col-span-auto{grid-column:span auto/span auto}.sm\:bui-col-start-1{grid-column-start:1}.sm\:bui-col-start-2{grid-column-start:2}.sm\:bui-col-start-3{grid-column-start:3}.sm\:bui-col-start-4{grid-column-start:4}.sm\:bui-col-start-5{grid-column-start:5}.sm\:bui-col-start-6{grid-column-start:6}.sm\:bui-col-start-7{grid-column-start:7}.sm\:bui-col-start-8{grid-column-start:8}.sm\:bui-col-start-9{grid-column-start:9}.sm\:bui-col-start-10{grid-column-start:10}.sm\:bui-col-start-11{grid-column-start:11}.sm\:bui-col-start-12{grid-column-start:12}.sm\:bui-col-start-13{grid-column-start:13}.sm\:bui-col-start-auto{grid-column-start:auto}.sm\:bui-col-end-1{grid-column-end:1}.sm\:bui-col-end-2{grid-column-end:2}.sm\:bui-col-end-3{grid-column-end:3}.sm\:bui-col-end-4{grid-column-end:4}.sm\:bui-col-end-5{grid-column-end:5}.sm\:bui-col-end-6{grid-column-end:6}.sm\:bui-col-end-7{grid-column-end:7}.sm\:bui-col-end-8{grid-column-end:8}.sm\:bui-col-end-9{grid-column-end:9}.sm\:bui-col-end-10{grid-column-end:10}.sm\:bui-col-end-11{grid-column-end:11}.sm\:bui-col-end-12{grid-column-end:12}.sm\:bui-col-end-13{grid-column-end:13}.sm\:bui-col-end-auto{grid-column-end:auto}.sm\:bui-row-span-1{grid-row:span 1/span 1}.sm\:bui-row-span-2{grid-row:span 2/span 2}.sm\:bui-row-span-3{grid-row:span 3/span 3}.sm\:bui-row-span-4{grid-row:span 4/span 4}.sm\:bui-row-span-5{grid-row:span 5/span 5}.sm\:bui-row-span-6{grid-row:span 6/span 6}.sm\:bui-row-span-7{grid-row:span 7/span 7}.sm\:bui-row-span-8{grid-row:span 8/span 8}.sm\:bui-row-span-9{grid-row:span 9/span 9}.sm\:bui-row-span-10{grid-row:span 10/span 10}.sm\:bui-row-span-11{grid-row:span 11/span 11}.sm\:bui-row-span-12{grid-row:span 12/span 12}.sm\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=1024px){.md\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.md\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.md\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.md\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.md\:bui-col-span-1{grid-column:span 1/span 1}.md\:bui-col-span-2{grid-column:span 2/span 2}.md\:bui-col-span-3{grid-column:span 3/span 3}.md\:bui-col-span-4{grid-column:span 4/span 4}.md\:bui-col-span-5{grid-column:span 5/span 5}.md\:bui-col-span-6{grid-column:span 6/span 6}.md\:bui-col-span-7{grid-column:span 7/span 7}.md\:bui-col-span-8{grid-column:span 8/span 8}.md\:bui-col-span-9{grid-column:span 9/span 9}.md\:bui-col-span-10{grid-column:span 10/span 10}.md\:bui-col-span-11{grid-column:span 11/span 11}.md\:bui-col-span-12{grid-column:span 12/span 12}.md\:bui-col-span-auto{grid-column:span auto/span auto}.md\:bui-col-start-1{grid-column-start:1}.md\:bui-col-start-2{grid-column-start:2}.md\:bui-col-start-3{grid-column-start:3}.md\:bui-col-start-4{grid-column-start:4}.md\:bui-col-start-5{grid-column-start:5}.md\:bui-col-start-6{grid-column-start:6}.md\:bui-col-start-7{grid-column-start:7}.md\:bui-col-start-8{grid-column-start:8}.md\:bui-col-start-9{grid-column-start:9}.md\:bui-col-start-10{grid-column-start:10}.md\:bui-col-start-11{grid-column-start:11}.md\:bui-col-start-12{grid-column-start:12}.md\:bui-col-start-13{grid-column-start:13}.md\:bui-col-start-auto{grid-column-start:auto}.md\:bui-col-end-1{grid-column-end:1}.md\:bui-col-end-2{grid-column-end:2}.md\:bui-col-end-3{grid-column-end:3}.md\:bui-col-end-4{grid-column-end:4}.md\:bui-col-end-5{grid-column-end:5}.md\:bui-col-end-6{grid-column-end:6}.md\:bui-col-end-7{grid-column-end:7}.md\:bui-col-end-8{grid-column-end:8}.md\:bui-col-end-9{grid-column-end:9}.md\:bui-col-end-10{grid-column-end:10}.md\:bui-col-end-11{grid-column-end:11}.md\:bui-col-end-12{grid-column-end:12}.md\:bui-col-end-13{grid-column-end:13}.md\:bui-col-end-auto{grid-column-end:auto}.md\:bui-row-span-1{grid-row:span 1/span 1}.md\:bui-row-span-2{grid-row:span 2/span 2}.md\:bui-row-span-3{grid-row:span 3/span 3}.md\:bui-row-span-4{grid-row:span 4/span 4}.md\:bui-row-span-5{grid-row:span 5/span 5}.md\:bui-row-span-6{grid-row:span 6/span 6}.md\:bui-row-span-7{grid-row:span 7/span 7}.md\:bui-row-span-8{grid-row:span 8/span 8}.md\:bui-row-span-9{grid-row:span 9/span 9}.md\:bui-row-span-10{grid-row:span 10/span 10}.md\:bui-row-span-11{grid-row:span 11/span 11}.md\:bui-row-span-12{grid-row:span 12/span 12}.md\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=1280px){.lg\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.lg\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.lg\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.lg\:bui-col-span-1{grid-column:span 1/span 1}.lg\:bui-col-span-2{grid-column:span 2/span 2}.lg\:bui-col-span-3{grid-column:span 3/span 3}.lg\:bui-col-span-4{grid-column:span 4/span 4}.lg\:bui-col-span-5{grid-column:span 5/span 5}.lg\:bui-col-span-6{grid-column:span 6/span 6}.lg\:bui-col-span-7{grid-column:span 7/span 7}.lg\:bui-col-span-8{grid-column:span 8/span 8}.lg\:bui-col-span-9{grid-column:span 9/span 9}.lg\:bui-col-span-10{grid-column:span 10/span 10}.lg\:bui-col-span-11{grid-column:span 11/span 11}.lg\:bui-col-span-12{grid-column:span 12/span 12}.lg\:bui-col-span-auto{grid-column:span auto/span auto}.lg\:bui-col-start-1{grid-column-start:1}.lg\:bui-col-start-2{grid-column-start:2}.lg\:bui-col-start-3{grid-column-start:3}.lg\:bui-col-start-4{grid-column-start:4}.lg\:bui-col-start-5{grid-column-start:5}.lg\:bui-col-start-6{grid-column-start:6}.lg\:bui-col-start-7{grid-column-start:7}.lg\:bui-col-start-8{grid-column-start:8}.lg\:bui-col-start-9{grid-column-start:9}.lg\:bui-col-start-10{grid-column-start:10}.lg\:bui-col-start-11{grid-column-start:11}.lg\:bui-col-start-12{grid-column-start:12}.lg\:bui-col-start-13{grid-column-start:13}.lg\:bui-col-start-auto{grid-column-start:auto}.lg\:bui-col-end-1{grid-column-end:1}.lg\:bui-col-end-2{grid-column-end:2}.lg\:bui-col-end-3{grid-column-end:3}.lg\:bui-col-end-4{grid-column-end:4}.lg\:bui-col-end-5{grid-column-end:5}.lg\:bui-col-end-6{grid-column-end:6}.lg\:bui-col-end-7{grid-column-end:7}.lg\:bui-col-end-8{grid-column-end:8}.lg\:bui-col-end-9{grid-column-end:9}.lg\:bui-col-end-10{grid-column-end:10}.lg\:bui-col-end-11{grid-column-end:11}.lg\:bui-col-end-12{grid-column-end:12}.lg\:bui-col-end-13{grid-column-end:13}.lg\:bui-col-end-auto{grid-column-end:auto}.lg\:bui-row-span-1{grid-row:span 1/span 1}.lg\:bui-row-span-2{grid-row:span 2/span 2}.lg\:bui-row-span-3{grid-row:span 3/span 3}.lg\:bui-row-span-4{grid-row:span 4/span 4}.lg\:bui-row-span-5{grid-row:span 5/span 5}.lg\:bui-row-span-6{grid-row:span 6/span 6}.lg\:bui-row-span-7{grid-row:span 7/span 7}.lg\:bui-row-span-8{grid-row:span 8/span 8}.lg\:bui-row-span-9{grid-row:span 9/span 9}.lg\:bui-row-span-10{grid-row:span 10/span 10}.lg\:bui-row-span-11{grid-row:span 11/span 11}.lg\:bui-row-span-12{grid-row:span 12/span 12}.lg\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=1536px){.xl\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xl\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xl\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xl\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xl\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xl\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xl\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.xl\:bui-col-span-1{grid-column:span 1/span 1}.xl\:bui-col-span-2{grid-column:span 2/span 2}.xl\:bui-col-span-3{grid-column:span 3/span 3}.xl\:bui-col-span-4{grid-column:span 4/span 4}.xl\:bui-col-span-5{grid-column:span 5/span 5}.xl\:bui-col-span-6{grid-column:span 6/span 6}.xl\:bui-col-span-7{grid-column:span 7/span 7}.xl\:bui-col-span-8{grid-column:span 8/span 8}.xl\:bui-col-span-9{grid-column:span 9/span 9}.xl\:bui-col-span-10{grid-column:span 10/span 10}.xl\:bui-col-span-11{grid-column:span 11/span 11}.xl\:bui-col-span-12{grid-column:span 12/span 12}.xl\:bui-col-span-auto{grid-column:span auto/span auto}.xl\:bui-col-start-1{grid-column-start:1}.xl\:bui-col-start-2{grid-column-start:2}.xl\:bui-col-start-3{grid-column-start:3}.xl\:bui-col-start-4{grid-column-start:4}.xl\:bui-col-start-5{grid-column-start:5}.xl\:bui-col-start-6{grid-column-start:6}.xl\:bui-col-start-7{grid-column-start:7}.xl\:bui-col-start-8{grid-column-start:8}.xl\:bui-col-start-9{grid-column-start:9}.xl\:bui-col-start-10{grid-column-start:10}.xl\:bui-col-start-11{grid-column-start:11}.xl\:bui-col-start-12{grid-column-start:12}.xl\:bui-col-start-13{grid-column-start:13}.xl\:bui-col-start-auto{grid-column-start:auto}.xl\:bui-col-end-1{grid-column-end:1}.xl\:bui-col-end-2{grid-column-end:2}.xl\:bui-col-end-3{grid-column-end:3}.xl\:bui-col-end-4{grid-column-end:4}.xl\:bui-col-end-5{grid-column-end:5}.xl\:bui-col-end-6{grid-column-end:6}.xl\:bui-col-end-7{grid-column-end:7}.xl\:bui-col-end-8{grid-column-end:8}.xl\:bui-col-end-9{grid-column-end:9}.xl\:bui-col-end-10{grid-column-end:10}.xl\:bui-col-end-11{grid-column-end:11}.xl\:bui-col-end-12{grid-column-end:12}.xl\:bui-col-end-13{grid-column-end:13}.xl\:bui-col-end-auto{grid-column-end:auto}.xl\:bui-row-span-1{grid-row:span 1/span 1}.xl\:bui-row-span-2{grid-row:span 2/span 2}.xl\:bui-row-span-3{grid-row:span 3/span 3}.xl\:bui-row-span-4{grid-row:span 4/span 4}.xl\:bui-row-span-5{grid-row:span 5/span 5}.xl\:bui-row-span-6{grid-row:span 6/span 6}.xl\:bui-row-span-7{grid-row:span 7/span 7}.xl\:bui-row-span-8{grid-row:span 8/span 8}.xl\:bui-row-span-9{grid-row:span 9/span 9}.xl\:bui-row-span-10{grid-row:span 10/span 10}.xl\:bui-row-span-11{grid-row:span 11/span 11}.xl\:bui-row-span-12{grid-row:span 12/span 12}.xl\:bui-row-span-auto{grid-row:span auto/span auto}}.bui-gap{gap:var(--gap)}.bui-gap-0\.5{gap:var(--bui-space-0_5)}.bui-gap-1{gap:var(--bui-space-1)}.bui-gap-1\.5{gap:var(--bui-space-1_5)}.bui-gap-2{gap:var(--bui-space-2)}.bui-gap-3{gap:var(--bui-space-3)}.bui-gap-4{gap:var(--bui-space-4)}.bui-gap-5{gap:var(--bui-space-5)}.bui-gap-6{gap:var(--bui-space-6)}.bui-gap-7{gap:var(--bui-space-7)}.bui-gap-8{gap:var(--bui-space-8)}.bui-gap-9{gap:var(--bui-space-9)}.bui-gap-10{gap:var(--bui-space-10)}.bui-gap-11{gap:var(--bui-space-11)}.bui-gap-12{gap:var(--bui-space-12)}.bui-gap-13{gap:var(--bui-space-13)}.bui-gap-14{gap:var(--bui-space-14)}@media (width>=640px){.xs\:bui-gap{gap:var(--gap-xs)}.xs\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.xs\:bui-gap-1{gap:var(--bui-space-1)}.xs\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.xs\:bui-gap-2{gap:var(--bui-space-2)}.xs\:bui-gap-3{gap:var(--bui-space-3)}.xs\:bui-gap-4{gap:var(--bui-space-4)}.xs\:bui-gap-5{gap:var(--bui-space-5)}.xs\:bui-gap-6{gap:var(--bui-space-6)}.xs\:bui-gap-7{gap:var(--bui-space-7)}.xs\:bui-gap-8{gap:var(--bui-space-8)}.xs\:bui-gap-9{gap:var(--bui-space-9)}.xs\:bui-gap-10{gap:var(--bui-space-10)}.xs\:bui-gap-11{gap:var(--bui-space-11)}.xs\:bui-gap-12{gap:var(--bui-space-12)}.xs\:bui-gap-13{gap:var(--bui-space-13)}.xs\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-gap{gap:var(--gap-sm)}.sm\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.sm\:bui-gap-1{gap:var(--bui-space-1)}.sm\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.sm\:bui-gap-2{gap:var(--bui-space-2)}.sm\:bui-gap-3{gap:var(--bui-space-3)}.sm\:bui-gap-4{gap:var(--bui-space-4)}.sm\:bui-gap-5{gap:var(--bui-space-5)}.sm\:bui-gap-6{gap:var(--bui-space-6)}.sm\:bui-gap-7{gap:var(--bui-space-7)}.sm\:bui-gap-8{gap:var(--bui-space-8)}.sm\:bui-gap-9{gap:var(--bui-space-9)}.sm\:bui-gap-10{gap:var(--bui-space-10)}.sm\:bui-gap-11{gap:var(--bui-space-11)}.sm\:bui-gap-12{gap:var(--bui-space-12)}.sm\:bui-gap-13{gap:var(--bui-space-13)}.sm\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-gap{gap:var(--gap-md)}.md\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.md\:bui-gap-1{gap:var(--bui-space-1)}.md\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.md\:bui-gap-2{gap:var(--bui-space-2)}.md\:bui-gap-3{gap:var(--bui-space-3)}.md\:bui-gap-4{gap:var(--bui-space-4)}.md\:bui-gap-5{gap:var(--bui-space-5)}.md\:bui-gap-6{gap:var(--bui-space-6)}.md\:bui-gap-7{gap:var(--bui-space-7)}.md\:bui-gap-8{gap:var(--bui-space-8)}.md\:bui-gap-9{gap:var(--bui-space-9)}.md\:bui-gap-10{gap:var(--bui-space-10)}.md\:bui-gap-11{gap:var(--bui-space-11)}.md\:bui-gap-12{gap:var(--bui-space-12)}.md\:bui-gap-13{gap:var(--bui-space-13)}.md\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-gap{gap:var(--gap-lg)}.lg\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.lg\:bui-gap-1{gap:var(--bui-space-1)}.lg\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.lg\:bui-gap-2{gap:var(--bui-space-2)}.lg\:bui-gap-3{gap:var(--bui-space-3)}.lg\:bui-gap-4{gap:var(--bui-space-4)}.lg\:bui-gap-5{gap:var(--bui-space-5)}.lg\:bui-gap-6{gap:var(--bui-space-6)}.lg\:bui-gap-7{gap:var(--bui-space-7)}.lg\:bui-gap-8{gap:var(--bui-space-8)}.lg\:bui-gap-9{gap:var(--bui-space-9)}.lg\:bui-gap-10{gap:var(--bui-space-10)}.lg\:bui-gap-11{gap:var(--bui-space-11)}.lg\:bui-gap-12{gap:var(--bui-space-12)}.lg\:bui-gap-13{gap:var(--bui-space-13)}.lg\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-gap{gap:var(--gap-xl)}.xl\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.xl\:bui-gap-1{gap:var(--bui-space-1)}.xl\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.xl\:bui-gap-2{gap:var(--bui-space-2)}.xl\:bui-gap-3{gap:var(--bui-space-3)}.xl\:bui-gap-4{gap:var(--bui-space-4)}.xl\:bui-gap-5{gap:var(--bui-space-5)}.xl\:bui-gap-6{gap:var(--bui-space-6)}.xl\:bui-gap-7{gap:var(--bui-space-7)}.xl\:bui-gap-8{gap:var(--bui-space-8)}.xl\:bui-gap-9{gap:var(--bui-space-9)}.xl\:bui-gap-10{gap:var(--bui-space-10)}.xl\:bui-gap-11{gap:var(--bui-space-11)}.xl\:bui-gap-12{gap:var(--bui-space-12)}.xl\:bui-gap-13{gap:var(--bui-space-13)}.xl\:bui-gap-14{gap:var(--bui-space-14)}}.bui-align-start{align-items:start}.bui-align-center{align-items:center}.bui-align-end{align-items:end}.bui-align-baseline{align-items:baseline}.bui-align-stretch{align-items:stretch}.bui-jc-start{justify-content:start}.bui-jc-center{justify-content:center}.bui-jc-end{justify-content:end}.bui-jc-between{justify-content:space-between}.bui-fd-row{flex-direction:row}.bui-fd-column{flex-direction:column}.bui-fd-row-reverse{flex-direction:row-reverse}.bui-fd-column-reverse{flex-direction:column-reverse}@media (width>=640px){.xs\:bui-align-start{align-items:start}.xs\:bui-align-center{align-items:center}.xs\:bui-align-end{align-items:end}.xs\:bui-align-stretch{align-items:stretch}.xs\:bui-jc-start{justify-content:start}.xs\:bui-jc-center{justify-content:center}.xs\:bui-jc-end{justify-content:end}.xs\:bui-jc-between{justify-content:space-between}.xs\:bui-fd-row{flex-direction:row}.xs\:bui-fd-column{flex-direction:column}.xs\:bui-fd-row-reverse{flex-direction:row-reverse}.xs\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=768px){.sm\:bui-align-start{align-items:start}.sm\:bui-align-center{align-items:center}.sm\:bui-align-end{align-items:end}.sm\:bui-align-stretch{align-items:stretch}.sm\:bui-jc-start{justify-content:start}.sm\:bui-jc-center{justify-content:center}.sm\:bui-jc-end{justify-content:end}.sm\:bui-jc-between{justify-content:space-between}.sm\:bui-fd-row{flex-direction:row}.sm\:bui-fd-column{flex-direction:column}.sm\:bui-fd-row-reverse{flex-direction:row-reverse}.sm\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1024px){.md\:bui-align-start{align-items:start}.md\:bui-align-center{align-items:center}.md\:bui-align-end{align-items:end}.md\:bui-align-stretch{align-items:stretch}.md\:bui-jc-start{justify-content:start}.md\:bui-jc-center{justify-content:center}.md\:bui-jc-end{justify-content:end}.md\:bui-jc-between{justify-content:space-between}.md\:bui-fd-row{flex-direction:row}.md\:bui-fd-column{flex-direction:column}.md\:bui-fd-row-reverse{flex-direction:row-reverse}.md\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1280px){.lg\:bui-align-start{align-items:start}.lg\:bui-align-center{align-items:center}.lg\:bui-align-end{align-items:end}.lg\:bui-align-stretch{align-items:stretch}.lg\:bui-jc-start{justify-content:start}.lg\:bui-jc-center{justify-content:center}.lg\:bui-jc-end{justify-content:end}.lg\:bui-jc-between{justify-content:space-between}.lg\:bui-fd-row{flex-direction:row}.lg\:bui-fd-column{flex-direction:column}.lg\:bui-fd-row-reverse{flex-direction:row-reverse}.lg\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1536px){.xl\:bui-align-start{align-items:start}.xl\:bui-align-center{align-items:center}.xl\:bui-align-end{align-items:end}.xl\:bui-align-stretch{align-items:stretch}.xl\:bui-jc-start{justify-content:start}.xl\:bui-jc-center{justify-content:center}.xl\:bui-jc-end{justify-content:end}.xl\:bui-jc-between{justify-content:space-between}.xl\:bui-fd-row{flex-direction:row}.xl\:bui-fd-column{flex-direction:column}.xl\:bui-fd-row-reverse{flex-direction:row-reverse}.xl\:bui-fd-column-reverse{flex-direction:column-reverse}}}
\ No newline at end of file
diff --git a/docs-ui/public/theme-spotify.css b/docs-ui/public/theme-spotify.css
new file mode 100644
index 0000000000..b0bf517701
--- /dev/null
+++ b/docs-ui/public/theme-spotify.css
@@ -0,0 +1 @@
+@font-face{font-family:CircularSpTitle;font-weight:900;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSpTitle-Black-4588c99025b967475c31695b0743dd1a.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSpTitle-Black-506746f387a26f25aa3d023b3e501d34.woff)format("woff")}@font-face{font-family:CircularSpTitle;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSpTitle-Bold-b2586b06a2e1522e9d879d84c2792a58.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSpTitle-Bold-1624fb2df28c20d7203d7fb86ce8b481.woff)format("woff")}@font-face{font-family:CircularSp;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff)format("woff")}@font-face{font-family:CircularSp;font-weight:400;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Book-a00e99ef9996a3a157fb6b746856d04f.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Book-3f73da7d35bd81c706bce7bbb84964de.woff)format("woff")}@font-face{font-family:CircularSp;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff)format("woff")}[data-theme-name=spotify]{--bui-font-text:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--bui-font-title:CircularSpTitle,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--bui-font-regular:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;& .bui-Button{border-radius:var(--bui-radius-3);padding-inline:var(--bui-space-3)}& .bui-ButtonIcon{padding:0}& .bui-MenuPopup{box-sizing:border-box;max-width:21.25rem}& .bui-MenuSubmenuTrigger,& .bui-MenuItem{height:auto;min-height:2rem}& .bui-Text{font-family:var(--bui-font-text)}& .bui-Heading{font-family:var(--bui-font-title)}& .bui-TableRow{border-radius:var(--bui-radius-4);border:none}& .bui-TableRow:hover td:first-child{border-top-left-radius:var(--bui-radius-2);border-bottom-left-radius:var(--bui-radius-2)}& .bui-TableRow:hover td:last-child{border-top-right-radius:var(--bui-radius-2);border-bottom-right-radius:var(--bui-radius-2)}& .bui-TableBody:before,& .bui-TableBody:after{line-height:var(--bui-space-1);content:"";display:block}& .bui-TableHeader .bui-TableRow{border-bottom:1px solid var(--bui-border)}& .bui-TableHead{font-size:var(--bui-font-size-2);color:var(--bui-fg-secondary);font-weight:var(--bui-font-weight-regular)}& .bui-HeaderToolbar{padding-top:var(--bui-space-2);padding-inline:var(--bui-space-2)}& .bui-HeaderToolbarWrapper{border-radius:var(--bui-radius-3);padding-inline:var(--bui-space-3);border:none}& .bui-HeaderToolbarControls{right:calc(var(--bui-space-3) - 1px)}& .bui-HeaderTabsWrapper{margin-top:var(--bui-space-2);margin-inline:var(--bui-space-2);border-radius:var(--bui-radius-3);padding-inline:var(--bui-space-1);border:none}& .bui-Input{border-radius:var(--bui-radius-3)}& .bui-Tag{border-radius:var(--bui-radius-full)}}[data-theme-mode=light][data-theme-name=spotify]{--bui-bg:var(--bui-gray-1);--bui-bg-surface-1:var(--bui-white);--bui-bg-surface-2:var(--bui-gray-2);--bui-bg-solid:#1ed760;--bui-bg-solid-hover:#3be477;--bui-bg-solid-pressed:#1abc54;--bui-bg-solid-disabled:var(--bui-gray-2);--bui-fg-primary:var(--bui-black);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-solid:var(--bui-black);--bui-border:var(--bui-gray-3);--bui-border-hover:#0000004d;--bui-border-pressed:#00000080;--bui-border-disabled:#0000001a;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#0003;& .bui-HeaderToolbarWrapper,& .bui-HeaderTabsWrapper{border:1px solid var(--bui-border)}}[data-theme-mode=dark][data-theme-name=spotify]{--bui-bg:var(--bui-black);--bui-bg-surface-1:var(--bui-gray-1);--bui-bg-surface-2:var(--bui-gray-2);--bui-bg-solid:#1ed760;--bui-bg-solid-hover:#3be477;--bui-bg-solid-pressed:#1abc54;--bui-bg-solid-disabled:#0f6c30;--bui-bg-tint:#242424;--bui-bg-tint-hover:#202020;--bui-bg-tint-pressed:#292929;--bui-bg-tint-disabled:#fffc;--bui-bg-danger:#3b1219;--bui-bg-warning:#302008;--bui-bg-success:#132d21;--bui-fg-primary:var(--bui-white);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:var(--bui-white);--bui-fg-link-hover:var(--bui-white);--bui-fg-disabled:var(--bui-gray-5);--bui-fg-solid:var(--bui-black);--bui-fg-solid-disabled:#083618;--bui-fg-tint:var(--bui-white);--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#e22b2b;--bui-fg-warning:#e36d05;--bui-fg-success:#1db954;--bui-border:var(--bui-gray-3);--bui-border-hover:#fff6;--bui-border-pressed:#ffffff80;--bui-border-disabled:#fff3;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#fff3}
\ No newline at end of file
diff --git a/docs-ui/scripts/sync-css.js b/docs-ui/scripts/sync-css.js
new file mode 100644
index 0000000000..4763fdecc1
--- /dev/null
+++ b/docs-ui/scripts/sync-css.js
@@ -0,0 +1,149 @@
+const fs = require('fs');
+const path = require('path');
+const { bundle } = require('lightningcss');
+const chokidar = require('chokidar');
+
+// Configuration
+const config = {
+ UIPath: '../../packages/ui',
+ publicPath: '../public',
+ files: [
+ {
+ source: 'css/styles.css',
+ destination: 'theme-backstage.css',
+ name: 'Main Styles',
+ },
+ {
+ source: '../../.storybook/themes/spotify.css',
+ destination: 'theme-spotify.css',
+ name: 'Spotify Theme',
+ },
+ ],
+};
+
+class CSSSync {
+ constructor() {
+ this.UIPath = path.resolve(__dirname, config.UIPath);
+ this.publicPath = path.resolve(__dirname, config.publicPath);
+ this.isWatching = process.argv.includes('--watch');
+ }
+
+ async syncFile(fileConfig) {
+ const sourcePath = path.join(this.UIPath, fileConfig.source);
+ const destPath = path.join(this.publicPath, fileConfig.destination);
+
+ try {
+ // Check if source file exists
+ if (!fs.existsSync(sourcePath)) {
+ console.warn(`⚠️ Source file not found: ${sourcePath}`);
+ return false;
+ }
+
+ // Ensure destination directory exists
+ fs.mkdirSync(path.dirname(destPath), { recursive: true });
+
+ // Bundle and optimize CSS
+ const result = await bundle({
+ filename: sourcePath,
+ minify: true,
+ });
+
+ // Write to destination
+ fs.writeFileSync(destPath, result.code);
+
+ console.log(
+ `✅ ${fileConfig.name}: ${fileConfig.source} → ${fileConfig.destination}`,
+ );
+ return true;
+ } catch (error) {
+ console.error(`❌ Error syncing ${fileConfig.name}:`, error.message);
+ return false;
+ }
+ }
+
+ async syncAll() {
+ console.log('🔄 Syncing CSS files...\n');
+
+ let successCount = 0;
+ for (const fileConfig of config.files) {
+ if (await this.syncFile(fileConfig)) {
+ successCount++;
+ }
+ }
+
+ console.log(
+ `\n✨ Synced ${successCount}/${config.files.length} CSS files successfully!`,
+ );
+
+ if (successCount > 0) {
+ console.log('\n📁 Available CSS files in public/:');
+ config.files.forEach(file => {
+ const destPath = path.join(this.publicPath, file.destination);
+ if (fs.existsSync(destPath)) {
+ const stats = fs.statSync(destPath);
+ const size = (stats.size / 1024).toFixed(2);
+ console.log(` • ${file.destination} (${size} KB)`);
+ }
+ });
+ }
+ }
+
+ startWatching() {
+ console.log('👀 Watching for CSS changes...\n');
+
+ // Watch all source files
+ const watchPaths = config.files.map(file =>
+ path.join(this.UIPath, file.source),
+ );
+
+ const watcher = chokidar.watch(watchPaths, {
+ ignored: /node_modules/,
+ persistent: true,
+ });
+
+ watcher.on('change', async filePath => {
+ console.log(
+ `\n🔄 Change detected: ${path.relative(this.UIPath, filePath)}`,
+ );
+
+ // Find which file changed and sync it
+ const fileConfig = config.files.find(file =>
+ filePath.endsWith(file.source.replace(/\//g, path.sep)),
+ );
+
+ if (fileConfig) {
+ await this.syncFile(fileConfig);
+ }
+ });
+
+ watcher.on('error', error => console.error('❌ Watch error:', error));
+
+ // Handle process termination
+ process.on('SIGINT', () => {
+ console.log('\n👋 Stopping CSS sync...');
+ watcher.close();
+ process.exit(0);
+ });
+ }
+
+ async run() {
+ console.log('🎨 BUI CSS Sync Tool\n');
+ console.log(`📂 BUI path: ${this.UIPath}`);
+ console.log(`📂 Public path: ${this.publicPath}\n`);
+
+ // Initial sync
+ await this.syncAll();
+
+ // Watch for changes if requested
+ if (this.isWatching) {
+ this.startWatching();
+ }
+ }
+}
+
+// Run the sync tool
+const cssSync = new CSSSync();
+cssSync.run().catch(error => {
+ console.error('❌ CSS Sync failed:', error);
+ process.exit(1);
+});
diff --git a/docs-ui/src/app/changelog/page.mdx b/docs-ui/src/app/changelog/page.mdx
new file mode 100644
index 0000000000..bbeaa98458
--- /dev/null
+++ b/docs-ui/src/app/changelog/page.mdx
@@ -0,0 +1,13 @@
+import { Changelog } from '@/components/Changelog';
+
+# Changelog
+
+
+ Hello World
+
+ Project 1
+ Project 2
+
+
+`}
+/>
+
+
+
+
+### Content display
+
+
+
+
+### Selection and inputs
+
+
+
+
+### Navigation
+
+
+
+
+### Images and icons
+
+
+
+
+### Feedback indicators
+
+
+
+
+### Typography
+
+
+
diff --git a/docs-ui/src/app/icon.svg b/docs-ui/src/app/icon.svg
new file mode 100644
index 0000000000..b50d29e902
--- /dev/null
+++ b/docs-ui/src/app/icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/docs-ui/src/app/layout.module.css b/docs-ui/src/app/layout.module.css
new file mode 100644
index 0000000000..df89f02283
--- /dev/null
+++ b/docs-ui/src/app/layout.module.css
@@ -0,0 +1,46 @@
+.container {
+ position: relative;
+ z-index: 20;
+ margin-bottom: 48px;
+ padding-inline: 24px;
+}
+
+.contentWrapper {
+ display: flex;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.content {
+ display: flex;
+ gap: 40px;
+}
+
+.contentInner {
+ flex: 1;
+ min-width: 0;
+ overflow-x: hidden;
+}
+
+.toc {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ .container {
+ width: calc(100% - 260px);
+ margin-left: 260px;
+ margin-right: 40px;
+ }
+}
+
+@media (min-width: 1280px) {
+ .toc {
+ display: block;
+ width: 240px;
+ flex-shrink: 0;
+ }
+}
diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx
new file mode 100644
index 0000000000..ad056626d8
--- /dev/null
+++ b/docs-ui/src/app/layout.tsx
@@ -0,0 +1,72 @@
+import type { Metadata } from 'next';
+import { Sidebar } from '@/components/Sidebar/Sidebar';
+import { Toolbar } from '@/components/Toolbar';
+import { Providers } from './providers';
+import { CustomTheme } from '@/components/CustomTheme';
+import { TableOfContents } from '@/components/TableOfContents';
+import { MobileBottomNav } from '@/components/MobileBottomNav';
+import styles from './layout.module.css';
+
+import '../css/globals.css';
+import '/public/theme-backstage.css';
+import '/public/theme-spotify.css';
+
+export const metadata: Metadata = {
+ title: 'Backstage UI',
+ description: 'UI library for Backstage',
+ metadataBase: new URL('https://ui.backstage.io'),
+};
+
+async function getLatestPackageVersion(): Promise {
+ try {
+ const response = await fetch('https://registry.npmjs.org/@backstage/ui', {
+ next: { revalidate: 3600 }, // Cache for 1 hour
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch package info');
+ }
+
+ const data = await response.json();
+ return data['dist-tags']?.latest;
+ } catch (error) {
+ console.error('Error fetching package version:', error);
+ return '0.0.0';
+ }
+}
+
+export default async function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ const packageVersion = await getLatestPackageVersion();
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/docs-ui/src/app/opengraph-image.jpg b/docs-ui/src/app/opengraph-image.jpg
new file mode 100644
index 0000000000..86546a32ee
Binary files /dev/null and b/docs-ui/src/app/opengraph-image.jpg differ
diff --git a/docs-ui/src/app/page.mdx b/docs-ui/src/app/page.mdx
new file mode 100644
index 0000000000..9a796b401b
--- /dev/null
+++ b/docs-ui/src/app/page.mdx
@@ -0,0 +1,83 @@
+import { CodeBlock } from '@/components/CodeBlock';
+import { Banner } from '@/components/Banner';
+import { snippet } from './snippets';
+
+# Welcome to Backstage UI
+
+Backstage UI is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS.
+This open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Backstage UI
+is designed to deliver a consistent, accessible, and extensible experience tailored to Backstage users.
+
+## Import BUI's global styles
+
+Backstage UI works by importing a global CSS file at the root of your application. This file includes all the default styles for the components.
+First, you'll need to install the package using a package manager. For example, if you're using Yarn:
+
+
+ Hello World
+
+ ;`;
diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/docs-ui/src/app/tokens/page.mdx
similarity index 63%
rename from canon-docs/src/app/(docs)/theme/theming/page.mdx
rename to docs-ui/src/app/tokens/page.mdx
index ed7f801db0..8e9031c81c 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/docs-ui/src/app/tokens/page.mdx
@@ -3,48 +3,109 @@ import * as Table from '@/components/Table';
import { Chip } from '@/components/Chip';
import { customTheme } from '@/snippets/code-snippets';
-# Theming
+# Tokens
-Canon's theming is built entirely on CSS, without relying on any CSS-in-JS libraries.
-At its core, it provides a solid default theme that is easily customizable using a
-comprehensive set of CSS variables. Additionally, it enables anyone to adapt the design
-to their specific needs. Each component comes with fixed class names, making customization
-even more straightforward.
+## Responsive breakpoints
-## Light & Dark modes
+Backstage UI is built on a responsive design system, meaning that the components are
+designed to adapt to different screen sizes. By default we offer a set of
+breakpoints that you can use to create responsive components.
-By default, Canon supports both light and dark modes using the `data-theme` attribute.
-The light theme is applied by default if no `data-theme` attribute is specified. To create
-a custom theme, you'll need to define both light and dark modes as outlined below. If
-only one mode is defined, the other will fall back to the default theme.
+
+
+
+ Breakpoint prefix
+ Minimum width
+ CSS
+
+
+
+
+
+ xs
+
+
+ 0px
+
+
+ {`{ ... }`}
+
+
+
+
+ sm
+
+
+ 640px
+
+
+ {`@media (min-width: 640px) { ... }`}
+
+
+
+
+ md
+
+
+ 768px
+
+
+ {`@media (min-width: 768px) { ... }`}
+
+
+
+
+ lg
+
+
+ 1024px
+
+
+ {`@media (min-width: 1024px) { ... }`}
+
+
+
+
+ xl
+
+
+ 1280px
+
+
+ {`@media (min-width: 1280px) { ... }`}
+
+
+
+
+ 2xl
+
+
+ 1536px
+
+
+ {`@media (min-width: 1536px) { ... }`}
+
+
+
+
-## How to create your own theme
+Backstage UI components are designed to be responsive, meaning that they will adapt
+to different screen sizes. Not every component is responsive, but the ones
+that are will have a prop to control the responsive behavior.
-In our [started guide](/), we ask you to import two css files. The `core.css` file includes
-the default set of variables. We recommend to keep this file in place and add your own theme
-on top of it. `core.css` also include an opinionated reset. If you decided to remove `core.css`
-you will have to provide your own reset css.
+The behaviour is the same for each component. For each prop, instead of adding
+the value, you add an object with the value and the breakpoint prefix.
-Here's an example of how your theme.css file should look like:
+
-
-Every component has a unique prefix `.canon-` followed by the component name. Component props
-are represented using the `data-` attribute. That way, class names are easily identifiable.
-
-## Available CSS variables
-
-### Base colors
+## Base colors
These colors are used for special purposes like ring, scrollbar, ...
@@ -58,7 +119,7 @@ These colors are used for special purposes like ring, scrollbar, ...
- --canon-black
+ --bui-black
Pure black color. This one should be the same in light and dark themes.
@@ -66,7 +127,7 @@ These colors are used for special purposes like ring, scrollbar, ...
- --canon-white
+ --bui-white
Pure white color. This one should be the same in light and dark themes.
@@ -74,59 +135,59 @@ These colors are used for special purposes like ring, scrollbar, ...
- --canon-gray-1
+ --bui-gray-1
You can use these mostly for backgrounds colors.
- --canon-gray-2
+ --bui-gray-2
You can use these mostly for backgrounds colors.
- --canon-gray-3
+ --bui-gray-3
You can use these mostly for backgrounds colors.
- --canon-gray-4
+ --bui-gray-4
You can use these mostly for backgrounds colors.
- --canon-gray-5
+ --bui-gray-5
You can use these mostly for backgrounds colors.
- --canon-gray-6
+ --bui-gray-6
You can use these mostly for backgrounds colors.
- --canon-gray-7
+ --bui-gray-7
You can use these mostly for backgrounds colors.
- --canon-gray-8
+ --bui-gray-8
You can use these mostly for backgrounds colors.
-### Core background colors
+## Core background colors
These colors are used for the background of your application. We are mostly using for now a
-single elevated background for panels. `--canon-bg` should mostly use as the main background
+single elevated background for panels. `--bui-bg` should mostly use as the main background
color of your app.
@@ -139,94 +200,94 @@ color of your app.
- --canon-bg
+ --bui-bg
The background color of your Backstage instance.
- --canon-bg-surface-1
+ --bui-bg-surface-1
Use for any panels or elevated surfaces.
- --canon-bg-surface-2
+ --bui-bg-surface-2
Use for any panels or elevated surfaces.
- --canon-bg-solid
+ --bui-bg-solid
Used for solid background colors.
- --canon-bg-solid-hover
+ --bui-bg-solid-hover
Used for solid background colors when hovered.
- --canon-bg-solid-pressed
+ --bui-bg-solid-pressed
Used for solid background colors when pressed.
- --canon-bg-solid-disabled
+ --bui-bg-solid-disabled
Used for solid background colors when disabled.
- --canon-bg-tint
+ --bui-bg-tint
Used for tint background colors.
- --canon-bg-tint-hover
+ --bui-bg-tint-hover
Used for tint background colors when hovered.
- --canon-bg-tint-focus
+ --bui-bg-tint-focus
Used for tint background colors when active.
- --canon-bg-tint-disabled
+ --bui-bg-tint-disabled
Used for tint background colors when disabled.
- --canon-bg-danger
+ --bui-bg-danger
Used to show errors information.
- --canon-bg-warning
+ --bui-bg-warning
Used to show warnings information.
- --canon-bg-success
+ --bui-bg-success
Used to show success information.
-### Foreground colors
+## Foreground colors
-Foreground colours are meant to work in pair with a background colours. Typeically this would work
+Foreground colours are meant to work in pair with a background colours. Typically this would work
for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors
are prefixed with `fg` to make it easier to identify.
@@ -240,7 +301,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-primary
+ --bui-fg-primary
It should be used on top of main background surfaces.
@@ -248,7 +309,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-secondary
+ --bui-fg-secondary
It should be used on top of main background surfaces.
@@ -256,7 +317,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-link
+ --bui-fg-link
It should be used on top of main background surfaces.
@@ -264,7 +325,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-link-hover
+ --bui-fg-link-hover
It should be used on top of main background surfaces.
@@ -272,7 +333,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-disabled
+ --bui-fg-disabled
It should be used on top of main background surfaces.
@@ -280,7 +341,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-solid
+ --bui-fg-solid
It should be used on top of solid background colors.
@@ -288,7 +349,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-tint
+ --bui-fg-tint
It should be used on top of tint background colors.
@@ -296,7 +357,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-tint-disabled
+ --bui-fg-tint-disabled
It should be used on top of tint background colors when disabled.
@@ -304,7 +365,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-danger
+ --bui-fg-danger
It should be used on top of danger background colors.
@@ -312,7 +373,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-warning
+ --bui-fg-warning
It should be used on top of warning background colors.
@@ -320,7 +381,7 @@ are prefixed with `fg` to make it easier to identify.
- --canon-fg-success
+ --bui-fg-success
It should be used on top of success background colors.
@@ -329,7 +390,7 @@ are prefixed with `fg` to make it easier to identify.
-### Border colors
+## Border colors
These border colors are mostly meant to be used as borders on top of any components with
low contrast to help as a separator with the different background colors.
@@ -344,15 +405,13 @@ low contrast to help as a separator with the different background colors.
- --canon-border
-
-
- It should be used on top of `--canon-bg-surface-1`.
+ --bui-border
+ It should be used on top of `--bui-bg-surface-1`.
- --canon-border-hover
+ --bui-border-hover
Used when the component is interactive and hovered.
@@ -360,7 +419,7 @@ low contrast to help as a separator with the different background colors.
- --canon-border-pressed
+ --bui-border-pressed
Used when the component is interactive and focused.
@@ -368,32 +427,32 @@ low contrast to help as a separator with the different background colors.
- --canon-border-disabled
+ --bui-border-disabled
Used when the component is disabled.
- --canon-border-danger
+ --bui-border-danger
- It should be used on top of `--canon-bg-danger`.
+ It should be used on top of `--bui-bg-danger`.
- --canon-border-warning
+ --bui-border-warning
- It should be used on top of `--canon-bg-warning`.
+ It should be used on top of `--bui-bg-warning`.
- --canon-border-success
+ --bui-border-success
- It should be used on top of `--canon-bg-success`.
+ It should be used on top of `--bui-bg-success`.
-### Special colors
+## Special colors
These colors are used for special purposes like ring, scrollbar, ...
@@ -407,28 +466,28 @@ These colors are used for special purposes like ring, scrollbar, ...
- --canon-ring
+ --bui-ring
The color of the ring.
- --canon-scrollbar
+ --bui-scrollbar
The color of the scrollbar.
- --canon-scrollbar-thumb
+ --bui-scrollbar-thumb
The color of the scrollbar thumb.
-### Font families
+## Font families
-We have two fonts that we use across Canon. The first one is the sans-serif
+We have two fonts that we use across Backstage UI. The first one is the sans-serif
font that we use for the body of the application. The second one is the
monospace font that we use for code blocks and tables.
@@ -442,22 +501,22 @@ monospace font that we use for code blocks and tables.
- --canon-font-regular
+ --bui-font-regular
The sans-serif font for the theme.
- --canon-font-mono
+ --bui-font-monospace
The monospace font for the theme.
-### Font weights
+## Font weights
-We have two font weights that we use across Canon. Regular or Bold.
+We have two font weights that we use across Backstage UI. Regular or Bold.
@@ -469,27 +528,27 @@ We have two font weights that we use across Canon. Regular or Bold.
- --canon-font-weight-regular
+ --bui-font-weight-regular
The regular font weight for the theme.
- --canon-font-weight-bold
+ --bui-font-weight-bold
The bold font weight for the theme.
-### Spacing
+## Spacing
-We built a spacing system based on a single value `--canon-space`. This value is
+We built a spacing system based on a single value `--bui-space`. This value is
used to calculate the spacing for all the components. By default if you would like to
increase or decrease the spacing between your components you can do it simply by updating
-`--canon-space` and it will apply to all spacing values.
+`--bui-space` and it will apply to all spacing values.
-`--canon-space` is not used directly in any components but serve as an easy way to
+`--bui-space` is not used directly in any components but serve as an easy way to
calculate the other values.
@@ -502,7 +561,7 @@ calculate the other values.
- --canon-space
+ --bui-space
The base unit for the spacing system. Default value is `0.25rem`.
@@ -524,104 +583,104 @@ tokens for pretty much each spacing properties like padding, margin, gaps, ...
- --canon-space-0_5
+ --bui-space-0_5
- Base unit (`--canon-space`) times 0.5.
+ Base unit (`--bui-space`) times 0.5.
- --canon-space-1
+ --bui-space-1
- Base unit (`--canon-space`).
+ Base unit (`--bui-space`).
- --canon-space-1_5
+ --bui-space-1_5
- Base unit (`--canon-space`) times 1.5.
+ Base unit (`--bui-space`) times 1.5.
- --canon-space-2
+ --bui-space-2
- Base unit (`--canon-space`) times 2.
+ Base unit (`--bui-space`) times 2.
- --canon-space-3
+ --bui-space-3
- Base unit (`--canon-space`) times 3.
+ Base unit (`--bui-space`) times 3.
- --canon-space-4
+ --bui-space-4
- Base unit (`--canon-space`) times 4.
+ Base unit (`--bui-space`) times 4.
- --canon-space-5
+ --bui-space-5
- Base unit (`--canon-space`) times 5.
+ Base unit (`--bui-space`) times 5.
- --canon-space-6
+ --bui-space-6
- Base unit (`--canon-space`) times 6.
+ Base unit (`--bui-space`) times 6.
- --canon-space-7
+ --bui-space-7
- Base unit (`--canon-space`) times 7.
+ Base unit (`--bui-space`) times 7.
- --canon-space-8
+ --bui-space-8
- Base unit (`--canon-space`) times 8.
+ Base unit (`--bui-space`) times 8.
- --canon-space-9
+ --bui-space-9
- Base unit (`--canon-space`) times 9.
+ Base unit (`--bui-space`) times 9.
- --canon-space-10
+ --bui-space-10
- Base unit (`--canon-space`) times 10.
+ Base unit (`--bui-space`) times 10.
- --canon-space-11
+ --bui-space-11
- Base unit (`--canon-space`) times 11.
+ Base unit (`--bui-space`) times 11.
- --canon-space-12
+ --bui-space-12
- Base unit (`--canon-space`) times 12.
+ Base unit (`--bui-space`) times 12.
- --canon-space-13
+ --bui-space-13
- Base unit (`--canon-space`) times 13.
+ Base unit (`--bui-space`) times 13.
- --canon-space-14
+ --bui-space-14
- Base unit (`--canon-space`) times 14.
+ Base unit (`--bui-space`) times 14.
-### Radius
+## Radius
We use a radius system to make sure that the components have a consistent look and feel.
@@ -635,7 +694,7 @@ We use a radius system to make sure that the components have a consistent look a
- --canon-radius-1
+ --bui-radius-1
The radius of the component. Default value is `0.125rem`.
@@ -643,7 +702,7 @@ We use a radius system to make sure that the components have a consistent look a
- --canon-radius-2
+ --bui-radius-2
The radius of the component. Default value is `0.25rem`.
@@ -651,7 +710,7 @@ We use a radius system to make sure that the components have a consistent look a
- --canon-radius-3
+ --bui-radius-3
The radius of the component. Default value is `0.5rem`.
@@ -659,7 +718,7 @@ We use a radius system to make sure that the components have a consistent look a
- --canon-radius-4
+ --bui-radius-4
The radius of the component. Default value is `0.75rem`.
@@ -667,7 +726,7 @@ We use a radius system to make sure that the components have a consistent look a
- --canon-radius-5
+ --bui-radius-5
The radius of the component. Default value is `1rem`.
@@ -675,7 +734,7 @@ We use a radius system to make sure that the components have a consistent look a
- --canon-radius-6
+ --bui-radius-6
The radius of the component. Default value is `1.25rem`.
@@ -683,7 +742,7 @@ We use a radius system to make sure that the components have a consistent look a
- --canon-radius-full
+ --bui-radius-full
The radius of the component. Default value is `9999px`.
diff --git a/canon-docs/src/components/Banner/Banner.tsx b/docs-ui/src/components/Banner/Banner.tsx
similarity index 62%
rename from canon-docs/src/components/Banner/Banner.tsx
rename to docs-ui/src/components/Banner/Banner.tsx
index 0f055d6c92..9ad2ff0ced 100644
--- a/canon-docs/src/components/Banner/Banner.tsx
+++ b/docs-ui/src/components/Banner/Banner.tsx
@@ -1,18 +1,3 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
import styles from './styles.module.css';
export const Banner = ({
diff --git a/docs-ui/src/components/Banner/index.ts b/docs-ui/src/components/Banner/index.ts
new file mode 100644
index 0000000000..f4930c0719
--- /dev/null
+++ b/docs-ui/src/components/Banner/index.ts
@@ -0,0 +1 @@
+export { Banner } from './Banner';
diff --git a/canon-docs/src/components/Banner/styles.module.css b/docs-ui/src/components/Banner/styles.module.css
similarity index 100%
rename from canon-docs/src/components/Banner/styles.module.css
rename to docs-ui/src/components/Banner/styles.module.css
diff --git a/docs-ui/src/components/Changelog/index.tsx b/docs-ui/src/components/Changelog/index.tsx
new file mode 100644
index 0000000000..224e23d668
--- /dev/null
+++ b/docs-ui/src/components/Changelog/index.tsx
@@ -0,0 +1,75 @@
+import { changelog } from '@/utils/changelog';
+import { MDXRemote } from 'next-mdx-remote-client/rsc';
+import { formattedMDXComponents } from '@/mdx-components';
+
+export function Changelog() {
+ // Group changelog entries by version
+ const groupedChangelog = changelog.reduce((acc, entry) => {
+ if (!acc[entry.version]) {
+ acc[entry.version] = [];
+ }
+ acc[entry.version].push(entry);
+ return acc;
+ }, {} as Record);
+
+ // Sort versions in descending order
+ const sortedVersions = Object.keys(groupedChangelog).sort((a, b) =>
+ b.localeCompare(a),
+ );
+
+ const content = sortedVersions
+ .map(version => {
+ const entries = groupedChangelog[version];
+
+ // Group entries by bump type
+ const groupedByBump = entries.reduce((acc, entry) => {
+ const bumpType = entry.type || 'other';
+ if (!acc[bumpType]) {
+ acc[bumpType] = [];
+ }
+ acc[bumpType].push(entry);
+ return acc;
+ }, {} as Record);
+
+ // Define the order of bump types
+ const bumpOrder = ['breaking', 'new', 'fix', 'other'];
+
+ const bumpSections = bumpOrder
+ .filter(bumpType => groupedByBump[bumpType]?.length > 0)
+ .map(bumpType => {
+ const bumpEntries = groupedByBump[bumpType];
+ let sectionTitle = 'Other Changes';
+ if (bumpType === 'breaking') {
+ sectionTitle = 'Breaking Changes';
+ } else if (bumpType === 'new') {
+ sectionTitle = 'New Features';
+ } else if (bumpType === 'fix') {
+ sectionTitle = 'Bug Fixes';
+ }
+
+ return `### ${sectionTitle}
+
+ ${bumpEntries
+ .map(e => {
+ const prs =
+ e.prs.length > 0 &&
+ e.prs
+ .map(
+ pr =>
+ `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`,
+ )
+ .join(', ');
+ return `- ${e.description} ${prs}`;
+ })
+ .join('\n')}`;
+ })
+ .join('\n\n');
+
+ return `## Version ${version}
+
+ ${bumpSections}`;
+ })
+ .join('\n');
+
+ return {
+ const prs =
+ change.prs.length > 0 &&
+ change.prs
+ .map(
+ pr =>
+ `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`,
+ )
+ .join(', ');
+ return `- \`${change.version}\` - ${change.description} ${prs}`;
+ })
+ .join('\n')}`}
+ />
+ );
+};
diff --git a/docs-ui/src/components/Chip/Chip.tsx b/docs-ui/src/components/Chip/Chip.tsx
new file mode 100644
index 0000000000..b348b46c32
--- /dev/null
+++ b/docs-ui/src/components/Chip/Chip.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import styles from './styles.module.css';
+
+export const Chip = ({
+ children,
+ head = false,
+}: {
+ children: ReactNode;
+ head?: boolean;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/docs-ui/src/components/Chip/index.ts b/docs-ui/src/components/Chip/index.ts
new file mode 100644
index 0000000000..63314f5e37
--- /dev/null
+++ b/docs-ui/src/components/Chip/index.ts
@@ -0,0 +1 @@
+export { Chip } from './Chip';
diff --git a/docs-ui/src/components/Chip/styles.module.css b/docs-ui/src/components/Chip/styles.module.css
new file mode 100644
index 0000000000..01ee29311d
--- /dev/null
+++ b/docs-ui/src/components/Chip/styles.module.css
@@ -0,0 +1,26 @@
+.chip {
+ display: inline-flex;
+ align-items: center;
+ font-family: monospace;
+ font-size: 13px;
+ border-radius: 6px;
+ padding: 0px 8px;
+ height: 24px;
+ margin-right: 4px;
+ background-color: #f0f0f0;
+ color: #5d5d5d;
+}
+
+.head {
+ background-color: #eaf2fd;
+ color: #2563eb;
+}
+
+[data-theme-mode='dark'] .chip {
+ background-color: #2c2c2c;
+ color: #fff;
+}
+
+[data-theme-mode='dark'] .chip.head {
+ background-color: #33405b;
+}
diff --git a/canon-docs/src/components/CodeBlock/client.tsx b/docs-ui/src/components/CodeBlock/client.tsx
similarity index 53%
rename from canon-docs/src/components/CodeBlock/client.tsx
rename to docs-ui/src/components/CodeBlock/client.tsx
index 27f5bc1a02..666d880358 100644
--- a/canon-docs/src/components/CodeBlock/client.tsx
+++ b/docs-ui/src/components/CodeBlock/client.tsx
@@ -1,8 +1,13 @@
'use client';
import { CodeBlockProps } from '.';
-import { Text } from '../../../../packages/canon';
import styles from './styles.module.css';
+import parse from 'html-react-parser';
+
+// Convert markdown-style backticks to HTML code tags
+function parseMarkdownInlineCode(text: string): string {
+ return text.replace(/`([^`]+)`/g, '
{children}
;
-}
diff --git a/canon-docs/src/app/(docs)/page.mdx b/canon-docs/src/app/(docs)/page.mdx
deleted file mode 100644
index 862127ec7b..0000000000
--- a/canon-docs/src/app/(docs)/page.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-
-
-
-Welcome to the Canon, the new design library for Backstage plugins. This
-project is still under active development but we will make sure to document
-the API as we go. We are aiming to improve the general UI of Backstage and
-plugins across Backstage. This new library will take time to build but we are
-building it incrementally with not conflict with the existing theming system.
-
-## Installation
-
-### 1. Install canon
-
-Install Canon using a package manager.
-
-Custom Icon
}} />`}
-/>
-
-## Icon library
-
-
-
- );
- }
-
- return (
-
- {filteredScreenSizes.map(screenSize => (
-
- );
-}
-
-const Content = () => {
- const { selectedComponents } = usePlayground();
-
- return (
-
-
- {screenSize.title} - {screenSize.width}px
-
-
- ))}
-
-
-
-
-
-
-
-
- {children}
-
- );
-};
diff --git a/canon-docs/src/components/Frame/index.tsx b/canon-docs/src/components/Frame/index.tsx
deleted file mode 100644
index c7e930df74..0000000000
--- a/canon-docs/src/components/Frame/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-disable @next/next/no-css-tags */
-'use client';
-
-import { useEffect, useState } from 'react';
-import ReactFrame from 'react-frame-component';
-
-export const Frame = ({ children }: { children: React.ReactNode }) => {
- const [show, setShow] = useState(false);
-
- useEffect(() => {
- setShow(true);
- }, []);
-
- if (!show) return null;
-
- return (
-
- {list.map(icon => (
-
- );
-};
diff --git a/canon-docs/src/components/IconLibrary/styles.module.css b/canon-docs/src/components/IconLibrary/styles.module.css
deleted file mode 100644
index 8c9a96e5db..0000000000
--- a/canon-docs/src/components/IconLibrary/styles.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.library {
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- gap: 1rem;
-}
-
-.item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
-}
-
-.icon {
- display: flex;
- width: 100%;
- justify-content: center;
- align-items: center;
- height: 80px;
- border: 1px solid #d3d3d3;
- border-radius: 0.5rem;
- background-color: var(--bg);
- transition: background-color 0.2s ease-in-out;
-
- &:hover {
- background-color: var(--panel);
- }
-}
diff --git a/canon-docs/src/components/LayoutComponents/index.ts b/canon-docs/src/components/LayoutComponents/index.ts
deleted file mode 100644
index 55cc9f25ef..0000000000
--- a/canon-docs/src/components/LayoutComponents/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { LayoutComponents } from './LayoutComponents';
diff --git a/canon-docs/src/components/LayoutComponents/svgs/inline.tsx b/canon-docs/src/components/LayoutComponents/svgs/inline.tsx
deleted file mode 100644
index b7b8ea7b02..0000000000
--- a/canon-docs/src/components/LayoutComponents/svgs/inline.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export const InlineSvg = () => {
- return (
-
- );
-};
diff --git a/canon-docs/src/components/Roadmap/index.ts b/canon-docs/src/components/Roadmap/index.ts
deleted file mode 100644
index ac51dfa1ed..0000000000
--- a/canon-docs/src/components/Roadmap/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Roadmap } from './Roadmap';
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
deleted file mode 100644
index fba98420d0..0000000000
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ /dev/null
@@ -1,132 +0,0 @@
-.sidebar {
- display: none;
-}
-
-@media (min-width: 768px) {
- .sidebar {
- display: block;
- position: fixed;
- top: 16px;
- left: 16px;
- border-radius: 8px;
- width: 300px;
- height: calc(100vh - 32px);
- box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
- color: var(--primary);
- background-color: var(--panel);
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- overflow: hidden;
- }
-}
-
-.root {
- height: 100%;
-}
-
-.viewport {
- overflow: scroll;
- height: 100%;
-}
-
-.content {
- padding: 0 20px 20px;
-}
-
-.logoContainer {
- padding-left: 6px;
- padding-top: 32px;
-}
-
-.logo path {
- fill: var(--primary);
-}
-
-.menu {
- display: flex;
- flex-direction: row;
- position: relative;
-}
-
-.section {
- width: 100%;
- display: flex;
- flex-direction: column;
- gap: 2px;
-}
-
-.sectionTitle {
- font-size: var(--canon-font-size-3);
- font-weight: var(--canon-font-weight-bold);
- padding: 12px 0;
- color: var(--primary);
- margin-top: 24px;
-}
-
-.line {
- text-decoration: none;
- align-items: center;
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- height: 26px;
- padding: 0 12px;
- border-radius: 4px;
- transition: background-color 0.2s ease-in-out;
-
- &:hover {
- background-color: var(--bg);
- }
-}
-
-.line.active {
- background-color: var(--bg);
-}
-
-.line.active .lineTitle {
- color: var(--primary);
-}
-
-.lineTitle {
- font-size: var(--canon-font-size-3);
- font-weight: var(--canon-font-weight-regular);
- color: var(--secondary);
-}
-
-.lineStatus {
- font-size: var(--canon-font-size-3);
- color: var(--secondary);
-}
-
-.scrollbar {
- display: flex;
- justify-content: center;
- background-color: rgba(0, 0, 0, 0.1);
- width: 0.25rem;
- border-radius: 0.375rem;
- margin: 0.5rem;
- opacity: 0;
- transition: opacity 150ms 300ms;
- right: -20px;
-
- &[data-hovering],
- &[data-scrolling] {
- opacity: 1;
- transition-duration: 75ms;
- transition-delay: 0ms;
- }
-
- &::before {
- content: '';
- position: absolute;
- width: 1.25rem;
- height: 100%;
- }
-}
-
-.thumb {
- width: 100%;
- border-radius: inherit;
- background-color: rgba(0, 0, 0, 0.2);
-}
diff --git a/canon-docs/src/components/Sidebar/docs.tsx b/canon-docs/src/components/Sidebar/docs.tsx
deleted file mode 100644
index da501b151a..0000000000
--- a/canon-docs/src/components/Sidebar/docs.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { components, overview, layoutComponents, theme } from '@/utils/data';
-import { motion } from 'motion/react';
-import styles from './Sidebar.module.css';
-import { usePathname } from 'next/navigation';
-import { Fragment } from 'react';
-
-const data = [
- {
- title: 'Overview',
- content: overview,
- url: '',
- },
- {
- title: 'Theme',
- content: theme,
- url: '/theme',
- },
- {
- title: 'Layout Components',
- content: layoutComponents,
- url: '/components',
- },
- {
- title: 'Components',
- content: components,
- url: '/components',
- },
-];
-
-export const Docs = () => {
- const pathname = usePathname();
- const isPlayground = pathname.includes('/playground');
-
- return (
-
- {icon}
-
- ))}
-
-
- {section.title}
-
- {section.content.map(item => {
- const isActive = pathname === `${section.url}/${item.slug}`;
-
- return (
-
- {item.title}
-
- {item.status === 'alpha' && 'Alpha'}
- {item.status === 'beta' && 'Beta'}
- {item.status === 'inProgress' && 'In Progress'}
- {item.status === 'stable' && 'Stable'}
- {item.status === 'deprecated' && 'Deprecated'}
-
-
- );
- })}
-
-
-
-
-
-
-
-
- );
-};
diff --git a/canon-docs/src/components/Sidebar/playground.tsx b/canon-docs/src/components/Sidebar/playground.tsx
deleted file mode 100644
index 5773807d74..0000000000
--- a/canon-docs/src/components/Sidebar/playground.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client';
-
-import { components } from '@/utils/data';
-import { Checkbox } from '../../../../packages/canon';
-import { motion } from 'motion/react';
-import styles from './Sidebar.module.css';
-import { usePathname } from 'next/navigation';
-import { screenSizes } from '@/utils/data';
-import { usePlayground } from '@/utils/playground-context';
-
-export const Playground = () => {
- const pathname = usePathname();
- const isPlayground = pathname.includes('/playground');
- const {
- selectedScreenSizes,
- setSelectedScreenSizes,
- selectedComponents,
- setSelectedComponents,
- } = usePlayground();
-
- const handleComponentCheckboxChange = (slug: string) => {
- if (selectedComponents.find(item => item === slug)) {
- const res = selectedComponents.filter(item => item !== slug);
- setSelectedComponents(res);
- } else {
- setSelectedComponents([...selectedComponents, slug]);
- }
- };
-
- const handleCheckboxChange = (slug: string) => {
- if (selectedScreenSizes.find(item => item === slug)) {
- const res = selectedScreenSizes.filter(item => item !== slug);
- setSelectedScreenSizes(res);
- } else {
- setSelectedScreenSizes([...selectedScreenSizes, slug]);
- }
- };
-
- return (
-
-
-
-
-
-
-
-
-
- Components
- {components.map(({ slug, title }) => (
-
- handleComponentCheckboxChange(slug)}
- />
-
- ))}
- {title}
- Screen sizes
- {screenSizes.map(({ slug, title }) => (
-
- handleCheckboxChange(slug)}
- />
-
- ))}
- {title}
-
-
- );
-};
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
deleted file mode 100644
index 95228fa917..0000000000
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ /dev/null
@@ -1,78 +0,0 @@
-.tabs {
- display: none;
-}
-
-@media (min-width: 768px) {
- .tabs {
- display: block;
- height: 60px;
- }
-}
-
-.tabsTheme {
- width: 142px;
- border-radius: 0.375rem;
- background-color: var(--bg);
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-}
-
-.list {
- display: flex;
- position: relative;
- z-index: 0;
- gap: var(--canon-space-8);
-}
-
-.tab {
- all: unset;
- height: 60px;
- color: var(--secondary);
- font-size: var(--canon-font-size-3);
- font-weight: var(--canon-font-weight-bold);
- cursor: pointer;
- transition: color 0.2s ease-in-out;
-
- &:hover {
- color: var(--primary);
- }
-
- &[data-selected] {
- color: var(--primary);
-
- & p {
- color: var(--primary);
- }
- }
-
- &:focus-visible {
- position: relative;
-
- &::before {
- content: '';
- position: absolute;
- inset: 0.25rem 0;
- border-radius: 0.25rem;
- outline: 2px solid var(--panel);
- outline-offset: -1px;
- }
- }
-}
-
-.tab p {
- color: var(--secondary) !important;
-}
-
-.indicator {
- position: absolute;
- z-index: -1;
- left: 0;
- bottom: -1px;
- translate: var(--active-tab-left) -50%;
- width: var(--active-tab-width);
- height: 1px;
- border-radius: 0.25rem;
- background-color: var(--primary);
- transition-property: translate, width, background-color;
- transition-duration: 200ms;
- transition-timing-function: ease-in-out;
-}
diff --git a/canon-docs/src/components/Toolbar/nav.tsx b/canon-docs/src/components/Toolbar/nav.tsx
deleted file mode 100644
index 017599581e..0000000000
--- a/canon-docs/src/components/Toolbar/nav.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { Tabs } from '@base-ui-components/react/tabs';
-import { usePathname } from 'next/navigation';
-import { useRouter } from 'next/navigation';
-import styles from './nav.module.css';
-
-export const Nav = () => {
- const pathname = usePathname();
- const router = useRouter();
-
- const onValueChange = (value: string) => {
- if (value === 'docs') {
- router.push('/');
- } else {
- router.push('/playground');
- }
- };
-
- return (
-
-
-
-
-
- {children as ReactNode}
- ), - h2: ({ children }) => ( -{children as ReactNode}
- ), - h3: ({ children }) => ( -{children as ReactNode}
- ), - p: ({ children }) =>{children as ReactNode}
, - a: ({ children, href }) => ( - - {children as ReactNode} - - ), - ul: ({ children }) => ( -- {children as ReactNode}
- {children}
-
- ),
- img: props => (
-
+
+
+
+
+
+ {children}
+
+
-
-Every component has a unique prefix `.canon-` followed by the component name. Component props
-are represented using the `data-` attribute. That way, class names are easily identifiable.
-
-## Available CSS variables
-
-### Base colors
+## Base colors
These colors are used for special purposes like ring, scrollbar, ...
@@ -58,7 +119,7 @@ These colors are used for special purposes like ring, scrollbar, ...
$1');
+}
export const CodeBlockClient = ({
out,
@@ -15,10 +20,10 @@ export const CodeBlockClient = ({
{title && (
);
};
diff --git a/docs-ui/src/components/CodeBlock/index.tsx b/docs-ui/src/components/CodeBlock/index.tsx
new file mode 100644
index 0000000000..1467bca465
--- /dev/null
+++ b/docs-ui/src/components/CodeBlock/index.tsx
@@ -0,0 +1,32 @@
+import type { BundledLanguage } from 'shiki';
+import { transformerNotationDiff } from '@shikijs/transformers';
+import { codeToHtml } from 'shiki';
+import { CodeBlockClient } from './client';
+
+export interface CodeBlockProps {
+ lang?: BundledLanguage;
+ title?: string;
+ code?: string;
+}
+
+export async function CodeBlock(props: CodeBlockProps) {
+ const { lang = 'tsx', title, code } = props;
+ let out = await codeToHtml(code || '', {
+ lang,
+ transformers: [transformerNotationDiff({ matchAlgorithm: 'v3' })],
+ themes: {
+ light: 'github-dark',
+ dark: 'min-dark',
+ },
+ });
+
+ // Remove background-color from the pre tag to use our theme colors
+ out = out.replace(
+ /style="([^"]*?)background-color:[^;]+;?([^"]*?)"/g,
+ 'style="$1$2"',
+ );
+ // Clean up empty style attributes
+ out = out.replace(/style=""\s?/g, '');
+
+ return
- {title}
+ {parse(parseMarkdownInlineCode(title))}
)}
-
+ {parse(out)}
+ {children}
+
+ );
+};
diff --git a/docs-ui/src/components/Columns/index.ts b/docs-ui/src/components/Columns/index.ts
new file mode 100644
index 0000000000..e7c487b8c7
--- /dev/null
+++ b/docs-ui/src/components/Columns/index.ts
@@ -0,0 +1 @@
+export { Columns } from './Columns';
diff --git a/docs-ui/src/components/Columns/styles.css b/docs-ui/src/components/Columns/styles.css
new file mode 100644
index 0000000000..384b4ae0fe
--- /dev/null
+++ b/docs-ui/src/components/Columns/styles.css
@@ -0,0 +1,6 @@
+.columns {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ row-gap: 20px;
+ column-gap: 80px;
+}
diff --git a/docs-ui/src/components/ComponentCards/ComponentCards.module.css b/docs-ui/src/components/ComponentCards/ComponentCards.module.css
new file mode 100644
index 0000000000..8eb9dbd3d0
--- /dev/null
+++ b/docs-ui/src/components/ComponentCards/ComponentCards.module.css
@@ -0,0 +1,54 @@
+.grid {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: 1rem;
+ margin-top: 1rem;
+ margin-bottom: 3rem;
+}
+
+@media (min-width: 768px) {
+ .grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1024px) {
+ .grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+@media (min-width: 1280px) {
+ .grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ background-color: var(--bg);
+ border-radius: 8px;
+ border: 1px solid var(--border);
+ padding: 16px;
+ gap: 4px;
+ min-height: 120px;
+
+ &:hover {
+ background-color: var(--bg-hover);
+ }
+}
+
+.title {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--primary);
+}
+
+.description {
+ margin: 0;
+ font-size: 14px;
+ color: var(--secondary);
+}
diff --git a/docs-ui/src/components/ComponentCards/ComponentCards.tsx b/docs-ui/src/components/ComponentCards/ComponentCards.tsx
new file mode 100644
index 0000000000..0e4d22c02a
--- /dev/null
+++ b/docs-ui/src/components/ComponentCards/ComponentCards.tsx
@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import styles from './ComponentCards.module.css';
+
+export const ComponentCards = ({ children }: { children: React.ReactNode }) => {
+ return {children}
;
+};
+
+export const ComponentCard = ({
+ title,
+ description,
+ href,
+}: {
+ title: string;
+ description: string;
+ href: string;
+}) => {
+ return (
+
+ {title}
+{description}
+ + ); +}; diff --git a/docs-ui/src/components/ComponentCards/index.ts b/docs-ui/src/components/ComponentCards/index.ts new file mode 100644 index 0000000000..4bc4beaae3 --- /dev/null +++ b/docs-ui/src/components/ComponentCards/index.ts @@ -0,0 +1 @@ +export * from './ComponentCards'; diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/docs-ui/src/components/CustomTheme/customTheme.tsx similarity index 93% rename from canon-docs/src/components/CustomTheme/customTheme.tsx rename to docs-ui/src/components/CustomTheme/customTheme.tsx index 66b4afc47c..ae765d7d88 100644 --- a/canon-docs/src/components/CustomTheme/customTheme.tsx +++ b/docs-ui/src/components/CustomTheme/customTheme.tsx @@ -6,18 +6,18 @@ import { sass } from '@codemirror/lang-sass'; import styles from './styles.module.css'; import { usePlayground } from '@/utils/playground-context'; import { AnimatePresence, motion } from 'motion/react'; -import { Icon } from '../../../../packages/canon'; import { createTheme } from '@uiw/codemirror-themes'; import { tags as t } from '@lezer/highlight'; +import { RiArrowDownSLine } from '@remixicon/react'; const defaultTheme = `:root { - --canon-bg-accent: #000; + --bui-bg-solid: #000; }`; const myTheme = createTheme({ theme: 'light', settings: { - background: 'var(--canon-bg-surface-1)', + background: 'var(--surface-1)', backgroundImage: '', foreground: '#6182B8', caret: '#5d00ff', @@ -125,7 +125,12 @@ export const CustomTheme = () => { className={styles.buttonClose} onClick={() => setOpen(!open)} > -
-
-
Inline
-
- Arrange your components in a row
-
-