` 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
-
-
-
- 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/CodeBlock/index.tsx b/docs-ui/src/components/CodeBlock/index.tsx
similarity index 100%
rename from canon-docs/src/components/CodeBlock/index.tsx
rename to docs-ui/src/components/CodeBlock/index.tsx
diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/docs-ui/src/components/CodeBlock/styles.module.css
similarity index 74%
rename from canon-docs/src/components/CodeBlock/styles.module.css
rename to docs-ui/src/components/CodeBlock/styles.module.css
index 8b17c11b86..767982a582 100644
--- a/canon-docs/src/components/CodeBlock/styles.module.css
+++ b/docs-ui/src/components/CodeBlock/styles.module.css
@@ -4,13 +4,12 @@
position: relative;
background: transparent;
overflow-x: auto;
- font-family: var(--canon-font-monospace);
+ font-family: var(--font-mono);
background-color: #fff;
- transition: background-color 0.2s ease-in-out;
margin-bottom: 1rem;
}
-[data-theme='dark'] .codeBlock {
+[data-theme-mode='dark'] .codeBlock {
background-color: #121212;
}
diff --git a/docs-ui/src/components/Columns/Columns.tsx b/docs-ui/src/components/Columns/Columns.tsx
new file mode 100644
index 0000000000..225c8d93c7
--- /dev/null
+++ b/docs-ui/src/components/Columns/Columns.tsx
@@ -0,0 +1,15 @@
+import { ReactNode, CSSProperties } from 'react';
+
+export const Columns = ({
+ children,
+ style,
+}: {
+ children: ReactNode;
+ style?: CSSProperties;
+}) => {
+ return (
+ ` element.
-
-
- (
-
- )}
- />
-
-
-
- Settings
- Invite new members
- Download app
- Log out
-
-
-
- `}
-/>
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/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/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 (
- `}
- 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/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);
+ }
+}
+
+// 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..80711bd4b3
--- /dev/null
+++ b/contrib/catalog/read-write-split/workspace/packages/backend/src/catalogService.ts
@@ -0,0 +1,231 @@
+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 {
+ 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 #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/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/canon-docs/next.config.mjs b/docs-ui/next.config.mjs
similarity index 57%
rename from canon-docs/next.config.mjs
rename to docs-ui/next.config.mjs
index ca221d9a8c..8e6ed8fdc0 100644
--- a/canon-docs/next.config.mjs
+++ b/docs-ui/next.config.mjs
@@ -8,6 +8,11 @@ const nextConfig = {
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,
+ },
};
const withMDX = createMDX({});
diff --git a/docs-ui/package.json b/docs-ui/package.json
new file mode 100644
index 0000000000..71db880859
--- /dev/null
+++ b/docs-ui/package.json
@@ -0,0 +1,51 @@
+{
+ "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": "concurrently \"yarn sync:css:watch\" \"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",
+ "html-react-parser": "^5.2.5",
+ "motion": "^12.4.1",
+ "next": "15.3.4",
+ "next-mdx-remote-client": "^2.1.2",
+ "prop-types": "^15.8.1",
+ "react": "19.1.1",
+ "react-dom": "19.1.1",
+ "shiki": "^1.26.1",
+ "storybook": "^8.6.12"
+ },
+ "devDependencies": {
+ "@types/mdx": "^2.0.13",
+ "@types/node": "^20",
+ "@types/react": "19.1.9",
+ "@types/react-dom": "19.1.7",
+ "chokidar": "^3.6.0",
+ "concurrently": "^8.2.2",
+ "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..f69672bc28
--- /dev/null
+++ b/docs-ui/public/theme-backstage.css
@@ -0,0 +1,2 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+@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}}.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(--pl-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(--pl-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(--pl-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(--pl-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(--pl-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(--pr-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(--pr-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(--pr-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(--pr-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(--pr-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(--pt-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(--pt-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(--pt-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(--pt-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(--pt-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(--pb-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(--pb-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(--pb-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(--pb-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(--pb-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(--py-xs);margin-bottom:var(--py-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(--py-sm);margin-bottom:var(--py-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(--py-md);margin-bottom:var(--py-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(--py-lg);margin-bottom:var(--py-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(--py-xl);margin-bottom:var(--py-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(--px-xs);margin-right:var(--px-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(--px-sm);margin-right:var(--px-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(--px-md);margin-right:var(--px-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(--px-lg);margin-right:var(--px-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(--px-xl);margin-right:var(--px-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-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}}:where(a){color:inherit;text-decoration:none}@keyframes pulse{50%{opacity:.5}}: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}.bui-AvatarRoot{vertical-align:middle;user-select:none;color:var(--bui-fg-primary);background-color:var(--bui-bg-surface-2);border-radius:100%;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:1rem;font-weight:500;line-height:1;display:inline-flex;overflow:hidden}.bui-AvatarRoot[data-size=small]{width:1.5rem;height:1.5rem}.bui-AvatarRoot[data-size=medium]{width:2rem;height:2rem}.bui-AvatarRoot[data-size=large]{width:3rem;height:3rem}.bui-AvatarImage{object-fit:cover;width:100%;height:100%}.bui-AvatarFallback{width:100%;height:100%;font-size:var(--bui-font-size-3);font-weight:var(--bui-font-weight-regular);box-shadow:inset 0 0 0 1px var(--bui-border);border-radius:var(--bui-radius-full);justify-content:center;align-items:center;display:flex}.bui-Box{font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular);color:var(--bui-fg-primary)}.bui-Button{user-select:none;font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-bold);cursor:pointer;border-radius:var(--bui-radius-2);justify-content:center;align-items:center;gap:var(--bui-space-1_5);border:none;flex-shrink:0;padding:0;display:inline-flex;&[data-disabled=true]{cursor:not-allowed}}.bui-Button[data-variant=primary]{background-color:var(--bui-bg-solid);color:var(--bui-fg-solid);&:hover{background-color:var(--bui-bg-solid-hover);transition:background-color .15s}&:active{background-color:var(--bui-bg-solid-pressed)}&:focus-visible{outline:2px solid var(--bui-ring);outline-offset:2px}&[data-disabled=true]{background-color:var(--bui-bg-solid-disabled);color:var(--bui-fg-solid-disabled)}}.bui-Button[data-variant=secondary]{background-color:var(--bui-bg-surface-1);box-shadow:inset 0 0 0 1px var(--bui-border);color:var(--bui-fg-primary);&:hover{box-shadow:inset 0 0 0 1px var(--bui-border-hover);transition:box-shadow .15s}&:active{box-shadow:inset 0 0 0 1px var(--bui-border-pressed)}&:focus-visible{box-shadow:inset 0 0 0 2px var(--bui-ring);outline:none;transition:none}&[data-disabled=true]{box-shadow:inset 0 0 0 1px var(--bui-border-disabled);color:var(--bui-fg-disabled)}}.bui-Button[data-variant=tertiary]{color:var(--bui-fg-primary);background-color:#0000;&:hover{background-color:var(--bui-bg-surface-1);transition:background-color .2s}&:active{background-color:var(--bui-bg-surface-2)}&:focus-visible{box-shadow:inset 0 0 0 2px var(--bui-ring);outline:none;transition:none}&[data-disabled=true]{color:var(--bui-fg-disabled);background-color:#0000}}.bui-Button[data-size=medium]{font-size:var(--bui-font-size-4);padding:0 var(--bui-space-3);height:2.5rem}.bui-Button[data-size=small]{font-size:var(--bui-font-size-3);padding:0 var(--bui-space-2);height:2rem}.bui-Button[data-size=small] svg{width:1rem;height:1rem}.bui-Button[data-size=medium] svg{width:1.25rem;height:1.25rem}.bui-ButtonIcon{justify-content:center;align-items:center}.bui-ButtonIcon[data-size=small]{width:2rem;padding:0}.bui-ButtonIcon[data-size=medium]{width:2.5rem;padding:0}.bui-Card{gap:var(--bui-space-3);background-color:var(--bui-bg-surface-1);border-radius:var(--bui-radius-3);padding-block:var(--bui-space-3);color:var(--bui-fg-primary);border:1px solid var(--bui-border);flex-direction:column;width:100%;min-height:0;display:flex;overflow:hidden}.bui-CardBody{flex:1;min-height:0;overflow:auto}.bui-CardHeader,.bui-CardFooter{padding-inline:var(--bui-space-3)}.bui-CheckboxRoot{width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--bui-border);cursor:pointer;background-color:var(--bui-bg-surface-1);border:none;border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .2s ease-in-out;display:flex}.bui-CheckboxRoot:focus-visible{outline:2px solid var(--bui-ring);outline-offset:2px;transition:none}.bui-CheckboxRoot[data-checked]{background-color:var(--bui-bg-solid);box-shadow:none;color:var(--bui-fg-solid)}.bui-CheckboxLabel{align-items:center;gap:var(--bui-space-2);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular);color:var(--bui-fg-primary);user-select:none;flex-direction:row;display:flex;&:hover{& .bui-CheckboxRoot:not([data-checked]){box-shadow:inset 0 0 0 1px var(--bui-border-hover)}}}.bui-CheckboxIndicator{color:var(--bui-fg-solid);justify-content:center;align-items:center;display:flex}.bui-CollapsiblePanel{height:var(--collapsible-panel-height);transition:all .15s ease-out;display:flex;overflow:hidden;&[data-starting-style],&[data-ending-style]{height:0}}.bui-Container{max-width:120rem;padding-inline:var(--bui-space-4);margin-inline:auto;transition:padding .2s ease-in-out}@media (width>=640px){.bui-Container{padding-inline:var(--bui-space-5)}}.bui-FieldError{color:var(--bui-fg-danger);font-size:var(--bui-font-size-2);font-weight:var(--bui-font-weight-regular);margin-top:var(--bui-space-2);display:inline-block}.bui-FieldLabelWrapper{margin-bottom:var(--bui-space-3);gap:var(--bui-space-1);flex-direction:column;display:flex}.bui-FieldLabel{color:var(--bui-fg-primary);cursor:pointer;font-weight:var(--bui-font-weight-regular);font-size:var(--bui-font-size-2);margin-right:auto}.bui-FieldSecondaryLabel{color:var(--bui-fg-secondary);font-weight:var(--bui-font-weight-regular);margin-left:var(--bui-space-1)}.bui-FieldDescription{font-weight:var(--bui-font-weight-regular);font-size:var(--bui-font-size-2);color:var(--bui-fg-secondary);margin:0}.bui-Flex{min-width:0;display:flex}.bui-Grid{display:grid}.bui-HeaderToolbar{margin-bottom:var(--bui-space-6);&:before{content:"";background-color:var(--bui-bg);z-index:0;height:16px;position:absolute;top:0;left:0;right:0}&[data-has-tabs=true]{margin-bottom:0}}.bui-HeaderToolbarWrapper{z-index:1;background-color:var(--bui-bg-surface-1);padding-inline:var(--bui-space-5);border-bottom:1px solid var(--bui-border);color:var(--bui-fg-primary);flex-direction:row;justify-content:space-between;align-items:center;height:52px;display:flex;position:relative}.bui-HeaderToolbarContent{align-items:center;gap:var(--bui-space-2);flex-direction:row;display:flex}.bui-HeaderToolbarName{align-items:center;gap:var(--bui-space-2);font-size:var(--bui-font-size-3);font-weight:var(--bui-font-weight-regular);flex-direction:row;flex-shrink:0;display:flex}.bui-HeaderToolbarIcon{width:16px;height:16px;color:var(--bui-fg-primary);& svg{width:100%;height:100%}}.bui-HeaderToolbarControls{right:var(--bui-space-5);align-items:center;gap:var(--bui-space-2);flex-direction:row;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.bui-HeaderTabsWrapper{margin-bottom:var(--bui-space-4);padding-inline:var(--bui-space-3);border-bottom:1px solid var(--bui-border);background-color:var(--bui-bg-surface-1)}.bui-HeaderPage{gap:var(--bui-space-1);margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6);flex-direction:column;display:flex}.bui-HeaderPageContent{flex-direction:row;justify-content:space-between;display:flex}.bui-HeaderPageTabsWrapper{margin-left:-8px}.bui-HeaderPageControls,.bui-HeaderPageBreadcrumbs{align-items:center;gap:var(--bui-space-2);flex-direction:row;display:flex}.bui-Icon{width:1rem;height:1rem}.bui-Link{font-family:var(--bui-font-regular);cursor:pointer;margin:0;padding:0;text-decoration-line:none;display:inline-block;&:hover{text-underline-offset:calc(.025em + 2px);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:min(2px,max(1px,.05em));text-decoration-color:color-mix(in srgb,currentColor 30%,transparent)}}.bui-MenuPositioner{z-index:100;outline:0}.bui-MenuPopup{background-color:var(--bui-bg-surface-1);border:1px solid var(--bui-border);color:var(--bui-fg-primary);transform-origin:var(--transform-origin);max-width:min(var(--available-width),340px);max-height:min(var(--available-height),500px);padding-bottom:var(--bui-space-1);border-radius:.375rem;outline:none;flex-direction:column;transition:transform .15s,opacity .15s;display:flex;position:relative;overflow:auto;&[data-starting-style],&[data-ending-style]{opacity:0;transform:scale(.9)}}.bui-MenuItem{user-select:none;align-items:center;gap:var(--bui-space-2);height:32px;color:var(--bui-fg-primary);border-radius:var(--bui-radius-2);margin-inline:var(--bui-space-1);padding-inline:var(--bui-space-2);font-size:var(--bui-font-size-3);cursor:pointer;outline:0;flex-shrink:0;text-decoration:none;display:flex;&:first-child{margin-top:var(--bui-space-1)}&[data-highlighted]{background-color:var(--bui-gray-3)}}.bui-MenuSubmenuTrigger{user-select:none;justify-content:space-between;align-items:center;gap:var(--bui-space-2);height:32px;color:var(--bui-fg-primary);border-radius:var(--bui-radius-2);margin-inline:var(--bui-space-1);padding-inline:var(--bui-space-2);font-size:var(--bui-font-size-3);cursor:pointer;outline:0;flex-shrink:0;text-decoration:none;display:flex;& .bui-Icon{color:var(--bui-fg-secondary)}&:first-child{margin-top:var(--bui-space-1)}&[data-popup-open],&[data-highlighted]{background-color:var(--bui-gray-3);& .bui-Icon{color:var(--bui-fg-primary)}}}.bui-MenuSeparator{background-color:var(--color-gray-200);height:1px;margin:.375rem 1rem}.bui-SubmenuComboboxSearch{padding-inline:var(--bui-space-3);border:none;border-bottom:1px solid var(--bui-border);background-color:var(--bui-bg-surface-1);width:100%;height:32px;color:var(--bui-fg-primary);line-height:140%;font-size:var(--bui-font-size-3);z-index:1;outline:none;position:sticky;top:0;&::placeholder{color:var(--bui-fg-secondary)}&:disabled{opacity:.6;cursor:not-allowed}}.bui-SubmenuComboboxItems{padding-top:var(--bui-space-2);outline:none;flex-direction:column;display:flex;overflow-y:auto}.bui-SubmenuComboboxNoResults{padding-inline:var(--bui-space-3);padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-4);color:var(--bui-fg-secondary);font-size:var(--bui-font-size-3)}.bui-SubmenuComboboxItem{user-select:none;justify-content:space-between;align-items:center;gap:var(--bui-space-2);height:32px;color:var(--bui-fg-primary);border-radius:var(--bui-radius-2);margin-inline:var(--bui-space-1);padding-inline:var(--bui-space-2);font-size:var(--bui-font-size-3);cursor:pointer;outline:0;flex-shrink:0;text-decoration:none;display:flex;&[data-highlighted]{background-color:var(--bui-gray-3)}&[data-disabled]{opacity:.5;cursor:not-allowed}}.bui-SubmenuComboboxItemCheckbox{width:16px;height:16px;color:var(--bui-fg-primary);border-radius:var(--bui-radius-2);border:1px solid var(--bui-border);background:var(--bui-bg-surface-1);flex-shrink:0;justify-content:center;align-items:center;display:flex}.bui-SubmenuComboboxItemLabel{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.bui-Popover{background-color:var(--bui-bg-surface-1);border:1px solid var(--bui-border);border-radius:var(--bui-radius-3);padding-block:var(--bui-space-1);margin-right:12px;overflow:scroll;box-shadow:0 4px 12px #0000001a}.bui-RadioGroup{color:var(--bui-fg-primary);flex-direction:column;display:flex}.bui-RadioGroup[data-orientation=horizontal] .bui-RadioGroupContent{gap:var(--bui-space-4);flex-direction:row}.bui-RadioGroupContent{gap:var(--bui-space-2);flex-direction:column;display:flex}.bui-Radio{align-items:center;gap:var(--bui-space-2);font-size:var(--bui-font-size-2);color:var(--bui-fg-primary);forced-color-adjust:none;display:flex;position:relative;&:before{content:"";box-sizing:border-box;border:.125rem solid var(--bui-border);background:var(--bui-gray-1);border-radius:var(--bui-radius-full);width:1rem;height:1rem;transition:all .2s;display:block}&[data-pressed]:before{border-color:var(--bui-border)}&[data-selected]{&:before{border-color:var(--bui-bg-solid);border-width:.25rem}&[data-pressed]:before{border-color:var(--bui-bg-solid)}}&[data-focus-visible]:before{outline:2px solid var(--bui-ring);outline-offset:2px}&[data-disabled]{cursor:not-allowed;color:var(--bui-fg-disabled);&:before{border-color:var(--bui-border-disabled);background:var(--bui-bg-disabled)}&[data-selected]:before{border-color:var(--bui-border-disabled)}}&[data-invalid]:before,&[data-invalid][data-selected]:before{border-color:var(--bui-border-danger)}&[data-disabled][data-invalid]{color:var(--bui-fg-disabled);&:before{border-color:var(--bui-border-disabled);background:var(--bui-bg-disabled)}&[data-selected]:before{border-color:var(--bui-border-disabled)}}}.bui-Table{caption-side:bottom;border-collapse:collapse;width:100%}.bui-TableHeader{border-bottom:1px solid var(--bui-border);transition:color .2s ease-in-out}.bui-TableHead{text-align:left;padding:var(--bui-space-3);font-size:var(--bui-font-size-3);color:var(--bui-fg-primary)}.bui-TableHeadSortButton{cursor:pointer;user-select:none;align-items:center;gap:var(--bui-space-1);display:inline-flex;&:hover svg{opacity:.5}& svg{opacity:0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}&[data-sort-order=asc] svg{opacity:1;transform:rotate(0)}&[data-sort-order=desc] svg{opacity:1;transform:rotate(180deg)}}.bui-TableBody{color:var(--bui-fg-primary)}.bui-TableRow{border-bottom:1px solid var(--bui-border);transition:color .2s ease-in-out;&[data-react-aria-pressable=true]{cursor:pointer}}.bui-TableBody .bui-TableRow:hover{background-color:var(--bui-gray-2)}.bui-TableCell{padding:var(--bui-space-3);font-size:var(--bui-font-size-3);padding:var(--bui-space-3);font-size:var(--bui-font-size-3)}.bui-TableCellContentWrapper{align-items:center;gap:var(--bui-space-2);flex-direction:row;display:inline-flex}.bui-TableCellIcon,.bui-TableCellIcon svg{color:var(--bui-fg-primary);align-items:center;display:inline-flex}.bui-TableCellContent{gap:var(--bui-space-0_5);flex-direction:column;display:flex}.bui-TableCellProfile{gap:var(--bui-space-2);flex-direction:row;align-items:center;display:flex}.bui-TableCellProfileAvatar{vertical-align:middle;user-select:none;color:var(--bui-fg-primary);background-color:var(--bui-bg-surface-2);border-radius:100%;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;font-size:1rem;font-weight:500;line-height:1;display:inline-flex;overflow:hidden}.bui-TableCellProfileAvatarImage{object-fit:cover;width:100%;height:100%}.bui-TableCellProfileAvatarFallback{width:100%;height:100%;font-size:var(--bui-font-size-2);font-weight:var(--bui-font-weight-regular);box-shadow:inset 0 0 0 1px var(--bui-border);border-radius:var(--bui-radius-full);justify-content:center;align-items:center;display:flex}.bui-DataTablePagination{padding-top:var(--bui-space-5);justify-content:space-between;align-items:center;display:flex}.bui-DataTablePagination--left{justify-content:space-between;align-items:center;display:flex}.bui-DataTablePagination--right{justify-content:space-between;align-items:center;gap:var(--bui-space-2);display:flex}.bui-DataTablePagination--select{min-width:10.5rem}.bui-Tabs{--active-tab-left:0px;--active-tab-right:0px;--active-tab-top:0px;--active-tab-bottom:0px;--active-tab-width:0px;--active-tab-height:0px;--active-transition-duration:0s;--hovered-tab-left:0px;--hovered-tab-right:0px;--hovered-tab-top:0px;--hovered-tab-bottom:0px;--hovered-tab-width:0px;--hovered-tab-height:0px;--hovered-tab-opacity:0;--hovered-transition-duration:0s}.bui-TabList{flex-direction:row;display:flex}.bui-TabListWrapper{position:relative}.bui-Tab{font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular);color:var(--bui-fg-secondary);cursor:pointer;z-index:2;height:36px;padding-inline:var(--bui-space-2);justify-content:center;align-items:center;display:flex;position:relative;&[data-selected=true]{color:var(--bui-fg-primary)}}.bui-TabActive{content:"";left:calc(var(--active-tab-left) + var(--bui-space-2));width:calc(var(--active-tab-width) - var(--bui-space-4));background-color:var(--bui-fg-primary);height:1px;transition:left var(--active-transition-duration)ease-out,opacity .15s ease-out,width var(--active-transition-duration)ease-out;opacity:1;border-radius:4px;position:absolute;bottom:-1px}.bui-TabHovered{content:"";left:var(--hovered-tab-left);top:calc(var(--hovered-tab-top) + 4px);width:var(--hovered-tab-width);height:calc(var(--hovered-tab-height) - 8px);background-color:var(--bui-gray-2);opacity:var(--hovered-tab-opacity);transition:left var(--hovered-transition-duration)ease-out,top var(--hovered-transition-duration)ease-out,width var(--hovered-transition-duration)ease-out,height var(--hovered-transition-duration)ease-out,opacity .15s ease-out;border-radius:4px;position:absolute}.bui-TabPanel{padding-inline:var(--bui-space-2);padding-top:var(--bui-space-4)}.bui-Text{font-family:var(--bui-font-regular);margin:0;padding:0}.bui-Text[data-variant=title-large]{font-size:var(--bui-font-size-8);line-height:140%}.bui-Text[data-variant=title-medium]{font-size:var(--bui-font-size-7);line-height:140%}.bui-Text[data-variant=title-small]{font-size:var(--bui-font-size-6);line-height:140%}.bui-Text[data-variant=title-x-small]{font-size:var(--bui-font-size-5);line-height:140%}.bui-Text[data-variant=body-large]{font-size:var(--bui-font-size-4);line-height:140%}.bui-Text[data-variant=body-medium]{font-size:var(--bui-font-size-3);line-height:140%}.bui-Text[data-variant=body-small]{font-size:var(--bui-font-size-2);line-height:140%}.bui-Text[data-variant=body-x-small]{font-size:var(--bui-font-size-1);line-height:140%}.bui-Text[data-weight=regular]{font-weight:var(--bui-font-weight-regular)}.bui-Text[data-weight=bold]{font-weight:var(--bui-font-weight-bold)}.bui-Text[data-color=primary]{color:var(--bui-fg-primary)}.bui-Text[data-color=secondary]{color:var(--bui-fg-secondary)}.bui-Text[data-color=danger]{color:var(--bui-fg-danger)}.bui-Text[data-color=warning]{color:var(--bui-fg-warning)}.bui-Text[data-color=success]{color:var(--bui-fg-success)}.bui-Text[data-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bui-Text[data-as=span],.bui-Text[data-as=label],.bui-Text[data-as=strong],.bui-Text[data-as=em],.bui-Text[data-as=small]{display:inline-block}.bui-TextField{font-family:var(--bui-font-regular);flex-direction:column;flex-shrink:0;width:100%;display:flex}.bui-InputWrapper{position:relative;&[data-size=small] .bui-Input{height:2rem}&[data-size=medium] .bui-Input{height:2.5rem}&[data-size=small] .bui-Input[data-icon]{padding-left:var(--bui-space-8)}&[data-size=medium] .bui-Input[data-icon]{padding-left:var(--bui-space-9)}}.bui-InputIcon{left:var(--bui-space-3);margin-right:var(--bui-space-1);color:var(--bui-fg-primary);pointer-events:none;flex-shrink:0;transition:left .2s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);&[data-size=small],&[data-size=small] svg{width:1rem;height:1rem}&[data-size=medium],&[data-size=medium] svg{width:1.25rem;height:1.25rem}}.bui-Input{padding:0 var(--bui-space-3);border-radius:var(--bui-radius-2);border:1px solid var(--bui-border);background-color:var(--bui-bg-surface-1);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular);color:var(--bui-fg-primary);width:100%;height:100%;cursor:inherit;align-items:center;transition:border-color .2s ease-in-out,outline-color .2s ease-in-out;display:flex;&::-webkit-search-cancel-button,&::-webkit-search-decoration{-webkit-appearance:none}&::placeholder{color:var(--bui-fg-secondary)}&[data-focused]{outline-color:var(--bui-border-pressed);outline-width:0}&[data-hovered]{border-color:var(--bui-border-hover)}&[data-focused]{border-color:var(--bui-border-pressed);outline-width:0}&[data-invalid]{border-color:var(--bui-fg-danger)}&[data-disabled]{opacity:.5;cursor:not-allowed;border:1px solid var(--bui-border-disabled)}}.bui-SearchField{&[data-empty]{& .bui-InputClear{display:none}}&[data-start-collapsed=true]{padding:0;transition:width .3s ease-in-out;&[data-collapsed=false]{cursor:pointer;&[data-size=medium]{width:2.5rem;height:2.5rem}&[data-size=small]{width:2rem;height:2rem}&[data-size=medium] .bui-Input{padding-left:0;&::placeholder{opacity:0}}&[data-size=small] .bui-Input{padding-left:0;&::placeholder{opacity:0}}&[data-size=small] .bui-InputIcon{left:var(--bui-space-2)}&[data-size=medium] .bui-InputIcon{left:10px}}}}.bui-InputClear{cursor:pointer;color:var(--bui-fg-secondary);background-color:#0000;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:color .2s ease-in-out;display:flex;position:absolute;top:0;bottom:0;right:0}.bui-InputClear:hover{color:var(--bui-fg-primary)}.bui-InputClear[data-size=small]{width:2rem;height:2rem}.bui-InputClear[data-size=medium]{width:2.5rem;height:2.5rem}.bui-InputClear svg{width:1rem;height:1rem}.bui-Skeleton{animation:var(--bui-animate-pulse);background-color:var(--bui-bg-surface-2);border-radius:var(--bui-radius-2)}.bui-Skeleton[data-rounded=true]{border-radius:var(--bui-radius-full)}.bui-Tooltip{background:var(--bui-bg-surface-1);border:1px solid var(--bui-gray-3);forced-color-adjust:none;padding:var(--bui-space-2)var(--bui-space-3);max-width:240px;font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);color:var(--bui-fg-primary);border-radius:4px;outline:none;transition:transform .2s,opacity .2s;transform:translate(0,0);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;&[data-entering],&[data-exiting]{transform:var(--origin);opacity:0}--tooltip-offset:var(--bui-space-3)&[data-placement=top]{margin-bottom:var(--tooltip-offset);--origin:translateY(4px)}&[data-placement=right]{margin-left:var(--tooltip-offset);--origin:translateX(-4px)}&[data-placement=bottom]{margin-top:var(--tooltip-offset);--origin:translateY(-4px)}&[data-placement=left]{margin-right:var(--tooltip-offset);--origin:translateX(4px)}}.bui-TooltipArrow{& svg{display:block;& path:first-child{fill:var(--bui-bg-surface-1)}& path:nth-child(2){fill:var(--bui-gray-3)}--tooltip-arrow-overlap:-2px}&[data-placement=top] svg{margin-top:var(--tooltip-arrow-overlap)}&[data-placement=bottom] svg{margin-bottom:var(--tooltip-arrow-overlap);transform:rotate(180deg)}&[data-placement=right] svg{margin-right:var(--tooltip-arrow-overlap);transform:rotate(90deg)}&[data-placement=left] svg{margin-left:var(--tooltip-arrow-overlap);transform:rotate(-90deg)}}[data-theme=dark]{& .bui-Tooltip{background:var(--bui-bg-surface-2);box-shadow:none;border:1px solid var(--bui-gray-4)}& .bui-TooltipArrow{& svg path:first-child{fill:var(--bui-bg-surface-2)}& svg path:nth-child(2){fill:var(--bui-gray-4)}}}.bui-ScrollAreaRoot{box-sizing:border-box;width:100%}.bui-ScrollAreaViewport{overscroll-behavior:contain;height:100%}.bui-ScrollAreaContent{padding-block:.75rem;flex-direction:column;gap:1rem;padding-left:1rem;padding-right:1.5rem;display:flex}.bui-ScrollAreaScrollbar{background-color:var(--bui-scrollbar);opacity:0;border-radius:.375rem;justify-content:center;width:.25rem;margin:.5rem;transition:opacity .15s .3s;display:flex;&[data-hovering],&[data-scrolling]{opacity:1;transition-duration:75ms;transition-delay:0s}&:before{content:"";width:1.25rem;height:100%;position:absolute}}.bui-ScrollAreaThumb{border-radius:inherit;background-color:var(--bui-scrollbar-thumb);width:100%}.bui-Select[data-invalid]{& .bui-SelectTrigger{border-color:var(--bui-fg-danger)}}.bui-SelectTrigger{box-sizing:border-box;border-radius:var(--bui-radius-3);border:1px solid var(--bui-border);background-color:var(--bui-bg-surface-1);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--bui-space-2);width:100%;display:flex;& svg{color:var(--bui-fg-secondary);flex-shrink:0}&[data-size=small]{height:2rem;padding-inline:var(--bui-space-3)}&[data-size=medium]{height:3rem;padding-inline:var(--bui-space-4)}&[data-size=small] svg{width:1rem;height:1rem}&[data-size=medium] svg{width:1.25rem;height:1.25rem}&::placeholder{color:var(--bui-fg-secondary)}&:hover{border-color:var(--bui-border-hover);transition:border-color .2s ease-in-out,outline-color .2s ease-in-out}&:focus-visible{border-color:var(--bui-border-pressed);outline:0}&[data-invalid]{border-color:var(--bui-fg-danger)}&[data-invalid]:hover,&[data-invalid]:focus-visible{border-width:2px}&[disabled]{cursor:not-allowed;border-color:var(--bui-border-disabled);color:var(--bui-fg-disabled)}&[disabled] .bui-SelectValue{color:var(--bui-fg-disabled)}&[data-popup-open] .bui-SelectIcon{transform:rotate(180deg)}}.bui-SelectValue{text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular);color:var(--bui-fg-primary);text-align:left;overflow:hidden;& .bui-SelectItemIndicator{display:none}&[disabled]{color:var(--bui-fg-disabled)}}.bui-SelectItem{width:var(--anchor-width);padding-block:var(--bui-space-2);padding-left:var(--bui-space-3);padding-right:var(--bui-space-4);color:var(--bui-fg-primary);border-radius:var(--bui-radius-3);cursor:pointer;user-select:none;font-size:var(--bui-font-size-3);align-items:center;gap:var(--bui-space-1);outline:none;grid-template-columns:1rem 1fr;grid-template-areas:"icon text";display:grid;position:relative;&[data-focused]{z-index:0;color:var(--bui-fg-primary);position:relative}&[data-focused]:before{content:"";z-index:-1;background-color:var(--bui-bg-tint-hover);border-radius:.25rem;position:absolute;inset-block:0;inset-inline:.25rem}&[data-disabled]{cursor:not-allowed;color:var(--bui-fg-disabled)}&[data-selected] .bui-SelectItemIndicator{opacity:1}}.bui-SelectItemIndicator{opacity:0;grid-area:icon;justify-content:center;align-items:center;transition:opacity .2s ease-in-out;display:flex}.bui-SelectItemLabel{flex:1;grid-area:text}.bui-Switch{align-items:center;gap:var(--bui-space-3);font-size:var(--bui-font-size-3);color:var(--bui-fg-primary);cursor:pointer;display:flex;position:relative;&[data-pressed] .bui-SwitchIndicator{&:before{background:var(--bui-fg-solid)}}&[data-selected]{& .bui-SwitchIndicator{background:var(--bui-bg-solid);&:before{background:var(--bui-fg-solid);transform:translate(100%)}}&[data-pressed]{& .indicator{background:var(--bui-gray-3)}}}&[data-focus-visible] .bui-SwitchIndicator{outline-offset:2px;outline:2px solid}}.bui-SwitchIndicator{background:var(--bui-gray-3);border:2px;border-radius:1.143rem;width:2rem;height:1.143rem;transition:all .2s;&:before{content:"";background:var(--bui-fg-solid);border-radius:16px;width:.857rem;height:.857rem;margin:.143rem;transition:all .2s;display:block}}
\ 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..f3ae2b7c0d
--- /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)}}[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/canon-docs/src/app/(docs)/about/page.mdx b/docs-ui/src/app/about/page.mdx
similarity index 62%
rename from canon-docs/src/app/(docs)/about/page.mdx
rename to docs-ui/src/app/about/page.mdx
index a4c16ee79e..2c87a3d03e 100644
--- a/canon-docs/src/app/(docs)/about/page.mdx
+++ b/docs-ui/src/app/about/page.mdx
@@ -1,7 +1,7 @@
-# About Canon
+# About Backstage UI
-Canon 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, Canon
+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.
## Philosophy
@@ -17,16 +17,16 @@ and flexible theming system.
## Team
-Canon is designed and maintained primarily by Spotify's Backstage team, leveraging Spotify's expertise in
+Backstage UI is designed and maintained primarily by Spotify's Backstage team, leveraging Spotify's expertise in
crafting high-quality design and technology. Drawing from our experience in building reliable and intuitive
user experiences for the music industry, we've created a design system that looks great and works seamlessly.
## Community
-Canon is an open-source project and we welcome contributions from the community. If you are interested in
-contributing to Canon, please read our [contributing guide](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md)
+Backstage UI is an open-source project and we welcome contributions from the community. If you are interested in
+contributing to Backstage UI, please read our [contributing guide](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md)
and our [code of conduct](https://github.com/backstage/backstage/blob/master/CODE_OF_CONDUCT.md).
## License
-Canon is licensed under the Apache 2.0 license. See the [LICENSE](https://github.com/backstage/backstage/blob/master/LICENSE) file for more details.
+Backstage UI is licensed under the Apache 2.0 license. See the [LICENSE](https://github.com/backstage/backstage/blob/master/LICENSE) file for more details.
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
+
+ ;
+```
+
+## 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/docs-ui/src/app/layout.module.css b/docs-ui/src/app/layout.module.css
new file mode 100644
index 0000000000..7399fc2485
--- /dev/null
+++ b/docs-ui/src/app/layout.module.css
@@ -0,0 +1,28 @@
+.container {
+ position: relative;
+ z-index: 20;
+ width: calc(100% - 64px);
+ margin-inline: 0 16px;
+ margin-left: 32px;
+ margin-right: 32px;
+ margin-top: 112px;
+ margin-bottom: 48px;
+ padding-inline: 40px;
+ padding-block: 48px;
+ background-color: var(--panel);
+ border-radius: 0.5rem;
+}
+
+.content {
+ width: 100%;
+ max-width: 960px;
+ margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+ .container {
+ width: calc(100% - 332px - 40px);
+ margin-left: 332px;
+ margin-right: 40px;
+ }
+}
diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx
new file mode 100644
index 0000000000..d197112431
--- /dev/null
+++ b/docs-ui/src/app/layout.tsx
@@ -0,0 +1,64 @@
+import type { Metadata } from 'next';
+import { Sidebar } from '../components/Sidebar';
+import { Toolbar } from '@/components/Toolbar';
+import { StickyHeader } from '../components/StickyHeader/StickyHeader';
+import { Providers } from './providers';
+import { CustomTheme } from '@/components/CustomTheme';
+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/canon-docs/src/app/(docs)/theme/layout/page.mdx b/docs-ui/src/app/layout/page.mdx
similarity index 94%
rename from canon-docs/src/app/(docs)/theme/layout/page.mdx
rename to docs-ui/src/app/layout/page.mdx
index b069082b04..3c3b998490 100644
--- a/canon-docs/src/app/(docs)/theme/layout/page.mdx
+++ b/docs-ui/src/app/layout/page.mdx
@@ -3,7 +3,7 @@ import { CodeBlock } from '@/components/CodeBlock';
# Layout
-Canon is made for extensibility. We built this library to make it easy for any
+Backstage UI is made for extensibility. We built this library to make it easy for any
Backstage plugin creator to be able to build their ideas at speed ensuring
consistency across the rest of your ecosystem. Each component is designed to
be editable to match your need but sometimes you want to have more control
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..f31cf4524e
--- /dev/null
+++ b/docs-ui/src/app/page.mdx
@@ -0,0 +1,174 @@
+import { ComponentCards, ComponentCard } from '@/components/ComponentCards';
+
+## Welcome to Backstage UI, 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.
+
+### Actions
+
+
+
+
+### Layout
+
+
+
+
+### Selection and inputs
+
+
+
+
+### Navigation
+
+
+
+
+### Images and icons
+
+
+
+
+### Feedback indicators
+
+
+
+
+### Typography
+
+
+
+
+## Support
+
+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/providers.tsx b/docs-ui/src/app/providers.tsx
similarity index 100%
rename from canon-docs/src/app/providers.tsx
rename to docs-ui/src/app/providers.tsx
diff --git a/canon-docs/src/app/(docs)/theme/responsive/page.mdx b/docs-ui/src/app/responsive/page.mdx
similarity index 94%
rename from canon-docs/src/app/(docs)/theme/responsive/page.mdx
rename to docs-ui/src/app/responsive/page.mdx
index 7eb4411333..9d37b1329f 100644
--- a/canon-docs/src/app/(docs)/theme/responsive/page.mdx
+++ b/docs-ui/src/app/responsive/page.mdx
@@ -4,7 +4,7 @@ import { CodeBlock } from '@/components/CodeBlock';
# Responsive
-Canon is built on a responsive design system, meaning that the components are
+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.
@@ -90,7 +90,7 @@ breakpoints that you can use to create responsive components.
## Responsive components
-Canon components are designed to be responsive, meaning that they will adapt
+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.
diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/docs-ui/src/app/theming/page.mdx
similarity index 73%
rename from canon-docs/src/app/(docs)/theme/theming/page.mdx
rename to docs-ui/src/app/theming/page.mdx
index ed7f801db0..73275020bc 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/docs-ui/src/app/theming/page.mdx
@@ -5,7 +5,7 @@ import { customTheme } from '@/snippets/code-snippets';
# Theming
-Canon's theming is built entirely on CSS, without relying on any CSS-in-JS libraries.
+Backstage UI 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
@@ -13,8 +13,8 @@ even more straightforward.
## Light & Dark modes
-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
+By default, Backstage UI supports both light and dark modes using the `data-theme-mode` attribute.
+The light theme is applied by default if no `data-theme-mode` 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.
@@ -31,7 +31,7 @@ Here's an example of how your theme.css file should look like:
## CSS class name structure
-All Canon components come with a set of CSS classes that you can use to style them. To make it
+All Backstage UI components come with a set of CSS classes that you can use to style them. To make it
easier to identify the class name you can use, we use a specific structure for the class names.
![]()
-Every component has a unique prefix `.canon-` followed by the component name. Component props
+Every component has a unique prefix `.bui-` followed by the component name. Component props
are represented using the `data-` attribute. That way, class names are easily identifiable.
## Available CSS variables
@@ -58,7 +58,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 +66,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,49 +74,49 @@ 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.
@@ -126,7 +126,7 @@ These colors are used for special purposes like ring, scrollbar, ...
### 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,85 +139,85 @@ 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.
@@ -240,7 +240,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 +248,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 +256,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 +264,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 +272,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 +280,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 +288,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 +296,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 +304,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 +312,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 +320,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.
@@ -344,15 +344,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 +358,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,27 +366,27 @@ 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`.
@@ -407,19 +405,19 @@ 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.
@@ -428,7 +426,7 @@ These colors are used for special purposes like ring, scrollbar, ...
### 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,13 +440,13 @@ 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-mono
The monospace font for the theme.
@@ -457,7 +455,7 @@ monospace font that we use for code blocks and tables.
### 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,13 +467,13 @@ 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.
@@ -484,12 +482,12 @@ We have two font weights that we use across Canon. Regular or Bold.
### 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 +500,7 @@ calculate the other values.
- --canon-space
+ --bui-space
The base unit for the spacing system. Default value is `0.25rem`.
@@ -524,99 +522,99 @@ 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.
@@ -635,7 +633,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 +641,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 +649,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 +657,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 +665,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 +673,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 +681,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 75%
rename from canon-docs/src/components/CodeBlock/client.tsx
rename to docs-ui/src/components/CodeBlock/client.tsx
index 27f5bc1a02..b4ee98f2f3 100644
--- a/canon-docs/src/components/CodeBlock/client.tsx
+++ b/docs-ui/src/components/CodeBlock/client.tsx
@@ -1,8 +1,9 @@
'use client';
import { CodeBlockProps } from '.';
-import { Text } from '../../../../packages/canon';
+import { Text } from '@backstage/ui';
import styles from './styles.module.css';
+import parse from 'html-react-parser';
export const CodeBlockClient = ({
out,
@@ -18,7 +19,7 @@ export const CodeBlockClient = ({
{title}
)}
-
+ {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.
-
-
-
- );
- }
-
- return (
-
- {filteredScreenSizes.map(screenSize => (
-
- );
-}
-
-const Content = () => {
- const { selectedComponents } = usePlayground();
-
- return (
-
-
- {screenSize.title} - {screenSize.width}px
-
-
- ))}
-
-
-
-
-
-
-
-
- {list.map(icon => (
-
- );
-};
diff --git a/canon-docs/src/components/LayoutComponents/LayoutComponents.module.css b/canon-docs/src/components/LayoutComponents/LayoutComponents.module.css
deleted file mode 100644
index 0e42bc6fb6..0000000000
--- a/canon-docs/src/components/LayoutComponents/LayoutComponents.module.css
+++ /dev/null
@@ -1,58 +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.
- */
-
-.layoutComponents {
- display: flex;
- justify-content: flex-start;
- gap: 1rem;
- flex-wrap: wrap;
-
- & .box {
- display: flex;
- flex-direction: column;
- width: calc(33.33% - 0.67rem);
- margin-bottom: 1rem;
- align-items: flex-start;
- }
-
- & .content {
- flex: none;
- background-color: #fff;
- 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: #9e9e9e;
- }
-}
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/PropsTable/index.ts b/canon-docs/src/components/PropsTable/index.ts
deleted file mode 100644
index 06d884c13d..0000000000
--- a/canon-docs/src/components/PropsTable/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 { PropsTable } from './PropsTable';
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/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}
+ {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..688010110c
--- /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(--panel);
+ border-radius: 8px;
+ border: 1px solid var(--border);
+ padding: 16px;
+ gap: 4px;
+ min-height: 120px;
+
+ &:hover {
+ background-color: var(--panel-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 97% rename from canon-docs/src/components/CustomTheme/customTheme.tsx rename to docs-ui/src/components/CustomTheme/customTheme.tsx index 66b4afc47c..c70d59173a 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 { Icon } from '../../../../packages/ui'; import { createTheme } from '@uiw/codemirror-themes'; import { tags as t } from '@lezer/highlight'; 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', 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 98% rename from canon-docs/src/components/CustomTheme/styles.module.css rename to docs-ui/src/components/CustomTheme/styles.module.css index 3f0a5eb14e..05604c48be 100644 --- a/canon-docs/src/components/CustomTheme/styles.module.css +++ b/docs-ui/src/components/CustomTheme/styles.module.css @@ -1,5 +1,6 @@ .container { position: fixed; + z-index: 100; bottom: 16px; right: 16px; width: 240px; 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 60% rename from canon-docs/src/components/HeadlessBanners/styles.module.css rename to docs-ui/src/components/HeadlessBanners/styles.module.css index c87787634e..384327c394 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); + 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/IconLibrary/IconLibrary.tsx b/docs-ui/src/components/IconLibrary/IconLibrary.tsx new file mode 100644 index 0000000000..bad51e62bf --- /dev/null +++ b/docs-ui/src/components/IconLibrary/IconLibrary.tsx @@ -0,0 +1,22 @@ +'use client'; + +import { Text, Icon, icons } from '../../../../packages/ui'; +import type { IconNames } from '../../../../packages/ui'; +import styles from './styles.module.css'; + +export const IconLibrary = () => { + const list = Object.keys(icons); + + return ( +
+ {list.map(icon => (
+
+ );
+};
diff --git a/docs-ui/src/components/IconLibrary/index.ts b/docs-ui/src/components/IconLibrary/index.ts
new file mode 100644
index 0000000000..b21b4511d3
--- /dev/null
+++ b/docs-ui/src/components/IconLibrary/index.ts
@@ -0,0 +1 @@
+export { IconLibrary } from './IconLibrary';
diff --git a/canon-docs/src/components/IconLibrary/styles.module.css b/docs-ui/src/components/IconLibrary/styles.module.css
similarity index 77%
rename from canon-docs/src/components/IconLibrary/styles.module.css
rename to docs-ui/src/components/IconLibrary/styles.module.css
index 8c9a96e5db..c9f317ef6a 100644
--- a/canon-docs/src/components/IconLibrary/styles.module.css
+++ b/docs-ui/src/components/IconLibrary/styles.module.css
@@ -17,12 +17,12 @@
justify-content: center;
align-items: center;
height: 80px;
- border: 1px solid #d3d3d3;
border-radius: 0.5rem;
- background-color: var(--bg);
+ border: 1px solid var(--border);
+ background-color: var(--panel);
transition: background-color 0.2s ease-in-out;
&:hover {
- background-color: var(--panel);
+ background-color: var(--surface-1);
}
}
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..a09a04fb5c
--- /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(--panel);
+ 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
+ {icon}
+
+ ))}
+
+
+
-
-
Inline
-
- Arrange your components in a row
-
-