From 4d2816dbe908db34a8ecd13e4cb899d6d1b196b5 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 10 Sep 2025 13:54:15 +0100 Subject: [PATCH 01/67] First pass improving theming docs Signed-off-by: Charles de Dreuille --- docs/conf/user-interface/icons.md | 124 +++++ docs/conf/user-interface/index.md | 471 +++++++++++++++++ docs/conf/user-interface/logo.md | 25 + docs/conf/user-interface/sidebar.md | 93 ++++ docs/dls/component-design-guidelines.md | 6 +- docs/dls/design.md | 2 +- docs/features/search/how-to-guides.md | 2 +- docs/getting-started/app-custom-theme.md | 613 ----------------------- microsite/sidebars.ts | 11 +- 9 files changed, 729 insertions(+), 618 deletions(-) create mode 100644 docs/conf/user-interface/icons.md create mode 100644 docs/conf/user-interface/index.md create mode 100644 docs/conf/user-interface/logo.md create mode 100644 docs/conf/user-interface/sidebar.md delete mode 100644 docs/getting-started/app-custom-theme.md diff --git a/docs/conf/user-interface/icons.md b/docs/conf/user-interface/icons.md new file mode 100644 index 0000000000..44b8782430 --- /dev/null +++ b/docs/conf/user-interface/icons.md @@ -0,0 +1,124 @@ +--- +id: icons +title: Customizing Icons +sidebar_label: Icons +description: Customizing Icons +--- + +So far you've seen how to create your own theme and add your own logo, in the following sections you'll be shown how to override the existing icons and how to add more icons + +## Custom Icons + +You can also customize the Project's _default_ icons. + +You can change the following [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx). + +### Requirements + +- Files in `.svg` format +- React components created for the icons + +### Create React Component + +In your front-end application, locate the `src` folder. We suggest creating the `assets/icons` directory and `CustomIcons.tsx` file. + +```tsx title="customIcons.tsx" +import { SvgIcon, SvgIconProps } from '@material-ui/core'; + +export const ExampleIcon = (props: SvgIconProps) => ( + + + +); +``` + +### Using the custom icon + +Supply your custom icon in `packages/app/src/App.tsx` + +```tsx title="packages/app/src/App.tsx" +/* highlight-add-next-line */ +import { ExampleIcon } from './assets/icons/CustomIcons' + + +const app = createApp({ + apis, + components: { + {/* ... */} + }, + themes: [ + {/* ... */} + ], + /* highlight-add-start */ + icons: { + github: ExampleIcon, + }, + /* highlight-add-end */ + bindRoutes({ bind }) { + {/* ... */} + } +}) +``` + +## Adding Icons + +You can add more icons, if the [default icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx) do not fit your needs, so that they can be used in other places like for Links in your entities. For this example we'll be using icons from[Material UI](https://v4.mui.com/components/material-icons/) and specifically the `AlarmIcon`. Here's how to do that: + +1. First you will want to open your `App.tsx` in `/packages/app/src` +2. Then you want to import your icon, add this to the rest of your imports: `import AlarmIcon from '@material-ui/icons/Alarm';` +3. Next you want to add the icon like this to your `createApp`: + + ```tsx title="packages/app/src/App.tsx" + const app = createApp({ + apis: ..., + plugins: ..., + /* highlight-add-start */ + icons: { + alert: AlarmIcon, + }, + /* highlight-add-end */ + themes: ..., + components: ..., + }); + ``` + +4. Now we can reference `alert` for our icon in our entity links like this: + + ```yaml + apiVersion: backstage.io/v1alpha1 + kind: Component + metadata: + name: artist-lookup + description: Artist Lookup + links: + - url: https://example.com/alert + title: Alerts + icon: alert + ``` + + And this is the result: + + ![Example Link with Alert icon](../../assets/getting-started/add-icons-links-example.png) + + Another way you can use these icons is from the `AppContext` like this: + + ```ts + import { useApp } from '@backstage/core-plugin-api'; + + const app = useApp(); + const alertIcon = app.getSystemIcon('alert'); + ``` + + You might want to use this method if you have an icon you want to use in several locations. + +:::note Note + +If the icon is not available as one of the default icons or one you've added then it will fall back to Material UI's `LanguageIcon` + +::: diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md new file mode 100644 index 0000000000..9be726d2dc --- /dev/null +++ b/docs/conf/user-interface/index.md @@ -0,0 +1,471 @@ +--- +id: index +title: Customizing Your App's UI +sidebar_label: Introduction +description: Learn how to customize the look and feel of your Backstage app, including theming and branding options. +--- + +Backstage offers built-in support for both light and dark themes, making it easy to get started with a professional look and feel. But many teams want to go further—tailoring the interface to reflect their organization’s unique brand, identity, and experience. + +This section explores the different ways you can customize the appearance of your Backstage instance. You'll learn how the theming system is structured today, how to work with the two coexisting UI systems, and how to define themes that align with your visual language. + +## Theming architecture overview + +Backstage currently supports two parallel UI systems. The original theming and component model is built on Material UI (MUI), a popular React-based framework. More recently, Backstage introduced Backstage UI (BUI), a custom-designed, CSS-first system developed to meet the platform’s evolving needs. Both systems are supported today, with many parts of the ecosystem still using MUI while new components adopt BUI. + +
+
+

MUI (Legacy)

+
    +
  • Theming: JS-based with UnifiedThemeProvider
    • +
  • Coverage: Most existing plugins
    • +
  • Documentation: mui.com
    • +
+
+
+

Backstage UI (New)

+
    +
  • Theming: CSS variables and tokens
    • +
  • Coverage: Growing, focused on new work
    • +
  • Documentation: ui.backstage.io
    • +
+
+
+ +:::info +We recognize that maintaining two separate theming systems is not ideal. Because of the fundamental architectural differences between MUI and Backstage UI, it can be challenging to automate theme updates or know exactly which theme to modify for a given component. Our recommendation is to inspect the component’s code and check its class names: if you see a class name starting with `bui`, you should use the Backstage UI theming approach to style it. +::: + +## Creating custom themes + +During the transition to Backstage UI, you will need to maintain themes in two places: some components and plugins still rely on MUI, while others use Backstage UI. At this time, there is no automated solution to generate MUI themes from your Backstage UI theme, so you will need to manage both separately until the migration is complete. + +```tsx title="packages/app/src/App.tsx" +/* highlight-add-start */ +import { lightTheme, darkTheme } from './themes'; // MUI themes +import './styles.css'; // Backstage UI (BUI) theme +/* highlight-add-end */ + +const app = createApp({ + apis, + components, + /* highlight-add-start */ + themes: [ + { + id: 'light', + title: 'Light theme', + variant: 'light', + icon: , + Provider: ({ children }) => ( + + ), + }, + { + id: 'dark', + title: 'Dark theme', + variant: 'dark', + icon: , + Provider: ({ children }) => ( + + ), + }, + ], + /* highlight-add-end */ +}); +``` + +| Name | Description | +| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `id` | Each theme has a unique `id` | +| `title` | This will be shown in the settings page to select the right theme. | +| `variant` | This can be either `light` or `dark`. This is also refered as `mode`. On the `body` of your app we are inserting a data attribute to set the theme based on this value `data-theme-mode="light"`. | +| `icon` | This will be shown in the settings page as a visual element to complement the title. | +| `Provider` | This is needed to set the legacy theme with MUI only. This will be become redundant later on when we fully replace with BUI but for now you need to have it for MUI to work. BUI is based on CSS and don't rely on any global providers. | + +:::note +Your list of custom themes overrides the default themes. If you still want to use the default themes, they are exported as `themes.light` and `themes.dark` from [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme). Be sure to provide both `light` and `dark` modes so users can choose their preference. +::: + +## Create a theme for Backstage UI (New) + +Backstage UI is built entirely using CSS. By default we are providing a default theme that include all our core CSS variables and component styles. To start customising Backstage UI to match your brand you need to create a new CSS file and import it directly in `packages/app/src/App.tsx`. All styles declared in this file will override the default styles. As your file grow you can organise it the way you want or even import multiple files. + +Backstage UI is using light by default under `:root` but you can target it more specifically using the data attribute for mode + +```css title="packages/app/src/styles.css" +:root { + /* Use :root to set styles for both light and dark themes */ + .bui-Button { + background-color: #000; + color: #fff; + } +} + +[data-theme-mode='light'] { + /* Light theme specific styles */ +  --bui-bg: #f8f8f8; + --bui-fg-primary: #000; +} + +[data-theme-mode='dark'] { + /* Dark theme specific styles */ +  --bui-bg: #333333; + --bui-fg-primary: #fff; +} +``` + +### Available tokens + +### Component class names + +### Custom font + +## Create a theme for MUI (Legacy) + +To customize the appearance of your Backstage app using the legacy MUI theming system, you can define your own theme by extending the built-in light or dark themes. This is done using the createUnifiedTheme utility provided by the [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme) package. This function allows you to override key aspects of the theme—such as color palette, typography, spacing, and shape—while preserving Backstage’s base configuration and component compatibility. + +The example below shows how to create a new theme based on the default light theme: + +```ts title="packages/app/src/themes.ts" +import { + createBaseThemeOptions, + createUnifiedTheme, + palettes, +} from '@backstage/theme'; + +export const lightTheme = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: palettes.light, + }), + fontFamily: 'Comic Sans MS', + defaultPageTheme: 'home', +}); + +export const darkTheme = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: palettes.dark, + }), + fontFamily: 'Comic Sans MS', + defaultPageTheme: 'home', +}); +``` + +You can also create a theme from scratch that matches the `BackstageTheme` type exported by [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme). See the +[Material UI docs on theming](https://material-ui.com/customization/theming/) for more information about how that can be done. + +
+ Example of a custom MUI theme + +For a more complete example of a custom theme including Backstage and Material UI component overrides, see the [Aperture theme](https://github.com/backstage/demo/blob/master/packages/app/src/theme/aperture.ts) from the [Backstage demo site](https://demo.backstage.io). + +```ts title="packages/app/src/themes.ts" +import { + createBaseThemeOptions, + createUnifiedTheme, + genPageTheme, + palettes, + shapes, +} from '@backstage/theme'; + +export const myTheme = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: { + ...palettes.light, + primary: { + main: '#343b58', + }, + secondary: { + main: '#565a6e', + }, + error: { + main: '#8c4351', + }, + warning: { + main: '#8f5e15', + }, + info: { + main: '#34548a', + }, + success: { + main: '#485e30', + }, + background: { + default: '#d5d6db', + paper: '#d5d6db', + }, + banner: { + info: '#34548a', + error: '#8c4351', + text: '#343b58', + link: '#565a6e', + }, + errorBackground: '#8c4351', + warningBackground: '#8f5e15', + infoBackground: '#343b58', + navigation: { + background: '#343b58', + indicator: '#8f5e15', + color: '#d5d6db', + selectedColor: '#ffffff', + }, + }, + }), + defaultPageTheme: 'home', + fontFamily: 'Comic Sans MS', + /* below drives the header colors */ + pageTheme: { + home: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), + documentation: genPageTheme({ + colors: ['#8c4351', '#343b58'], + shape: shapes.wave2, + }), + tool: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.round }), + service: genPageTheme({ + colors: ['#8c4351', '#343b58'], + shape: shapes.wave, + }), + website: genPageTheme({ + colors: ['#8c4351', '#343b58'], + shape: shapes.wave, + }), + library: genPageTheme({ + colors: ['#8c4351', '#343b58'], + shape: shapes.wave, + }), + other: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), + app: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), + apis: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), + }, +}); +``` + +
+ +
+ Custom Typography + +When creating a custom theme you can also customize various aspects of the default typography, here's an example using simplified theme: + +```ts title="packages/app/src/theme/myTheme.ts" +import { + createBaseThemeOptions, + createUnifiedTheme, + palettes, +} from '@backstage/theme'; + +export const myTheme = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: palettes.light, + typography: { + htmlFontSize: 16, + fontFamily: 'Arial, sans-serif', + h1: { + fontSize: 54, + fontWeight: 700, + marginBottom: 10, + }, + h2: { + fontSize: 40, + fontWeight: 700, + marginBottom: 8, + }, + h3: { + fontSize: 32, + fontWeight: 700, + marginBottom: 6, + }, + h4: { + fontWeight: 700, + fontSize: 28, + marginBottom: 6, + }, + h5: { + fontWeight: 700, + fontSize: 24, + marginBottom: 4, + }, + h6: { + fontWeight: 700, + fontSize: 20, + marginBottom: 2, + }, + }, + defaultPageTheme: 'home', + }), +}); +``` + +If you wanted to only override a sub-set of the typography setting, for example just `h1` then you would do this: + +```ts title="packages/app/src/theme/myTheme.ts" +import { + createBaseThemeOptions, + createUnifiedTheme, + defaultTypography, + palettes, +} from '@backstage/theme'; + +export const myTheme = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: palettes.light, + typography: { + ...defaultTypography, + htmlFontSize: 16, + fontFamily: 'Roboto, sans-serif', + h1: { + fontSize: 72, + fontWeight: 700, + marginBottom: 10, + }, + }, + defaultPageTheme: 'home', + }), +}); +``` + +
+ +
+ Custom Fonts + +To add custom fonts, you first need to store the font so that it can be imported. We suggest creating the `assets/fonts` directory in your front-end application `src` folder. + +You can then declare the font style following the `@font-face` syntax from [Material UI Typography](https://mui.com/material-ui/customization/typography/). + +After that you can then utilize the `styleOverrides` of `MuiCssBaseline` under components to add a font to the `@font-face` array. + +```ts title="packages/app/src/theme/myTheme.ts" +import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2'; + +const myCustomFont = { + fontFamily: 'My-Custom-Font', + fontStyle: 'normal', + fontDisplay: 'swap', + fontWeight: 300, + src: ` + local('My-Custom-Font'), + url(${MyCustomFont}) format('woff2'), + `, +}; + +export const myTheme = createUnifiedTheme({ + fontFamily: 'My-Custom-Font', + palette: palettes.light, + components: { + MuiCssBaseline: { + styleOverrides: { + '@font-face': [myCustomFont], + }, + }, + }, +}); +``` + +If you want to utilize different or multiple fonts, then you can set the top level `fontFamily` to what you want for your body, and then override `fontFamily` in `typography` to control fonts for various headings. + +```ts title="packages/app/src/theme/myTheme.ts" +import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2'; +import myAwesomeFont from '../assets/fonts/My-Awesome-Font.woff2'; + +const myCustomFont = { + fontFamily: 'My-Custom-Font', + fontStyle: 'normal', + fontDisplay: 'swap', + fontWeight: 300, + src: ` + local('My-Custom-Font'), + url(${MyCustomFont}) format('woff2'), + `, +}; + +const myAwesomeFont = { + fontFamily: 'My-Awesome-Font', + fontStyle: 'normal', + fontDisplay: 'swap', + fontWeight: 300, + src: ` + local('My-Awesome-Font'), + url(${myAwesomeFont}) format('woff2'), + `, +}; + +export const myTheme = createUnifiedTheme({ + fontFamily: 'My-Custom-Font', + components: { + MuiCssBaseline: { + styleOverrides: { + '@font-face': [myCustomFont, myAwesomeFont], + }, + }, + }, + ...createBaseThemeOptions({ + palette: palettes.light, + typography: { + ...defaultTypography, + htmlFontSize: 16, + fontFamily: 'My-Custom-Font', + h1: { + fontSize: 72, + fontWeight: 700, + marginBottom: 10, + fontFamily: 'My-Awesome-Font', + }, + }, + defaultPageTheme: 'home', + }), +}); +``` + +
+ +
+ Overriding Backstage and Material UI components styles + +When creating a custom theme you would be applying different values to component's CSS rules that use the theme object. For example, a Backstage component's styles might look like this: + +```tsx +const useStyles = makeStyles( + theme => ({ + header: { + padding: theme.spacing(3), + boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', + backgroundImage: theme.page.backgroundImage, + }, + }), + { name: 'BackstageHeader' }, +); +``` + +Notice how the `padding` is getting its value from `theme.spacing`, that means that setting a value for spacing in your custom theme would affect this component padding property and the same goes for `backgroundImage` which uses `theme.page.backgroundImage`. However, the `boxShadow` property doesn't reference any value from the theme, that means that creating a custom theme wouldn't be enough to alter the `box-shadow` property or to add css rules that aren't already defined like a margin. For these cases you should also create an override. + +Here's how you would do that: + +```ts title="packages/app/src/theme/myTheme.ts" +import { + createBaseThemeOptions, + createUnifiedTheme, + palettes, +} from '@backstage/theme'; + +export const myTheme = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: palettes.light, + }), + fontFamily: 'Comic Sans MS', + defaultPageTheme: 'home', + components: { + BackstageHeader: { + styleOverrides: { + header: ({ theme }) => ({ + width: 'auto', + margin: '20px', + boxShadow: 'none', + borderBottom: `4px solid ${theme.palette.primary.main}`, + }), + }, + }, + }, +}); +``` + +
diff --git a/docs/conf/user-interface/logo.md b/docs/conf/user-interface/logo.md new file mode 100644 index 0000000000..35789d6330 --- /dev/null +++ b/docs/conf/user-interface/logo.md @@ -0,0 +1,25 @@ +--- +id: logo +title: Customizing Your Logo +sidebar_label: Logo +description: Learn how to customize your logo. +--- + +In addition to a custom theme, you can also customize the logo displayed at the far top left of the site. + +In your frontend app, locate `src/components/Root/` folder. You'll find two components: + +- `LogoFull.tsx` - A larger logo used when the Sidebar navigation is opened. +- `LogoIcon.tsx` - A smaller logo used when the Sidebar navigation is closed. + +To replace the images, you can simply replace the relevant code in those components with raw SVG definitions. + +You can also use another web image format such as PNG by importing it. To do this, place your new image into a new subdirectory such as `src/components/Root/logo/my-company-logo.png`, and then add this code: + +```tsx +import MyCustomLogoFull from './logo/my-company-logo.png'; + +const LogoFull = () => { + return ; +}; +``` diff --git a/docs/conf/user-interface/sidebar.md b/docs/conf/user-interface/sidebar.md new file mode 100644 index 0000000000..f66e6bd106 --- /dev/null +++ b/docs/conf/user-interface/sidebar.md @@ -0,0 +1,93 @@ +--- +id: sidebar +title: Customizing Your Sidebar +sidebar_label: Sidebar +description: Learn how to customize the look and feel of your Sidebar. +--- + +As you've seen there are many ways that you can customize your Backstage app. The following section will show you how you can customize the sidebar. + +## Sidebar Sub-menu + +For this example we'll show you how you can expand the sidebar with a sub-menu: + +1. Open the `Root.tsx` file located in `packages/app/src/components/Root` as this is where the sidebar code lives +2. Then we want to add the following import for `useApp`: + + ```tsx title="packages/app/src/components/Root/Root.tsx" + import { useApp } from '@backstage/core-plugin-api'; + ``` + +3. Then update the `@backstage/core-components` import like this: + + ```tsx title="packages/app/src/components/Root/Root.tsx" + import { + Sidebar, + sidebarConfig, + SidebarDivider, + SidebarGroup, + SidebarItem, + SidebarPage, + SidebarScrollWrapper, + SidebarSpace, + useSidebarOpenState, + Link, + /* highlight-add-start */ + GroupIcon, + SidebarSubmenu, + SidebarSubmenuItem, + /* highlight-add-end */ + } from '@backstage/core-components'; + ``` + +4. Finally replace `` with this: + + ```tsx title="packages/app/src/components/Root/Root.tsx" + + + + + + + + + + + + + + ``` + +When you startup your Backstage app and hover over the Home option on the sidebar you'll now see a nice sub-menu appear with links to the various Kinds in your Catalog. It would look like this: + +![Sidebar sub-menu example](./../../assets/getting-started/sidebar-submenu-example.png) + +You can see more ways to use this in the [Storybook Sidebar examples](https://backstage.io/storybook/?path=/story/layout-sidebar--sample-scalable-sidebar) diff --git a/docs/dls/component-design-guidelines.md b/docs/dls/component-design-guidelines.md index 35e2f987d2..17e9d1f11a 100644 --- a/docs/dls/component-design-guidelines.md +++ b/docs/dls/component-design-guidelines.md @@ -103,6 +103,8 @@ accessibility. [7]: https://v4.mui.com/components/cards/ [8]: https://v4.mui.com/customization/palette/#default-values [9]: https://v4.mui.com/customization/typography/ -[10]: https://backstage.io/docs/getting-started/app-custom-theme -[11]: https://backstage.io/docs/getting-started/app-custom-theme#overriding-backstage-and-material-ui-components-styles +[10]: https://backstage.io/docs/conf/user-interface + + + [12]: https://v4.mui.com/customization/default-theme/#explore diff --git a/docs/dls/design.md b/docs/dls/design.md index 7e2ae90528..e988d1032f 100644 --- a/docs/dls/design.md +++ b/docs/dls/design.md @@ -127,7 +127,7 @@ your own plugin for Backstage. **[Discord](https://discord.gg/backstage-687207715902193673)** - all design questions should be directed to the _#design_ channel. -**[Customize Backstage's look and feel](https://backstage.io/docs/getting-started/app-custom-theme)** - +**[Customizing Your App's UI](https://backstage.io/docs/conf/user-interface)** - How to customize the look and feel of your Backstage instance by extending the theme. diff --git a/docs/features/search/how-to-guides.md b/docs/features/search/how-to-guides.md index 7055db1138..f0823ac47e 100644 --- a/docs/features/search/how-to-guides.md +++ b/docs/features/search/how-to-guides.md @@ -116,7 +116,7 @@ indexBuilder.addCollator({ The default highlighting styling for matched terms in search results is your browsers default styles for the `` HTML tag. If you want to customize how highlighted terms look you can follow Backstage's guide on how to -[Customize the look-and-feel of your App](https://backstage.io/docs/getting-started/app-custom-theme) +[Customizing Your App's UI](https://backstage.io/docs/conf/user-interface) to create an override with your preferred styling. For example, using the new MUI V4+V5 unified theming method, the following will result diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md deleted file mode 100644 index 38f2fd4c98..0000000000 --- a/docs/getting-started/app-custom-theme.md +++ /dev/null @@ -1,613 +0,0 @@ ---- -id: app-custom-theme -title: Customize the look-and-feel of your App -description: Documentation on Customizing look and feel of the App ---- - -Backstage ships with a default theme with a light and dark mode variant. The themes are provided as a part of the [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme) package, which also includes utilities for customizing the default theme, or creating completely new themes. - -## Creating a Custom Theme - -The easiest way to create a new theme is to use the `createUnifiedTheme` function exported by the [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme) package. You can use it to override some basic parameters of the default theme such as the color palette and font. - -For example, you can create a new theme based on the default light theme like this: - -```ts title="packages/app/src/theme/myTheme.ts" -import { - createBaseThemeOptions, - createUnifiedTheme, - palettes, -} from '@backstage/theme'; - -export const myTheme = createUnifiedTheme({ - ...createBaseThemeOptions({ - palette: palettes.light, - }), - fontFamily: 'Comic Sans MS', - defaultPageTheme: 'home', -}); -``` - -:::note Note - -we recommend creating a `theme` folder in `packages/app/src` to place your theme file to keep things nicely organized. - -::: - -You can also create a theme from scratch that matches the `BackstageTheme` type exported by [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme). See the -[Material UI docs on theming](https://material-ui.com/customization/theming/) for more information about how that can be done. - -## Using your Custom Theme - -To add a custom theme to your Backstage app, you pass it as configuration to `createApp`. - -For example, adding the theme that we created in the previous section can be done like this: - -```tsx title="packages/app/src/App.tsx" -import { createApp } from '@backstage/app-defaults'; -import { ThemeProvider } from '@material-ui/core/styles'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import LightIcon from '@material-ui/icons/WbSunny'; -import { UnifiedThemeProvider} from '@backstage/theme'; -import { myTheme } from './themes/myTheme'; - -const app = createApp({ - apis: ..., - plugins: ..., - themes: [{ - id: 'my-theme', - title: 'My Custom Theme', - variant: 'light', - icon: , - Provider: ({ children }) => ( - - ), - }] -}) -``` - -Note that your list of custom themes overrides the default themes. If you still want to use the default themes, they are exported as `themes.light` and `themes.dark` from [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme). - -## Example of a custom theme - -```ts title="packages/app/src/theme/myTheme.ts" -import { - createBaseThemeOptions, - createUnifiedTheme, - genPageTheme, - palettes, - shapes, -} from '@backstage/theme'; - -export const myTheme = createUnifiedTheme({ - ...createBaseThemeOptions({ - palette: { - ...palettes.light, - primary: { - main: '#343b58', - }, - secondary: { - main: '#565a6e', - }, - error: { - main: '#8c4351', - }, - warning: { - main: '#8f5e15', - }, - info: { - main: '#34548a', - }, - success: { - main: '#485e30', - }, - background: { - default: '#d5d6db', - paper: '#d5d6db', - }, - banner: { - info: '#34548a', - error: '#8c4351', - text: '#343b58', - link: '#565a6e', - }, - errorBackground: '#8c4351', - warningBackground: '#8f5e15', - infoBackground: '#343b58', - navigation: { - background: '#343b58', - indicator: '#8f5e15', - color: '#d5d6db', - selectedColor: '#ffffff', - }, - }, - }), - defaultPageTheme: 'home', - fontFamily: 'Comic Sans MS', - /* below drives the header colors */ - pageTheme: { - home: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), - documentation: genPageTheme({ - colors: ['#8c4351', '#343b58'], - shape: shapes.wave2, - }), - tool: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.round }), - service: genPageTheme({ - colors: ['#8c4351', '#343b58'], - shape: shapes.wave, - }), - website: genPageTheme({ - colors: ['#8c4351', '#343b58'], - shape: shapes.wave, - }), - library: genPageTheme({ - colors: ['#8c4351', '#343b58'], - shape: shapes.wave, - }), - other: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), - app: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), - apis: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }), - }, -}); -``` - -For a more complete example of a custom theme including Backstage and Material UI component overrides, see the [Aperture theme](https://github.com/backstage/demo/blob/master/packages/app/src/theme/aperture.ts) from the [Backstage demo site](https://demo.backstage.io). - -## Custom Typography - -When creating a custom theme you can also customize various aspects of the default typography, here's an example using simplified theme: - -```ts title="packages/app/src/theme/myTheme.ts" -import { - createBaseThemeOptions, - createUnifiedTheme, - palettes, -} from '@backstage/theme'; - -export const myTheme = createUnifiedTheme({ - ...createBaseThemeOptions({ - palette: palettes.light, - typography: { - htmlFontSize: 16, - fontFamily: 'Arial, sans-serif', - h1: { - fontSize: 54, - fontWeight: 700, - marginBottom: 10, - }, - h2: { - fontSize: 40, - fontWeight: 700, - marginBottom: 8, - }, - h3: { - fontSize: 32, - fontWeight: 700, - marginBottom: 6, - }, - h4: { - fontWeight: 700, - fontSize: 28, - marginBottom: 6, - }, - h5: { - fontWeight: 700, - fontSize: 24, - marginBottom: 4, - }, - h6: { - fontWeight: 700, - fontSize: 20, - marginBottom: 2, - }, - }, - defaultPageTheme: 'home', - }), -}); -``` - -If you wanted to only override a sub-set of the typography setting, for example just `h1` then you would do this: - -```ts title="packages/app/src/theme/myTheme.ts" -import { - createBaseThemeOptions, - createUnifiedTheme, - defaultTypography, - palettes, -} from '@backstage/theme'; - -export const myTheme = createUnifiedTheme({ - ...createBaseThemeOptions({ - palette: palettes.light, - typography: { - ...defaultTypography, - htmlFontSize: 16, - fontFamily: 'Roboto, sans-serif', - h1: { - fontSize: 72, - fontWeight: 700, - marginBottom: 10, - }, - }, - defaultPageTheme: 'home', - }), -}); -``` - -## Custom Fonts - -To add custom fonts, you first need to store the font so that it can be imported. We suggest creating the `assets/fonts` directory in your front-end application `src` folder. - -You can then declare the font style following the `@font-face` syntax from [Material UI Typography](https://mui.com/material-ui/customization/typography/). - -After that you can then utilize the `styleOverrides` of `MuiCssBaseline` under components to add a font to the `@font-face` array. - -```ts title="packages/app/src/theme/myTheme.ts" -import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2'; - -const myCustomFont = { - fontFamily: 'My-Custom-Font', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 300, - src: ` - local('My-Custom-Font'), - url(${MyCustomFont}) format('woff2'), - `, -}; - -export const myTheme = createUnifiedTheme({ - fontFamily: 'My-Custom-Font', - palette: palettes.light, - components: { - MuiCssBaseline: { - styleOverrides: { - '@font-face': [myCustomFont], - }, - }, - }, -}); -``` - -If you want to utilize different or multiple fonts, then you can set the top level `fontFamily` to what you want for your body, and then override `fontFamily` in `typography` to control fonts for various headings. - -```ts title="packages/app/src/theme/myTheme.ts" -import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2'; -import myAwesomeFont from '../assets/fonts/My-Awesome-Font.woff2'; - -const myCustomFont = { - fontFamily: 'My-Custom-Font', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 300, - src: ` - local('My-Custom-Font'), - url(${MyCustomFont}) format('woff2'), - `, -}; - -const myAwesomeFont = { - fontFamily: 'My-Awesome-Font', - fontStyle: 'normal', - fontDisplay: 'swap', - fontWeight: 300, - src: ` - local('My-Awesome-Font'), - url(${myAwesomeFont}) format('woff2'), - `, -}; - -export const myTheme = createUnifiedTheme({ - fontFamily: 'My-Custom-Font', - components: { - MuiCssBaseline: { - styleOverrides: { - '@font-face': [myCustomFont, myAwesomeFont], - }, - }, - }, - ...createBaseThemeOptions({ - palette: palettes.light, - typography: { - ...defaultTypography, - htmlFontSize: 16, - fontFamily: 'My-Custom-Font', - h1: { - fontSize: 72, - fontWeight: 700, - marginBottom: 10, - fontFamily: 'My-Awesome-Font', - }, - }, - defaultPageTheme: 'home', - }), -}); -``` - -## Overriding Backstage and Material UI components styles - -When creating a custom theme you would be applying different values to component's CSS rules that use the theme object. For example, a Backstage component's styles might look like this: - -```tsx -const useStyles = makeStyles( - theme => ({ - header: { - padding: theme.spacing(3), - boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', - backgroundImage: theme.page.backgroundImage, - }, - }), - { name: 'BackstageHeader' }, -); -``` - -Notice how the `padding` is getting its value from `theme.spacing`, that means that setting a value for spacing in your custom theme would affect this component padding property and the same goes for `backgroundImage` which uses `theme.page.backgroundImage`. However, the `boxShadow` property doesn't reference any value from the theme, that means that creating a custom theme wouldn't be enough to alter the `box-shadow` property or to add css rules that aren't already defined like a margin. For these cases you should also create an override. - -Here's how you would do that: - -```ts title="packages/app/src/theme/myTheme.ts" -import { - createBaseThemeOptions, - createUnifiedTheme, - palettes, -} from '@backstage/theme'; - -export const myTheme = createUnifiedTheme({ - ...createBaseThemeOptions({ - palette: palettes.light, - }), - fontFamily: 'Comic Sans MS', - defaultPageTheme: 'home', - components: { - BackstageHeader: { - styleOverrides: { - header: ({ theme }) => ({ - width: 'auto', - margin: '20px', - boxShadow: 'none', - borderBottom: `4px solid ${theme.palette.primary.main}`, - }), - }, - }, - }, -}); -``` - -## Custom Logo - -In addition to a custom theme, you can also customize the logo displayed at the far top left of the site. - -In your frontend app, locate `src/components/Root/` folder. You'll find two components: - -- `LogoFull.tsx` - A larger logo used when the Sidebar navigation is opened. -- `LogoIcon.tsx` - A smaller logo used when the Sidebar navigation is closed. - -To replace the images, you can simply replace the relevant code in those components with raw SVG definitions. - -You can also use another web image format such as PNG by importing it. To do this, place your new image into a new subdirectory such as `src/components/Root/logo/my-company-logo.png`, and then add this code: - -```tsx -import MyCustomLogoFull from './logo/my-company-logo.png'; - -const LogoFull = () => { - return ; -}; -``` - -## Icons - -So far you've seen how to create your own theme and add your own logo, in the following sections you'll be shown how to override the existing icons and how to add more icons - -### Custom Icons - -You can also customize the Project's _default_ icons. - -You can change the following [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx). - -#### Requirements - -- Files in `.svg` format -- React components created for the icons - -#### Create React Component - -In your front-end application, locate the `src` folder. We suggest creating the `assets/icons` directory and `CustomIcons.tsx` file. - -```tsx title="customIcons.tsx" -import { SvgIcon, SvgIconProps } from '@material-ui/core'; - -export const ExampleIcon = (props: SvgIconProps) => ( - - - -); -``` - -#### Using the custom icon - -Supply your custom icon in `packages/app/src/App.tsx` - -```tsx title="packages/app/src/App.tsx" -/* highlight-add-next-line */ -import { ExampleIcon } from './assets/icons/CustomIcons' - - -const app = createApp({ - apis, - components: { - {/* ... */} - }, - themes: [ - {/* ... */} - ], - /* highlight-add-start */ - icons: { - github: ExampleIcon, - }, - /* highlight-add-end */ - bindRoutes({ bind }) { - {/* ... */} - } -}) -``` - -### Adding Icons - -You can add more icons, if the [default icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx) do not fit your needs, so that they can be used in other places like for Links in your entities. For this example we'll be using icons from[Material UI](https://v4.mui.com/components/material-icons/) and specifically the `AlarmIcon`. Here's how to do that: - -1. First you will want to open your `App.tsx` in `/packages/app/src` -2. Then you want to import your icon, add this to the rest of your imports: `import AlarmIcon from '@material-ui/icons/Alarm';` -3. Next you want to add the icon like this to your `createApp`: - - ```tsx title="packages/app/src/App.tsx" - const app = createApp({ - apis: ..., - plugins: ..., - /* highlight-add-start */ - icons: { - alert: AlarmIcon, - }, - /* highlight-add-end */ - themes: ..., - components: ..., - }); - ``` - -4. Now we can reference `alert` for our icon in our entity links like this: - - ```yaml - apiVersion: backstage.io/v1alpha1 - kind: Component - metadata: - name: artist-lookup - description: Artist Lookup - links: - - url: https://example.com/alert - title: Alerts - icon: alert - ``` - - And this is the result: - - ![Example Link with Alert icon](../assets/getting-started/add-icons-links-example.png) - - Another way you can use these icons is from the `AppContext` like this: - - ```ts - import { useApp } from '@backstage/core-plugin-api'; - - const app = useApp(); - const alertIcon = app.getSystemIcon('alert'); - ``` - - You might want to use this method if you have an icon you want to use in several locations. - -:::note Note - -If the icon is not available as one of the default icons or one you've added then it will fall back to Material UI's `LanguageIcon` - -::: - -## Custom Sidebar - -As you've seen there are many ways that you can customize your Backstage app. The following section will show you how you can customize the sidebar. - -### Sidebar Sub-menu - -For this example we'll show you how you can expand the sidebar with a sub-menu: - -1. Open the `Root.tsx` file located in `packages/app/src/components/Root` as this is where the sidebar code lives -2. Then we want to add the following import for `useApp`: - - ```tsx title="packages/app/src/components/Root/Root.tsx" - import { useApp } from '@backstage/core-plugin-api'; - ``` - -3. Then update the `@backstage/core-components` import like this: - - ```tsx title="packages/app/src/components/Root/Root.tsx" - import { - Sidebar, - sidebarConfig, - SidebarDivider, - SidebarGroup, - SidebarItem, - SidebarPage, - SidebarScrollWrapper, - SidebarSpace, - useSidebarOpenState, - Link, - /* highlight-add-start */ - GroupIcon, - SidebarSubmenu, - SidebarSubmenuItem, - /* highlight-add-end */ - } from '@backstage/core-components'; - ``` - -4. Finally replace `` with this: - - ```tsx title="packages/app/src/components/Root/Root.tsx" - - - - - - - - - - - - - - ``` - -When you startup your Backstage app and hover over the Home option on the sidebar you'll now see a nice sub-menu appear with links to the various Kinds in your Catalog. It would look like this: - -![Sidebar sub-menu example](./../assets/getting-started/sidebar-submenu-example.png) - -You can see more ways to use this in the [Storybook Sidebar examples](https://backstage.io/storybook/?path=/story/layout-sidebar--sample-scalable-sidebar) - -## Custom Homepage - -In addition to a custom theme, a custom logo, you can also customize the -homepage of your app. Read the full guide on the [next page](homepage.md). - -## Migrating to Material UI v5 - -We now support Material UI v5 in Backstage. Check out our [migration guide](../tutorials/migrate-to-mui5.md) to get started. diff --git a/microsite/sidebars.ts b/microsite/sidebars.ts index 5a408d5d1f..b7e89825ca 100644 --- a/microsite/sidebars.ts +++ b/microsite/sidebars.ts @@ -35,7 +35,6 @@ export default { 'getting-started/config/database', 'getting-started/config/authentication', 'getting-started/configure-app-with-plugins', - 'getting-started/app-custom-theme', 'getting-started/homepage', ], }, @@ -398,6 +397,16 @@ export default { 'conf/reading', 'conf/writing', 'conf/defining', + { + type: 'category', + label: 'User Interface', + items: [ + 'conf/user-interface/index', + 'conf/user-interface/logo', + 'conf/user-interface/icons', + 'conf/user-interface/sidebar', + ], + }, ], Framework: [ { From f23cd8862150f64f109a6cbff2bcce9931fd67fc Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 10 Sep 2025 13:56:59 +0100 Subject: [PATCH 02/67] Fix spelling mistakes Signed-off-by: Charles de Dreuille --- docs/conf/user-interface/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md index 9be726d2dc..5f2d355137 100644 --- a/docs/conf/user-interface/index.md +++ b/docs/conf/user-interface/index.md @@ -78,7 +78,7 @@ const app = createApp({ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | Each theme has a unique `id` | | `title` | This will be shown in the settings page to select the right theme. | -| `variant` | This can be either `light` or `dark`. This is also refered as `mode`. On the `body` of your app we are inserting a data attribute to set the theme based on this value `data-theme-mode="light"`. | +| `variant` | This can be either `light` or `dark`. This is also referred to as `mode`. On the `body` of your app we are inserting a data attribute to set the theme based on this value: `data-theme-mode="light"`. | | `icon` | This will be shown in the settings page as a visual element to complement the title. | | `Provider` | This is needed to set the legacy theme with MUI only. This will be become redundant later on when we fully replace with BUI but for now you need to have it for MUI to work. BUI is based on CSS and don't rely on any global providers. | From 8b25afdf12c0cbfc54a5e5e57eedb9460bb9b874 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 11 Sep 2025 11:32:32 +0100 Subject: [PATCH 03/67] Fix link error Signed-off-by: Charles de Dreuille --- docs/getting-started/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index 252884dc54..876af4f0a5 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -157,7 +157,7 @@ Choose the correct next steps for your user role, if you're likely to be deployi - Configuring Backstage - [Adding plugins](./configure-app-with-plugins.md) - - [Customizing the theme](./app-custom-theme.md) + - [Customizing Your App's UI](../conf/user-interface/index.md) - [Populating the homepage](./homepage.md) ### Developer From d0baa442e873bfe028a7f0353f3336205f369596 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 12 Sep 2025 11:53:27 +0100 Subject: [PATCH 04/67] Add CSS variables + class name structure Signed-off-by: Charles de Dreuille --- .../css-classname-structure.png | Bin 0 -> 42743 bytes docs/conf/user-interface/index.md | 154 +++++++++++++++++- microsite/src/theme/customTheme.scss | 5 + 3 files changed, 157 insertions(+), 2 deletions(-) create mode 100644 docs/assets/user-interface/css-classname-structure.png diff --git a/docs/assets/user-interface/css-classname-structure.png b/docs/assets/user-interface/css-classname-structure.png new file mode 100644 index 0000000000000000000000000000000000000000..c241b182cc49d9044901d7e4c0dcbb30479bf006 GIT binary patch literal 42743 zcmeFY^;aA1w>}(7k>YK!;uMNo3&q{trD#hj5+q1)Zz)nJ?pEBjIKc{(;_ezeSa1js ziY)kX((jc5Df!=l=vODA!OMSQpeE$ zO6!xV&Pyq+RgA}DkH_#=51=595Afjj17q|yN~ngO%H#RuW#mlcgX6>O9N#c z&G=tjq$UtkBq|q-V&R^4VBwxWLI0;vASjz>_nNNvT55rZ)j2SK)yC8FDwVGPCeCo5 zXYc4pASftkjT1XTwb?{}o#bBZpK^dxvQKZVyu9Wgo5va&85wo#9#IF7Y`%S<2gW3@ zNT#Kw-FSeU@_*SN4wubsWZymhr(pFRDJiLHf%cOJM+~8n4npbt2O@;fM+`+NCsz*a zsC%E|Ucz12+L}4<>(}PW1#xKq6qH10c}yG}*po9=G*dlR%KAPTImIuD)0GD$?8>Xc z2$;%HusT|4GlxC>rvw1chk7&UhZw;UXmoZDJwD?ZGU7hLRH3 z5l;{6pAwoJX=F;vif3nMYoqXxIy(xw=C$#wD^JgV$4kRZJfEF1QwHNK9udjdK@^BOjP&%W*K%4lfUGj;T z?%$!w7GRatW+J{Cn=UhWXhS;g%gj~an<7;1u2(yQtUi4B^>4%39-LfUY3Txvd(j?A zNl7cTO?k94A~9c%cc8lu3=9natB)eT#>Qe^(9q1#BJcd=^=68bb%F4=m&zT=F{!?3EW?5C$=)Lo(x2C z(f)TG0Az{&XMX6u0G|9)9Psq9;=jMc=p-Ngb0YZ|?SG!v*K{-;0@NheP41 zExjIm07>irn9=Ntt!X_SH6l7a6~F)7QD0+!6@>}dAxD`*Nn>!mC9kpZYh#Cp)j(Fn z87@KK0b4|wm6iX7DF5pPYxxlJ;TIz5mG9oW+eU44`xRz&f9y?fZ<(kjZwv6~Pbi@~ zZ*2}H;WY-*$S2(F!@kAlv>(r~vUe(6ws<5NuM~-nS%+W+ZILgnfDOtl3nsAuny$Wg z=zzL=wFCpTc~n=Ii%q5Sr!3`mY&B<7opC-gbY~a`8iU!*n`{#a6NHV3 zQ>f%u% zP2QuH>fWkAwpW3ZLPlz(;@paAK3+yTOQQqm2>;6$SEFlvkYfN<3$|2KkirU7?F6ZC z94|3pF_a$sU($Ox31T=nLn-Mvxg6jo5(W2>&Gco1R&BfyTps|E-2b?6dP3>%n` zSHKE(;_IqTP9Gi;Ig2Ey`2qm+^cKDN4+aRU4nDqj^5jy+k`&qdWppHt6ZHae2>`SO zM)LwBHA<)ShfJKxII76;gW7A19xN-DW~~SA{Hz3MYPY;>ay&9H>W!jU4k&}fmx$#w<9^i>tRzldqw zcm`b>WqwWdN7A4#AQEMymWUf&@LlmmCSb`WH!h~G*aMt++?UMW^r;laTE^*w`pHHYY4oC+fD%a#Rx zu7x#TS<`2P1m~%r<6dvHxX*~&0VV1eoqRp*x*6IIm)i7d>sqf(v}uY*M-wh?OV2Fb z=68vme<)N*_<2~~EtQ?kY92$79s(-G9BlN1$!xEoEFDKWf*$uI6?_Zd}+Ld_5ZKD*2hDNAIn_mbkhYDrr*3h~p6*YXqZ z-r+=*rEVp`p0|vaI(0n1G=v^>%@DpXg6EtqOGg|VuYH4`j$P|X4X?G`eM6TU*2z0d zay$Ke6EY2L4&YuObJY=aa($5eM2j8Wyt_~cfQrlSpNz>mnM4+fG&UH~-uoNT%*|>1 z6x(LIc(9|L-&-XC1gft+#|Ml(?^-R;ek(v~r`DZk6`gKW9NfqlT}wcK|1~GJpz?> z#jxmi4Xn}EWsVgI`*_Jqg=Z20R}8D8;O3@N4z1xcqN?7 zXxf3J$<>iQdaZ|)FN6K;tVV)c&QiqLS27Ki&fCvZN*4Q3i$G>D;QG%SSd7D)j+xKD zmlObjX3|*C0NKa(p1KZ1fD6P$YOHn^>xILT0onA8`M9dvJO@`*N*=@3@oS}}jxu|H z!+C6f5LQQhbn*qH-`^{PpsNbQTCv&NgP3-DZl1yvpKEPQtn;&&Zsh|NRlAile86>( z6ye(AslWGb4Ez=+iZ5R~<`tz+pIumveD}yaVw~L|lzE=NzTR!!rBS2G)oloamWS<@ zKbPQ1i#j7!xUH9)PEI4)tV&~_MV8*X*UbW^3QDna(pUPfS}da4o*Q;`rsr=sNl0%F4lL4xh=5Gbb>^btpanEU@X>0oToOrQunq%M(#S#-<`B8-kX6(Fk@xtWXOck8M^&ufw(d`(o zJ&+5uYQYe_&hq?Vv`5rTp?#sxF&_?;-*CZpL(TYm4+XIpf!|*omsIo@>Pz9rq zHVZ%Vz^O3mm;LzI=e0PIN|ieStL@r?9_k|AP|(xM`@1_UPrA<6KR!g&$}j#Q=q&sK z&U47SSS6&iY}Cl;vTdC7X?ACyzh`5UA04Wa51+d51I<&3q}aFFP*O=yJ-n{PWwZCN zDsE;R91kxn(P9qqxy8q4dXThj7(K*q82%BvjV!0x08wfwd`qH__DX@oNvXUME`#ots34oKE?#ABx=6hPeOD0+el1XulaOBsTX9v)aem#?jj{wi-ZS+SD} zJO5SbX`Ud>GwbhY)2cu4`UnP9ThnUJdhaxzX)iTYkh^||H1e>t5&z!rCnd>il7((# z@gw!ToAO#tnFK(xSBLwVk1V*0IDq`6*!#F&vQ@LR8}Hyp(IKh@?b~bmq{9u7!d6Bk z3J$;c_?N6JRUIEcG7r=??B_#h2posOyLd^Y-qh~ zW91g5pgh!|BAWApn6O>hfzsTO<-$gF_)9qhb)p82TmvYxjtMd#(%%!#%3lX{BcTGWw}l;j~w!Rtl*#NVp~I21ewj z8+o+17)Ot7-k696$cFs|k~k{eBfHz$2E$HYG=CF3g@q{MBwi*UpA%Yod}^}y7wV{^ zv0+sWe=ZN)5f*q{MrhjGsxUXdoo7`w*E~);eJb`#h1iWYtO4LK5FuXR%FT?)$vvx9i%~YuZxW zz@qQr8Egm3O**%^Kd3`S3bGl2zjDlf)`1+x8_g8W;EKId`kLl*oL|d=7=|yW{d4`g zE6GTLj&${L$nZ9$dR!56Y81Lg?lx}_UIc~YGwcVabH+x51+PHAikfY$*fRGo<6^gN z#(;9`Suke#xX=Q~!yO9fq5MeS*`F6&BbF@yQ7Fj2cwFiZ`A599ZpoL{hPbdG zm0KfvT&UZuI$MJF6S)Wg5Q7FqQ98l-t38>c%yzR;UCgr;tBqHQ)0;gs_>nMoD&W(% zwAu{b{tr-Mqu1qB?hyGLHK8p_4Yoqd-IeNYVnZPFpOuYZ_4_l@V5nuht2lFVrqfEA z>5l#9w)mvB(TFuXsky`P9Saf`I3JGH66kyNB%@py$Ne>L~gn089!FM_ZNPXatN-1rUxh>ix)Fd9CZva3chE@ zSlO-JesVc}MU*z7?vn#CT-#*w~B!2YDkH(F$aEr| zsvdK%$2eTj->P!muG^KZWkNC^%t&o_p%LLDy#(-~h$qBXCT%2Y&)(k7%sD|uKXzDv zda#mRTHf(J83e5T)YEm&Az*L zHZZYm{?*-9YjmVP7IE3fUachZX~~Aj9n#IMzHCO&Vtu;fJ^y6NYcoXQdEQ-W%bQyv z>r$QO5|KBGZPl9*CAlbf$# zldlYwQz_f0?^kcXS;UX1Q?CP+){hYLR<$JrV|+v0}Ho zwviGj2~-OG!bC#2igz)EM|Hn|_u|CCU)&nr!Izpz0DuGgTO4!%3spdV%D}0z6EAhn z?7$o8Z!{v!cE3zYbSZC*vxFdJ_5k~LW^h%s^5(|k z=Mt2kVgzL6fGv%9H~*~{-yEfF%&GrpL=6o&XSjzcet>dKjA#c&77PxpR~WJ*K`o~y zoswEtvD^<}@^42Fov-;Hq3~^iZd%!E~v4H(I=FTQp!3BAr6AM?$;D z8Hd$@s4Zc5GED{0^xWIr-IiMALyX%yoH?HIc0%ElL;SKdffYF)GeQh)iE*xUTXCxr z2thJIY@nI$xDw+Nn)k$PwzfaA1iL+U@9e~E{O~H>R&B)EPSpJ^0;t7e?&9g9Ro@36 z^!r_0`{)u?aa7cqDm177Z$Nh^-sK_3dzRiE0*A8ESZ*|KZ?Jb{nR9s}&D|HEZaN>{ zlr45C4-&~f6e4G23KDsIr=2Hp(aQ1lH@-?9Hc$H>vJ8z{C~Ba(PyaU-kAl|cssFf> zSw_YduI*E}sj94P0DSQI4+OJrBIcaaZ*i4n8TR69 ztJC7qhE3gf-Y6V#XIAF#7NotP{UFXLd7G1+1Qu>5OIBs`&oQQcmPun(mJY-gmk`xH zc`v~D98L^! z3rD}o?8S_{&WVd63pivH;WmyPQCSmp8G$8q<;pz2Gyki)RcBuDqoSM)m-puzb~(7# zIQq%s=O52)H~QB;^Ds`p`;O%=3>oZ9+h#peL_QR~p!iPeamEJWnu^O}=3|UAPSCYU zcqO_QtTb%BowvxK;`y8LNDC){Z`0Iot_9!SKi|v=u3tA+MYs9^tHtV;K+3H=yU}JP zev#B<;Pm%>$8oL^zX;m0DvpHFbc2*=S74nDEsYq|6&a+;i!5XFe}z!qroW~ zS~*Fjc6f^7cS5^omW}o`jj&gK`$VvBkMYRNn_E)?iRdh;-IbRW?vFn>U&;C4k0%wJ z6+=u8)-RNUxNt}uCvD$mDaG2f4RMu+EOYV`4^CWXyBQgVktWnvhKrlz3Uh3e@~^~4 z6<{6iA6TyxN(#@ZKWDHqcJ)RA{WD%_HAZe@)XLzMwt(#g@0{~24%MB8<}5THX2E3U z>cW`@cM&9ljgJ6#H~nztY+IwfD*OLp4CK*z*f6B@3XI>z#lqiGY{u`sehI9-7igLe%g1rAasGY6n zT)iVFCh=8AN>n9#+k=-RQ5~Vv$S)pE>~2LZZ1<^&8#{*I-;Bc(_PvW?nFB76wpcO= zhS;p6u)?e{{6gPgPPo78bWxH4UG^-jtRdmC=GbSsULAZ{X>VUokUdspdh3AYr!E^3 zXu=;%4yxNzi{5@GjGM$vYs(!n?YO+_ST9?55s`YorqCJsL9aTAAER}adc4s#j1 za`sz$X_oasp6}hX)eghkqdgAwcsmHQcXSn9mw%`Qs20!d6XMrVFRgoNal!>3DVaGvwb2gqSEHdqnSv3ar+95}D^}AsoL3yt7 zSa}85!9I9)sivMF%PiC?7JB*Dpv6)D8PVR(HQ$)fo{bUN%z%W%xj$mPYSu21zgL%; zO*B@WtC*dGxiVY&(N-iNTLQ?*ByXEJbn#S-&xfBaCEVopsxHv)G_d_XZDBj5c{BQ+ z)=;=q_iL5=wr(Tm)b9EK1^LZ>19rF5+gyiouV@p6%L_-KK^Tte_a++!K#;aS*3vF%6&AoAH;k_K_-n(EL4#YMXFp=U3bFK42| z;c^xTzs53IbM+)I(1a#d95gt8OPS*3TW<+NSn2%k?OE#xE-+|UK2tz0mCV-j16VMt zkWvMfVTQAf>c7Y8A{QXLdP)myBSKOp*%Njp7Hr126a$^+SRk~W4h(hes<7QE=L8>#~wx$ zuuuL-9;3{k-FB=m@2{YybDlrS5VqTQ4C5bIaVw%-j!iDb*hL_G9mFA)GM)R$Hy=fR zm>*Zm>0arK8}!HyV#=h^nRLsS6w`3xI1Z_-V?JeL+~ap+H`JPN=W3$=9`2gh^9L>2 zR31a7(JE-mWX?0A3j;&@5c$)Tsi1yCxjWmE)pOz6Y-wwHf7k5-QNZ7Oq)D`m*SPB{ zBslKK1)cLGY#^$-7%zV=voG82e~mJ%9ge@2@TyYYn|5S{7rGlJZXk2s35YZmNthr& zJjIA|p+I>|WVfF_+EQT-W)PyI`0(3@fN}3rnL5Uth|6KdZcjZ@{kE(NsAn_+#s{oVrPgb07DvS`tWVp-?JYijYKq?liOspWmR;=QUKbEfs*rhZEJFOgN*fz7NJ*J# zYEJG_MiWw8s{sp?&y*Dgv8gcOUEF1xAbZ?{6M;alGxM)HT!8>s1C;^!w3@cSg%q^~WqKwo^RH5&$q- zwRnbtaq-<3(Yyk(+Qq!JHRB}tMDk*C)1)$tKysmu=PU%nK6UG&j%fr;TIBr3_&D@- z9ZmaUt&L4JC4+1c{if*Y+rYGMUcl0sGuZ&b;e)8kqDQlv?ZchX;pXO2L*-wCrGxSP zpAKr%x!7pjNPi^%=#_~D5jJaF%ih_vdV^z`Y?~fRlSU3F?8X>BT?m*3vk}z}U@51f z$IB0vN#}#$#eqVibKa)AVs?J*`y7pCDvK-}ngrKp@(x@)w$#N}l@7f8ABPU4H!P>Y z)MA?D;HV^nOc#)pNCtXYp`X=;f5TbnyuV#N&NhYCYq3FJ;|o8L6+dSA^#`^RgpeCM zls_!Cdyg$VptVjU>#>5>Rc*uYsqz{9?}PiY4T|{^r-%C>^z;$q`|I%^`^FBGJ{=W5 ztl0^LN63pHsa2THIOWQ$9pT@XeAcP!jlytb zVM{M(-!*BH{%pjkIjmp1F1u(}$0@(8vx381e`aeq0`llwoT5U*!*6HXk+Q|N;i?jD zoX?f#-eo@gg{Z_75j3MxcHDO;BDbHrgM!vkv>-oUUAtj)oPY;8@tIk>i0UcSKm;pX zdi}xS-^`mnNNGG9ev2%R<#F;DxxkmJ&i6D(qXc`z3+D=hpdfQ$j z8dLUO*6d|Wf_hux(72WKnW`CujI!x^d_>g6TMi;So7WYDVj5Md07sF~I)65m6KL`! zHHp6)`@k)yT>QBwDZIm?+wZYAH8DY3LzVcHMXfn{`nb^hXqAbI*@}Z^nX|#3>+fSe zvlh2>Ds}Fa6at2nONh?c9q%W+313o1W$1R zbKbL+rnnCpe>D>8$glKIJ6@r;$p=TnsV?mWd%w7FKgMK}kAm;vI(ms31OyzB>^J&k z$$|HK&%&h0#+yGB(F*JhOjtjL>Hme-#edhre;ssRP&^6%z*v~0X*5129FHWYK~Y=T z@hG|GH5g$unmTR6f=ZNH|Bt*X`4Nuubo!ah7OI5n!oVA}r+{oQc^AQd*M&-fas8WZ zm5s8TuWDN<9`^LN_fUBPJFR{ecUB+y?#Z~@^Uwfs|5cZ8>WaN!1O1{7geA(h+F|P`Zq@{yHmo-qq1)y4HXs9Yh zU`2_Pj#?}m(2puhUIYY4aup`qZr@0AUOm*Hw%klNg9`nGY%}rF%`j4a!0KbR0L~!J zfR*iVfR?rs{{&Pc5YxWa*5PgIn;GrU1Q4KF&x)-Rk+<+?^f`l{iPw9;JuFm(Ol1>z zb2xC5rKg)kK0jYe(6rxObfLpVa#p(}LAKdUdp+vl+>QpwmqYceZ&TT_|JI_w)~d9k ziXX+a!~nhfQ&i4WtWb$6LiN^j-xI>`B7Sz|(Jq(QwPmfqP>Qpcr*HA`(TkY77GpAc z-Qpc4okoM9<_JoX#K~T)otQ_E-;|ECFAXZPe6v5Pw^t$j_53c9>lK+{j#(6&1IS03 zp67@v1A)7?FA-32F`H9u!|&}QHCgR``e*6mm1xoB!5fj! zA*~_-upckRNxXx6@&2ZbdUL;y%e^18FtBw)tuv z3K8&j*lxiVk7ge3-^|dt^63ouODGc}X$X4PJ>eauTk(R|%`TV=Wg=aqr*Qy8#(p$e zHi(!mx?lw*7TxPPKZbPad;u6~H$kDhlJoxPyBX=J)=|{&Q}<{AbgxiZKY*X6Y45{t%QYE+o}1$O^b>?D z>F={BmAW_XERHD%ql6j_MvD}Q-@e!yn>H-$J)R4e))XBXK;I| z$LI={heiIf&RF%kY@?hd5QeFUT2TIOX~I9vZgxLj!M=^(tL|+j z3jjbA@r61|IIL#ESD|I_F7~i+AGe+^W8nVjTODHpnJQ(6Y2Bp#K?&_W-sheBk$C6n z-#%x)?f-%gtK&N4tV$^$vA_&cYhs^^GGaEOHGcb$u-%T6+_T8G?vq;-kX7=0o zbz<=Jg;K3vUphG)HxxKOkozM^2F$5zm!53-smZYy|3%&f5hz{mIVj84$v0W$Vy(YU zosT#nguVOn1Yzibw7)p1U8aCnc|R;DAT;cuCw7goK6t^f_<9TMMVZAOVeb#fb{X4_ z%#w2X%h-w~N6NN)b+KqZW3pwZR`un|qbeiJE_Ia7r)!Ox**R29XztQP^(1CHd2$s0 z6HIHuR}G#tKeFcPns4u&`Xx=kI{BlUJJ9&{#-`ZDh=|?0A>+@)h-%ZqiFf26a zTGwJX3W+C77#a`Sjfj-+&!ZqMUN}jU9gc>UV+3 z*3z?izbfXo-73V}@eHJ*vUna(OQm{FrF1#}EwA@*k|u- zrwQ;x>8J_r|iZ;bu9o?WohJ zTbm8?cJs1LR_2j927Ne4!6Q*8SYWvLx$2Rm$G2H#W#?y(3b5$E1 zR&HJ}b;#1NZt-~jmUGvWC*9vy-A_M%{w+7-uIuW*k$Kgt+jNj@+i8(B+)K+^gripX ze&MiCHoB~WDGe*vRH`~Qe^Fkz*{>nIvbw6ZR_l9Xw~?Fl9QB6%L%u;BJKxwnnFo@s zd9Jb?}ZAyQL=6I-W)#Zq_TG z5-4VK_b0a3BaqKkDzuor+(1SY@M~sG`!PV$-ajQAE7wVmltGFx-1Y`8pa- z!>?4bA=}88sf|PF?^^pTM59gmXcueptOORX?Ud)H-9LukaBq@m+r$CP+K;4LMfSs$ zyUmHmk-A@RS^|oha9B7<3`wpwr7-F`0@~78L|sb4&OIKgiCeP{dUYH7Y8+(uwK2wD zPK?P`s)G#N=;X|N82vwFkGvugo(u_Eu&!F_gOM+QE)Y6u)4_RuCcOa*lI4lVf;ZO_ zg)sdbL#g1)dU;buNJkRuaD$vnY*Z8{SKmIlYVE`By)f3NYpOb=VcNzY@p~VbH%v5l zw7h98cCfNnJwt}#XV&1}_G17Y`(JYR=d!@NH;F!!!Q}zv93kD`9j04_hFJu)5wR+n zsz;RLn)a`FwYVxm->+pTO2yY-lQa@VJ>6-NX$on@Zm*IiTNu4&>;ScqDt&O} zFHY;*8K1+6?X}8tNG~&T7DiTWKx!w%NA^YdaUsY-RNmm^;VLridQ*axnL=N&XW*`7 zkt}lx<9TKt!+a~264Sgo#DPsEZOrEthcpC(uYzG&!Jwb)+w#g~o6Vway4^}dD-eWl zumsQdbKldivng})a}B7DJY;uRuqM&ny>f0TId6BpXk9Uw7-7bLPa?21b{ql3opR=5 zUxD;ie-ZLAS-8mQLdq9u-3htgZa0{yl*JP1^+tzCyC(Nc{Dfyg?Ip8ELfq@18GP`P z7UkZpKW{FW_nLO6oAvD#6vXBhA-S#a56(cJDG9QhMgPOFJ1SLSS>VFPABpHNKSH^~ z5G|)o8p?^ojD=mWB7?UnGR>714R9)n!hK5RKhiCrj3 zZgb|lHJ$*ELk#+fVkPD1i*5#oc&ly<5XYcolf#r-zTc3x!PMc0#d_SU1OBL5Ur=D3 zPxd`zhoE7jms?W8-9Fp=DMyB=uSZ+8$En}NnveZcwE%UI#%P;%$_}Ec+#!n&eOvO! zCE11P(!?a`W^Jvnec$KQgvTy#q=lKqcT|@9JYJsfBtF1eAg&b<{TEaS9Zi) zlW5Ki$o4n^qJV~4u%8=!a~BaSHpkT4nrULdRrd%h;L39->cukbIZ~l}gkI^}I+^43;%Mu7Vm#$Wu##u;P4zeRwZo-ay1j05)yC^VWJ!=de9& zkysqzr4MZk40ktUugjy*TEw|btAeR@ysFJVE`if+4tY8lio<%NFDG|?#yoJ2o|Q-8 z!f~BLV}`n?;E`Tsbq~8u-=AaiiG;krv%I~_A4e%YOoz^SVBZM{&%L zd*Y6hC%>rjLdoUM;hK}r98B9YzcMFumv|32jI*i~LC@w2WJz|HyV2K`1mlXak?wlM z7n9K-8Ke?~2~h!4N)NS!W~~h9mGh0~yzkNBg!kuJQlEG{c;hnva1il`-jr{;t;A_W z2*u1O;pEHF-Qf!2BIM3ekIky12xeS$kL~b_O;Da-CfD*GLW8=FLPJ^{uf0riksKWw((q()uwFJfXki;mgf~JYsLs87|H0sF70CntZR?g!+mV?5P9t zC4NPr+geEMgDN=9_RV zaj7BOfc2A`h9C(%ot7;G>(+=2B3S5fkxZm$j5OYfQzxjvwP4|yWhRkY|3h=$_*k=sTu0ducX9B zG~C~+44Pl*F+S`JV_T-wmE^V1Bo?ruewI7@s@?} zZ}ps`%-yi%er$ZU?*!(ZDQa=$ra;=7ku0Ndlyda+cozepsFo7}GWhagZNhhY$>B9? zpfm<$pDICe&@XGc+W;ejL%HtE4U3cQE1;arQ8WGbZI6YlJ7DA2q-lHyV#uc_QwLxc z-P-QQY`Qw0d6n7vx9Y|HYX|QI>No^~W@k@#F6y}*dU(Fgd9!u31dmngyxPzd@b*n( z|Dnfna~_JNX4$`~%?FiOAsYeGLrR-#s%_;%BHp&fg^XyEg@|w~82JmRxix!YIJJeQ zUPq3$4@{J%+C1aoV@p{WiM5h4u^gxDsvOq*d~bJk#`lUO+aqC)F7 zf=a5H-g{?~L^ZDUA(Afb$290>P!&i zN*^jhmLm>B9PyhvdNV<|gny#mINovBH3I-r=joKt{uIy!YK@Jtsiqkfhcw1cd=#|S zN^1@Q2`@|GC^KQ!kkt|^Hlf8y<8G)e-epgzLq5v0FtubJh;g$S4Q7bJex_f|ux(`UV8M>jAPaazu3p4B|(uZSkF zCqzZE)PHm3T=M7?&WQY69*X}WF2>BSj@%Zio(CB25KBK}yMZjYnfxv|%!2D*?8)uv&(DWH+}{P(8j^(> zf5n4UIalsD@+VAgTXfdd0h?MfqNqDO4?Heh*(GAA`gbY5w$7B*?e92T&wYkV6y?qyGwwl5>3X z>!)RUcKuk$Q&NrbLs=#(6v4flYDZ!wglA>uJh>wj0mjxBZQzq_pq-p~e=qGfC`lQz zW!YgEr}pqx9p?*Q>P=bl?0tn&;3gIw9CC7dkvc1WU;IWDDzmA4t|b#iw!zc?*4#E`2*b@?SIYmxbIQ{x!!_QX@)C0QT_9X<)VYgdcV- z_!*NOm9mfbwh1+ouLw(>JtU|h$RZBC_D@k3%Sz;Gv2LlCyI=7SH`~_R17l`b7ad3V zLU?s?ESyad0)BiACN%^pehU3s(=%mtW`5l{@%!Dr-y9TX)@FjD)7hoh3~n#9zJi~u z4%lT~WED-nKA;uw56l1xDUYi!fwHj1Xd_!PCc}LEQ!oLNjSMJm#-3GVX!&HExbM{V?66|P$gpWMSW@Ac%06IwN=KirPBK=bc>*7ZO!T&?>+XK3vj1^! zTUoG5L+epU>rUzUZp($TMJuvb45p9_exAodPud(%;(41a|1%^PxDuK zM}%_YVNdZH41YHtmWy^MT$xh<0L$M|FFaRs5));v)Usz-D4^a1q2CyRHd~9kLyOS@ zK@`&3a`yr&W+36s6b%D%c1CRG2-3cwSccWXmH1W~`@2Mo^oNY&|cfaQE=RwlS zEuI|fB{c+uQIb4BJ*|bFJ-fQC?!#oPyb%>_)AH4aO-DnE8#oI0@7SlbLZhS^D$>%1NCK2obGXDO z74Sq(*EGtb;|4~G^ki_JrANKc6@nT!qKIuy?P812XdiooCMXjPC-z=zv;%U2yFVp8 zOhpY8CDWewnIG2<5bT{$Ck5fc$QJK{&^bfV4(41u!8EU^PYI4A44U2WIr7=VO2Qsc zbT9*bVDUSN=0yJ>1c@;h;W1f@LyE#@6+vrkBqBA;`;p0@2-gpiTzu-u_K6I z8hY3%%b;3iKp&T0c=jUr#gmz}?`O3w6%DRJ$}2Ha_LPj9WXMytn*27GtLeeP^sc=4 zBlgsdP!$m-I#hs`(L!vRilc!dH>>kP4Rt)-x7u#}Ynsu48?rmTPv7z$)?=ry||C^rl82y0CM;d>G}CYeT`tMsx!B#ez%A=EXG(%kBQ> z(>sA9ACsu`z5t2k`xg)|@}d7W3qe41z{e9AlrHNVu$!ewgrkNh8&sCAG9=wn*1gEg z75w>-$0Knou^P-t=p{}DNq*ltP=@`Z@I&6m*+fKcZ`_x-ctX5`zGFo`tOR4($;%s5 zuzYkS(e|#-blHcnTI}z9tzbO@3!vy&v@ASpr}>&f9R_v0djnYO72a8 z6EB8}?GY`-HG)z3YE9ajk+-#x6%xocKe_IwRt2!D`$!@1<+9BX~hvXJtV#?Z=R4a&lc3B9>{f4lB<8^rkb8p`}N zcYYPYGh1>}H^n$S+pj-^d~7dfLU?5NgN5;b?+gXmMS9qik zel{b&ULGg&?h7$i!BBaF?0*G1x+GK*ULO&75{3Dk;%7xg^o|e~0bJBjb4RbrrLqt( ztL1AQQ#0BdwIh{GKCj`kDWJa%*zYIBSKE15NgB?VuIe(IidvSD%XUYbU#gs-ukwyi zV_V@YJrn;ALR#AtDP{#;=DLp?gO9wgYU4_}Upe#!J_vS@XX=`PtL@1|9;XyYG7c_j zv`wK*nKk2{@Ir@(5zCT9yO(J*vYwK^e$U93iRzi7EYjf)R*md`LCVdE5X7$P<92%( z(@A>t9zWg+VceFiqBFRC_36~Y5cbk-m7aD1Q-RRkJ*v`$P!+B4&due0!;$E{wPBgi zwEb-4qFm|)@4H*jN_ke1vD}f*&EcP#vWVCF{wib)fNY!p%xQ7A9NHI=#u1eIFr;v~ z4SupV++&j*E|DBHN?3OeD@U6s^B`mBUdvpl9i&=L75V1S!)cp zmOH{cfpzs6WxxwQ-WFbe?>a2i&L1q*8lT~unL*E5yf@7lB*bs$WS8#CK8+L?m1JJM+Ny)z>U#@O%%Xsi8p)aT2hk$wCM=Qh$fiu z_hd0E=nXNfJo7kAt*g{6ja{99Uhar7L&=tBb)A%adMd*|c#+tZzL2+AimJ{}^E>au zmf#tvG4uHuMha&Nzkh#gemFx5b7cb3Fm~{=qk{6{jX!XL3Fr7NTZDWMtbCcsSPk~P zajtA*{pfuah$6Sk-#F%AlxD52C;kzZ?DW|JZxasHVCuTr{YNhNc3d zR0|5C6b0!WX(Aw?fK(Br_ui5q3Q>?Eyn>Vv=_n=i4iOMh>Ai#ydT0qHw2%gA%DUGR zILuGaJhK77!*A`KVpBy!_91sH{AZh_k+Ih8$f1Hy@Xnk!qv^ge4*AJcPKihZ6gD>M z)&}OesHJw6|I%4$a6HsU9{c5mXSb*an8D!ovO|d5zSn}I|Mh0s^sv#F%y$b3tJ}4q z=Cr-$`bVFOEhL4<3qhZ&-U{;gtRi+gxQ@Yg``}f9XKsKmV^3PZlUwqa#=Y|pPn%5P zr+iOm|9#aw<1!Y%m*-$w+{mlBY8K68Bb`>xh(;m`D9O7YF-JQaG~1gBgHk)EiPn`XO=IfndY3=*hTOjcq2-+qPluc>kd1HJ z+FR=6AY9o_F;!1mItdYkz^4FKwA<=E*=j*9CZXJefu6_Ty?!W-vVNUoX$Z~rI2(6Pa<}^4o-nB5 zt#-Er@6El7@vf)Dj}Ay)HyYbyl&WF8=CP%rVSvS5-W>8{E)3de@KX$?0}AXa)r_Z2 z_b3SAVAk|8r|~QxDIM^<0nLleh7K^g0z0Cn1T#BWO!<8*ttYv`5-OcIm$Q6eKOdJa zur{U)UF{ki+mdya)950?wX^LWZIJSiqN!*K+33LW$VM5qF=Zq(g=l0^3aQ9&o<`j$ zYZo@3-L&Iaa+_fBxH7d`nfpm|e{738@L2KaW$+MLb|v`H>?hboIPRj^nVyD(3b*)d zf1gvJ04b$v5a>f;5Kd^uP-gRp+jrK>j!^g%bxn1DpK)*1=kbG${uRZ>8?8~ypCs+g zi~1k!4?UpHG?VrADZi(!B6)Aa zlT)Be^7WT*A7BN98<5C)&go}ga2)JZt;f4I2`;J^p1!bVh6}iwWS~*12Lo|x^z=&5 z@vpOEe#U|yiIt&WVeVH=dzxoCxFOBDe4uusn&0IA?| zc~ADXmF9X(rw2E^LWAq;3OhRCT&Fb94l=FLml>q^Y@qx6=#g+RPVKyh4E6k27!=0db=&O?89j!=lBq zD-R!-A>UiUY+gvFw_V~08w_Ax4mRNDKL-c-+So(}aqRiim!G=OtO=2+oxyRM^b8X| zYpedbjO=P9_lp#Mds>38@Iy+zd9$`~Iz7cSvMDHDq?&n>{X39=H~wXm5+x^FwGJ-x zGxj#b=mQ+gqXUg#dPCdm-p_fZxz`@i%gUqQWulz2I)1+2Yds6YWuMleq|&e~R`}8a zlX%x=p4~Z=^8WjpB#*;D#acztwiy>_^{m%x=eX<5nv=m6tMNAHJ+|abl6a&;SkaIW zaZ4ro*WRZrBkyRer~Ou&ZLWEP)Eejy7s z7F<7|R01*W^fHpeQPkraC~85y{NG?_*DP(UM)5ZDS$h8HcqJa#Rkw4WllhLZ$70j6 zkB}rn!(I3H#6X8hLY9Bl#_0x|B7a+DiXR=2{?|C6$ZKl=kp8z5T=&rZd{r?0inHHSe+D?<(Yw{Y(K#dtN+aU zT$ygV_>O&bPFvkdOR$qcf2^Uk@dZ9Jl&G{B&u z?;!>jst55%vR|7(U5J6x~8Pt|c=TdsRv5TnfQ#Te64`vCN49#PX8c2|BE;<=AWyxI!m9qxVJ}RRa>FQFE<$% zH&wLcpz9S+M26vAjTW)A3SJiH+8QRX*041t(%Y# zVteb}^01V*p2)NI;8X{f^x9apo9^5qTFLH7ku~3QWadDWwlaFL?A=+o-B!^wLM( zn%yq88YrQR!hd!JB5Qpcf1Y=2ll|vXfa?fcuVPI=j+!=|6ty#aOQ*)nq>b) zuFJ*gLIQWVp|alox-Z*nR4)q;y5TPvVU7;5@5M`GLLe4;ABR!YS_EAHv7!obam^P} zGEk1ny84DN$c$9YAW4^r0szH(o4^xp*Oy<%o_X)vF9B=LzGJI-C zNW2`v!B>xclKA?Z9BBC=m$~=qk`IOg0!2sutAh8To_<2JP4)^9ytq})C!L=4(g~!)> z!s3Azz%f~9X%XKHkpHmW^uV~*q%9q>KAnfRuM-C5@5ljeAqZ6UupY(Eu50=V;2gf! zS)}u0pnt>?Tky))2{xUBkk;Bi0LO?8pkYQ%k(yg$i* zRv#QcMg9a#3rD>Bk91(!ywJ5lcOQPz)su_IZtDF<83=g&|I5Dt%k;lw5l`rWC&bbJ zj{j3W?|ZtFsa5y=U2hE>bq4IFZq1x1i-9WlO?oW7bYJ=KH?#f-I002bD!M?-v|lg( zfseF~*X$`!RsaZgAkd5}uH;LlveicjEK&=0w9a?>W$4BE6C&EbCzEG3x5*VV?mXm$U)jw0jwZN`Sb$N(nw3R~kCs*BpFvn^eilFR7C0*D-Hl>bj;3 zJBrD$0X=G_P9~CPi$->l{IFuT%pkvh5O$`dsH@d+f|`$3_C5|L4?1cxl|83!Jd1S_ znwN-YP8;g%Vp1J_-Ey$o$b6i+@e7m&&@%(R(l0Fiiqh`zr@M-Ktp{t5bbX4&)fpuvI2dp5^&9;C)T?0NjgCFv(XZ5#vcJ>4}rdd-u4 zLzjRmh`$IVg=@xE7`kSemo-^|;_^P4_0e4Q$)Z^mY%jp!O#QKvj!X0LENPXl*mqo$ z`UsuwociYV;76Fb$PFyxaoFu~eNaD>qx-*`G+Z?Q6}3S50sHh4v84D|F-x!^b;;gu zA}gRAvL0+7W^aed2>yq3E_~?(YdRTV6)PUR=t!Hg>lcj%+5VniO`!AG_JAloz_&Sl z3*;1aeH~Qwti+^ea4<0yiDZR)+V%3Y12y3t-So8+=8!4EpV^A5{Ns~0HQ3iz_=Qr- zXLf5tuG+g~)$AR+)bZVhlZ9shVBe#l#9A46I%#BY?L2=}Ilo#IF4dx^0Sl8d_e2KO-ty6?R7sbn_3x72VZPR+@0!J zJ^Z|-tKnV$QLj+^>VHEpjN zwF4Zuec+gZX*RvDF;$bSVR9x_25!)}wBR-K`FY(r>-z-H9D%`7Qr)CGcL_JIbg&0^ zAljvhrMlGbo@?rK15gx%bxy59DwAhtUt$GtW4le9r6RS>xQ?Q(biNe(w5wQC%ySb|u)E_^mE5mUlb59Xn?`G!>h?0V1t;n5r?+U%G-UT&9q zT0kV}vwiAxFrJrGWOMX4H!JSmsa#@q*>aI*3wPA15&(FiEbq0UJW>l_?lvBDtrOQS z1kncl+Qr*!&PH-KIA5i$zhzyR^v>ST_a6{aA#FI0satn_6@S#1l3b%_ zPmP_yO%m=R%#<%VDsSx@@9*w#U$VOe1Z{y$6iTjZT1aL$y zbqo$Z(+8^^thrVKLmBv3KNLHok&QZTB|f9Sr`X4M{_V9?-7Oi83%}S(E9x+s>wAW( z$NLf4WB9j(q?*kU5h@{PH`CNxt8eXcjuP+`OnS#hnW|lS#S!7pABt9p<5e`BIx^^t zva$fcg(v|qTGM}`#t!Yyw~w=coxJ)O=1IS zhdkiXcz_$Ax+g`2dbm3hyEhLTYHXb{VtDu_dn#SJJH-a+!hKkkgC7uCAvs;8 zO~i|(r%X4yZhw6_%L;>5y9W*bdA+O|0CBPzIMk^?EmT9RJaZ=u*4G-XwB+A3#6gb@ z9ADA1i&{-kv~XXTp;!AnD;zlHk(AM}Ighg(4^EsDTl_OIoksTs4C>z5_-2cPKUGJs zTH4|j_GGOd5=ztIasOQ6SgGcjl=6;wQL4`)UsAVWj6y73xqFG@Jo*41$mW?Ia!m#) z{4`D-UyJHEN3@jN+qI5{@^F5LU~G(S$a4LGweh3g#=;ZJkg~WB6Q9=xD^`4E;vvsB z?yo>ml-2tPIjA8{)Q0xUa?ZVp7xRnnW{5js2zK$NUr&;JJeMy&-TSv+uBwa&?`(I8 zd2*HNtB(*SDg~Rq*=g@rVzorMl^}C$NNvSjYycMz&lAa7;~d+gvLp5{Oy!O@?NBR5@D?Zja!-BgvKV;vOqzL}3vfjC3s#|q*S?ls!l~z|FR24I_Gasv zEAeI{Q*6{2WtCgHd*P|9v7kQ!H)gXM(<;?y9>f0H|Mj=%^ESt? z_K0d6rrh+mgx6t0W^p%LeVk;jH{Mfr6Biiq#bvUpg&WP?Rovy9-?R}U&JQ|OyZb#S zylvepM=5i7q%Zz%;+@4YM6%Iy0FFbDt^6nU)xx1xV&Ejr)5_}nsA|oAj%~E1!NV&z zzF&>h0&|5;N^zCq%a)eRQ7lLaH#Y|`gF@6Zg_-#L}j7qV*(4trqD z@}u5U9=I~9dsb)ctuM9q#aeh7S;|mI(BPlaHv*j~Ub&F~KL5v4eHkYBhmELw!ntGz z9R1E@JVR$0#Y#oJ$60o2UZZovEXnpb!I}>@Q030zc;#@rtT#oZtw<9oW=oj7TGk%+!<7J_)Too= zx>4YHcsS`4TciddD$m%^I$nOw@1Mdllr4_7@JT1>of@~Yf}CP`R~XHVWZTiQGeg_F zA5zSHp^$AA4cRgKexb-PDA#}MGn}=WDUZ7NR6Eg+x2|`cpV`w}k@KC2W9?UxvrATk z(t7&n2L3H%p^{aS@ABg{UEllUHBGu1)3;@t>F6z`q<^BiN$oiSln;`VN?^Ir7gt27 zi|hHXK1GWfz}1nv4$)d&qRAn_*{Pt+2=x411ZzV0wHJJ zdrPI?XCf{xpeqMG_Vgw6LjLQIp**maW3Ka_-pO6q6y$lnb_L$QYLvDeHpj$)wyp9iUtDddaQQx`aaeuTyCEwva=UMIQvOLUp15lp;|+c zT;M+JhLa5?9pJ8*rNx-j4tz^s8|3&_ayKz%%u@u8m!V)=iG2oVD3NjL`i%j;w=A_- zrm-|J=n!BXIHL;Bp|CS2J~>7bRhhUv|4Ne+cfV#3z@c3ReXwSp{k=y&mA z8jW+q8r!C5?T$$osr( zzs9)|@LmHl^wz$m%qXNBUO}pj1@ng>ZJaKyf2h&R2^LyauVoKBSA59B&b?s~NxQev zxiS1bFyberx`$P{Y6C*TJ*jHWZW!>sX;JNNZOvUFHkCqq8CZ8uuH{!~ZcOfgrGv17 zE2c_5-U+h|H3*`2~t&Q95k8XyB>P@nKmi(?LLAzT)Iw{|c>&S&dH z@$*fP%rp8jynq5g;_suXVw`r6txgWe%s2cfi*~W>Ep}m{FBJq8w!cI&}^Ebi7FT9rz*pxvi5p}~jsU(c6}j)1)of#DyZ;V_Jhlh4!}Q;p}pPw|VD`JG-Zv4;`J-$SY;3 z$GklOhQIQTwDEH=T7kqGtYE{*0C9D7xxZnuz@PZUmk4NgsxVv%Pl(826V(5b%YLJt z#6W&?sb2>yL$&Q2)<|+#t}ST3{&OyX?xA@UDnr3OanO~5LM2=)jq1Ai&d9^jmf{`&m7EYelw^=y`v^C+m-!nSf|B{+%Y*?Gh}otN8;E z^`4S@c94*%BzS=5pNvPCR{jcc(MVTwY3G`O7*j_n5%tLn+LV-r6lz?)^(<%qt*)nv z!cjn=!k@*B6a5lVgHbV^U(25>8MnpB1$TG~PRyoF z5fi+$3*J#;(0#X3@e7~Fvg7qarxdEBJU>9hQ18@NJ2q;b09tbkf0OpSYY&RAY5Th6 zW_=wLDMU7!^-R?lkjy8ES485ME|d=jgk&Gc4Fu;iicHxF66hI|d+)EZSL16^-uf;{ z+*b;umOhOAR44A4R|1e-1-G_x?f2w0ExdA!u>Qi}JTXZVv$f z$aa6=xAx(dCo7N4g|j-VN|%moeDAJo3}A+D<@81qww0$5vD6HyD`o6w3JX0OAB&!u z4fkNJUN*VPEfk3=A|}>P`e1@n%mHRW2u};3#`AcZBr$MTvhtqR(bl};)oZWMA1wS_ zek!2yodH=A6F4a?+N}}88oyxxjm*`>KIKvq^I&-PY2oVRyLg*5nvR6!$0a+%EPTk* zAA=m<(4^U&_8^23pU4%=OskB}}wBrNCM@a)3OOkE~>u*&Uy#cF)1D`qdS**`O{D#+}*d@<8eWm^8 zKtO+(1n~j_JZ-@o&mF)NisP?{dJS&PJWhXXZ!IVwU9-pAlWD;ZlRUa`NDGvN$&Bm& z_5sd(iDvkjYXePMC7J37tx*D|_IyIWA=J?Nx^ z^f6}bo42kml?ib%w}1W&)iGeZw&Lx`CsDr{<2vTaA))fOQumP+t0SyotFrXA=(fUj zu2Y@N;nt6@Tq7fd!O!PPSvfRGQ&P}6Y0jpSEf%SBywhWir1pho_bD&2_#5~SHz!); zzgmXLwmHN@@0anQMcVS#*E)}vnoEf$^(z&rlO)$dDHUw%w_#*EFx=}nnY2j4{b|;^c z!J$+7QC>2?&iGn2A3T=40R4ViU9DrW?@#|q_*YZB(&`y2{|%!+v&%1HX6@*C11^zQ ze%4O~RKAd_T^gWY;Ur*sZZ5GV?Y-2ueQ^<9M(`)rdj$Y;@wUy=spr1dZhoU*_kwOF zCG)HGba!9L4J2>BmQY4Q+}8Ke$49AAf^J#}b{pB?-wUdwtBNpZxxJ%;CfTIzWu?US z_JO+-qP_lmt18T@`QfT4-|Mf<78%%IG`ihWezHa%>_-z=47{^gjdFm9VO@qsT4dRi zk8F`Of8As*l6=g-O*`_a6(9*6 zm}2n$ul+4|e-v@8qq^!nxa|u_a~7@MIqviDz88({znofBIk(Y_3nPnuKN+83BIjxQ zQB6^+=~KE+Em(&!wa1a~J%f3FSlDKO&a1oup+-SaCP2&>8Vr zSu(KltviJaV4gFfi5!ctAYY{vkLx{l3uz^braQas*`z?>@+cKo$KG@XL6m!9KIUw? z)xO-HZF3ZKe1dUF?pfidaux<{s9CNWRe$4w&*}3$DY^ZH#+Vtkvgsr8TO;yt>66yj zD78VK@%?YM>n%H}d&qX0{nl#Q+JeFZVoiDL8IrdjgY>;YDI-${!P*`f-bc%7#41we#tuL*u$`r%cKBumYN5hQG73Xw1m3h#5vkq4hj!Cmk`eD;U|f_oo;0JHH1fTmR(PuS%A3{IG7GZwDO>Or(OfPo_Mpz`? zK(!UYiTuA`zpwVl@mc@?B>|ROk{9c1P|9u=Vh8J~v%4UjDyY74UE|8pb0Nq|0r&nG zZF?o&oW%J$FP87<*Q zPUouFR8=0-qwMt+Wy+L#k34Bb7Wt-y2fF~QHhKAn`?amCmk1$AqfbjeC!0*TrbSR7 z9rc!@-O34N()KwK1C+aOBg*m|Bkisp987xKVSE*@6wS>up`w=5=8ADbSGNlvX_TSS z{vyYv(+GXcA$h}O@^XB&dzB&!J*FKeWkWs0W-?jRr6?MkH36b8mO}I4l7@ zx*hMtV0JaOttJ}NK#D5LcHl$xOMAg5(Zx3oOwkW6R)dHv+J-dxRIn*IH4-%3hH){V)ri16%Bgh{DFW1%spOi}Iy1Xz9aF!-JOTSPA_ z2}%8(KyE7tNG)07j|ryNPK#lf*y3dd)tsdRf{c?eaKRR;B)4v2?R%H5$IsYldqf(C zW#>a=j=xrdxglkn3rOhoLxgECJtI?fGAqocSqAO2?FG%>Z#Yd=)5|oC$QL;bt5!{k z1#cO^TyhCbQq9_HTV1#>F;qmfq=Djnp0oVyj;q5L7o+I8N{bD}b9YyWHoHYRL(Kf& z<3s_H8EM7;dDv@=8xqiM?Y#-+;#ewoujzv^wRth$8P~Bnev6ggCf$hfSfR>#|D>=4 zK16Per=>7VC>~>j0r8_BmuEhL|261iq<+P>`lOg`%t);F-bp^e&+qv7Z#zRzL2Vhg zi;ql5)8fOb39>ws%|CDnO6SL5(yzll&ZW!kKO}So)Asg#6&oPzHzw3R$w>qBV!#^= z9(-pg{2NU*-w6uY^UYZr;_p>b)-!}`^=)WEM?W{8geHDZg4j=ed;glz;t-Z&yDo{3 zSX*H-9jDNB0O?dGAQEx=DR*o*(p$7^^f~2?Zy z_?g&=-+czhlP$xuhLdsp%rSVml%a+o*Op4t1tRZ+;Z>i|fFB>S8V+NfWUajYFF3BxE* z>dS`_BF44bsYT4Yw)9p8Ko6mNvjbD7X8A&pN~Tk!v1-g+Td&Fy$$v7Bn{x;170x42 zq}8(CZ3W}n7)WLxNj^;+%>k0s0`#_g=YKK#&itTD>Zo=dyP;eg+S1zUWcb>_;a6_n zrVuLY;3?0liV*{xw?Q<%G)|H#noz)}eL1sXhi`CmEb%6KD=!0RsQGnqX z2wrpXw0ToRCu&`_6_=~tR1a&qm75)KtMnBhAUf`ffI0-jbkRsP1Hk&d#+JMW2+ zzBwP%RiLx`obBOr4$j&Ilygdw_hWxM%Zja`3_@ttaMSPbvrxw6qlA&$&+Yt3;@C zoic#wOYB(j@jesE7i1+!;p!X8H<}N6c}Y9vklQiJRPxAI6&ox5%R~}-G>q>iY+QkR zA=iKJuvn+dhI94f-%HmJ5NQiIQ}*!Z{QloWiNj;*hzrZ9^AtU!KAR9vOqAOcm{#`i z1w3YeBae1L(3>Cs-G&)4dq7)>xFd)5LcE63mEcUR*9b)0(8UH3pGXofy@qh(v~}1m z^G6CKr^8v;(b0%2|fwmWO3jrqlV-ueLZ*oy`T zX7Bi>jfu;!u2G9w1bbM=M2AOYF}#V-Y)5@@X{_>INrMXhFM3hnm|mLSykq2%^FEH0 z5>2@}wJdL*?CUBPrgb`8f6nL%$kxkuwv8U>S0pr6ZrAyWUNt8t=M!=$;G$J?$jD2_ zkT94Zzft%D3*BSgRJlifm00Npa(lafw6%n;(>#ii`BSo#{kfDyIXa_E$&Xlx&KyK4 z?)<5~T*RY3n>1^rZx@oG*mPViHczcb`hjIhQN&PyF88b5iWF#rMAYx$&ugWo8K55` zA6wF^zm#WB6{%K zE_3r+Vi6R~brI}_tj@vpKlL#yYS+-G0|Xhxh%fbpK~5h)=a+8)$ykpdOf(q+-HNgK z^7vM8>krYKyB^X>%H7yC6xt)v2%mU-I4(PEJKrZlIzB_cC&{h=+3g9u2}|*Ne_v5+ z60{cCH4!C18jC#G5d2fI;{)#skY#%phE!s2_AyyI>_Qn-Tj9VGBfJIuI#o6)k16_rU=E!h@zHx%O>2+}Aq4bp`+1ay)nd_wOQ99%S9j z8%I<%;2fJ@58NjMoB-!g%hj;s4iqjnj7Wa-%(5U}OZhH)Snm0V7Q@ZHnXR+3O@mgZTK^~IySwLrE&f1w>iN4UjL(?G4pQ_afuh*QO!I2~w{ zOEBrmgI*g>FmI;8mBRY2?0sq3pH8*GAxo`COV?3Fdb}FP>zyg>;o5H!8_??nSI&ZV z^jHr9vu$Kl~vJXlWCzsRL~tgB&l5Nk>KQ2)253B7ay|opHY1Yx2gq2)td; z)Rwpu^LyyLXJ+K#qnSU}>X^kC*z`eIierJMv^V3|ka*$ShwY2@2>ja5qXA$4v|#kJ zug9ykOWZWflw!22Gr9A1T2`W8F`hn-g!a& z+!vcF0JzY*>fT z8cDa$moQr06IYsYjDEbTS-y<*{RgxWNQJ zoh2iqpvA!Jcf@1ZUQKLjACIkN%6PZEbTk_4aooVMksIr*c(+HVUYTX=!`+O7*d5=O z6*P^FiidD6%^jV}nR(ph+!((T;!*c?(O~d=uK#RcU7_8r-iH1Ph5e;iZNX<^fpu=2 z%&+$y`J0q8D*qOQYtv=cylr-#7Lb;?l{o$-*2?u8F^60W)=7<^D68HAveoH-atXF?#{DNC82~4 zk%dT8TLw(OXcEpjIY21W18;M`vF(m zcz)#oquKEnNGD^|HJ0(C5sDmPeFvC)t+yO7{iIxqWXRiy2uGNh+>^>)E%b3gpdF-z zjO<8O<2ja)V1Y<)$$wgZu%d7{Rf`|p3I_WOg`xXKiFWFEwoqI_ufVbO zu%1+4ksu{*sWb*amaojQf~34&+%Idtqi{IhsdPC?HCtr~M(aDidRAU5j^}>p-ueq< zk@j&uOP1?c>BIHte{)BTl;4o4y1fRD>5_KF~=e28DRD9z?DIFxJcgS$89HqaMMQ^EQ&vnEi%g==RGpPbT;q!>NR) zbn~WsN>$Ft)#t*6$|P9a7yPk<9j;$&M>rRXUyLl%)iEu^oXVl;v8mmC=fx-`Tn9ah zX?%;;<h&Vc@cIS`-F&w~?-|qB zp^54f)ekU@vSigYb>92L07E+c$f`>HYlTlWOkFXrM;4Zx@gJ6N)6T3zRqwmrH>{ej z)+bQ8jL;P!_rqus)&~U;W6TnKHo-sUlUi|2*L>@dO~8`tpzk+v$Nl&MjHN27leRgs z)R}>E&xb68e0;SzbRIS3S<4eFk|HS&r4qz;XP1-PN$=$-fX7OD-|IM;S=swQ@yH-B zvNKCQWt9JD(XtHEwT8kHWkeGT`1s>8JlB=n`_fAQdU?$Z{Wf7xq!Z=8RNlH-?x8&g z1zLtww`KLGD z#OL%qWU_^=aT+=45#7^d*?-toIv`DL4^QRxk{>@!FtxSjRT1UR{F%48ykfT{@41r( z+x~4o-m!32JmB1ea>Nr~y(R5I^qTC>ap&8aUl3Lg&O}ypf{E{MJ^@#L5S&NWw2emHh+SeNy{ND?~Fu8HUBeK8%Gv z`?@cG9>1_kFYM7RQtZ)CVPbmtJ$xWeWc-~*p6>1Y94^O0_|BV%tJ(cOS%P1|Cx?7` zrGyHXal1U`XF2?*PN6Z8xv)NSfpe%~+SGXd^|`h-|BvUhp9gVy8XLP->A95&3I}{F zVU8IpF3X?mO&OgovM~!x+5IP4S@FWP58#ZR+bc>(FO}L2T@ab9r-m8zYx{rIqyho; zRMGsA`+R`j%HIu>$eBZ`-4>i}@Myl?DXKNOm}t^z5M+6F7Vs3Xr1yXVP4CTY zLeVRiadK_ZrFvwe`y5ZFMivP$6Oew9e>w@%3J}+D(49OFS*VqbnYvw~ zod1?kw_!q3Zo1ZN(y42;#zJ@GsTpe50<{&22DY8*Ir#4T@mj977zV~h9X)=qlWxC4 zd^+=Q?$p-lW=XQf>%QlC+{CT7%k zyrgDyE1xJ?dsh$PD-W@F*WS%@ClWADcOe~Tr3Hu(PWgM6o*i;Nmp*$Cva!Y z%lsnSqoP7m{@8(7>o#pb+JUVEC6LCk{fIuzf!>S5Wmt9g@;fe$(a=u~?Nu#Qf8!07 zu8k|lOX$>d@f@}19I7X!7m!!R(hWn1E>kce3i0ic9;?7jqFR72p z(x~)}1|q-Z_4;Zd00sM62w-!fbA1f<6A1-uD7(hcN7(ypY-~%W=)>pZ&xeGy2Ym}k zTD1y7=LXk~0ZQ39{7V;hfe)jR*2ccl_3eu*5J?Ldpps^3L~Ia!K+iY&)^6hVQGj#Z zgZ=vXZsppV0?; zNj)nojy-jkUIv`EV>$MAaV#Np)|IJ4nX`~h=S`Zmy6Pa1b9%TAt*GKt;%_QNE3n3$ z#RL)d`{0`Mtc_WVwd!XBj2a>RI24PcFuRSxli+3Y|Q&GA;I847jdvz((+sDo*Hu=^@~*_*QW#n+47 z-gH{uN@w6mt8QxeYidfg`6w&+!z_YoxuKr*9z3@i;`}_{H5j#ipjy0qaPP6dNbO#{rn>dFmnFRq-R<1DYoAVe$m&la zHx4()w#*nBkn2h%q@S!dMZeMl39Xbn{<$L}ot`&|`*aY8D)~5b2yLMUSzGkEKJv3( zydEh;PRrG*id)|RW9%zP#_3KGc=kizNBMV=o%Epm8unHA_n2=7Zu(Amozl_h-VhP3qYodoM3>Cd+M>>M$-P z1C;Aqf##Zqj0!(FTgUILbfynE5xp!NM;!Muz-@{8{(+LARvduADSAXwv|>&E6XjCV zo|m*n=bwgojC~n!MV(pWi~q7BbNX`c?5-)mUm-n(s|m=Dh3DBiJv)aLHRogIWIHRa z>TO9+$C3Z+DK@&uh4B1WnqBK<{2H4$YgN-+UCKyp=ift128(9B{)~u6ymxEr3L(!) zqC(44A1E%hWhC!1_wXGqUado_;jERaDj!lA%w`S90pn_SxPqD97W7`1?@kLlVhxaH zl1wba#ZL9vmcS7KO0)9jTPuMqfd@a(&}6O)Wmb|5&0a59!t>o;R`SwSs(mk6Wm5Ar zcFM6x%UX#(Xeb#@$cxd}ilR0e(PXFu&#!$ay${|S;R-6n*kSQL%* znXj+h5*}U&SSlw>+;%E$K~|sw(znE4zQ%xFxOI3-*4HldlvjSaqhe$`#T>uz^JwC& zCpq=qv(w8F2 zyCMZZ6zbER_fHvOm_Gqb>?mKKJcPjtc|#Na!PK-?j`a;f#pqs}t2^(6V?B zVux&lam++ZHq!zRNoMu9u*0WRaxJ^c5#}18t)^_WKQPql>zM~|!_U^ri)@hACoTB_ z0=LHA4uEvxTbeIY!w8L^H;;AH1UPy*_?oHaex)`&ji=Yy-gjfz-S9@a!Ak-@}MIcjbFjqqKBfWYm zNyDjDOIZ|MJ^rE@ZF*mS5i%A7j{hQf0T84plmb5F_6emB_M1A}hx^bC_uD(fZsuQD z{yCl?tMH5k-k5G)jMKtudUOK1i33US`9N`?_~n|czli|^GGSR)(?knQ>(Z8vR5_tK zXDzcZz%nhk^Vifah&L}z;Q&X(xgj0|qVGQ`;PKl0b5kqs3hV9s5t9 zTgr(#B&eTWQgHC@5NRnp>U+A)$8PUj{hV?mG$06mk}Gh63Z9GK2?TC*+!`-B+7|pt z)TOWiXgD5lee%Wq`dXZV-*LDs#~CdHsQvq1H;_u!Nn5S|Ij*&x)wXN{|M$=Tqb>$` z=h6Q@FXBICMgLB`2qZH8JKq1dojLG^%9;N=g*5-G^al9E{|CMzyoOerA{HeL!Y;1w zHqMrl0fz6BX(-7C3-&x&#InyPY~0z68$c}@Q#b*TfnQih)5eauro#z8q32Gf0DG7b zASN8cLiaDcOVMhLpqSOP69H^N{InfuG`avq^DpBc6Ezt<`Y(aOB~X8}079 z+l_0bjf3Bx7j0h-2;C>@b;j|s3EU^l^+b7=%XBG2WTySm5ZUY{#EC1DqvKLzY^gO5Q#;KICmz~JBQYAln{WWPP-+? z{}ZivC}ydjzTs|wQbY^TN%w8dcaoYx=kpEEXqWHq?k;9sdXjQ3=2cIQQ`VK|UPF23 zK82@?jouC=w=51BL7tVIJE=s>$BZ&86(IWV?R7k?`vYtk%cR1PAiOlhT zTg%?w7`P`H;?pyz@TlS9-u}mh=HHDHPG%(-Q%&y#7af*A>;&)~zF=azsRanj)Zr(h*QV1Of;| zlwJ}*0t7_qMNTM&7V1F*0hNQGKEziYg14+|fz>W1bT}1zfqHBBr7V1%(LU<;{rjEWZW2?3^O?Se(a#mVyQAZ= z4hDTN^jBm@94w~n&+GCDk}>ksDsY_3VUX-DpvC`a&*F1{!pjo4vP9 z+Vw%aIo!P9omPEDl7I_1oM3m`U)b8{yi1xX8NEBNOY=`j#A6Nv8UM*X?j zw^o&sLmWnU+rEmm>~$ulj%@K7h*iSl)*NR;181EO-Cc<lB4$svO z-;A{bBMJ_B4R%7O!xXyjhl~c&GUED?L)%|<8| zt4m>w5Y?a%#ZAP!bc)Ns=-QXajc=5MKL$qkmt*>Z48*(QsZ7zK!SAoh-*=O+rPbg% zmySRwg$eK&e_zC6Xmg0@-QajTXYZW^7SkTejlQDrt z55Mzuax<(Ko_23mF9FUO0-7;<3N<>sx?;fLH!*g#`T0&X`}ZYJVRv_yHL zyc=`9WG~29rldlg{e|j?4W0Ha0Won?lhaCnMY67|1ov?<{h)rv-uBHo3vwpvMXhT!vl)!sGBL+6JGxLIm8KY6WB5Q8uHE2#N ziclWm8M1c0SWJt>L0NSezVr5TE=NL;q)e-aDHAf3pTMO1Zq%SOZwrm1~?c09uqw3I% zuop2}n~_<|O+@88EF*YhJI3!aKpr#TQU}}?f5>t>3jF2&{A%#3F??*Xepo7GW)k?PYC zGb9=rTh@51*(lrm-1Rm7GhEs{w+x{@>Q&Be_P2Nj#^^f(sNnj?;HCupWrC8t>g)0S z1I@2R4-Pg~G}=EUSihM?AN2doATf_zO?(i$lSRmUP~n-k@muzt-xjJ+Qd6IP? z?e$;3C2%S<;_cs5ir79?_9Kg!VjS>;+R+kR#kzy$(2dW0AN8vi zRwW407)*wWTuTcd=H(+YVdY-5jhPTMv_8lo1-%Br^K|PJ zpKD$;hc@|DBSsKtuApfAYn0nq#3DV?Zvd+KqMjrOVl)4AjxK|wp{qnd`I-ly)B}p$z+YrRODc#pP5E=ZLQ=oJRWqp;jzP=EbiRU*SPgO)0~C{xPmc`3Eps1he+{X_r_^?su(KJXJ~!V~$Kv z0W;RngMnM++u-{G^39qJ%_O;D@|!k=#Kmo~4>CcdqczXo}5lp$Z?T z6oJ`{CcvwdoVs>4&sXk^Cr)PHBB_RriQ%pe4i_iHxG$OKRz3Cp%e96drf2qw_Yz!zl;e(h zpX-X|U+NKnmHJV6<>}^!gQ{Q%zJG4C$DfyMDy=GD)k8$oU*z;kz@2yBO+OFwR8qBP z)m{s#oKx$~${|=Y3dPmXIvLfG(qgZ!gC2zfPTU?X{QiC(;KR*3OGjp~RV^H|&qfy4 z7Lo!LHA!qSZL^AJN2ZX+Kw6@JUl+Ad^{Q^EdZcfuW@3C}Rg4gz4Hans68RRm3r9K) zxg&;0d`KDHvXN!d9D}JS%!eGanC=J1OUm}gYGuAW1&Abvt5bNX|TW{pm)hqQg1=wPmf=BO}nZ%Pbz+1-t+b;eBQ2iWBYiF|(T78D#z2g!VHEG;!* z*4`sj5dU>iiSR^HH_JC`CB%Ns0{*=Jrq4RU{#5+v9-`8gIR6?MZ3ACP4KiEW%-}0N z9xl!M(WKH(&DVJyREQrPDs%S^xilSgROy!$?I+ZBjscEqpC>o$SNNx*UE{jXNSoLb z+n+q4c}ApDJMHCFeep&WxI5jld)ettzuFM0cNc(xlP4?itMlhlL&h>9dZmk?wS4>c zdMe(2M2u}p<#|)miw69McgE_tK|She%NZ%h?nGHsr;JQk>@*qXwq>wo3&1XM#KYDU z-I)QR{#cmK=7w?OZ8L@0?;#*iNv1RDL#33>3}mLO(Bh2%jvuB`PBAr`zizQOQX|Lt zTtpoM^8EA{$Bv+=?)|NyAeWhLCq~Lq)D?5l6OAR6_M?qC9(&eiSGbAe0$6NYzI7~q zch7luvb{xCxQ;|9mb0vHUAQ?qce7N$ql!P<(swDSwt~T3%1GR9kq6lpaui8Nm@@Qq z3Q4!fM$tNB7hoDzKA~A*(j!MR6%R&*25_E>SZFcX@5lCB-pUP%Cqd%^D4Zs)#ZmyP zERm+bR718OjUfRpgcllntDi!!d9Qdb0zS?L=8Wfb3wEcRxkA!J3%5FrcU1LTLu5DfM`RNC*h}Iu?@5>cHNfRo7Ak@{bC*O&bFL(F!^lVR`aWsK) z!0MRGPnQTef6g{A#@lsLe(qg7s9h8pXo*-fZ3G?9i^F#=;wFpcg| zm!Zeo=16^uC+`^%JkNC*t-$HdWGmy57_x{{!PrA&baqP;0yMT=CHC*j^gi(gI?@}GA4y6@ z*>^@36FEENNcP-67FS+vUr9}Rqu0u)Dz!?S*fDg`7`Rb;!UCjQC1TB`gu1n>Zm)cYEQYd4uN&>pfp7Tx_SIi1#n?~QM)3})& zdxyyk5>M}+n;q@A$+NQGDWerf9F85KTmg(FZk+P`_*MI^rW|(E6X+i=+QMEO(@_(4 z8^vuE>Z$eNIIk7};aoXnIYE}*Z(tFvz%{A6&4YYG$R8x^A0FBtsA;fd-40vxj`vd6 zXv+I;zd7z>rDqVdjJRs}GxP?5Tmhb~j!Q+B#I{fA_w8~#&IJ>5^j$`(z2@h7b5W~M zC=28)H;tYAmts=ql>RK&Km(rwDb>Uit4&m~w|nk?h3-Oq(sQ4Qxq{;DIDvpsbZp*d zfe}aNzA71r6AcT6N0Lfq6<^25d(BUIc35~USoQ0^ft=5iT>v1ox&$C>T?w`Mg+u-)KvF{mB>!oteq}jiVrV(|0_el$(2n0j zaBo)(fK-Y-w#Zw?^d zAZNRpKRFdyl{UWFt)dJk!Qt@3%Ojf*Qr*G9!EY@PuUyM2U&YI{|8)RaqH(k2Nto0E z5|X5kv;V~Qf#xkl-suK}B^7$xS-BE#JnDR{gcfR8c9;9r*@s0~22+=BW61~2BnHh^ z83sJp+?(Rm^zic9H(67m=wf7palby53VvILul2GM77nGsCwA}U(%}WQlP;N|Te@)g zh+IXiK}D!dwdcLpH+<}WPZ{;RfPlVBSNhWc|FufFm)9`feo5F@*R)QG8>d^R*)1ME z92tJx=-Qi8FHqRf0RF8AdVG9*UWH3{K^(svU+n4X>gt2L4N8gbc4pyFytf;_s;cU` zyyVueQH|R65=z(-a@Ji95dk3s4`gZXcCc`s904~!zYP~zS=qx{6+W6sXQn1PByP6( z-&}woEjq;7Z)bf*5diCBZ*!e(=4);J@zHE+xQH=|G?{?e?k*h7YqEZ}Va<2BAr%~| z@@r&|`X3H;j>{xp4_T8g$*F5sXp2)jBdi2Nwn1X80U + All available CSS variables + +#### Base colors + +These colors are used for special purposes like ring, scrollbar, ... + +| Token Name | Description | +| -------------- | ----------------------------------------------------------------------- | +| `--bui-black` | Pure black color. This one should be the same in light and dark themes. | +| `--bui-white` | Pure white color. This one should be the same in light and dark themes. | +| `--bui-gray-1` | You can use these mostly for backgrounds colors. | +| `--bui-gray-2` | You can use these mostly for backgrounds colors. | +| `--bui-gray-3` | You can use these mostly for backgrounds colors. | +| `--bui-gray-4` | You can use these mostly for backgrounds colors. | +| `--bui-gray-5` | You can use these mostly for backgrounds colors. | +| `--bui-gray-6` | You can use these mostly for backgrounds colors. | +| `--bui-gray-7` | You can use these mostly for backgrounds colors. | +| `--bui-gray-8` | You can use these mostly for backgrounds colors. | + +#### Core background colors + +These colors are used for the background of your application. We are mostly using for now a single elevated background for panels. `--bui-bg` should mostly use as the main background color of your app. + +| Token Name | Description | +| ------------------------- | ------------------------------------------------ | +| `--bui-bg` | The background color of your Backstage instance. | +| `--bui-bg-surface-1` | Use for any panels or elevated surfaces. | +| `--bui-bg-surface-2` | Use for any panels or elevated surfaces. | +| `--bui-bg-solid` | Used for solid background colors. | +| `--bui-bg-solid-hover` | Used for solid background colors when hovered. | +| `--bui-bg-solid-pressed` | Used for solid background colors when pressed. | +| `--bui-bg-solid-disabled` | Used for solid background colors when disabled. | +| `--bui-bg-tint` | Used for tint background colors. | +| `--bui-bg-tint-hover` | Used for tint background colors when hovered. | +| `--bui-bg-tint-focus` | Used for tint background colors when active. | +| `--bui-bg-tint-disabled` | Used for tint background colors when disabled. | +| `--bui-bg-danger` | Used to show errors information. | +| `--bui-bg-warning` | Used to show warnings information. | +| `--bui-bg-success` | Used to show success information. | + +#### Foreground colors + +Foreground colours are meant to work in pair with a background colours. Typeically this would work for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors are prefixed with `fg` to make it easier to identify. + +| Token Name | Description | +| ------------------------ | ----------------------------------------------------------------- | +| `--bui-fg-primary` | It should be used on top of main background surfaces. | +| `--bui-fg-secondary` | It should be used on top of main background surfaces. | +| `--bui-fg-link` | It should be used on top of main background surfaces. | +| `--bui-fg-link-hover` | It should be used on top of main background surfaces. | +| `--bui-fg-disabled` | It should be used on top of main background surfaces. | +| `--bui-fg-solid` | It should be used on top of solid background colors. | +| `--bui-fg-tint` | It should be used on top of tint background colors. | +| `--bui-fg-tint-disabled` | It should be used on top of tint background colors when disabled. | +| `--bui-fg-danger` | It should be used on top of danger background colors. | +| `--bui-fg-warning` | It should be used on top of warning background colors. | +| `--bui-fg-success` | It should be used on top of success background colors. | + +#### Border colors + +These border colors are mostly meant to be used as borders on top of any components with low contrast to help as a separator with the different background colors. + +| Token Name | Description | +| ----------------------- | --------------------------------------------------- | +| `--bui-border` | It should be used on top of `--bui-bg-surface-1`. | +| `--bui-border-hover` | Used when the component is interactive and hovered. | +| `--bui-border-pressed` | Used when the component is interactive and hovered. | +| `--bui-border-disabled` | Used when the component is disabled. | +| `--bui-border-danger` | It should be used on top of `--bui-bg-danger`. | +| `--bui-border-warning` | It should be used on top of `--bui-bg-warning`. | +| `--bui-border-success` | It should be used on top of `--bui-bg-success`. | + +#### Special colors + +These colors are used for special purposes like ring, scrollbar, ... + +| Token Name | Description | +| ----------------------- | --------------------------------- | +| `--bui-ring` | The color of the ring. | +| `--bui-scrollbar` | The color of the scrollbar. | +| `--bui-scrollbar-thumb` | The color of the scrollbar thumb. | + +#### Font families + +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. + +| Token Name | Description | +| -------------------- | ---------------------------------- | +| `--bui-font-regular` | The sans-serif font for the theme. | +| `--bui-font-mono` | The monospace font for the theme. | + +#### Font weights + +We have two font weights that we use across Backstage UI. Regular or Bold. + +| Token Name | Description | +| --------------------------- | -------------------------------------- | +| `--bui-font-weight-regular` | The regular font weight for the theme. | +| `--bui-font-weight-bold` | The bold font weight for the theme. | + +#### Spacing + +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 `--bui-space` and it will apply to all spacing values. + +`--bui-space` is not used directly in any components but serve as an easy way to calculate the other values. + +| Token Name | Description | +| ------------- | ----------------------------------------------------------------- | +| `--bui-space` | The base unit for the spacing system. Default value is `0.25rem.` | + +#### Radius + +We use a radius system to make sure that the components have a consistent look and feel. + +| Token Name | Description | +| ------------------- | --------------------------------------------------------- | +| `--bui-radius-1` | The radius of the component. Default value is `0.125rem`. | +| `--bui-radius-2` | The radius of the component. Default value is `0.25rem`. | +| `--bui-radius-3` | The radius of the component. Default value is `0.5rem`. | +| `--bui-radius-4` | The radius of the component. Default value is `0.75rem`. | +| `--bui-radius-5` | The radius of the component. Default value is `1rem`. | +| `--bui-radius-6` | The radius of the component. Default value is `1.25rem`. | +| `--bui-radius-full` | The radius of the component. Default value is `9999px`. | + + ### Component class names -### Custom font +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. + +![classname-structure](../../assets/user-interface/css-classname-structure.png) + +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. ## Create a theme for MUI (Legacy) diff --git a/microsite/src/theme/customTheme.scss b/microsite/src/theme/customTheme.scss index 707acb4073..823327b28f 100644 --- a/microsite/src/theme/customTheme.scss +++ b/microsite/src/theme/customTheme.scss @@ -171,6 +171,11 @@ html[data-theme='light'] { border-left: 3px solid rgb(255, 255, 255, 0.5); } +table { + width: 100%; + display: table; +} + /* #endregion */ /* For the docusaurus-pushfeedback plugin */ From 1dfaeeebdf23e744c4b494831102a04fc6c6eb31 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 12 Sep 2025 11:58:41 +0100 Subject: [PATCH 05/67] Update mkdocs.yml Signed-off-by: Charles de Dreuille --- mkdocs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mkdocs.yml b/mkdocs.yml index eea5fc9c40..45fdd2c9d6 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -28,7 +28,7 @@ nav: - Database: 'getting-started/config/database.md' - Authentication: 'getting-started/config/authentication.md' - Configuring App with plugins: 'getting-started/configure-app-with-plugins.md' - - Customize the look-and-feel of your App: 'getting-started/app-custom-theme.md' + - Customize the look-and-feel of your App: 'conf/user-interface/index.md' - Customizing your Homepage: 'getting-started/homepage.md' - Deployment: - Deploying Backstage: 'deployment/index.md' From f5f1cece1712ffdf84f477405415db36354ab6ba Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 11:37:57 +0100 Subject: [PATCH 06/67] Update docs/conf/user-interface/icons.md Co-authored-by: Patrik Oldsberg Signed-off-by: Charles de Dreuille --- docs/conf/user-interface/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/conf/user-interface/icons.md b/docs/conf/user-interface/icons.md index 44b8782430..26a6f11096 100644 --- a/docs/conf/user-interface/icons.md +++ b/docs/conf/user-interface/icons.md @@ -20,7 +20,7 @@ You can change the following [icons](https://github.com/backstage/backstage/blob ### Create React Component -In your front-end application, locate the `src` folder. We suggest creating the `assets/icons` directory and `CustomIcons.tsx` file. +In your front-end application, locate the `src` folder. We suggest creating the `assets/icons` directory and `customIcons.tsx` file. ```tsx title="customIcons.tsx" import { SvgIcon, SvgIconProps } from '@material-ui/core'; From 95c442a9bdc17e52f273eb6de03604abee6882dc Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 12:39:09 +0100 Subject: [PATCH 07/67] Docs fixes Signed-off-by: Charles de Dreuille --- docs/conf/user-interface/index.md | 2 +- microsite/docusaurus.config.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md index d4ecbc6940..aeae086b59 100644 --- a/docs/conf/user-interface/index.md +++ b/docs/conf/user-interface/index.md @@ -38,7 +38,7 @@ We recognize that maintaining two separate theming systems is not ideal. Because ## Creating custom themes -During the transition to Backstage UI, you will need to maintain themes in two places: some components and plugins still rely on MUI, while others use Backstage UI. At this time, there is no automated solution to generate MUI themes from your Backstage UI theme, so you will need to manage both separately until the migration is complete. +During the transition to Backstage UI, you will need to maintain themes in two places: some components and plugins still rely on MUI, while others use Backstage UI. We are working on a plugin that will make help you convert your existing MUI theme into a Backstage UI CSS file you can add to your application. We'll update this page when the plugin is available but for now you can follow progress on this PR [#31140](https://github.com/backstage/backstage/pull/31140). ```tsx title="packages/app/src/App.tsx" /* highlight-add-start */ diff --git a/microsite/docusaurus.config.ts b/microsite/docusaurus.config.ts index d7538cd12d..83f2f75689 100644 --- a/microsite/docusaurus.config.ts +++ b/microsite/docusaurus.config.ts @@ -269,6 +269,10 @@ const config: Config = { from: '/docs/plugins/url-reader/', to: '/docs/backend-system/core-services/url-reader', }, + { + from: '/docs/getting-started/app-custom-theme', + to: '/docs/conf/user-interface', + } ], }), [ From 8ed53eb466c328bb67f426e52f3a1452dd58d63d Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 16 Sep 2025 00:05:27 +0200 Subject: [PATCH 08/67] frontend-plugin-api: add coreExtensionData.title Signed-off-by: Patrik Oldsberg --- .changeset/nasty-moose-rescue.md | 5 +++++ .../building-plugins/04-built-in-data-refs.md | 8 ++++++++ packages/frontend-plugin-api/report.api.md | 1 + .../frontend-plugin-api/src/wiring/coreExtensionData.ts | 1 + plugins/catalog-react/report-alpha.api.md | 6 +++--- 5 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 .changeset/nasty-moose-rescue.md diff --git a/.changeset/nasty-moose-rescue.md b/.changeset/nasty-moose-rescue.md new file mode 100644 index 0000000000..ff8cf1b02c --- /dev/null +++ b/.changeset/nasty-moose-rescue.md @@ -0,0 +1,5 @@ +--- +'@backstage/frontend-plugin-api': patch +--- + +Added `coreExtensionData.title`, especially useful for creating extensible layout with tabbed pages, but availble for use for other cases too. diff --git a/docs/frontend-system/building-plugins/04-built-in-data-refs.md b/docs/frontend-system/building-plugins/04-built-in-data-refs.md index b69e4cb3f4..c01520d7bd 100644 --- a/docs/frontend-system/building-plugins/04-built-in-data-refs.md +++ b/docs/frontend-system/building-plugins/04-built-in-data-refs.md @@ -34,6 +34,14 @@ const examplePage = createExtension({ }); ``` +### `title` + +| id | type | +| :----------: | :------: | +| `core.title` | `string` | + +The `title` data reference can be used for defining the extension input/output of string titles. + ### `routePath` | id | type | diff --git a/packages/frontend-plugin-api/report.api.md b/packages/frontend-plugin-api/report.api.md index f9e2336408..52a50659b6 100644 --- a/packages/frontend-plugin-api/report.api.md +++ b/packages/frontend-plugin-api/report.api.md @@ -377,6 +377,7 @@ export interface ConfigurableExtensionDataRef< // @public (undocumented) export const coreExtensionData: { + title: ConfigurableExtensionDataRef; reactElement: ConfigurableExtensionDataRef< JSX_3.Element, 'core.reactElement', diff --git a/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts b/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts index 18466d8196..b778539101 100644 --- a/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts +++ b/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts @@ -20,6 +20,7 @@ import { createExtensionDataRef } from './createExtensionDataRef'; /** @public */ export const coreExtensionData = { + title: createExtensionDataRef().with({ id: 'core.title' }), reactElement: createExtensionDataRef().with({ id: 'core.reactElement', }), diff --git a/plugins/catalog-react/report-alpha.api.md b/plugins/catalog-react/report-alpha.api.md index 30cdd91704..cf28d80c11 100644 --- a/plugins/catalog-react/report-alpha.api.md +++ b/plugins/catalog-react/report-alpha.api.md @@ -92,12 +92,12 @@ export const catalogReactTranslationRef: TranslationRef< readonly 'entityTableColumnTitle.title': 'Title'; readonly 'entityTableColumnTitle.description': 'Description'; readonly 'entityTableColumnTitle.domain': 'Domain'; + readonly 'entityTableColumnTitle.system': 'System'; + readonly 'entityTableColumnTitle.tags': 'Tags'; readonly 'entityTableColumnTitle.namespace': 'Namespace'; readonly 'entityTableColumnTitle.lifecycle': 'Lifecycle'; readonly 'entityTableColumnTitle.owner': 'Owner'; - readonly 'entityTableColumnTitle.system': 'System'; readonly 'entityTableColumnTitle.targets': 'Targets'; - readonly 'entityTableColumnTitle.tags': 'Tags'; } >; @@ -533,8 +533,8 @@ export const EntityTableColumnTitle: ({ translationKey, }: EntityTableColumnTitleProps) => | 'Title' - | 'Domain' | 'System' + | 'Domain' | 'Lifecycle' | 'Namespace' | 'Owner' From f5e09631a43afd659c30b318e1bef9a03bc18bd8 Mon Sep 17 00:00:00 2001 From: Hope Hadfield Date: Thu, 18 Sep 2025 11:15:16 -0400 Subject: [PATCH 09/67] Remove unused dependencies in notifications and scaffolder Signed-off-by: Hope Hadfield --- .changeset/shiny-candles-hide.md | 9 +++++++++ .../knip-report.md | 5 ----- .../package.json | 1 - plugins/notifications-backend/knip-report.md | 14 -------------- plugins/notifications-backend/package.json | 7 +------ plugins/notifications/knip-report.md | 13 ------------- plugins/notifications/package.json | 4 ---- .../knip-report.md | 5 ----- .../package.json | 3 +-- .../knip-report.md | 5 ----- .../scaffolder-backend-module-gitlab/package.json | 1 - yarn.lock | 12 ------------ 12 files changed, 11 insertions(+), 68 deletions(-) create mode 100644 .changeset/shiny-candles-hide.md diff --git a/.changeset/shiny-candles-hide.md b/.changeset/shiny-candles-hide.md new file mode 100644 index 0000000000..7ec4a8062e --- /dev/null +++ b/.changeset/shiny-candles-hide.md @@ -0,0 +1,9 @@ +--- +'@backstage/plugin-scaffolder-backend-module-bitbucket-server': patch +'@backstage/plugin-notifications-backend-module-email': patch +'@backstage/plugin-scaffolder-backend-module-gitlab': patch +'@backstage/plugin-notifications-backend': patch +'@backstage/plugin-notifications': patch +--- + +Removed unused dependencies diff --git a/plugins/notifications-backend-module-email/knip-report.md b/plugins/notifications-backend-module-email/knip-report.md index a36d75cae4..97d5b385fd 100644 --- a/plugins/notifications-backend-module-email/knip-report.md +++ b/plugins/notifications-backend-module-email/knip-report.md @@ -1,8 +1,3 @@ # Knip report -## Unused dependencies (1) - -| Name | Location | Severity | -| :------------- | :----------- | :------- | -| @aws-sdk/types | plugins/notifications-backend-module-email/package.json | error | diff --git a/plugins/notifications-backend-module-email/package.json b/plugins/notifications-backend-module-email/package.json index ac8682fe2d..37b0f4d64d 100644 --- a/plugins/notifications-backend-module-email/package.json +++ b/plugins/notifications-backend-module-email/package.json @@ -35,7 +35,6 @@ }, "dependencies": { "@aws-sdk/client-ses": "^3.550.0", - "@aws-sdk/types": "^3.347.0", "@azure/communication-email": "^1.0.0", "@azure/identity": "^4.0.0", "@backstage/backend-plugin-api": "workspace:^", diff --git a/plugins/notifications-backend/knip-report.md b/plugins/notifications-backend/knip-report.md index 3514fea30a..97d5b385fd 100644 --- a/plugins/notifications-backend/knip-report.md +++ b/plugins/notifications-backend/knip-report.md @@ -1,17 +1,3 @@ # Knip report -## Unused dependencies (4) - -| Name | Location | Severity | -| :---------------------------- | :----------- | :------- | -| @backstage/plugin-events-node | plugins/notifications-backend/package.json | error | -| @backstage/plugin-auth-node | plugins/notifications-backend/package.json | error | -| winston | plugins/notifications-backend/package.json | error | -| yn | plugins/notifications-backend/package.json | error | - -## Unused devDependencies (1) - -| Name | Location | Severity | -| :-- | :----------- | :------- | -| msw | plugins/notifications-backend/package.json | error | diff --git a/plugins/notifications-backend/package.json b/plugins/notifications-backend/package.json index 1a2c746409..975e2fec0a 100644 --- a/plugins/notifications-backend/package.json +++ b/plugins/notifications-backend/package.json @@ -43,9 +43,7 @@ "@backstage/catalog-model": "workspace:^", "@backstage/config": "workspace:^", "@backstage/errors": "workspace:^", - "@backstage/plugin-auth-node": "workspace:^", "@backstage/plugin-catalog-node": "workspace:^", - "@backstage/plugin-events-node": "workspace:^", "@backstage/plugin-notifications-common": "workspace:^", "@backstage/plugin-notifications-node": "workspace:^", "@backstage/plugin-signals-node": "workspace:^", @@ -54,9 +52,7 @@ "express-promise-router": "^4.1.0", "knex": "^3.0.0", "p-throttle": "^4.1.1", - "uuid": "^11.0.0", - "winston": "^3.2.1", - "yn": "^4.0.0" + "uuid": "^11.0.0" }, "devDependencies": { "@backstage/backend-defaults": "workspace:^", @@ -68,7 +64,6 @@ "@backstage/plugin-signals-backend": "workspace:^", "@types/express": "^4.17.6", "@types/supertest": "^2.0.8", - "msw": "^1.0.0", "supertest": "^7.0.0" }, "configSchema": "config.d.ts" diff --git a/plugins/notifications/knip-report.md b/plugins/notifications/knip-report.md index 6cd21cf3b8..97d5b385fd 100644 --- a/plugins/notifications/knip-report.md +++ b/plugins/notifications/knip-report.md @@ -1,16 +1,3 @@ # Knip report -## Unused dependencies (2) - -| Name | Location | Severity | -| :--------------- | :----------- | :------- | -| @backstage/types | plugins/notifications/package.json | error | -| @material-ui/lab | plugins/notifications/package.json | error | - -## Unused devDependencies (2) - -| Name | Location | Severity | -| :-------------------------- | :----------- | :------- | -| @testing-library/user-event | plugins/notifications/package.json | error | -| @backstage/core-app-api | plugins/notifications/package.json | error | diff --git a/plugins/notifications/package.json b/plugins/notifications/package.json index e6d66a5ec7..cbc06d242e 100644 --- a/plugins/notifications/package.json +++ b/plugins/notifications/package.json @@ -59,10 +59,8 @@ "@backstage/plugin-notifications-common": "workspace:^", "@backstage/plugin-signals-react": "workspace:^", "@backstage/theme": "workspace:^", - "@backstage/types": "workspace:^", "@material-ui/core": "^4.9.13", "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "^4.0.0-alpha.61", "lodash": "^4.17.21", "material-ui-confirm": "^3.0.12", "notistack": "^3.0.1", @@ -71,13 +69,11 @@ }, "devDependencies": { "@backstage/cli": "workspace:^", - "@backstage/core-app-api": "workspace:^", "@backstage/dev-utils": "workspace:^", "@backstage/plugin-signals": "workspace:^", "@backstage/test-utils": "workspace:^", "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^16.0.0", - "@testing-library/user-event": "^14.0.0", "@types/react": "^18.0.0", "msw": "^1.0.0", "react": "^18.0.2", diff --git a/plugins/scaffolder-backend-module-bitbucket-server/knip-report.md b/plugins/scaffolder-backend-module-bitbucket-server/knip-report.md index 0dd672d03d..97d5b385fd 100644 --- a/plugins/scaffolder-backend-module-bitbucket-server/knip-report.md +++ b/plugins/scaffolder-backend-module-bitbucket-server/knip-report.md @@ -1,8 +1,3 @@ # Knip report -## Unused dependencies (1) - -| Name | Location | Severity | -| :-- | :----------- | :------- | -| zod | plugins/scaffolder-backend-module-bitbucket-server/package.json | error | diff --git a/plugins/scaffolder-backend-module-bitbucket-server/package.json b/plugins/scaffolder-backend-module-bitbucket-server/package.json index 452653afb7..c980146970 100644 --- a/plugins/scaffolder-backend-module-bitbucket-server/package.json +++ b/plugins/scaffolder-backend-module-bitbucket-server/package.json @@ -48,8 +48,7 @@ "@backstage/integration": "workspace:^", "@backstage/plugin-scaffolder-node": "workspace:^", "fs-extra": "^11.2.0", - "yaml": "^2.0.0", - "zod": "^3.22.4" + "yaml": "^2.0.0" }, "devDependencies": { "@backstage/backend-test-utils": "workspace:^", diff --git a/plugins/scaffolder-backend-module-gitlab/knip-report.md b/plugins/scaffolder-backend-module-gitlab/knip-report.md index 3e1fc873d4..97d5b385fd 100644 --- a/plugins/scaffolder-backend-module-gitlab/knip-report.md +++ b/plugins/scaffolder-backend-module-gitlab/knip-report.md @@ -1,8 +1,3 @@ # Knip report -## Unused dependencies (1) - -| Name | Location | Severity | -| :------ | :----------- | :------- | -| winston | plugins/scaffolder-backend-module-gitlab/package.json | error | diff --git a/plugins/scaffolder-backend-module-gitlab/package.json b/plugins/scaffolder-backend-module-gitlab/package.json index f8194a434c..c1fb8024e9 100644 --- a/plugins/scaffolder-backend-module-gitlab/package.json +++ b/plugins/scaffolder-backend-module-gitlab/package.json @@ -53,7 +53,6 @@ "@gitbeaker/requester-utils": "^41.2.0", "@gitbeaker/rest": "^41.2.0", "luxon": "^3.0.0", - "winston": "^3.2.1", "yaml": "^2.0.0", "zod": "^3.22.4" }, diff --git a/yarn.lock b/yarn.lock index 483bd8e5b8..d0948f8474 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5715,7 +5715,6 @@ __metadata: resolution: "@backstage/plugin-notifications-backend-module-email@workspace:plugins/notifications-backend-module-email" dependencies: "@aws-sdk/client-ses": "npm:^3.550.0" - "@aws-sdk/types": "npm:^3.347.0" "@azure/communication-email": "npm:^1.0.0" "@azure/identity": "npm:^4.0.0" "@backstage/backend-plugin-api": "workspace:^" @@ -5775,10 +5774,8 @@ __metadata: "@backstage/errors": "workspace:^" "@backstage/plugin-auth-backend": "workspace:^" "@backstage/plugin-auth-backend-module-guest-provider": "workspace:^" - "@backstage/plugin-auth-node": "workspace:^" "@backstage/plugin-catalog-node": "workspace:^" "@backstage/plugin-events-backend": "workspace:^" - "@backstage/plugin-events-node": "workspace:^" "@backstage/plugin-notifications-common": "workspace:^" "@backstage/plugin-notifications-node": "workspace:^" "@backstage/plugin-signals-backend": "workspace:^" @@ -5789,12 +5786,9 @@ __metadata: express: "npm:^4.17.1" express-promise-router: "npm:^4.1.0" knex: "npm:^3.0.0" - msw: "npm:^1.0.0" p-throttle: "npm:^4.1.1" supertest: "npm:^7.0.0" uuid: "npm:^11.0.0" - winston: "npm:^3.2.1" - yn: "npm:^4.0.0" languageName: unknown linkType: soft @@ -5832,7 +5826,6 @@ __metadata: resolution: "@backstage/plugin-notifications@workspace:plugins/notifications" dependencies: "@backstage/cli": "workspace:^" - "@backstage/core-app-api": "workspace:^" "@backstage/core-compat-api": "workspace:^" "@backstage/core-components": "workspace:^" "@backstage/core-plugin-api": "workspace:^" @@ -5844,13 +5837,10 @@ __metadata: "@backstage/plugin-signals-react": "workspace:^" "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" - "@backstage/types": "workspace:^" "@material-ui/core": "npm:^4.9.13" "@material-ui/icons": "npm:^4.9.1" - "@material-ui/lab": "npm:^4.0.0-alpha.61" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^16.0.0" - "@testing-library/user-event": "npm:^14.0.0" "@types/react": "npm:^18.0.0" lodash: "npm:^4.17.21" material-ui-confirm: "npm:^3.0.12" @@ -6147,7 +6137,6 @@ __metadata: fs-extra: "npm:^11.2.0" msw: "npm:^1.0.0" yaml: "npm:^2.0.0" - zod: "npm:^3.22.4" languageName: unknown linkType: soft @@ -6307,7 +6296,6 @@ __metadata: "@gitbeaker/requester-utils": "npm:^41.2.0" "@gitbeaker/rest": "npm:^41.2.0" luxon: "npm:^3.0.0" - winston: "npm:^3.2.1" yaml: "npm:^2.0.0" zod: "npm:^3.22.4" languageName: unknown From 9acc1d6c9474b224664118888c643b1e358abe3d Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Tue, 23 Sep 2025 16:36:42 +0100 Subject: [PATCH 10/67] Adding show/hide visibility and clear action icons to BUI TextField Signed-off-by: Hermione Bird --- .changeset/eighty-cows-care.md | 5 ++ packages/ui/css/styles.css | 25 ++++++++ .../components/TextField/TextField.styles.css | 23 +++++++ .../ui/src/components/TextField/TextField.tsx | 64 ++++++++++++++++++- packages/ui/src/components/TextField/types.ts | 10 +++ packages/ui/src/utils/componentDefinitions.ts | 1 + 6 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 .changeset/eighty-cows-care.md diff --git a/.changeset/eighty-cows-care.md b/.changeset/eighty-cows-care.md new file mode 100644 index 0000000000..fc0a5c48bc --- /dev/null +++ b/.changeset/eighty-cows-care.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Added show/hide visibility and clear action icons to TextField diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 8aa99175b3..e9bc5a289f 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -10451,6 +10451,31 @@ } } +.bui-InputAction { + position: absolute; + display: flex; + flex-direction: row; + right: var(--bui-space-3); + top: 50%; + transform: translateY(-50%); + color: var(--bui-fg-primary); + flex-shrink: 0; + /* To animate the icon when the input is collapsed */ + transition: right 0.2s ease-in-out; + + &[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-InputIcon { left: var(--bui-space-3); margin-right: var(--bui-space-1); diff --git a/packages/ui/src/components/TextField/TextField.styles.css b/packages/ui/src/components/TextField/TextField.styles.css index 792d5d85c9..77b39396e1 100644 --- a/packages/ui/src/components/TextField/TextField.styles.css +++ b/packages/ui/src/components/TextField/TextField.styles.css @@ -116,3 +116,26 @@ border: 1px solid var(--bui-border-disabled); } } + +.bui-InputAction { + position: absolute; + right: var(--bui-space-3); + top: 50%; + transform: translateY(-50%); + color: var(--bui-fg-primary); + flex-shrink: 0; + /* To animate the icon when the input is collapsed */ + transition: right 0.2s ease-in-out; + + &[data-size='small'], + &[data-size='small'] svg { + width: 1rem; + height: 1rem; + } + + &[data-size='medium'], + &[data-size='medium'] svg { + width: 1.25rem; + height: 1.25rem; + } +} diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx index 2756c3c85f..748dd4655a 100644 --- a/packages/ui/src/components/TextField/TextField.tsx +++ b/packages/ui/src/components/TextField/TextField.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { forwardRef, useEffect } from 'react'; +import { forwardRef, useEffect, useState } from 'react'; import { Input, TextField as AriaTextField } from 'react-aria-components'; import clsx from 'clsx'; import { FieldLabel } from '../FieldLabel'; @@ -22,6 +22,8 @@ import { FieldError } from '../FieldError'; import type { TextFieldProps } from './types'; import { useStyles } from '../../hooks/useStyles'; +import { Icon } from '../Icon'; +import { ButtonIcon } from '../ButtonIcon'; /** @public */ export const TextField = forwardRef( @@ -34,6 +36,8 @@ export const TextField = forwardRef( secondaryLabel, description, isRequired, + enableVisibility, + isClearable, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, placeholder, @@ -56,6 +60,30 @@ export const TextField = forwardRef( const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null); + // Manage value for clearable behavior, supporting both controlled and uncontrolled usage + const { + value: controlledValue, + defaultValue, + onChange, + isDisabled, + } = rest as any; + const [uncontrolledValue, setUncontrolledValue] = useState( + defaultValue ?? '', + ); + const effectiveValue = + controlledValue !== undefined ? controlledValue : uncontrolledValue; + const handleChange = (value: string) => { + if (controlledValue === undefined) setUncontrolledValue(value); + onChange?.(value); + }; + + // Manage secret visibility toggle + const [isVisible, setIsVisible] = useState(false); + const showClear = Boolean( + isClearable && effectiveValue && effectiveValue.length > 0, + ); + const showSecretToggle = Boolean(enableVisibility); + return ( ( aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} {...rest} + value={effectiveValue} + onChange={handleChange} ref={ref} > ( {icon} )} + {(showClear || showSecretToggle) && ( +
+ {showSecretToggle && ( + setIsVisible(v => !v)} + icon={} + /> + )} + {showClear && ( + { + if (controlledValue === undefined) { + setUncontrolledValue(''); + } + onChange?.(''); + }} + icon={} + /> + )} +
+ )} diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts index 75a5c68aaa..d64be41050 100644 --- a/packages/ui/src/components/TextField/types.ts +++ b/packages/ui/src/components/TextField/types.ts @@ -38,4 +38,14 @@ export interface TextFieldProps * Text to display in the input when it has no value */ placeholder?: string; + + /** + * Displays icon to toggle between showing and hiding the input value + */ + enableVisibility?: boolean; + + /** + * Displays a clear button when there is content in the input + */ + isClearable?: boolean; } diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts index 5a0e8bdc1a..bf01a0dc63 100644 --- a/packages/ui/src/utils/componentDefinitions.ts +++ b/packages/ui/src/utils/componentDefinitions.ts @@ -286,6 +286,7 @@ export const componentDefinitions = { inputWrapper: 'bui-InputWrapper', input: 'bui-Input', inputIcon: 'bui-InputIcon', + inputAction: 'bui-InputAction', }, dataAttributes: { invalid: [true, false] as const, From d144d916c8b43f5954b3aefe426289325de75c83 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Tue, 23 Sep 2025 17:39:22 +0100 Subject: [PATCH 11/67] reduce right spacing Signed-off-by: Hermione Bird --- packages/ui/css/styles.css | 2 +- packages/ui/src/components/TextField/TextField.styles.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index e9bc5a289f..1ea7d73bf7 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -10455,7 +10455,7 @@ position: absolute; display: flex; flex-direction: row; - right: var(--bui-space-3); + right: var(--bui-space-1); top: 50%; transform: translateY(-50%); color: var(--bui-fg-primary); diff --git a/packages/ui/src/components/TextField/TextField.styles.css b/packages/ui/src/components/TextField/TextField.styles.css index 77b39396e1..c5765bf8ac 100644 --- a/packages/ui/src/components/TextField/TextField.styles.css +++ b/packages/ui/src/components/TextField/TextField.styles.css @@ -119,7 +119,7 @@ .bui-InputAction { position: absolute; - right: var(--bui-space-3); + right: var(--bui-space-1); top: 50%; transform: translateY(-50%); color: var(--bui-fg-primary); From 8192e82be1184d08e5b3811de8f6296c4c691111 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Tue, 23 Sep 2025 18:12:41 +0100 Subject: [PATCH 12/67] remove clear action Signed-off-by: Hermione Bird --- .../ui/src/components/TextField/TextField.tsx | 57 +++---------------- 1 file changed, 8 insertions(+), 49 deletions(-) diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx index 748dd4655a..c4fc81f029 100644 --- a/packages/ui/src/components/TextField/TextField.tsx +++ b/packages/ui/src/components/TextField/TextField.tsx @@ -37,7 +37,6 @@ export const TextField = forwardRef( description, isRequired, enableVisibility, - isClearable, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, placeholder, @@ -60,28 +59,8 @@ export const TextField = forwardRef( const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null); - // Manage value for clearable behavior, supporting both controlled and uncontrolled usage - const { - value: controlledValue, - defaultValue, - onChange, - isDisabled, - } = rest as any; - const [uncontrolledValue, setUncontrolledValue] = useState( - defaultValue ?? '', - ); - const effectiveValue = - controlledValue !== undefined ? controlledValue : uncontrolledValue; - const handleChange = (value: string) => { - if (controlledValue === undefined) setUncontrolledValue(value); - onChange?.(value); - }; - // Manage secret visibility toggle const [isVisible, setIsVisible] = useState(false); - const showClear = Boolean( - isClearable && effectiveValue && effectiveValue.length > 0, - ); const showSecretToggle = Boolean(enableVisibility); return ( @@ -91,8 +70,6 @@ export const TextField = forwardRef( aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} {...rest} - value={effectiveValue} - onChange={handleChange} ref={ref} > ( {icon} )} - {(showClear || showSecretToggle) && ( + {showSecretToggle && (
- {showSecretToggle && ( - setIsVisible(v => !v)} - icon={} - /> - )} - {showClear && ( - { - if (controlledValue === undefined) { - setUncontrolledValue(''); - } - onChange?.(''); - }} - icon={} - /> - )} + setIsVisible(v => !v)} + icon={} + />
)} Date: Tue, 23 Sep 2025 11:58:54 -0400 Subject: [PATCH 13/67] Implement AbortController request cancellation for search. Signed-off-by: Sydney Achinger --- .changeset/ripe-yaks-brake.md | 6 + plugins/search-react/report.api.md | 14 +- plugins/search-react/src/api.ts | 10 +- .../SearchAutocomplete.test.tsx | 68 +++++--- .../components/SearchBar/SearchBar.test.tsx | 12 ++ .../SearchFilter/SearchFilter.test.tsx | 8 + .../SearchPagination.test.tsx | 12 ++ .../src/context/SearchContext.test.tsx | 151 +++++++++++------- .../src/context/SearchContext.tsx | 36 ++++- plugins/search/src/apis.test.ts | 17 +- plugins/search/src/apis.ts | 9 +- .../HomePageSearchBar.test.tsx | 3 + .../SearchModal/SearchModal.test.tsx | 21 ++- .../SearchType/SearchType.Accordion.test.tsx | 34 ++-- .../SearchType/SearchType.Accordion.tsx | 36 ++++- .../components/SearchType/SearchType.test.tsx | 13 +- 16 files changed, 322 insertions(+), 128 deletions(-) create mode 100644 .changeset/ripe-yaks-brake.md diff --git a/.changeset/ripe-yaks-brake.md b/.changeset/ripe-yaks-brake.md new file mode 100644 index 0000000000..953d0f3192 --- /dev/null +++ b/.changeset/ripe-yaks-brake.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-search-react': patch +'@backstage/plugin-search': patch +--- + +Implement AbortController request cancellation in SearchBar to prevent overlapping search requests. This change ensures that when users type quickly, previous search requests are properly canceled before new ones start. diff --git a/plugins/search-react/report.api.md b/plugins/search-react/report.api.md index f0ec6030fd..6c9a1cd09d 100644 --- a/plugins/search-react/report.api.md +++ b/plugins/search-react/report.api.md @@ -93,13 +93,23 @@ export class MockSearchApi implements SearchApi { // (undocumented) mockedResults?: SearchResultSet | undefined; // (undocumented) - query(): Promise; + query( + _query: SearchQuery, + _options?: { + signal?: AbortSignal; + }, + ): Promise; } // @public (undocumented) export interface SearchApi { // (undocumented) - query(query: SearchQuery): Promise; + query( + query: SearchQuery, + options?: { + signal?: AbortSignal; + }, + ): Promise; } // @public (undocumented) diff --git a/plugins/search-react/src/api.ts b/plugins/search-react/src/api.ts index 24a247a641..61da8a3d77 100644 --- a/plugins/search-react/src/api.ts +++ b/plugins/search-react/src/api.ts @@ -28,7 +28,10 @@ export const searchApiRef = createApiRef({ * @public */ export interface SearchApi { - query(query: SearchQuery): Promise; + query( + query: SearchQuery, + options?: { signal?: AbortSignal }, + ): Promise; } /** @@ -39,7 +42,10 @@ export interface SearchApi { export class MockSearchApi implements SearchApi { constructor(public mockedResults?: SearchResultSet) {} - query(): Promise { + query( + _query: SearchQuery, + _options?: { signal?: AbortSignal }, + ): Promise { return Promise.resolve(this.mockedResults || { results: [] }); } } diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx index 173d6c3450..36757dafff 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx @@ -95,12 +95,17 @@ describe('SearchAutocomplete', () => { ); await waitFor(() => { - expect(query).toHaveBeenCalledWith({ - filters: {}, - pageCursor: undefined, - term: options[0], - types: [], - }); + expect(query).toHaveBeenCalledWith( + { + filters: {}, + pageCursor: undefined, + term: options[0], + types: [], + }, + { + signal: expect.any(AbortSignal), + }, + ); }); }); @@ -117,23 +122,33 @@ describe('SearchAutocomplete', () => { ); await waitFor(() => { - expect(query).toHaveBeenCalledWith({ - filters: {}, - pageCursor: undefined, - term: options[0], - types: [], - }); + expect(query).toHaveBeenCalledWith( + { + filters: {}, + pageCursor: undefined, + term: options[0], + types: [], + }, + { + signal: expect.any(AbortSignal), + }, + ); }); await userEvent.click(screen.getByLabelText('Clear')); await waitFor(() => { - expect(query).toHaveBeenCalledWith({ - filters: {}, - pageCursor: undefined, - term: '', - types: [], - }); + expect(query).toHaveBeenCalledWith( + { + filters: {}, + pageCursor: undefined, + term: '', + types: [], + }, + { + signal: expect.any(AbortSignal), + }, + ); }); }); @@ -154,12 +169,17 @@ describe('SearchAutocomplete', () => { await userEvent.click(screen.getByText(options[0])); await waitFor(() => { - expect(query).toHaveBeenCalledWith({ - filters: {}, - pageCursor: undefined, - term: options[0], - types: [], - }); + expect(query).toHaveBeenCalledWith( + { + filters: {}, + pageCursor: undefined, + term: options[0], + types: [], + }, + { + signal: expect.any(AbortSignal), + }, + ); }); }); diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx index 54889792db..977f413f97 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx @@ -171,6 +171,9 @@ describe('SearchBar', () => { expect(searchApiMock.query).toHaveBeenLastCalledWith( expect.objectContaining({ term: value }), + { + signal: expect.any(AbortSignal), + }, ); jest.runAllTimers(); @@ -203,6 +206,9 @@ describe('SearchBar', () => { expect(searchApiMock.query).toHaveBeenLastCalledWith( expect.objectContaining({ term: '' }), + { + signal: expect.any(AbortSignal), + }, ); }); @@ -254,6 +260,9 @@ describe('SearchBar', () => { await waitFor(() => expect(searchApiMock.query).not.toHaveBeenLastCalledWith( expect.objectContaining({ term: value }), + expect.objectContaining({ + signal: expect.any(AbortSignal), + }), ), ); @@ -265,6 +274,9 @@ describe('SearchBar', () => { expect(searchApiMock.query).toHaveBeenLastCalledWith( expect.objectContaining({ term: value }), + { + signal: expect.any(AbortSignal), + }, ); jest.runAllTimers(); diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx index d8d3b75aa2..7191b842d3 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx @@ -178,6 +178,7 @@ describe('SearchFilter', () => { await waitFor(() => { expect(searchApiMock.query).toHaveBeenLastCalledWith( expect.objectContaining({ filters: { field: [values[0]] } }), + { signal: expect.any(Object) }, ); }); @@ -186,6 +187,7 @@ describe('SearchFilter', () => { await waitFor(() => { expect(searchApiMock.query).toHaveBeenLastCalledWith( expect.objectContaining({ filters: {} }), + { signal: expect.any(Object) }, ); }); }); @@ -217,6 +219,7 @@ describe('SearchFilter', () => { expect.objectContaining({ filters: { ...filters, field: [values[0]] }, }), + { signal: expect.any(Object) }, ); }); @@ -225,6 +228,7 @@ describe('SearchFilter', () => { await waitFor(() => { expect(searchApiMock.query).toHaveBeenLastCalledWith( expect.objectContaining({ filters }), + { signal: expect.any(Object) }, ); }); }); @@ -421,6 +425,7 @@ describe('SearchFilter', () => { expect.objectContaining({ filters: { [name]: values[0] }, }), + { signal: expect.any(AbortSignal) }, ); }); @@ -437,6 +442,7 @@ describe('SearchFilter', () => { expect.objectContaining({ filters: {}, }), + { signal: expect.any(AbortSignal) }, ); }); }); @@ -479,6 +485,7 @@ describe('SearchFilter', () => { expect.objectContaining({ filters: { ...filters, [name]: values[0] }, }), + { signal: expect.any(AbortSignal) }, ); }); @@ -493,6 +500,7 @@ describe('SearchFilter', () => { await waitFor(() => { expect(searchApiMock.query).toHaveBeenLastCalledWith( expect.objectContaining({ filters }), + { signal: expect.any(AbortSignal) }, ); }); }); diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx index d601caadd9..e482dc3a75 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx @@ -197,6 +197,9 @@ describe('SearchPagination', () => { expect.objectContaining({ pageLimit: 10, }), + { + signal: expect.any(AbortSignal), + }, ); }); @@ -229,6 +232,9 @@ describe('SearchPagination', () => { expect.objectContaining({ pageCursor: 'Mg==', // page: 2 }), + { + signal: expect.any(AbortSignal), + }, ); await userEvent.click(screen.getByLabelText('Previous page')); @@ -239,6 +245,9 @@ describe('SearchPagination', () => { expect.objectContaining({ pageCursor: 'MQ==', // page: 1 }), + { + signal: expect.any(AbortSignal), + }, ); }); @@ -271,6 +280,9 @@ describe('SearchPagination', () => { pageCursor: undefined, pageLimit: 10, }), + { + signal: expect.any(AbortSignal), + }, ); }); }); diff --git a/plugins/search-react/src/context/SearchContext.test.tsx b/plugins/search-react/src/context/SearchContext.test.tsx index f604183c7f..cbdf684b70 100644 --- a/plugins/search-react/src/context/SearchContext.test.tsx +++ b/plugins/search-react/src/context/SearchContext.test.tsx @@ -264,11 +264,14 @@ describe('SearchContext', () => { result.current.setTerm(term); }); - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - term, - types: ['*'], - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + term, + types: ['*'], + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); }); it('When types is set', async () => { @@ -286,11 +289,14 @@ describe('SearchContext', () => { result.current.setTypes(types); }); - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - types, - term: '', - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + types, + term: '', + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); }); it('When filters are set', async () => { @@ -308,11 +314,14 @@ describe('SearchContext', () => { result.current.setFilters(filters); }); - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - filters, - term: '', - types: ['*'], - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + filters, + term: '', + types: ['*'], + }, + { signal: expect.any(AbortSignal) }, + ); }); it('When page limit is set', async () => { @@ -330,12 +339,15 @@ describe('SearchContext', () => { result.current.setPageLimit(pageLimit); }); - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - pageLimit, - term: '', - types: ['*'], - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + pageLimit, + term: '', + types: ['*'], + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); }); it('When page cursor is set', async () => { @@ -353,12 +365,15 @@ describe('SearchContext', () => { result.current.setPageCursor(pageCursor); }); - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - pageCursor, - term: '', - types: ['*'], - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + pageCursor, + term: '', + types: ['*'], + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); }); it('provides function for fetch the next page', async () => { @@ -382,12 +397,15 @@ describe('SearchContext', () => { result.current.fetchNextPage!(); }); - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - term: '', - types: ['*'], - filters: {}, - pageCursor: 'NEXT', - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + term: '', + types: ['*'], + filters: {}, + pageCursor: 'NEXT', + }, + { signal: expect.any(AbortSignal) }, + ); }); it('provides function for fetch the previous page', async () => { @@ -410,12 +428,15 @@ describe('SearchContext', () => { result.current.fetchPreviousPage!(); }); - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - term: '', - types: ['*'], - filters: {}, - pageCursor: 'PREVIOUS', - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + term: '', + types: ['*'], + filters: {}, + pageCursor: 'PREVIOUS', + }, + { signal: expect.any(AbortSignal) }, + ); }); }); @@ -456,11 +477,14 @@ describe('SearchContext', () => { }); await waitFor(() => { - expect(searchApiMock.query).toHaveBeenCalledWith({ - term: '', - types: ['*'], - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenCalledWith( + { + term: '', + types: ['*'], + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); expect(analyticsApiMock.captureEvent).not.toHaveBeenCalled(); }); @@ -470,11 +494,14 @@ describe('SearchContext', () => { }); await waitFor(() => { - expect(searchApiMock.query).toHaveBeenCalledWith({ - term: 'eva', - types: ['*'], - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenCalledWith( + { + term: 'eva', + types: ['*'], + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); expect(analyticsApiMock.captureEvent).toHaveBeenCalledWith({ action: 'search', subject: 'eva', @@ -493,11 +520,14 @@ describe('SearchContext', () => { }); await waitFor(() => { - expect(searchApiMock.query).toHaveBeenCalledWith({ - term: 'eva.m', - types: ['*'], - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenCalledWith( + { + term: 'eva.m', + types: ['*'], + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); expect(analyticsApiMock.captureEvent).toHaveBeenCalledWith({ action: 'search', subject: 'eva.m', @@ -531,11 +561,14 @@ describe('SearchContext', () => { }); await waitFor(() => { - expect(searchApiMock.query).toHaveBeenLastCalledWith({ - term: 'term', - types: ['*'], - filters: {}, - }); + expect(searchApiMock.query).toHaveBeenLastCalledWith( + { + term: 'term', + types: ['*'], + filters: {}, + }, + { signal: expect.any(AbortSignal) }, + ); expect(analyticsApiMock.captureEvent).toHaveBeenCalledWith({ action: 'search', subject: 'term', diff --git a/plugins/search-react/src/context/SearchContext.tsx b/plugins/search-react/src/context/SearchContext.tsx index 3bd29c881a..ba06010789 100644 --- a/plugins/search-react/src/context/SearchContext.tsx +++ b/plugins/search-react/src/context/SearchContext.tsx @@ -23,6 +23,7 @@ import { useCallback, useContext, useEffect, + useRef, useState, } from 'react'; import useAsync, { AsyncState } from 'react-use/esm/useAsync'; @@ -132,15 +133,28 @@ const useSearchContextValue = ( const prevTerm = usePrevious(term); const prevFilters = usePrevious(filters); + const abortControllerRef = useRef(null); const result = useAsync(async () => { - const resultSet = await searchApi.query({ - term, - types, - filters, - pageLimit, - pageCursor, - }); + // Here we cancel the previous request before making a new one + if (abortControllerRef.current) { + abortControllerRef.current.abort(); + } + + const controller = new AbortController(); + abortControllerRef.current = controller; + + const resultSet = await searchApi.query( + { + term, + types, + filters, + pageLimit, + pageCursor, + }, + { signal: controller.signal }, + ); + if (term) { analytics.captureEvent('search', term, { value: resultSet.numberOfResults, @@ -162,6 +176,14 @@ const useSearchContextValue = ( setPageCursor(result.value?.previousPageCursor); }, [result.value?.previousPageCursor]); + useEffect(() => { + return () => { + if (abortControllerRef.current) { + abortControllerRef.current.abort(); + } + }; + }, []); + useEffect(() => { // Any time a term is reset, we want to start from page 0. // Only reset the term if it has been modified by the user at least once, the initial state must not reset the term. diff --git a/plugins/search/src/apis.test.ts b/plugins/search/src/apis.test.ts index 15745d2e68..1bb245dc9f 100644 --- a/plugins/search/src/apis.test.ts +++ b/plugins/search/src/apis.test.ts @@ -52,10 +52,19 @@ describe('apis', () => { identityApi.getCredentials.mockResolvedValue({}); await client.query(query); expect(getBaseUrl).toHaveBeenLastCalledWith('search'); - expect(mockFetch).toHaveBeenLastCalledWith( - `${baseUrl}/query?term=`, - undefined, - ); + expect(mockFetch).toHaveBeenLastCalledWith(`${baseUrl}/query?term=`, { + signal: undefined, + }); + }); + + it('Fetch is called with abort signal when provided', async () => { + identityApi.getCredentials.mockResolvedValue({}); + const abortController = new AbortController(); + await client.query(query, { signal: abortController.signal }); + expect(getBaseUrl).toHaveBeenLastCalledWith('search'); + expect(mockFetch).toHaveBeenLastCalledWith(`${baseUrl}/query?term=`, { + signal: abortController.signal, + }); }); it('Resolves JSON from fetch response', async () => { diff --git a/plugins/search/src/apis.ts b/plugins/search/src/apis.ts index b56d88a22c..03e6b6d1d4 100644 --- a/plugins/search/src/apis.ts +++ b/plugins/search/src/apis.ts @@ -30,12 +30,17 @@ export class SearchClient implements SearchApi { this.fetchApi = options.fetchApi; } - async query(query: SearchQuery): Promise { + async query( + query: SearchQuery, + options?: { signal?: AbortSignal }, + ): Promise { const queryString = qs.stringify(query); const url = `${await this.discoveryApi.getBaseUrl( 'search', )}/query?${queryString}`; - const response = await this.fetchApi.fetch(url); + const response = await this.fetchApi.fetch(url, { + signal: options?.signal, + }); if (!response.ok) { throw await ResponseError.fromResponse(response); diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx index 37b7c13665..e7c47b7d30 100644 --- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx +++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx @@ -48,6 +48,9 @@ describe('', () => { expect(searchApiMock.query).toHaveBeenCalledWith( expect.objectContaining({ term: '' }), + { + signal: expect.any(AbortSignal), + }, ); await userEvent.type(screen.getByLabelText('Search'), 'term{enter}'); diff --git a/plugins/search/src/components/SearchModal/SearchModal.test.tsx b/plugins/search/src/components/SearchModal/SearchModal.test.tsx index c404f54e06..8d8e1bb9b9 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.test.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.test.tsx @@ -88,7 +88,9 @@ describe('SearchModal', () => { ); expect(screen.getByRole('dialog')).toBeInTheDocument(); - expect(searchApiMock.query).toHaveBeenCalledWith(initialState); + expect(searchApiMock.query).toHaveBeenCalledWith(initialState, { + signal: expect.any(AbortSignal), + }); }); it('Should create a local search context if a parent is not defined', async () => { @@ -104,12 +106,15 @@ describe('SearchModal', () => { ); expect(screen.getByRole('dialog')).toBeInTheDocument(); - expect(searchApiMock.query).toHaveBeenCalledWith({ - term: '', - filters: {}, - types: [], - pageCursor: undefined, - }); + expect(searchApiMock.query).toHaveBeenCalledWith( + { + term: '', + filters: {}, + types: [], + pageCursor: undefined, + }, + { signal: expect.any(AbortSignal) }, + ); }); it('Should render a custom Modal correctly', async () => { @@ -200,6 +205,7 @@ describe('SearchModal', () => { expect(searchApiMock.query).toHaveBeenCalledWith( expect.objectContaining({ term: 'term' }), + { signal: expect.any(AbortSignal) }, ); const input = screen.getByLabelText('Search'); @@ -232,6 +238,7 @@ describe('SearchModal', () => { expect(searchApiMock.query).toHaveBeenCalledWith( expect.objectContaining({ term: 'term' }), + { signal: expect.any(AbortSignal) }, ); const fullResultsBtn = screen.getByRole('button', { diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx index 1245ceed5a..a0dd2976e6 100644 --- a/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx +++ b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx @@ -157,18 +157,28 @@ describe('SearchType.Accordion', () => { , ); - expect(searchApiMock.query).toHaveBeenCalledWith({ - term: 'abc', - types: [], - filters: { foo: 'bar' }, - pageLimit: 0, - }); - expect(searchApiMock.query).toHaveBeenCalledWith({ - term: 'abc', - types: [expectedType.value], - filters: {}, - pageLimit: 0, - }); + expect(searchApiMock.query).toHaveBeenCalledWith( + { + term: 'abc', + types: [], + filters: { foo: 'bar' }, + pageLimit: 0, + }, + { + signal: expect.any(AbortSignal), + }, + ); + expect(searchApiMock.query).toHaveBeenCalledWith( + { + term: 'abc', + types: [expectedType.value], + filters: {}, + pageLimit: 0, + }, + { + signal: expect.any(AbortSignal), + }, + ); await waitFor(() => { const countLabels = getAllByText('1234 results'); expect(countLabels.length).toEqual(2); diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx index 65c96b1e60..8168418ed2 100644 --- a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx +++ b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { cloneElement, Fragment, useEffect, useState } from 'react'; +import { cloneElement, Fragment, useEffect, useRef, useState } from 'react'; import { useApi } from '@backstage/core-plugin-api'; import { searchApiRef, useSearch } from '@backstage/plugin-search-react'; import Accordion from '@material-ui/core/Accordion'; @@ -86,6 +86,7 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => { const [expanded, setExpanded] = useState(true); const { defaultValue, name, showCounts, types: givenTypes } = props; const { t } = useTranslationRef(searchTranslationRef); + const abortControllerRef = useRef(null); const toggleExpanded = () => setExpanded(prevState => !prevState); const handleClick = (type: string) => { @@ -117,18 +118,29 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => { if (!showCounts) { return {}; } + // Here we cancel the previous requests before making a new one + // All requests are made with a new AbortController signal + if (abortControllerRef.current) { + abortControllerRef.current.abort(); + } + + const controller = new AbortController(); + abortControllerRef.current = controller; const counts = await Promise.all( definedTypes .map(type => type.value) .map(async type => { - const { numberOfResults } = await searchApi.query({ - term, - types: type ? [type] : [], - filters: - types.includes(type) || (!types.length && !type) ? filters : {}, - pageLimit: 0, - }); + const { numberOfResults } = await searchApi.query( + { + term, + types: type ? [type] : [], + filters: + types.includes(type) || (!types.length && !type) ? filters : {}, + pageLimit: 0, + }, + { signal: controller.signal }, + ); return [ type, @@ -145,6 +157,14 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => { return Object.fromEntries(counts); }, [filters, showCounts, term, types]); + useEffect(() => { + return () => { + if (abortControllerRef.current) { + abortControllerRef.current.abort(); + } + }; + }, []); + return ( diff --git a/plugins/search/src/components/SearchType/SearchType.test.tsx b/plugins/search/src/components/SearchType/SearchType.test.tsx index 231463c9bf..e62ac19fee 100644 --- a/plugins/search/src/components/SearchType/SearchType.test.tsx +++ b/plugins/search/src/components/SearchType/SearchType.test.tsx @@ -192,6 +192,9 @@ describe('SearchType', () => { expect.objectContaining({ types: [values[0]], }), + { + signal: expect.any(AbortSignal), + }, ); }); @@ -240,6 +243,9 @@ describe('SearchType', () => { expect.objectContaining({ types: [...typeValues, values[0]], }), + { + signal: expect.any(AbortSignal), + }, ); }); @@ -253,7 +259,12 @@ describe('SearchType', () => { await waitFor(() => { expect(searchApiMock.query).toHaveBeenLastCalledWith( - expect.objectContaining([]), + expect.objectContaining({ + types: typeValues, + }), + { + signal: expect.any(AbortSignal), + }, ); }); }); From e02473eeb39d4c48b4bbada88a9c67a6cd726232 Mon Sep 17 00:00:00 2001 From: Sydney Achinger Date: Tue, 23 Sep 2025 16:15:43 -0400 Subject: [PATCH 14/67] Update test Signed-off-by: Sydney Achinger --- .../search/components/TechDocsSearch.test.tsx | 92 +++++++++++-------- 1 file changed, 56 insertions(+), 36 deletions(-) diff --git a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx index f7e67e12cf..c140e830ad 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx @@ -84,16 +84,21 @@ it('should trigger query when autocomplete input changed', async () => { ); await singleResult; - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'Testable', - name: 'test', - namespace: 'testspace', + expect(querySpy).toHaveBeenCalledWith( + { + filters: { + kind: 'Testable', + name: 'test', + namespace: 'testspace', + }, + pageCursor: '', + term: '', + types: ['techdocs'], }, - pageCursor: '', - term: '', - types: ['techdocs'], - }); + { + signal: expect.any(AbortSignal), + }, + ); const autocomplete = screen.getByTestId('techdocs-search-bar'); const input = within(autocomplete).getByRole('textbox'); @@ -105,16 +110,21 @@ it('should trigger query when autocomplete input changed', async () => { await singleResult; await waitFor(() => - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'Testable', - name: 'test', - namespace: 'testspace', + expect(querySpy).toHaveBeenCalledWith( + { + filters: { + kind: 'Testable', + name: 'test', + namespace: 'testspace', + }, + pageCursor: '', + term: 'asdf', + types: ['techdocs'], }, - pageCursor: '', - term: 'asdf', - types: ['techdocs'], - }), + { + signal: expect.any(AbortSignal), + }, + ), ); }); @@ -144,16 +154,21 @@ it('should update filter values when a new entityName is provided', async () => await renderInTestApp(); await singleResult; - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'Testable', - name: 'test', - namespace: 'testspace', + expect(querySpy).toHaveBeenCalledWith( + { + filters: { + kind: 'Testable', + name: 'test', + namespace: 'testspace', + }, + pageCursor: '', + term: '', + types: ['techdocs'], }, - pageCursor: '', - term: '', - types: ['techdocs'], - }); + { + signal: expect.any(AbortSignal), + }, + ); const button = screen.getByText('Update Entity'); act(() => { @@ -162,15 +177,20 @@ it('should update filter values when a new entityName is provided', async () => await singleResult; await waitFor(() => - expect(querySpy).toHaveBeenCalledWith({ - filters: { - kind: 'TestableDiff', - name: 'test-diff', - namespace: 'testspace-diff', + expect(querySpy).toHaveBeenCalledWith( + { + filters: { + kind: 'TestableDiff', + name: 'test-diff', + namespace: 'testspace-diff', + }, + pageCursor: '', + term: '', + types: ['techdocs'], }, - pageCursor: '', - term: '', - types: ['techdocs'], - }), + { + signal: expect.any(AbortSignal), + }, + ), ); }); From 482df90524e6c665d3e053dc07c9b67cfcdb4724 Mon Sep 17 00:00:00 2001 From: Sydney Achinger <78113809+squid-ney@users.noreply.github.com> Date: Tue, 23 Sep 2025 15:53:07 -0400 Subject: [PATCH 15/67] Update changeset Signed-off-by: Sydney Achinger <78113809+squid-ney@users.noreply.github.com> Signed-off-by: Sydney Achinger --- .changeset/ripe-yaks-brake.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/ripe-yaks-brake.md b/.changeset/ripe-yaks-brake.md index 953d0f3192..3b3097011b 100644 --- a/.changeset/ripe-yaks-brake.md +++ b/.changeset/ripe-yaks-brake.md @@ -3,4 +3,4 @@ '@backstage/plugin-search': patch --- -Implement AbortController request cancellation in SearchBar to prevent overlapping search requests. This change ensures that when users type quickly, previous search requests are properly canceled before new ones start. +Implemented AbortController request cancellation for overlapping search requests. This change ensures that when users type quickly, previous search requests are properly canceled before new ones start. From c9f3c47c7e15431e4f664dca77e24b7ba589d2a5 Mon Sep 17 00:00:00 2001 From: birdhb Date: Wed, 24 Sep 2025 16:40:39 +0100 Subject: [PATCH 16/67] Update eighty-cows-care.md Signed-off-by: birdhb --- .changeset/eighty-cows-care.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eighty-cows-care.md b/.changeset/eighty-cows-care.md index fc0a5c48bc..f3eed821ec 100644 --- a/.changeset/eighty-cows-care.md +++ b/.changeset/eighty-cows-care.md @@ -2,4 +2,4 @@ '@backstage/ui': patch --- -Added show/hide visibility and clear action icons to TextField +Added PasswordField to BUI with default show/hide visibilty on text input From 25ada301cf61e9dd2ce3bdfa6cd36814d75341f3 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Wed, 24 Sep 2025 16:39:22 +0100 Subject: [PATCH 17/67] add PasswordField to BUI, remove additional props from TextField Signed-off-by: Hermione Bird --- packages/ui/css/styles.css | 8 + .../PasswordField/PasswordField.stories.tsx | 148 ++++++++++++++++++ .../PasswordField/PasswordField.styles.css | 141 +++++++++++++++++ .../PasswordField/PasswordField.tsx | 116 ++++++++++++++ .../ui/src/components/PasswordField/index.ts | 18 +++ .../ui/src/components/PasswordField/types.ts | 56 +++++++ .../components/TextField/TextField.styles.css | 23 --- .../ui/src/components/TextField/TextField.tsx | 23 +-- packages/ui/src/components/TextField/types.ts | 10 -- packages/ui/src/css/components.css | 1 + packages/ui/src/utils/componentDefinitions.ts | 13 ++ 11 files changed, 502 insertions(+), 55 deletions(-) create mode 100644 packages/ui/src/components/PasswordField/PasswordField.stories.tsx create mode 100644 packages/ui/src/components/PasswordField/PasswordField.styles.css create mode 100644 packages/ui/src/components/PasswordField/PasswordField.tsx create mode 100644 packages/ui/src/components/PasswordField/index.ts create mode 100644 packages/ui/src/components/PasswordField/types.ts diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 1ea7d73bf7..2816ed7e8f 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -10431,6 +10431,14 @@ display: flex; } +.bui-PasswordField { + font-family: var(--bui-font-regular); + flex-direction: column; + flex-shrink: 0; + width: 100%; + display: flex; +} + .bui-InputWrapper { position: relative; diff --git a/packages/ui/src/components/PasswordField/PasswordField.stories.tsx b/packages/ui/src/components/PasswordField/PasswordField.stories.tsx new file mode 100644 index 0000000000..b89f891430 --- /dev/null +++ b/packages/ui/src/components/PasswordField/PasswordField.stories.tsx @@ -0,0 +1,148 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react-vite'; +import { PasswordField } from './PasswordField'; +import { Form } from 'react-aria-components'; +import { Icon } from '../Icon'; +import { Flex } from '../Flex'; +import { FieldLabel } from '../FieldLabel'; + +const meta = { + title: 'Backstage UI/PasswordField', + component: PasswordField, + argTypes: { + isRequired: { + control: 'boolean', + }, + icon: { + control: 'object', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + name: 'secret', + placeholder: 'Enter a secret', + style: { + maxWidth: '300px', + }, + }, +}; + +export const Sizes: Story = { + args: { + ...Default.args, + }, + render: args => ( + + } /> + } /> + + ), +}; + +export const DefaultValue: Story = { + args: { + ...Default.args, + defaultValue: 'https://example.com', + }, +}; + +export const WithLabel: Story = { + args: { + ...Default.args, + label: 'Label', + }, +}; + +export const WithDescription: Story = { + args: { + ...WithLabel.args, + description: 'Description', + }, +}; + +export const Required: Story = { + args: { + ...WithLabel.args, + isRequired: true, + }, +}; + +export const Disabled: Story = { + args: { + ...Default.args, + isDisabled: true, + }, +}; + +export const WithIcon: Story = { + args: { + ...Default.args, + }, + render: args => ( + } /> + ), +}; + +export const DisabledWithIcon: Story = { + args: { + ...WithIcon.args, + isDisabled: true, + }, + render: WithIcon.render, +}; + +export const ShowError: Story = { + args: { + ...WithLabel.args, + }, + render: args => ( +
+ + + ), +}; + +export const Validation: Story = { + args: { + ...WithLabel.args, + validate: value => (value === 'admin' ? 'Nice try!' : null), + }, +}; + +export const CustomField: Story = { + render: () => ( + <> + + + + ), +}; diff --git a/packages/ui/src/components/PasswordField/PasswordField.styles.css b/packages/ui/src/components/PasswordField/PasswordField.styles.css new file mode 100644 index 0000000000..e4d0d2f792 --- /dev/null +++ b/packages/ui/src/components/PasswordField/PasswordField.styles.css @@ -0,0 +1,141 @@ +/* + * 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. + */ + +.bui-PasswordField { + display: flex; + flex-direction: column; + font-family: var(--bui-font-regular); + width: 100%; + flex-shrink: 0; +} + +.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 { + position: absolute; + left: var(--bui-space-3); + top: 50%; + transform: translateY(-50%); + margin-right: var(--bui-space-1); + color: var(--bui-fg-primary); + flex-shrink: 0; + pointer-events: none; + /* To animate the icon when the input is collapsed */ + transition: left 0.2s ease-in-out; + + &[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 { + display: flex; + align-items: center; + 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); + transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; + width: 100%; + height: 100%; + cursor: inherit; + + &::-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: 0px; + } + + &[data-hovered] { + border-color: var(--bui-border-hover); + } + + &[data-focused] { + border-color: var(--bui-border-pressed); + outline-width: 0px; + } + + &[data-invalid] { + border-color: var(--bui-fg-danger); + } + + &[data-disabled] { + opacity: 0.5; + cursor: not-allowed; + border: 1px solid var(--bui-border-disabled); + } +} + +.bui-InputAction { + position: absolute; + right: var(--bui-space-1); + top: 50%; + transform: translateY(-50%); + color: var(--bui-fg-primary); + flex-shrink: 0; + /* To animate the icon when the input is collapsed */ + transition: right 0.2s ease-in-out; + + &[data-size='small'], + &[data-size='small'] svg { + width: 1rem; + height: 1rem; + } + + &[data-size='medium'], + &[data-size='medium'] svg { + width: 1.25rem; + height: 1.25rem; + } +} diff --git a/packages/ui/src/components/PasswordField/PasswordField.tsx b/packages/ui/src/components/PasswordField/PasswordField.tsx new file mode 100644 index 0000000000..a43f30e41e --- /dev/null +++ b/packages/ui/src/components/PasswordField/PasswordField.tsx @@ -0,0 +1,116 @@ +/* + * 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 { forwardRef, useEffect, useState } from 'react'; +import { Input, TextField as AriaTextField } from 'react-aria-components'; +import clsx from 'clsx'; +import { FieldLabel } from '../FieldLabel'; +import { FieldError } from '../FieldError'; + +import type { PasswordFieldProps } from './types'; +import { useStyles } from '../../hooks/useStyles'; +import { Icon } from '../Icon'; +import { ButtonIcon } from '../ButtonIcon'; + +/** @public */ +export const PasswordField = forwardRef( + (props, ref) => { + const { + className, + icon, + size = 'small', + label, + secondaryLabel, + tertiaryLabel, + description, + isRequired, + tone, + message, + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + placeholder, + ...rest + } = props; + + useEffect(() => { + if (!label && !ariaLabel && !ariaLabelledBy) { + console.warn( + 'PasswordField requires either a visible label, aria-label, or aria-labelledby for accessibility', + ); + } + }, [label, ariaLabel, ariaLabelledBy]); + + const { classNames, dataAttributes } = useStyles('PasswordField', { + size, + }); + + // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required. + const secondaryLabelText = + secondaryLabel || (isRequired ? 'Required' : null); + + // Manage secret visibility toggle + const [isVisible, setIsVisible] = useState(false); + + return ( + + +
+ {icon && ( + + )} +
+ setIsVisible(v => !v)} + icon={} + /> +
+ +
+ + + ); + }, +); + +PasswordField.displayName = 'PasswordField'; diff --git a/packages/ui/src/components/PasswordField/index.ts b/packages/ui/src/components/PasswordField/index.ts new file mode 100644 index 0000000000..df7874e1c2 --- /dev/null +++ b/packages/ui/src/components/PasswordField/index.ts @@ -0,0 +1,18 @@ +/* + * 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 * from './PasswordField'; +export * from './types'; diff --git a/packages/ui/src/components/PasswordField/types.ts b/packages/ui/src/components/PasswordField/types.ts new file mode 100644 index 0000000000..f1f5066955 --- /dev/null +++ b/packages/ui/src/components/PasswordField/types.ts @@ -0,0 +1,56 @@ +/* + * Copyright 2025 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 type { TextFieldProps as AriaTextFieldProps } from 'react-aria-components'; +import { ReactNode } from 'react'; +import type { Breakpoint } from '../../types'; +import type { FieldLabelProps } from '../FieldLabel/types'; + +/** @public */ +export interface PasswordFieldProps + extends AriaTextFieldProps, + Omit { + /** + * An icon to render before the input + */ + icon?: ReactNode; + + /** + * The size of the password field + * @defaultValue 'medium' + */ + size?: 'small' | 'medium' | Partial>; + + /** + * Text to display in the input when it has no value + */ + placeholder?: string; + + /** + * A tertiary label to display on the right side of the field label + */ + tertiaryLabel?: string; + + /** + * The visual tone of the message below the field, if any + */ + tone?: 'positive' | 'critical' | 'neutral' | 'caution'; + + /** + * A message to display below the field, such as validation feedback + */ + message?: string; +} diff --git a/packages/ui/src/components/TextField/TextField.styles.css b/packages/ui/src/components/TextField/TextField.styles.css index c5765bf8ac..792d5d85c9 100644 --- a/packages/ui/src/components/TextField/TextField.styles.css +++ b/packages/ui/src/components/TextField/TextField.styles.css @@ -116,26 +116,3 @@ border: 1px solid var(--bui-border-disabled); } } - -.bui-InputAction { - position: absolute; - right: var(--bui-space-1); - top: 50%; - transform: translateY(-50%); - color: var(--bui-fg-primary); - flex-shrink: 0; - /* To animate the icon when the input is collapsed */ - transition: right 0.2s ease-in-out; - - &[data-size='small'], - &[data-size='small'] svg { - width: 1rem; - height: 1rem; - } - - &[data-size='medium'], - &[data-size='medium'] svg { - width: 1.25rem; - height: 1.25rem; - } -} diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx index c4fc81f029..2756c3c85f 100644 --- a/packages/ui/src/components/TextField/TextField.tsx +++ b/packages/ui/src/components/TextField/TextField.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { forwardRef, useEffect, useState } from 'react'; +import { forwardRef, useEffect } from 'react'; import { Input, TextField as AriaTextField } from 'react-aria-components'; import clsx from 'clsx'; import { FieldLabel } from '../FieldLabel'; @@ -22,8 +22,6 @@ import { FieldError } from '../FieldError'; import type { TextFieldProps } from './types'; import { useStyles } from '../../hooks/useStyles'; -import { Icon } from '../Icon'; -import { ButtonIcon } from '../ButtonIcon'; /** @public */ export const TextField = forwardRef( @@ -36,7 +34,6 @@ export const TextField = forwardRef( secondaryLabel, description, isRequired, - enableVisibility, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, placeholder, @@ -59,10 +56,6 @@ export const TextField = forwardRef( const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null); - // Manage secret visibility toggle - const [isVisible, setIsVisible] = useState(false); - const showSecretToggle = Boolean(enableVisibility); - return ( ( {icon} )} - {showSecretToggle && ( -
- setIsVisible(v => !v)} - icon={} - /> -
- )} diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts index d64be41050..75a5c68aaa 100644 --- a/packages/ui/src/components/TextField/types.ts +++ b/packages/ui/src/components/TextField/types.ts @@ -38,14 +38,4 @@ export interface TextFieldProps * Text to display in the input when it has no value */ placeholder?: string; - - /** - * Displays icon to toggle between showing and hiding the input value - */ - enableVisibility?: boolean; - - /** - * Displays a clear button when there is content in the input - */ - isClearable?: boolean; } diff --git a/packages/ui/src/css/components.css b/packages/ui/src/css/components.css index 8aa81a8217..97dec3603f 100644 --- a/packages/ui/src/css/components.css +++ b/packages/ui/src/css/components.css @@ -39,6 +39,7 @@ @import '../components/TagGroup/TagGroup.styles.css'; @import '../components/Text/styles.css'; @import '../components/TextField/TextField.styles.css'; +@import '../components/TextField/PasswordField.styles.css'; @import '../components/SearchField/SearchField.styles.css'; @import '../components/Skeleton/Skeleton.styles.css'; @import '../components/Tooltip/Tooltip.styles.css'; diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts index bf01a0dc63..f67ee781dc 100644 --- a/packages/ui/src/utils/componentDefinitions.ts +++ b/packages/ui/src/utils/componentDefinitions.ts @@ -293,6 +293,19 @@ export const componentDefinitions = { disabled: [true, false] as const, }, }, + PasswordField: { + classNames: { + root: 'bui-PasswordField', + inputWrapper: 'bui-InputWrapper', + input: 'bui-Input', + inputIcon: 'bui-InputIcon', + inputAction: 'bui-InputAction', + }, + dataAttributes: { + invalid: [true, false] as const, + disabled: [true, false] as const, + }, + }, Tooltip: { classNames: { tooltip: 'bui-Tooltip', From bd68474c8014fe479aca081829e5f1dd4ba23241 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Thu, 25 Sep 2025 10:46:15 +0100 Subject: [PATCH 18/67] Deprecate types search and password from TextField Signed-off-by: Hermione Bird --- .../ui/src/components/TextField/TextField.tsx | 14 ++++++++++++++ packages/ui/src/components/TextField/types.ts | 16 ++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx index 2756c3c85f..f44295e247 100644 --- a/packages/ui/src/components/TextField/TextField.tsx +++ b/packages/ui/src/components/TextField/TextField.tsx @@ -48,6 +48,20 @@ export const TextField = forwardRef( } }, [label, ariaLabel, ariaLabelledBy]); + useEffect(() => { + const inputType = (props as { type?: string }).type; + if (inputType === 'search') { + console.warn( + 'TextField type="search" is deprecated. Use SearchField instead.', + ); + } + if (inputType === 'password') { + console.warn( + 'TextField type="password" is deprecated. Use PasswordField instead.', + ); + } + }, [props]); + const { classNames, dataAttributes } = useStyles('TextField', { size, }); diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts index 75a5c68aaa..0c34634e2d 100644 --- a/packages/ui/src/components/TextField/types.ts +++ b/packages/ui/src/components/TextField/types.ts @@ -23,6 +23,22 @@ import type { FieldLabelProps } from '../FieldLabel/types'; export interface TextFieldProps extends AriaTextFieldProps, Omit { + /** + * The HTML input type for the text field + * + * @remarks + * The values 'search' and 'password' are deprecated. Use `SearchField` for + * search inputs and `PasswordField` for password inputs. + */ + type?: + | 'text' + | 'email' + | 'tel' + | 'url' + /** @deprecated Use `SearchField` instead */ + | 'search' + /** @deprecated Use `PasswordField` instead */ + | 'password'; /** * An icon to render before the input */ From ed5829bc30b8867e7aab4e2b8c3a0338d3ab7c22 Mon Sep 17 00:00:00 2001 From: birdhb Date: Thu, 25 Sep 2025 11:09:44 +0100 Subject: [PATCH 19/67] Update eighty-cows-care.md Signed-off-by: birdhb --- .changeset/eighty-cows-care.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eighty-cows-care.md b/.changeset/eighty-cows-care.md index f3eed821ec..8fd5c0adb0 100644 --- a/.changeset/eighty-cows-care.md +++ b/.changeset/eighty-cows-care.md @@ -2,4 +2,4 @@ '@backstage/ui': patch --- -Added PasswordField to BUI with default show/hide visibilty on text input +Added PasswordField to BUI with default show/hide visibility on text input From 6d67d79072a40e3baac569318ff0e024ba5a5621 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Thu, 25 Sep 2025 11:16:49 +0100 Subject: [PATCH 20/67] Fix stylesheet import Signed-off-by: Hermione Bird --- packages/ui/src/css/components.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/css/components.css b/packages/ui/src/css/components.css index 97dec3603f..9696425431 100644 --- a/packages/ui/src/css/components.css +++ b/packages/ui/src/css/components.css @@ -39,7 +39,7 @@ @import '../components/TagGroup/TagGroup.styles.css'; @import '../components/Text/styles.css'; @import '../components/TextField/TextField.styles.css'; -@import '../components/TextField/PasswordField.styles.css'; +@import '../components/PasswordField/PasswordField.styles.css'; @import '../components/SearchField/SearchField.styles.css'; @import '../components/Skeleton/Skeleton.styles.css'; @import '../components/Tooltip/Tooltip.styles.css'; From 7f436b46e1aa3c8c95e91d9fd84df0f7c431cf19 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Thu, 25 Sep 2025 11:22:00 +0100 Subject: [PATCH 21/67] remove unecessary props Signed-off-by: Hermione Bird --- .../components/PasswordField/PasswordField.tsx | 3 --- packages/ui/src/components/PasswordField/types.ts | 15 --------------- 2 files changed, 18 deletions(-) diff --git a/packages/ui/src/components/PasswordField/PasswordField.tsx b/packages/ui/src/components/PasswordField/PasswordField.tsx index a43f30e41e..46b907c010 100644 --- a/packages/ui/src/components/PasswordField/PasswordField.tsx +++ b/packages/ui/src/components/PasswordField/PasswordField.tsx @@ -34,11 +34,8 @@ export const PasswordField = forwardRef( size = 'small', label, secondaryLabel, - tertiaryLabel, description, isRequired, - tone, - message, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, placeholder, diff --git a/packages/ui/src/components/PasswordField/types.ts b/packages/ui/src/components/PasswordField/types.ts index f1f5066955..8af9a6134c 100644 --- a/packages/ui/src/components/PasswordField/types.ts +++ b/packages/ui/src/components/PasswordField/types.ts @@ -38,19 +38,4 @@ export interface PasswordFieldProps * Text to display in the input when it has no value */ placeholder?: string; - - /** - * A tertiary label to display on the right side of the field label - */ - tertiaryLabel?: string; - - /** - * The visual tone of the message below the field, if any - */ - tone?: 'positive' | 'critical' | 'neutral' | 'caution'; - - /** - * A message to display below the field, such as validation feedback - */ - message?: string; } From b78dc1154cc7bf35197b2cf8645f213ffc049411 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Fri, 26 Sep 2025 11:42:09 +0100 Subject: [PATCH 22/67] add page to docs-ui, fix aria labels, compatibility with one password icons, create custom button Signed-off-by: Hermione Bird --- docs-ui/public/theme-backstage.css | 2 +- docs-ui/src/app/page.mdx | 5 + .../src/content/components/password-field.mdx | 64 ++++ .../components/password-field.props.ts | 43 +++ docs-ui/src/snippets/stories-snippets.tsx | 3 + docs-ui/src/utils/changelog.ts | 3 +- docs-ui/src/utils/data.ts | 5 + packages/ui/css/styles.css | 343 +++++++++++------- packages/ui/report.api.md | 12 + .../PasswordField/PasswordField.styles.css | 131 ++----- .../PasswordField/PasswordField.tsx | 43 ++- .../ui/src/components/TextField/TextField.tsx | 14 - packages/ui/src/components/TextField/types.ts | 12 +- packages/ui/src/utils/componentDefinitions.ts | 5 +- 14 files changed, 400 insertions(+), 285 deletions(-) create mode 100644 docs-ui/src/content/components/password-field.mdx create mode 100644 docs-ui/src/content/components/password-field.props.ts diff --git a/docs-ui/public/theme-backstage.css b/docs-ui/public/theme-backstage.css index 98b0f62b47..69cd0dbd31 100644 --- a/docs-ui/public/theme-backstage.css +++ b/docs-ui/public/theme-backstage.css @@ -1,2 +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-MenuPopover{border:1px solid var(--bui-border);border-radius:var(--bui-radius-2);background:var(--bui-bg-surface-1);color:var(--bui-fg-primary);outline:none;flex-direction:column;min-height:0;transition:transform .2s,opacity .2s;display:flex;overflow:hidden;&[data-entering],&[data-exiting]{transform:var(--origin);opacity:0}&[data-placement=top]{--origin:translateY(8px)}&[data-placement=bottom]{--origin:translateY(-8px)}&[data-placement=right]{--origin:translateX(-8px)}&[data-placement=left]{--origin:translateX(8px)}}.bui-MenuContent{max-height:inherit;box-sizing:border-box;padding:var(--bui-space-1);outline:none;min-width:150px;overflow:auto}.bui-MenuPopover .bui-ScrollAreaRoot{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.bui-MenuPopover .bui-ScrollAreaScrollbar{margin-inline:var(--bui-space-1_5)}.bui-MenuItem{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&[data-focused],&[data-open]{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-color=danger]{color:var(--bui-fg-danger)}&[data-color=danger][data-focused]{background:var(--bui-bg-danger);color:var(--bui-fg-danger)}&[data-has-submenu]{&>.bui-MenuItemArrow{display:block}}}.bui-MenuItemListBox{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&:hover{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-selected] .bui-MenuItemListBoxCheck{&>svg{opacity:1;color:var(--bui-fg-primary)}}}.bui-MenuItemListBoxCheck{justify-content:center;align-items:center;width:1rem;height:1rem;display:flex;&>svg{opacity:0;width:1rem;height:1rem}}.bui-MenuItemContent{align-items:center;gap:var(--bui-space-2);display:flex;&>svg{width:1rem;height:1rem}}.bui-MenuItemArrow{width:1rem;height:1rem;display:none;&>svg{width:1rem;height:1rem}}.bui-MenuSection{&:first-child .bui-MenuSectionHeader{padding-top:0}}.bui-MenuSectionHeader{height:2rem;padding-top:var(--bui-space-3);padding-left:var(--bui-space-2);color:var(--bui-fg-primary);font-size:var(--bui-font-size-1);letter-spacing:.05rem;text-transform:uppercase;align-items:center;font-weight:700;display:flex}.bui-MenuSeparator{background:var(--bui-border);height:1px;margin-inline:var(--bui-space-1_5);margin-block:var(--bui-space-1)}.bui-MenuSearchField{font-family:var(--bui-font-regular);flex-shrink:0;width:100%;position:relative;&[data-empty]{& .bui-MenuSearchFieldClear{display:none}}}.bui-MenuSearchFieldInput{padding:0 var(--bui-space-3);border:none;border-bottom: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:2rem;cursor:inherit;outline:none;align-items:center;display:flex;&::-webkit-search-cancel-button,&::-webkit-search-decoration{-webkit-appearance:none}}.bui-MenuSearchFieldClear{right:var(--bui-space-2);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;&>svg{width:1rem;height:1rem}}.bui-MenuEmptyState{padding:var(--bui-space-1);color:var(--bui-fg-secondary);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular)}.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-TagList{gap:var(--bui-space-2);flex-wrap:wrap;display:flex}.bui-Tag{color:var(--bui-fg-primary);background-color:var(--bui-gray-2);border-radius:var(--bui-radius-2);font-weight:var(--bui-font-weight-regular);justify-content:center;align-items:center;gap:var(--bui-space-1);box-sizing:border-box;transition-property:background-color,box-shadow,color;transition-duration:.2s;transition-timing-function:ease-in-out;display:flex}.bui-Tag[data-size=small]{height:26px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-1)}.bui-Tag[data-size=medium]{height:32px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-2)}.bui-Tag[data-hovered]{background-color:var(--bui-gray-3);cursor:pointer}.bui-Tag[data-focus-visible]{outline:2px solid var(--bui-ring);outline-offset:1px}.bui-Tag[data-selected]{box-shadow:inset 0 0 0 1px var(--bui-gray-8)}.bui-Tag[data-disabled]{color:var(--bui-fg-disabled);cursor:not-allowed}.bui-TagRemoveButton{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;width:1rem;height:1rem;margin:0;padding:0}.bui-TagIcon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:flex;& svg{width:1rem;height:1rem}}.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 +@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-baseline{align-items:baseline}.bui-align-stretch{align-items:stretch}.bui-jc-start{justify-content:start}.bui-jc-center{justify-content:center}.bui-jc-end{justify-content:end}.bui-jc-between{justify-content:space-between}.bui-fd-row{flex-direction:row}.bui-fd-column{flex-direction:column}.bui-fd-row-reverse{flex-direction:row-reverse}.bui-fd-column-reverse{flex-direction:column-reverse}@media (width>=640px){.xs\:bui-align-start{align-items:start}.xs\:bui-align-center{align-items:center}.xs\:bui-align-end{align-items:end}.xs\:bui-align-stretch{align-items:stretch}.xs\:bui-jc-start{justify-content:start}.xs\:bui-jc-center{justify-content:center}.xs\:bui-jc-end{justify-content:end}.xs\:bui-jc-between{justify-content:space-between}.xs\:bui-fd-row{flex-direction:row}.xs\:bui-fd-column{flex-direction:column}.xs\:bui-fd-row-reverse{flex-direction:row-reverse}.xs\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=768px){.sm\:bui-align-start{align-items:start}.sm\:bui-align-center{align-items:center}.sm\:bui-align-end{align-items:end}.sm\:bui-align-stretch{align-items:stretch}.sm\:bui-jc-start{justify-content:start}.sm\:bui-jc-center{justify-content:center}.sm\:bui-jc-end{justify-content:end}.sm\:bui-jc-between{justify-content:space-between}.sm\:bui-fd-row{flex-direction:row}.sm\:bui-fd-column{flex-direction:column}.sm\:bui-fd-row-reverse{flex-direction:row-reverse}.sm\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1024px){.md\:bui-align-start{align-items:start}.md\:bui-align-center{align-items:center}.md\:bui-align-end{align-items:end}.md\:bui-align-stretch{align-items:stretch}.md\:bui-jc-start{justify-content:start}.md\:bui-jc-center{justify-content:center}.md\:bui-jc-end{justify-content:end}.md\:bui-jc-between{justify-content:space-between}.md\:bui-fd-row{flex-direction:row}.md\:bui-fd-column{flex-direction:column}.md\:bui-fd-row-reverse{flex-direction:row-reverse}.md\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1280px){.lg\:bui-align-start{align-items:start}.lg\:bui-align-center{align-items:center}.lg\:bui-align-end{align-items:end}.lg\:bui-align-stretch{align-items:stretch}.lg\:bui-jc-start{justify-content:start}.lg\:bui-jc-center{justify-content:center}.lg\:bui-jc-end{justify-content:end}.lg\:bui-jc-between{justify-content:space-between}.lg\:bui-fd-row{flex-direction:row}.lg\:bui-fd-column{flex-direction:column}.lg\:bui-fd-row-reverse{flex-direction:row-reverse}.lg\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1536px){.xl\:bui-align-start{align-items:start}.xl\:bui-align-center{align-items:center}.xl\:bui-align-end{align-items:end}.xl\:bui-align-stretch{align-items:stretch}.xl\:bui-jc-start{justify-content:start}.xl\:bui-jc-center{justify-content:center}.xl\:bui-jc-end{justify-content:end}.xl\:bui-jc-between{justify-content:space-between}.xl\:bui-fd-row{flex-direction:row}.xl\:bui-fd-column{flex-direction:column}.xl\:bui-fd-row-reverse{flex-direction:row-reverse}.xl\:bui-fd-column-reverse{flex-direction:column-reverse}}: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-MenuPopover{border:1px solid var(--bui-border);border-radius:var(--bui-radius-2);background:var(--bui-bg-surface-1);color:var(--bui-fg-primary);outline:none;flex-direction:column;min-height:0;transition:transform .2s,opacity .2s;display:flex;overflow:hidden;&[data-entering],&[data-exiting]{transform:var(--origin);opacity:0}&[data-placement=top]{--origin:translateY(8px)}&[data-placement=bottom]{--origin:translateY(-8px)}&[data-placement=right]{--origin:translateX(-8px)}&[data-placement=left]{--origin:translateX(8px)}}.bui-MenuContent{max-height:inherit;box-sizing:border-box;padding:var(--bui-space-1);outline:none;min-width:150px;overflow:auto}.bui-MenuPopover .bui-ScrollAreaRoot{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.bui-MenuPopover .bui-ScrollAreaScrollbar{margin-inline:var(--bui-space-1_5)}.bui-MenuItem{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&[data-focused],&[data-open]{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-color=danger]{color:var(--bui-fg-danger)}&[data-color=danger][data-focused]{background:var(--bui-bg-danger);color:var(--bui-fg-danger)}&[data-has-submenu]{&>.bui-MenuItemArrow{display:block}}}.bui-MenuItemListBox{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&:hover{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-selected] .bui-MenuItemListBoxCheck{&>svg{opacity:1;color:var(--bui-fg-primary)}}}.bui-MenuItemListBoxCheck{justify-content:center;align-items:center;width:1rem;height:1rem;display:flex;&>svg{opacity:0;width:1rem;height:1rem}}.bui-MenuItemContent{align-items:center;gap:var(--bui-space-2);display:flex;&>svg{width:1rem;height:1rem}}.bui-MenuItemArrow{width:1rem;height:1rem;display:none;&>svg{width:1rem;height:1rem}}.bui-MenuSection{&:first-child .bui-MenuSectionHeader{padding-top:0}}.bui-MenuSectionHeader{height:2rem;padding-top:var(--bui-space-3);padding-left:var(--bui-space-2);color:var(--bui-fg-primary);font-size:var(--bui-font-size-1);letter-spacing:.05rem;text-transform:uppercase;align-items:center;font-weight:700;display:flex}.bui-MenuSeparator{background:var(--bui-border);height:1px;margin-inline:var(--bui-space-1_5);margin-block:var(--bui-space-1)}.bui-MenuSearchField{font-family:var(--bui-font-regular);flex-shrink:0;width:100%;position:relative;&[data-empty]{& .bui-MenuSearchFieldClear{display:none}}}.bui-MenuSearchFieldInput{padding:0 var(--bui-space-3);border:none;border-bottom: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:2rem;cursor:inherit;outline:none;align-items:center;display:flex;&::-webkit-search-cancel-button,&::-webkit-search-decoration{-webkit-appearance:none}}.bui-MenuSearchFieldClear{right:var(--bui-space-2);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;&>svg{width:1rem;height:1rem}}.bui-MenuEmptyState{padding:var(--bui-space-1);color:var(--bui-fg-secondary);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular)}.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-TagList{gap:var(--bui-space-2);flex-wrap:wrap;display:flex}.bui-Tag{color:var(--bui-fg-primary);background-color:var(--bui-gray-2);border-radius:var(--bui-radius-2);font-weight:var(--bui-font-weight-regular);justify-content:center;align-items:center;gap:var(--bui-space-1);box-sizing:border-box;transition-property:background-color,box-shadow,color;transition-duration:.2s;transition-timing-function:ease-in-out;display:flex}.bui-Tag[data-size=small]{height:26px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-1)}.bui-Tag[data-size=medium]{height:32px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-2)}.bui-Tag[data-hovered]{background-color:var(--bui-gray-3);cursor:pointer}.bui-Tag[data-focus-visible]{outline:2px solid var(--bui-ring);outline-offset:1px}.bui-Tag[data-selected]{box-shadow:inset 0 0 0 1px var(--bui-gray-8)}.bui-Tag[data-disabled]{color:var(--bui-fg-disabled);cursor:not-allowed}.bui-TagRemoveButton{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;width:1rem;height:1rem;margin:0;padding:0}.bui-TagIcon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:flex;& svg{width:1rem;height:1rem}}.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-PasswordField{font-family:var(--bui-font-regular);--bui-passwordmanager-icon-width:var(--bui-space-1);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-InputAction{right:var(--bui-space-1);color:var(--bui-fg-primary);flex-direction:row;flex-shrink:0;transition:right .2s ease-in-out;display:flex;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-InputVisibility{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;&[data-size=small]{width:2rem;height:2rem}&[data-size=small] svg{width:1rem;height:1rem}&[data-size=medium]{width:2.5rem;height:2.5rem}&[data-size=medium] svg{width:1.25rem;height:1.25rem}}.bui-PasswordField .bui-InputWrapper[data-size=small] .bui-Input{padding-right:calc(2rem + var(--bui-passwordmanager-icon-width))}.bui-PasswordField .bui-InputWrapper[data-size=medium] .bui-Input{padding-right:calc(2.5rem + var(--bui-passwordmanager-icon-width))}.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{flex:1 0;&[data-empty]{& .bui-InputClear{display:none}}&[data-start-collapsed=true]{flex:0 auto;padding:0;transition:flex-basis .3s ease-in-out;&[data-collapsed=true]{flex-basis:200px}&[data-collapsed=false]{cursor:pointer;&[data-size=medium]{flex-basis:2.5rem;height:2.5rem}&[data-size=small]{flex-basis:2rem;height:2rem}&[data-size=medium] .bui-Input{&::placeholder{opacity:0}}&[data-size=small] .bui-Input{&::placeholder{opacity:0}}& .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:0}}}}}.bui-SearchField .bui-Input{transition:padding .3s ease-in-out,border-color .2s ease-in-out,outline-color .2s ease-in-out;&[data-hovered]{border-color:var(--bui-border-hover)}&[data-focused]{border-color:var(--bui-border-pressed);outline-width:0}}.bui-SearchField .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:var(--bui-space-6)}}.bui-SearchField .bui-InputIcon{justify-content:center;display:flex;left:0;&[data-size=small]{width:var(--bui-space-8)}&[data-size=medium]{width:var(--bui-space-10)}}.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/src/app/page.mdx b/docs-ui/src/app/page.mdx index f31cf4524e..ffd3bc9dcb 100644 --- a/docs-ui/src/app/page.mdx +++ b/docs-ui/src/app/page.mdx @@ -85,6 +85,11 @@ building it incrementally with not conflict with the existing theming system. description="A search field component to help you search for items." href="/components/search-field" /> + + +} + code={passwordFieldDefaultSnippet} +/> + +## Usage + + + +## API reference + + + +## Examples + +### Sizes + +We support two different sizes: `small`, `medium`. + +} + code={passwordFieldSizesSnippet} +/> + +### With description + +Here's a simple PasswordField with a description. + +} + code={passwordFieldDescriptionSnippet} +/> + + + + diff --git a/docs-ui/src/content/components/password-field.props.ts b/docs-ui/src/content/components/password-field.props.ts new file mode 100644 index 0000000000..493405b5fd --- /dev/null +++ b/docs-ui/src/content/components/password-field.props.ts @@ -0,0 +1,43 @@ +import { + classNamePropDefs, + stylePropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const inputPropDefs: Record = { + size: { + type: 'enum', + values: ['small', 'medium'], + default: 'small', + responsive: true, + }, + label: { + type: 'string', + }, + icon: { + type: 'enum', + values: ['ReactNode'], + }, + description: { + type: 'string', + }, + name: { + type: 'string', + required: true, + }, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const passwordFieldUsageSnippet = `import { PasswordField } from '@backstage/ui'; + +`; + +export const passwordFieldDefaultSnippet = ``; + +export const passwordFieldSizesSnippet = ` + } /> + } /> +`; + +export const passwordFieldDescriptionSnippet = ``; diff --git a/docs-ui/src/snippets/stories-snippets.tsx b/docs-ui/src/snippets/stories-snippets.tsx index 5aa5b8c7d9..5bba3384b5 100644 --- a/docs-ui/src/snippets/stories-snippets.tsx +++ b/docs-ui/src/snippets/stories-snippets.tsx @@ -28,6 +28,7 @@ import * as HeaderStories from '../../../packages/ui/src/components/Header/Heade import * as HeaderPageStories from '../../../packages/ui/src/components/HeaderPage/HeaderPage.stories'; import * as TableStories from '../../../packages/ui/src/components/Table/Table.stories'; import * as TagGroupStories from '../../../packages/ui/src/components/TagGroup/TagGroup.stories'; +import * as PasswordFieldStories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories'; // Helper function to create snippet components // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -53,6 +54,8 @@ export const ContainerSnippet = createSnippetComponent(ContainerStories); export const GridSnippet = createSnippetComponent(GridStories); export const IconSnippet = createSnippetComponent(IconStories); export const TextFieldSnippet = createSnippetComponent(TextFieldStories); +export const PasswordFieldSnippet = + createSnippetComponent(PasswordFieldStories); export const TextSnippet = createSnippetComponent(TextStories); export const FlexSnippet = createSnippetComponent(FlexStories); export const SelectSnippet = createSnippetComponent(SelectStories); diff --git a/docs-ui/src/utils/changelog.ts b/docs-ui/src/utils/changelog.ts index a66997cf26..ef2e6c9fb9 100644 --- a/docs-ui/src/utils/changelog.ts +++ b/docs-ui/src/utils/changelog.ts @@ -25,7 +25,8 @@ export type Component = | 'radio-group' | 'card' | 'skeleton' - | 'header'; + | 'header' + | 'passwordfield'; export type Version = `${number}.${number}.${number}`; diff --git a/docs-ui/src/utils/data.ts b/docs-ui/src/utils/data.ts index 5e7305da28..c1a69e459b 100644 --- a/docs-ui/src/utils/data.ts +++ b/docs-ui/src/utils/data.ts @@ -126,6 +126,11 @@ export const components: Page[] = [ slug: 'menu', status: 'alpha', }, + { + title: 'PasswordField', + slug: 'password-field', + status: 'alpha', + }, { title: 'RadioGroup', slug: 'radio-group', diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 2816ed7e8f..2d3397f4a1 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -1,6 +1,9 @@ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */ @layer base { - *, :before, :after { + + *, + :before, + :after { box-sizing: border-box; } @@ -15,11 +18,15 @@ margin: 0; } - b, strong { + b, + strong { font-weight: bolder; } - code, kbd, samp, pre { + code, + kbd, + samp, + pre { font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 1em; } @@ -28,7 +35,8 @@ font-size: 80%; } - sub, sup { + sub, + sup { vertical-align: baseline; font-size: 75%; line-height: 0; @@ -47,14 +55,21 @@ border-color: currentColor; } - button, input, optgroup, select, textarea { + button, + input, + optgroup, + select, + textarea { margin: 0; font-family: inherit; font-size: 100%; line-height: 1.15; } - button, [type="button"], [type="reset"], [type="submit"] { + button, + [type="button"], + [type="reset"], + [type="submit"] { -webkit-appearance: button; } @@ -66,7 +81,8 @@ vertical-align: baseline; } - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { height: auto; } @@ -157,7 +173,7 @@ padding: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-p { padding: var(--p-xs); } @@ -227,7 +243,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-p { padding: var(--p-sm); } @@ -297,7 +313,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-p { padding: var(--p-md); } @@ -367,7 +383,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-p { padding: var(--p-lg); } @@ -437,7 +453,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-p { padding: var(--p-xl); } @@ -575,7 +591,7 @@ padding-left: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-pl { padding-left: var(--pl-xs); } @@ -645,7 +661,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-pl { padding-left: var(--pl-sm); } @@ -715,7 +731,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-pl { padding-left: var(--pl-md); } @@ -785,7 +801,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-pl { padding-left: var(--pl-lg); } @@ -855,7 +871,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-pl { padding-left: var(--pl-xl); } @@ -993,7 +1009,7 @@ padding-right: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-pr { padding-right: var(--pr-xs); } @@ -1063,7 +1079,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-pr { padding-right: var(--pr-sm); } @@ -1133,7 +1149,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-pr { padding-right: var(--pr-md); } @@ -1203,7 +1219,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-pr { padding-right: var(--pr-lg); } @@ -1273,7 +1289,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-pr { padding-right: var(--pr-xl); } @@ -1411,7 +1427,7 @@ padding-top: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-pt { padding-top: var(--pt-xs); } @@ -1481,7 +1497,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-pt { padding-top: var(--pt-sm); } @@ -1551,7 +1567,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-pt { padding-top: var(--pt-md); } @@ -1621,7 +1637,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-pt { padding-top: var(--pt-lg); } @@ -1691,7 +1707,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-pt { padding-top: var(--pt-xl); } @@ -1829,7 +1845,7 @@ padding-bottom: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-pb { padding-bottom: var(--pb-xs); } @@ -1899,7 +1915,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-pb { padding-bottom: var(--pb-sm); } @@ -1969,7 +1985,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-pb { padding-bottom: var(--pb-md); } @@ -2039,7 +2055,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-pb { padding-bottom: var(--pb-lg); } @@ -2109,7 +2125,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-pb { padding-bottom: var(--pb-xl); } @@ -2264,7 +2280,7 @@ padding-bottom: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-py { padding-top: var(--py-xs); padding-bottom: var(--py-xs); @@ -2351,7 +2367,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-py { padding-top: var(--py-sm); padding-bottom: var(--py-sm); @@ -2438,7 +2454,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-py { padding-top: var(--py-md); padding-bottom: var(--py-md); @@ -2525,7 +2541,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-py { padding-top: var(--py-lg); padding-bottom: var(--py-lg); @@ -2612,7 +2628,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-py { padding-top: var(--py-xl); padding-bottom: var(--py-xl); @@ -2784,7 +2800,7 @@ padding-right: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-px { padding-left: var(--px-xs); padding-right: var(--px-xs); @@ -2871,7 +2887,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-px { padding-left: var(--px-sm); padding-right: var(--px-sm); @@ -2958,7 +2974,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-px { padding-left: var(--px-md); padding-right: var(--px-md); @@ -3045,7 +3061,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-px { padding-left: var(--px-lg); padding-right: var(--px-lg); @@ -3132,7 +3148,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-px { padding-left: var(--px-xl); padding-right: var(--px-xl); @@ -3287,7 +3303,7 @@ margin: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-m { margin: var(--p-xs); } @@ -3357,7 +3373,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-m { margin: var(--p-sm); } @@ -3427,7 +3443,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-m { margin: var(--p-md); } @@ -3497,7 +3513,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-m { margin: var(--p-lg); } @@ -3567,7 +3583,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-m { margin: var(--p-xl); } @@ -3705,7 +3721,7 @@ margin-left: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-ml { margin-left: var(--pl-xs); } @@ -3775,7 +3791,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-ml { margin-left: var(--pl-sm); } @@ -3845,7 +3861,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-ml { margin-left: var(--pl-md); } @@ -3915,7 +3931,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-ml { margin-left: var(--pl-lg); } @@ -3985,7 +4001,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-ml { margin-left: var(--pl-xl); } @@ -4123,7 +4139,7 @@ margin-right: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-mr { margin-right: var(--pr-xs); } @@ -4193,7 +4209,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-mr { margin-right: var(--pr-sm); } @@ -4263,7 +4279,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-mr { margin-right: var(--pr-md); } @@ -4333,7 +4349,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-mr { margin-right: var(--pr-lg); } @@ -4403,7 +4419,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-mr { margin-right: var(--pr-xl); } @@ -4541,7 +4557,7 @@ margin-top: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-mt { margin-top: var(--pt-xs); } @@ -4611,7 +4627,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-mt { margin-top: var(--pt-sm); } @@ -4681,7 +4697,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-mt { margin-top: var(--pt-md); } @@ -4751,7 +4767,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-mt { margin-top: var(--pt-lg); } @@ -4821,7 +4837,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-mt { margin-top: var(--pt-xl); } @@ -4959,7 +4975,7 @@ margin-bottom: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-mb { margin-bottom: var(--pb-xs); } @@ -5029,7 +5045,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-mb { margin-bottom: var(--pb-sm); } @@ -5099,7 +5115,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-mb { margin-bottom: var(--pb-md); } @@ -5169,7 +5185,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-mb { margin-bottom: var(--pb-lg); } @@ -5239,7 +5255,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-mb { margin-bottom: var(--pb-xl); } @@ -5394,7 +5410,7 @@ margin-bottom: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-my { margin-top: var(--py-xs); margin-bottom: var(--py-xs); @@ -5481,7 +5497,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-my { margin-top: var(--py-sm); margin-bottom: var(--py-sm); @@ -5568,7 +5584,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-my { margin-top: var(--py-md); margin-bottom: var(--py-md); @@ -5655,7 +5671,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-my { margin-top: var(--py-lg); margin-bottom: var(--py-lg); @@ -5742,7 +5758,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-my { margin-top: var(--py-xl); margin-bottom: var(--py-xl); @@ -5914,7 +5930,7 @@ margin-right: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-mx { margin-left: var(--px-xs); margin-right: var(--px-xs); @@ -6001,7 +6017,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-mx { margin-left: var(--px-sm); margin-right: var(--px-sm); @@ -6088,7 +6104,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-mx { margin-left: var(--px-md); margin-right: var(--px-md); @@ -6175,7 +6191,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-mx { margin-left: var(--px-lg); margin-right: var(--px-lg); @@ -6262,7 +6278,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-mx { margin-left: var(--px-xl); margin-right: var(--px-xl); @@ -6365,7 +6381,7 @@ display: block; } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-display-none { display: none; } @@ -6383,7 +6399,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-display-none { display: none; } @@ -6401,7 +6417,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-display-none { display: none; } @@ -6419,7 +6435,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-display-none { display: none; } @@ -6437,7 +6453,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-display-none { display: none; } @@ -6467,7 +6483,7 @@ max-width: var(--max-width); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-w { width: var(--width); } @@ -6481,7 +6497,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-w { width: var(--width); } @@ -6495,7 +6511,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-w { width: var(--width); } @@ -6509,7 +6525,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-w { width: var(--width); } @@ -6523,7 +6539,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-w { width: var(--width); } @@ -6549,7 +6565,7 @@ max-height: var(--max-height); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-h { height: var(--height); } @@ -6563,7 +6579,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-h { height: var(--height); } @@ -6577,7 +6593,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-h { height: var(--height); } @@ -6591,7 +6607,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-h { height: var(--height); } @@ -6605,7 +6621,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-h { height: var(--height); } @@ -6639,7 +6655,7 @@ position: static; } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-position-absolute { position: absolute; } @@ -6661,7 +6677,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-position-absolute { position: absolute; } @@ -6683,7 +6699,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-position-absolute { position: absolute; } @@ -6705,7 +6721,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-position-absolute { position: absolute; } @@ -6727,7 +6743,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-position-absolute { position: absolute; } @@ -7017,7 +7033,7 @@ grid-row: span auto / span auto; } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -7287,7 +7303,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -7557,7 +7573,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -7827,7 +7843,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -8097,7 +8113,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -8435,7 +8451,7 @@ gap: var(--bui-space-14); } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-gap { gap: var(--gap-xs); } @@ -8505,7 +8521,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-gap { gap: var(--gap-sm); } @@ -8575,7 +8591,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-gap { gap: var(--gap-md); } @@ -8645,7 +8661,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-gap { gap: var(--gap-lg); } @@ -8715,7 +8731,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-gap { gap: var(--gap-xl); } @@ -8837,7 +8853,7 @@ flex-direction: column-reverse; } -@media (width >= 640px) { +@media (width >=640px) { .xs\:bui-align-start { align-items: start; } @@ -8887,7 +8903,7 @@ } } -@media (width >= 768px) { +@media (width >=768px) { .sm\:bui-align-start { align-items: start; } @@ -8937,7 +8953,7 @@ } } -@media (width >= 1024px) { +@media (width >=1024px) { .md\:bui-align-start { align-items: start; } @@ -8987,7 +9003,7 @@ } } -@media (width >= 1280px) { +@media (width >=1280px) { .lg\:bui-align-start { align-items: start; } @@ -9037,7 +9053,7 @@ } } -@media (width >= 1536px) { +@media (width >=1536px) { .xl\:bui-align-start { align-items: start; } @@ -9440,7 +9456,8 @@ overflow: auto; } -.bui-CardHeader, .bui-CardFooter { +.bui-CardHeader, +.bui-CardFooter { padding-inline: var(--bui-space-3); } @@ -9503,7 +9520,8 @@ display: flex; overflow: hidden; - &[data-starting-style], &[data-ending-style] { + &[data-starting-style], + &[data-ending-style] { height: 0; } } @@ -9515,7 +9533,7 @@ transition: padding .2s ease-in-out; } -@media (width >= 640px) { +@media (width >=640px) { .bui-Container { padding-inline: var(--bui-space-5); } @@ -9663,7 +9681,8 @@ margin-left: -8px; } -.bui-HeaderPageControls, .bui-HeaderPageBreadcrumbs { +.bui-HeaderPageControls, +.bui-HeaderPageBreadcrumbs { align-items: center; gap: var(--bui-space-2); flex-direction: row; @@ -9704,7 +9723,8 @@ display: flex; overflow: hidden; - &[data-entering], &[data-exiting] { + &[data-entering], + &[data-exiting] { transform: var(--origin); opacity: 0; } @@ -9760,7 +9780,8 @@ outline: none; display: flex; - &[data-focused], &[data-open] { + &[data-focused], + &[data-open] { background: var(--bui-bg-surface-2); color: var(--bui-fg-primary); } @@ -9775,7 +9796,7 @@ } &[data-has-submenu] { - & > .bui-MenuItemArrow { + &>.bui-MenuItemArrow { display: block; } } @@ -9800,7 +9821,7 @@ } &[data-selected] .bui-MenuItemListBoxCheck { - & > svg { + &>svg { opacity: 1; color: var(--bui-fg-primary); } @@ -9814,7 +9835,7 @@ height: 1rem; display: flex; - & > svg { + &>svg { opacity: 0; width: 1rem; height: 1rem; @@ -9826,7 +9847,7 @@ gap: var(--bui-space-2); display: flex; - & > svg { + &>svg { width: 1rem; height: 1rem; } @@ -9837,7 +9858,7 @@ height: 1rem; display: none; - & > svg { + &>svg { width: 1rem; height: 1rem; } @@ -9898,7 +9919,8 @@ align-items: center; display: flex; - &::-webkit-search-cancel-button, &::-webkit-search-decoration { + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { -webkit-appearance: none; } } @@ -9919,7 +9941,7 @@ top: 0; bottom: 0; - & > svg { + &>svg { width: 1rem; height: 1rem; } @@ -10015,7 +10037,8 @@ } } - &[data-invalid]:before, &[data-invalid][data-selected]:before { + &[data-invalid]:before, + &[data-invalid][data-selected]:before { border-color: var(--bui-border-danger); } @@ -10109,7 +10132,8 @@ display: inline-flex; } -.bui-TableCellIcon, .bui-TableCellIcon svg { +.bui-TableCellIcon, +.bui-TableCellIcon svg { color: var(--bui-fg-primary); align-items: center; display: inline-flex; @@ -10235,8 +10259,8 @@ .bui-TabActive { content: ""; - left: calc(var(--active-tab-left) + var(--bui-space-2)); - width: calc(var(--active-tab-width) - var(--bui-space-4)); + 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; @@ -10249,9 +10273,9 @@ .bui-TabHovered { content: ""; left: var(--hovered-tab-left); - top: calc(var(--hovered-tab-top) + 4px); + top: calc(var(--hovered-tab-top) + 4px); width: var(--hovered-tab-width); - height: calc(var(--hovered-tab-height) - 8px); + 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; @@ -10419,7 +10443,11 @@ 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"] { +.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; } @@ -10437,6 +10465,8 @@ flex-shrink: 0; width: 100%; display: flex; + /* Reserve space for browser/password manager icon (e.g. 1Password) */ + --bui-passwordmanager-icon-width: var(--bui-space-1); } .bui-InputWrapper { @@ -10484,6 +10514,35 @@ } } +.bui-InputVisibility { + background-color: transparent; + cursor: pointer; + border: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + color: var(--bui-fg-primary); + + /* Size: small */ + &[data-size="small"] { width: 2rem; height: 2rem; } + &[data-size="small"] svg { width: 1rem; height: 1rem; } + + /* Size: medium */ + &[data-size="medium"] { width: 2.5rem; height: 2.5rem; } + &[data-size="medium"] svg { width: 1.25rem; height: 1.25rem; } +} + +/* Ensure input has enough right padding for our toggle + PM icon */ +.bui-PasswordField .bui-InputWrapper[data-size='small'] .bui-Input { + padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); +} + +.bui-PasswordField .bui-InputWrapper[data-size='medium'] .bui-Input { + padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); +} + .bui-InputIcon { left: var(--bui-space-3); margin-right: var(--bui-space-1); @@ -10495,12 +10554,14 @@ top: 50%; transform: translateY(-50%); - &[data-size="small"], &[data-size="small"] svg { + &[data-size="small"], + &[data-size="small"] svg { width: 1rem; height: 1rem; } - &[data-size="medium"], &[data-size="medium"] svg { + &[data-size="medium"], + &[data-size="medium"] svg { width: 1.25rem; height: 1.25rem; } @@ -10522,7 +10583,8 @@ transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; display: flex; - &::-webkit-search-cancel-button, &::-webkit-search-decoration { + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { -webkit-appearance: none; } @@ -10701,7 +10763,8 @@ transform: translate3d(0, 0, 0); box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; - &[data-entering], &[data-exiting] { + &[data-entering], + &[data-exiting] { transform: var(--origin); opacity: 0; } @@ -10811,7 +10874,8 @@ transition: opacity .15s .3s; display: flex; - &[data-hovering], &[data-scrolling] { + &[data-hovering], + &[data-scrolling] { opacity: 1; transition-duration: 75ms; transition-delay: 0s; @@ -10892,7 +10956,8 @@ border-color: var(--bui-fg-danger); } - &[data-invalid]:hover, &[data-invalid]:focus-visible { + &[data-invalid]:hover, + &[data-invalid]:focus-visible { border-width: 2px; } @@ -11045,4 +11110,4 @@ transition: all .2s; display: block; } -} +} \ No newline at end of file diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 5d04bf8626..00dd6d4d42 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -643,6 +643,17 @@ export const componentDefinitions: { readonly inputWrapper: 'bui-InputWrapper'; readonly input: 'bui-Input'; readonly inputIcon: 'bui-InputIcon'; + readonly inputAction: 'bui-InputAction'; + }; + readonly dataAttributes: { + readonly invalid: readonly [true, false]; + readonly disabled: readonly [true, false]; + }; + }; + readonly PasswordField: { + readonly classNames: { + readonly root: 'bui-PasswordField'; + readonly inputVisibility: 'bui-InputVisibility'; }; readonly dataAttributes: { readonly invalid: readonly [true, false]; @@ -1760,6 +1771,7 @@ export interface TextFieldProps icon?: ReactNode; placeholder?: string; size?: 'small' | 'medium' | Partial>; + type?: 'text' | 'email' | 'tel' | 'url'; } // @public (undocumented) diff --git a/packages/ui/src/components/PasswordField/PasswordField.styles.css b/packages/ui/src/components/PasswordField/PasswordField.styles.css index e4d0d2f792..371d769ea6 100644 --- a/packages/ui/src/components/PasswordField/PasswordField.styles.css +++ b/packages/ui/src/components/PasswordField/PasswordField.styles.css @@ -20,122 +20,51 @@ font-family: var(--bui-font-regular); width: 100%; flex-shrink: 0; + /* Reserve space for browser/password manager icon (e.g. 1Password) */ + --bui-passwordmanager-icon-width: var(--bui-space-1); } -.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 { +.bui-InputVisibility { position: absolute; - left: var(--bui-space-3); - top: 50%; - transform: translateY(-50%); - margin-right: var(--bui-space-1); - color: var(--bui-fg-primary); - flex-shrink: 0; - pointer-events: none; - /* To animate the icon when the input is collapsed */ - transition: left 0.2s ease-in-out; - - &[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 { + right: var(--bui-passwordmanager-icon-width); + top: 0; + bottom: 0; + background-color: transparent; + cursor: pointer; + border: none; + padding: 0; + margin: 0; display: flex; align-items: center; - 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); + justify-content: center; color: var(--bui-fg-primary); - transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; - width: 100%; - height: 100%; - cursor: inherit; - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { - -webkit-appearance: none; + /* Size: small */ + &[data-size='small'] { + width: 2rem; + height: 2rem; } - - &::placeholder { - color: var(--bui-fg-secondary); - } - - &[data-focused] { - outline-color: var(--bui-border-pressed); - outline-width: 0px; - } - - &[data-hovered] { - border-color: var(--bui-border-hover); - } - - &[data-focused] { - border-color: var(--bui-border-pressed); - outline-width: 0px; - } - - &[data-invalid] { - border-color: var(--bui-fg-danger); - } - - &[data-disabled] { - opacity: 0.5; - cursor: not-allowed; - border: 1px solid var(--bui-border-disabled); - } -} - -.bui-InputAction { - position: absolute; - right: var(--bui-space-1); - top: 50%; - transform: translateY(-50%); - color: var(--bui-fg-primary); - flex-shrink: 0; - /* To animate the icon when the input is collapsed */ - transition: right 0.2s ease-in-out; - - &[data-size='small'], &[data-size='small'] svg { width: 1rem; height: 1rem; } - &[data-size='medium'], + /* Size: medium */ + &[data-size='medium'] { + width: 2.5rem; + height: 2.5rem; + } &[data-size='medium'] svg { width: 1.25rem; height: 1.25rem; } } + +/* Ensure input has enough right padding for our toggle + PM icon */ +.bui-PasswordField .bui-InputWrapper[data-size='small'] .bui-Input { + padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); +} + +.bui-PasswordField .bui-InputWrapper[data-size='medium'] .bui-Input { + padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); +} diff --git a/packages/ui/src/components/PasswordField/PasswordField.tsx b/packages/ui/src/components/PasswordField/PasswordField.tsx index 46b907c010..fc5dae1088 100644 --- a/packages/ui/src/components/PasswordField/PasswordField.tsx +++ b/packages/ui/src/components/PasswordField/PasswordField.tsx @@ -15,15 +15,18 @@ */ import { forwardRef, useEffect, useState } from 'react'; -import { Input, TextField as AriaTextField } from 'react-aria-components'; +import { + Input, + TextField as AriaTextField, + Button as RAButton, +} from 'react-aria-components'; import clsx from 'clsx'; import { FieldLabel } from '../FieldLabel'; import { FieldError } from '../FieldError'; import type { PasswordFieldProps } from './types'; import { useStyles } from '../../hooks/useStyles'; -import { Icon } from '../Icon'; -import { ButtonIcon } from '../ButtonIcon'; +import { RiEyeLine, RiEyeOffLine } from '@remixicon/react'; /** @public */ export const PasswordField = forwardRef( @@ -50,9 +53,14 @@ export const PasswordField = forwardRef( } }, [label, ariaLabel, ariaLabelledBy]); - const { classNames, dataAttributes } = useStyles('PasswordField', { - size, - }); + const { classNames: passwordFieldClassNames, dataAttributes } = useStyles( + 'PasswordField', + { + size, + }, + ); + + const { classNames: textFieldClassNames } = useStyles('TextField', {}); // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required. const secondaryLabelText = @@ -63,10 +71,11 @@ export const PasswordField = forwardRef( return ( @@ -76,29 +85,33 @@ export const PasswordField = forwardRef( description={description} />
{icon && ( )} -
- + setIsVisible(v => !v)} - icon={} - /> + className={passwordFieldClassNames.inputVisibility} + > + {isVisible ? : } +
( } }, [label, ariaLabel, ariaLabelledBy]); - useEffect(() => { - const inputType = (props as { type?: string }).type; - if (inputType === 'search') { - console.warn( - 'TextField type="search" is deprecated. Use SearchField instead.', - ); - } - if (inputType === 'password') { - console.warn( - 'TextField type="password" is deprecated. Use PasswordField instead.', - ); - } - }, [props]); - const { classNames, dataAttributes } = useStyles('TextField', { size, }); diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts index 0c34634e2d..b971ef8d26 100644 --- a/packages/ui/src/components/TextField/types.ts +++ b/packages/ui/src/components/TextField/types.ts @@ -27,18 +27,10 @@ export interface TextFieldProps * The HTML input type for the text field * * @remarks - * The values 'search' and 'password' are deprecated. Use `SearchField` for + * Use `SearchField` for * search inputs and `PasswordField` for password inputs. */ - type?: - | 'text' - | 'email' - | 'tel' - | 'url' - /** @deprecated Use `SearchField` instead */ - | 'search' - /** @deprecated Use `PasswordField` instead */ - | 'password'; + type?: 'text' | 'email' | 'tel' | 'url'; /** * An icon to render before the input */ diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts index f67ee781dc..ff91831cc4 100644 --- a/packages/ui/src/utils/componentDefinitions.ts +++ b/packages/ui/src/utils/componentDefinitions.ts @@ -296,10 +296,7 @@ export const componentDefinitions = { PasswordField: { classNames: { root: 'bui-PasswordField', - inputWrapper: 'bui-InputWrapper', - input: 'bui-Input', - inputIcon: 'bui-InputIcon', - inputAction: 'bui-InputAction', + inputVisibility: 'bui-InputVisibility', }, dataAttributes: { invalid: [true, false] as const, From ba406d91f3250125cdc1c65efe85da79d8569e4d Mon Sep 17 00:00:00 2001 From: birdhb Date: Fri, 26 Sep 2025 11:43:13 +0100 Subject: [PATCH 23/67] Update eighty-cows-care.md Signed-off-by: birdhb --- .changeset/eighty-cows-care.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/eighty-cows-care.md b/.changeset/eighty-cows-care.md index 8fd5c0adb0..e03b364449 100644 --- a/.changeset/eighty-cows-care.md +++ b/.changeset/eighty-cows-care.md @@ -1,5 +1,5 @@ --- -'@backstage/ui': patch +'@backstage/ui': minor --- -Added PasswordField to BUI with default show/hide visibility on text input +Added PasswordField to BUI with default show/hide visibility on input From c953ee97882ebc9aceebbb86ce9454592b9afe13 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Fri, 26 Sep 2025 13:55:45 +0100 Subject: [PATCH 24/67] remove formatting on style css Signed-off-by: Hermione Bird --- packages/ui/css/styles.css | 312 +++++++++++++++++-------------------- 1 file changed, 139 insertions(+), 173 deletions(-) diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 2d3397f4a1..0554276dc2 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -1,9 +1,6 @@ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */ @layer base { - - *, - :before, - :after { + *, :before, :after { box-sizing: border-box; } @@ -18,15 +15,11 @@ margin: 0; } - b, - strong { + b, strong { font-weight: bolder; } - code, - kbd, - samp, - pre { + code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 1em; } @@ -35,8 +28,7 @@ font-size: 80%; } - sub, - sup { + sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; @@ -55,21 +47,14 @@ border-color: currentColor; } - button, - input, - optgroup, - select, - textarea { + button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: 100%; line-height: 1.15; } - button, - [type="button"], - [type="reset"], - [type="submit"] { + button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } @@ -81,8 +66,7 @@ vertical-align: baseline; } - ::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } @@ -173,7 +157,7 @@ padding: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-p { padding: var(--p-xs); } @@ -243,7 +227,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-p { padding: var(--p-sm); } @@ -313,7 +297,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-p { padding: var(--p-md); } @@ -383,7 +367,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-p { padding: var(--p-lg); } @@ -453,7 +437,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-p { padding: var(--p-xl); } @@ -591,7 +575,7 @@ padding-left: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-pl { padding-left: var(--pl-xs); } @@ -661,7 +645,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-pl { padding-left: var(--pl-sm); } @@ -731,7 +715,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-pl { padding-left: var(--pl-md); } @@ -801,7 +785,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-pl { padding-left: var(--pl-lg); } @@ -871,7 +855,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-pl { padding-left: var(--pl-xl); } @@ -1009,7 +993,7 @@ padding-right: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-pr { padding-right: var(--pr-xs); } @@ -1079,7 +1063,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-pr { padding-right: var(--pr-sm); } @@ -1149,7 +1133,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-pr { padding-right: var(--pr-md); } @@ -1219,7 +1203,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-pr { padding-right: var(--pr-lg); } @@ -1289,7 +1273,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-pr { padding-right: var(--pr-xl); } @@ -1427,7 +1411,7 @@ padding-top: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-pt { padding-top: var(--pt-xs); } @@ -1497,7 +1481,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-pt { padding-top: var(--pt-sm); } @@ -1567,7 +1551,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-pt { padding-top: var(--pt-md); } @@ -1637,7 +1621,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-pt { padding-top: var(--pt-lg); } @@ -1707,7 +1691,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-pt { padding-top: var(--pt-xl); } @@ -1845,7 +1829,7 @@ padding-bottom: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-pb { padding-bottom: var(--pb-xs); } @@ -1915,7 +1899,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-pb { padding-bottom: var(--pb-sm); } @@ -1985,7 +1969,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-pb { padding-bottom: var(--pb-md); } @@ -2055,7 +2039,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-pb { padding-bottom: var(--pb-lg); } @@ -2125,7 +2109,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-pb { padding-bottom: var(--pb-xl); } @@ -2280,7 +2264,7 @@ padding-bottom: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-py { padding-top: var(--py-xs); padding-bottom: var(--py-xs); @@ -2367,7 +2351,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-py { padding-top: var(--py-sm); padding-bottom: var(--py-sm); @@ -2454,7 +2438,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-py { padding-top: var(--py-md); padding-bottom: var(--py-md); @@ -2541,7 +2525,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-py { padding-top: var(--py-lg); padding-bottom: var(--py-lg); @@ -2628,7 +2612,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-py { padding-top: var(--py-xl); padding-bottom: var(--py-xl); @@ -2800,7 +2784,7 @@ padding-right: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-px { padding-left: var(--px-xs); padding-right: var(--px-xs); @@ -2887,7 +2871,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-px { padding-left: var(--px-sm); padding-right: var(--px-sm); @@ -2974,7 +2958,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-px { padding-left: var(--px-md); padding-right: var(--px-md); @@ -3061,7 +3045,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-px { padding-left: var(--px-lg); padding-right: var(--px-lg); @@ -3148,7 +3132,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-px { padding-left: var(--px-xl); padding-right: var(--px-xl); @@ -3303,7 +3287,7 @@ margin: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-m { margin: var(--p-xs); } @@ -3373,7 +3357,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-m { margin: var(--p-sm); } @@ -3443,7 +3427,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-m { margin: var(--p-md); } @@ -3513,7 +3497,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-m { margin: var(--p-lg); } @@ -3583,7 +3567,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-m { margin: var(--p-xl); } @@ -3721,7 +3705,7 @@ margin-left: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-ml { margin-left: var(--pl-xs); } @@ -3791,7 +3775,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-ml { margin-left: var(--pl-sm); } @@ -3861,7 +3845,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-ml { margin-left: var(--pl-md); } @@ -3931,7 +3915,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-ml { margin-left: var(--pl-lg); } @@ -4001,7 +3985,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-ml { margin-left: var(--pl-xl); } @@ -4139,7 +4123,7 @@ margin-right: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-mr { margin-right: var(--pr-xs); } @@ -4209,7 +4193,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-mr { margin-right: var(--pr-sm); } @@ -4279,7 +4263,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-mr { margin-right: var(--pr-md); } @@ -4349,7 +4333,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-mr { margin-right: var(--pr-lg); } @@ -4419,7 +4403,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-mr { margin-right: var(--pr-xl); } @@ -4557,7 +4541,7 @@ margin-top: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-mt { margin-top: var(--pt-xs); } @@ -4627,7 +4611,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-mt { margin-top: var(--pt-sm); } @@ -4697,7 +4681,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-mt { margin-top: var(--pt-md); } @@ -4767,7 +4751,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-mt { margin-top: var(--pt-lg); } @@ -4837,7 +4821,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-mt { margin-top: var(--pt-xl); } @@ -4975,7 +4959,7 @@ margin-bottom: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-mb { margin-bottom: var(--pb-xs); } @@ -5045,7 +5029,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-mb { margin-bottom: var(--pb-sm); } @@ -5115,7 +5099,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-mb { margin-bottom: var(--pb-md); } @@ -5185,7 +5169,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-mb { margin-bottom: var(--pb-lg); } @@ -5255,7 +5239,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-mb { margin-bottom: var(--pb-xl); } @@ -5410,7 +5394,7 @@ margin-bottom: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-my { margin-top: var(--py-xs); margin-bottom: var(--py-xs); @@ -5497,7 +5481,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-my { margin-top: var(--py-sm); margin-bottom: var(--py-sm); @@ -5584,7 +5568,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-my { margin-top: var(--py-md); margin-bottom: var(--py-md); @@ -5671,7 +5655,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-my { margin-top: var(--py-lg); margin-bottom: var(--py-lg); @@ -5758,7 +5742,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-my { margin-top: var(--py-xl); margin-bottom: var(--py-xl); @@ -5930,7 +5914,7 @@ margin-right: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-mx { margin-left: var(--px-xs); margin-right: var(--px-xs); @@ -6017,7 +6001,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-mx { margin-left: var(--px-sm); margin-right: var(--px-sm); @@ -6104,7 +6088,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-mx { margin-left: var(--px-md); margin-right: var(--px-md); @@ -6191,7 +6175,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-mx { margin-left: var(--px-lg); margin-right: var(--px-lg); @@ -6278,7 +6262,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-mx { margin-left: var(--px-xl); margin-right: var(--px-xl); @@ -6381,7 +6365,7 @@ display: block; } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-display-none { display: none; } @@ -6399,7 +6383,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-display-none { display: none; } @@ -6417,7 +6401,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-display-none { display: none; } @@ -6435,7 +6419,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-display-none { display: none; } @@ -6453,7 +6437,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-display-none { display: none; } @@ -6483,7 +6467,7 @@ max-width: var(--max-width); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-w { width: var(--width); } @@ -6497,7 +6481,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-w { width: var(--width); } @@ -6511,7 +6495,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-w { width: var(--width); } @@ -6525,7 +6509,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-w { width: var(--width); } @@ -6539,7 +6523,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-w { width: var(--width); } @@ -6565,7 +6549,7 @@ max-height: var(--max-height); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-h { height: var(--height); } @@ -6579,7 +6563,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-h { height: var(--height); } @@ -6593,7 +6577,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-h { height: var(--height); } @@ -6607,7 +6591,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-h { height: var(--height); } @@ -6621,7 +6605,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-h { height: var(--height); } @@ -6655,7 +6639,7 @@ position: static; } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-position-absolute { position: absolute; } @@ -6677,7 +6661,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-position-absolute { position: absolute; } @@ -6699,7 +6683,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-position-absolute { position: absolute; } @@ -6721,7 +6705,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-position-absolute { position: absolute; } @@ -6743,7 +6727,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-position-absolute { position: absolute; } @@ -7033,7 +7017,7 @@ grid-row: span auto / span auto; } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -7303,7 +7287,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -7573,7 +7557,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -7843,7 +7827,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -8113,7 +8097,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -8451,7 +8435,7 @@ gap: var(--bui-space-14); } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-gap { gap: var(--gap-xs); } @@ -8521,7 +8505,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-gap { gap: var(--gap-sm); } @@ -8591,7 +8575,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-gap { gap: var(--gap-md); } @@ -8661,7 +8645,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-gap { gap: var(--gap-lg); } @@ -8731,7 +8715,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-gap { gap: var(--gap-xl); } @@ -8853,7 +8837,7 @@ flex-direction: column-reverse; } -@media (width >=640px) { +@media (width >= 640px) { .xs\:bui-align-start { align-items: start; } @@ -8903,7 +8887,7 @@ } } -@media (width >=768px) { +@media (width >= 768px) { .sm\:bui-align-start { align-items: start; } @@ -8953,7 +8937,7 @@ } } -@media (width >=1024px) { +@media (width >= 1024px) { .md\:bui-align-start { align-items: start; } @@ -9003,7 +8987,7 @@ } } -@media (width >=1280px) { +@media (width >= 1280px) { .lg\:bui-align-start { align-items: start; } @@ -9053,7 +9037,7 @@ } } -@media (width >=1536px) { +@media (width >= 1536px) { .xl\:bui-align-start { align-items: start; } @@ -9456,8 +9440,7 @@ overflow: auto; } -.bui-CardHeader, -.bui-CardFooter { +.bui-CardHeader, .bui-CardFooter { padding-inline: var(--bui-space-3); } @@ -9520,8 +9503,7 @@ display: flex; overflow: hidden; - &[data-starting-style], - &[data-ending-style] { + &[data-starting-style], &[data-ending-style] { height: 0; } } @@ -9533,7 +9515,7 @@ transition: padding .2s ease-in-out; } -@media (width >=640px) { +@media (width >= 640px) { .bui-Container { padding-inline: var(--bui-space-5); } @@ -9681,8 +9663,7 @@ margin-left: -8px; } -.bui-HeaderPageControls, -.bui-HeaderPageBreadcrumbs { +.bui-HeaderPageControls, .bui-HeaderPageBreadcrumbs { align-items: center; gap: var(--bui-space-2); flex-direction: row; @@ -9723,8 +9704,7 @@ display: flex; overflow: hidden; - &[data-entering], - &[data-exiting] { + &[data-entering], &[data-exiting] { transform: var(--origin); opacity: 0; } @@ -9780,8 +9760,7 @@ outline: none; display: flex; - &[data-focused], - &[data-open] { + &[data-focused], &[data-open] { background: var(--bui-bg-surface-2); color: var(--bui-fg-primary); } @@ -9796,7 +9775,7 @@ } &[data-has-submenu] { - &>.bui-MenuItemArrow { + & > .bui-MenuItemArrow { display: block; } } @@ -9821,7 +9800,7 @@ } &[data-selected] .bui-MenuItemListBoxCheck { - &>svg { + & > svg { opacity: 1; color: var(--bui-fg-primary); } @@ -9835,7 +9814,7 @@ height: 1rem; display: flex; - &>svg { + & > svg { opacity: 0; width: 1rem; height: 1rem; @@ -9847,7 +9826,7 @@ gap: var(--bui-space-2); display: flex; - &>svg { + & > svg { width: 1rem; height: 1rem; } @@ -9858,7 +9837,7 @@ height: 1rem; display: none; - &>svg { + & > svg { width: 1rem; height: 1rem; } @@ -9919,8 +9898,7 @@ align-items: center; display: flex; - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { + &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; } } @@ -9941,7 +9919,7 @@ top: 0; bottom: 0; - &>svg { + & > svg { width: 1rem; height: 1rem; } @@ -10037,8 +10015,7 @@ } } - &[data-invalid]:before, - &[data-invalid][data-selected]:before { + &[data-invalid]:before, &[data-invalid][data-selected]:before { border-color: var(--bui-border-danger); } @@ -10132,8 +10109,7 @@ display: inline-flex; } -.bui-TableCellIcon, -.bui-TableCellIcon svg { +.bui-TableCellIcon, .bui-TableCellIcon svg { color: var(--bui-fg-primary); align-items: center; display: inline-flex; @@ -10259,8 +10235,8 @@ .bui-TabActive { content: ""; - left: calc(var(--active-tab-left) + var(--bui-space-2)); - width: calc(var(--active-tab-width) - var(--bui-space-4)); + 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; @@ -10273,9 +10249,9 @@ .bui-TabHovered { content: ""; left: var(--hovered-tab-left); - top: calc(var(--hovered-tab-top) + 4px); + top: calc(var(--hovered-tab-top) + 4px); width: var(--hovered-tab-width); - height: calc(var(--hovered-tab-height) - 8px); + 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; @@ -10443,11 +10419,7 @@ 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"] { +.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; } @@ -10554,14 +10526,12 @@ top: 50%; transform: translateY(-50%); - &[data-size="small"], - &[data-size="small"] svg { + &[data-size="small"], &[data-size="small"] svg { width: 1rem; height: 1rem; } - &[data-size="medium"], - &[data-size="medium"] svg { + &[data-size="medium"], &[data-size="medium"] svg { width: 1.25rem; height: 1.25rem; } @@ -10583,8 +10553,7 @@ transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; display: flex; - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { + &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; } @@ -10763,8 +10732,7 @@ transform: translate3d(0, 0, 0); box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; - &[data-entering], - &[data-exiting] { + &[data-entering], &[data-exiting] { transform: var(--origin); opacity: 0; } @@ -10874,8 +10842,7 @@ transition: opacity .15s .3s; display: flex; - &[data-hovering], - &[data-scrolling] { + &[data-hovering], &[data-scrolling] { opacity: 1; transition-duration: 75ms; transition-delay: 0s; @@ -10956,8 +10923,7 @@ border-color: var(--bui-fg-danger); } - &[data-invalid]:hover, - &[data-invalid]:focus-visible { + &[data-invalid]:hover, &[data-invalid]:focus-visible { border-width: 2px; } @@ -11110,4 +11076,4 @@ transition: all .2s; display: block; } -} \ No newline at end of file +} From b5ee96aaaec19213bdd2ad9875ed07a3f4e2be50 Mon Sep 17 00:00:00 2001 From: birdhb Date: Fri, 26 Sep 2025 14:30:13 +0100 Subject: [PATCH 25/67] Update eighty-cows-care.md Signed-off-by: birdhb --- .changeset/eighty-cows-care.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eighty-cows-care.md b/.changeset/eighty-cows-care.md index e03b364449..73ec239b36 100644 --- a/.changeset/eighty-cows-care.md +++ b/.changeset/eighty-cows-care.md @@ -2,4 +2,4 @@ '@backstage/ui': minor --- -Added PasswordField to BUI with default show/hide visibility on input +**Breaking** We are adding a new component `PasswordField`. We will be removing support for types `password` and `search` on `TextField`. From 683574f888860c1fff2ea693ee797d60f680295d Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Fri, 26 Sep 2025 15:28:01 +0100 Subject: [PATCH 26/67] format componentDefinitions Signed-off-by: Hermione Bird --- packages/ui/report.api.md | 16 ++++++---------- packages/ui/src/utils/componentDefinitions.ts | 16 ++++++---------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 00dd6d4d42..c3aca2718d 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -525,6 +525,12 @@ export const componentDefinitions: { readonly emptyState: 'bui-MenuEmptyState'; }; }; + readonly PasswordField: { + readonly classNames: { + readonly root: 'bui-PasswordField'; + readonly inputVisibility: 'bui-InputVisibility'; + }; + }; readonly Popover: { readonly classNames: { readonly root: 'bui-Popover'; @@ -650,16 +656,6 @@ export const componentDefinitions: { readonly disabled: readonly [true, false]; }; }; - readonly PasswordField: { - readonly classNames: { - readonly root: 'bui-PasswordField'; - readonly inputVisibility: 'bui-InputVisibility'; - }; - readonly dataAttributes: { - readonly invalid: readonly [true, false]; - readonly disabled: readonly [true, false]; - }; - }; readonly Tooltip: { readonly classNames: { readonly tooltip: 'bui-Tooltip'; diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts index ff91831cc4..931bfacca7 100644 --- a/packages/ui/src/utils/componentDefinitions.ts +++ b/packages/ui/src/utils/componentDefinitions.ts @@ -174,6 +174,12 @@ export const componentDefinitions = { emptyState: 'bui-MenuEmptyState', }, }, + PasswordField: { + classNames: { + root: 'bui-PasswordField', + inputVisibility: 'bui-InputVisibility', + }, + }, Popover: { classNames: { root: 'bui-Popover', @@ -293,16 +299,6 @@ export const componentDefinitions = { disabled: [true, false] as const, }, }, - PasswordField: { - classNames: { - root: 'bui-PasswordField', - inputVisibility: 'bui-InputVisibility', - }, - dataAttributes: { - invalid: [true, false] as const, - disabled: [true, false] as const, - }, - }, Tooltip: { classNames: { tooltip: 'bui-Tooltip', From 9912c21afa29287a2f2507b389efcaff1db388d2 Mon Sep 17 00:00:00 2001 From: Hermione Bird Date: Fri, 26 Sep 2025 15:40:19 +0100 Subject: [PATCH 27/67] fix ci install build bui Signed-off-by: Hermione Bird --- docs-ui/public/theme-backstage.css | 2 +- packages/ui/css/styles.css | 117 +++++++++++++---------------- 2 files changed, 54 insertions(+), 65 deletions(-) diff --git a/docs-ui/public/theme-backstage.css b/docs-ui/public/theme-backstage.css index 69cd0dbd31..9d9c282f5c 100644 --- a/docs-ui/public/theme-backstage.css +++ b/docs-ui/public/theme-backstage.css @@ -1,2 +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-baseline{align-items:baseline}.bui-align-stretch{align-items:stretch}.bui-jc-start{justify-content:start}.bui-jc-center{justify-content:center}.bui-jc-end{justify-content:end}.bui-jc-between{justify-content:space-between}.bui-fd-row{flex-direction:row}.bui-fd-column{flex-direction:column}.bui-fd-row-reverse{flex-direction:row-reverse}.bui-fd-column-reverse{flex-direction:column-reverse}@media (width>=640px){.xs\:bui-align-start{align-items:start}.xs\:bui-align-center{align-items:center}.xs\:bui-align-end{align-items:end}.xs\:bui-align-stretch{align-items:stretch}.xs\:bui-jc-start{justify-content:start}.xs\:bui-jc-center{justify-content:center}.xs\:bui-jc-end{justify-content:end}.xs\:bui-jc-between{justify-content:space-between}.xs\:bui-fd-row{flex-direction:row}.xs\:bui-fd-column{flex-direction:column}.xs\:bui-fd-row-reverse{flex-direction:row-reverse}.xs\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=768px){.sm\:bui-align-start{align-items:start}.sm\:bui-align-center{align-items:center}.sm\:bui-align-end{align-items:end}.sm\:bui-align-stretch{align-items:stretch}.sm\:bui-jc-start{justify-content:start}.sm\:bui-jc-center{justify-content:center}.sm\:bui-jc-end{justify-content:end}.sm\:bui-jc-between{justify-content:space-between}.sm\:bui-fd-row{flex-direction:row}.sm\:bui-fd-column{flex-direction:column}.sm\:bui-fd-row-reverse{flex-direction:row-reverse}.sm\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1024px){.md\:bui-align-start{align-items:start}.md\:bui-align-center{align-items:center}.md\:bui-align-end{align-items:end}.md\:bui-align-stretch{align-items:stretch}.md\:bui-jc-start{justify-content:start}.md\:bui-jc-center{justify-content:center}.md\:bui-jc-end{justify-content:end}.md\:bui-jc-between{justify-content:space-between}.md\:bui-fd-row{flex-direction:row}.md\:bui-fd-column{flex-direction:column}.md\:bui-fd-row-reverse{flex-direction:row-reverse}.md\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1280px){.lg\:bui-align-start{align-items:start}.lg\:bui-align-center{align-items:center}.lg\:bui-align-end{align-items:end}.lg\:bui-align-stretch{align-items:stretch}.lg\:bui-jc-start{justify-content:start}.lg\:bui-jc-center{justify-content:center}.lg\:bui-jc-end{justify-content:end}.lg\:bui-jc-between{justify-content:space-between}.lg\:bui-fd-row{flex-direction:row}.lg\:bui-fd-column{flex-direction:column}.lg\:bui-fd-row-reverse{flex-direction:row-reverse}.lg\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1536px){.xl\:bui-align-start{align-items:start}.xl\:bui-align-center{align-items:center}.xl\:bui-align-end{align-items:end}.xl\:bui-align-stretch{align-items:stretch}.xl\:bui-jc-start{justify-content:start}.xl\:bui-jc-center{justify-content:center}.xl\:bui-jc-end{justify-content:end}.xl\:bui-jc-between{justify-content:space-between}.xl\:bui-fd-row{flex-direction:row}.xl\:bui-fd-column{flex-direction:column}.xl\:bui-fd-row-reverse{flex-direction:row-reverse}.xl\:bui-fd-column-reverse{flex-direction:column-reverse}}: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-MenuPopover{border:1px solid var(--bui-border);border-radius:var(--bui-radius-2);background:var(--bui-bg-surface-1);color:var(--bui-fg-primary);outline:none;flex-direction:column;min-height:0;transition:transform .2s,opacity .2s;display:flex;overflow:hidden;&[data-entering],&[data-exiting]{transform:var(--origin);opacity:0}&[data-placement=top]{--origin:translateY(8px)}&[data-placement=bottom]{--origin:translateY(-8px)}&[data-placement=right]{--origin:translateX(-8px)}&[data-placement=left]{--origin:translateX(8px)}}.bui-MenuContent{max-height:inherit;box-sizing:border-box;padding:var(--bui-space-1);outline:none;min-width:150px;overflow:auto}.bui-MenuPopover .bui-ScrollAreaRoot{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.bui-MenuPopover .bui-ScrollAreaScrollbar{margin-inline:var(--bui-space-1_5)}.bui-MenuItem{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&[data-focused],&[data-open]{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-color=danger]{color:var(--bui-fg-danger)}&[data-color=danger][data-focused]{background:var(--bui-bg-danger);color:var(--bui-fg-danger)}&[data-has-submenu]{&>.bui-MenuItemArrow{display:block}}}.bui-MenuItemListBox{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&:hover{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-selected] .bui-MenuItemListBoxCheck{&>svg{opacity:1;color:var(--bui-fg-primary)}}}.bui-MenuItemListBoxCheck{justify-content:center;align-items:center;width:1rem;height:1rem;display:flex;&>svg{opacity:0;width:1rem;height:1rem}}.bui-MenuItemContent{align-items:center;gap:var(--bui-space-2);display:flex;&>svg{width:1rem;height:1rem}}.bui-MenuItemArrow{width:1rem;height:1rem;display:none;&>svg{width:1rem;height:1rem}}.bui-MenuSection{&:first-child .bui-MenuSectionHeader{padding-top:0}}.bui-MenuSectionHeader{height:2rem;padding-top:var(--bui-space-3);padding-left:var(--bui-space-2);color:var(--bui-fg-primary);font-size:var(--bui-font-size-1);letter-spacing:.05rem;text-transform:uppercase;align-items:center;font-weight:700;display:flex}.bui-MenuSeparator{background:var(--bui-border);height:1px;margin-inline:var(--bui-space-1_5);margin-block:var(--bui-space-1)}.bui-MenuSearchField{font-family:var(--bui-font-regular);flex-shrink:0;width:100%;position:relative;&[data-empty]{& .bui-MenuSearchFieldClear{display:none}}}.bui-MenuSearchFieldInput{padding:0 var(--bui-space-3);border:none;border-bottom: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:2rem;cursor:inherit;outline:none;align-items:center;display:flex;&::-webkit-search-cancel-button,&::-webkit-search-decoration{-webkit-appearance:none}}.bui-MenuSearchFieldClear{right:var(--bui-space-2);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;&>svg{width:1rem;height:1rem}}.bui-MenuEmptyState{padding:var(--bui-space-1);color:var(--bui-fg-secondary);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular)}.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-TagList{gap:var(--bui-space-2);flex-wrap:wrap;display:flex}.bui-Tag{color:var(--bui-fg-primary);background-color:var(--bui-gray-2);border-radius:var(--bui-radius-2);font-weight:var(--bui-font-weight-regular);justify-content:center;align-items:center;gap:var(--bui-space-1);box-sizing:border-box;transition-property:background-color,box-shadow,color;transition-duration:.2s;transition-timing-function:ease-in-out;display:flex}.bui-Tag[data-size=small]{height:26px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-1)}.bui-Tag[data-size=medium]{height:32px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-2)}.bui-Tag[data-hovered]{background-color:var(--bui-gray-3);cursor:pointer}.bui-Tag[data-focus-visible]{outline:2px solid var(--bui-ring);outline-offset:1px}.bui-Tag[data-selected]{box-shadow:inset 0 0 0 1px var(--bui-gray-8)}.bui-Tag[data-disabled]{color:var(--bui-fg-disabled);cursor:not-allowed}.bui-TagRemoveButton{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;width:1rem;height:1rem;margin:0;padding:0}.bui-TagIcon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:flex;& svg{width:1rem;height:1rem}}.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-PasswordField{font-family:var(--bui-font-regular);--bui-passwordmanager-icon-width:var(--bui-space-1);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-InputAction{right:var(--bui-space-1);color:var(--bui-fg-primary);flex-direction:row;flex-shrink:0;transition:right .2s ease-in-out;display:flex;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-InputVisibility{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;&[data-size=small]{width:2rem;height:2rem}&[data-size=small] svg{width:1rem;height:1rem}&[data-size=medium]{width:2.5rem;height:2.5rem}&[data-size=medium] svg{width:1.25rem;height:1.25rem}}.bui-PasswordField .bui-InputWrapper[data-size=small] .bui-Input{padding-right:calc(2rem + var(--bui-passwordmanager-icon-width))}.bui-PasswordField .bui-InputWrapper[data-size=medium] .bui-Input{padding-right:calc(2.5rem + var(--bui-passwordmanager-icon-width))}.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{flex:1 0;&[data-empty]{& .bui-InputClear{display:none}}&[data-start-collapsed=true]{flex:0 auto;padding:0;transition:flex-basis .3s ease-in-out;&[data-collapsed=true]{flex-basis:200px}&[data-collapsed=false]{cursor:pointer;&[data-size=medium]{flex-basis:2.5rem;height:2.5rem}&[data-size=small]{flex-basis:2rem;height:2rem}&[data-size=medium] .bui-Input{&::placeholder{opacity:0}}&[data-size=small] .bui-Input{&::placeholder{opacity:0}}& .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:0}}}}}.bui-SearchField .bui-Input{transition:padding .3s ease-in-out,border-color .2s ease-in-out,outline-color .2s ease-in-out;&[data-hovered]{border-color:var(--bui-border-hover)}&[data-focused]{border-color:var(--bui-border-pressed);outline-width:0}}.bui-SearchField .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:var(--bui-space-6)}}.bui-SearchField .bui-InputIcon{justify-content:center;display:flex;left:0;&[data-size=small]{width:var(--bui-space-8)}&[data-size=medium]{width:var(--bui-space-10)}}.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 +@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-baseline{align-items:baseline}.bui-align-stretch{align-items:stretch}.bui-jc-start{justify-content:start}.bui-jc-center{justify-content:center}.bui-jc-end{justify-content:end}.bui-jc-between{justify-content:space-between}.bui-fd-row{flex-direction:row}.bui-fd-column{flex-direction:column}.bui-fd-row-reverse{flex-direction:row-reverse}.bui-fd-column-reverse{flex-direction:column-reverse}@media (width>=640px){.xs\:bui-align-start{align-items:start}.xs\:bui-align-center{align-items:center}.xs\:bui-align-end{align-items:end}.xs\:bui-align-stretch{align-items:stretch}.xs\:bui-jc-start{justify-content:start}.xs\:bui-jc-center{justify-content:center}.xs\:bui-jc-end{justify-content:end}.xs\:bui-jc-between{justify-content:space-between}.xs\:bui-fd-row{flex-direction:row}.xs\:bui-fd-column{flex-direction:column}.xs\:bui-fd-row-reverse{flex-direction:row-reverse}.xs\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=768px){.sm\:bui-align-start{align-items:start}.sm\:bui-align-center{align-items:center}.sm\:bui-align-end{align-items:end}.sm\:bui-align-stretch{align-items:stretch}.sm\:bui-jc-start{justify-content:start}.sm\:bui-jc-center{justify-content:center}.sm\:bui-jc-end{justify-content:end}.sm\:bui-jc-between{justify-content:space-between}.sm\:bui-fd-row{flex-direction:row}.sm\:bui-fd-column{flex-direction:column}.sm\:bui-fd-row-reverse{flex-direction:row-reverse}.sm\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1024px){.md\:bui-align-start{align-items:start}.md\:bui-align-center{align-items:center}.md\:bui-align-end{align-items:end}.md\:bui-align-stretch{align-items:stretch}.md\:bui-jc-start{justify-content:start}.md\:bui-jc-center{justify-content:center}.md\:bui-jc-end{justify-content:end}.md\:bui-jc-between{justify-content:space-between}.md\:bui-fd-row{flex-direction:row}.md\:bui-fd-column{flex-direction:column}.md\:bui-fd-row-reverse{flex-direction:row-reverse}.md\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1280px){.lg\:bui-align-start{align-items:start}.lg\:bui-align-center{align-items:center}.lg\:bui-align-end{align-items:end}.lg\:bui-align-stretch{align-items:stretch}.lg\:bui-jc-start{justify-content:start}.lg\:bui-jc-center{justify-content:center}.lg\:bui-jc-end{justify-content:end}.lg\:bui-jc-between{justify-content:space-between}.lg\:bui-fd-row{flex-direction:row}.lg\:bui-fd-column{flex-direction:column}.lg\:bui-fd-row-reverse{flex-direction:row-reverse}.lg\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1536px){.xl\:bui-align-start{align-items:start}.xl\:bui-align-center{align-items:center}.xl\:bui-align-end{align-items:end}.xl\:bui-align-stretch{align-items:stretch}.xl\:bui-jc-start{justify-content:start}.xl\:bui-jc-center{justify-content:center}.xl\:bui-jc-end{justify-content:end}.xl\:bui-jc-between{justify-content:space-between}.xl\:bui-fd-row{flex-direction:row}.xl\:bui-fd-column{flex-direction:column}.xl\:bui-fd-row-reverse{flex-direction:row-reverse}.xl\:bui-fd-column-reverse{flex-direction:column-reverse}}: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-MenuPopover{border:1px solid var(--bui-border);border-radius:var(--bui-radius-2);background:var(--bui-bg-surface-1);color:var(--bui-fg-primary);outline:none;flex-direction:column;min-height:0;transition:transform .2s,opacity .2s;display:flex;overflow:hidden;&[data-entering],&[data-exiting]{transform:var(--origin);opacity:0}&[data-placement=top]{--origin:translateY(8px)}&[data-placement=bottom]{--origin:translateY(-8px)}&[data-placement=right]{--origin:translateX(-8px)}&[data-placement=left]{--origin:translateX(8px)}}.bui-MenuContent{max-height:inherit;box-sizing:border-box;padding:var(--bui-space-1);outline:none;min-width:150px;overflow:auto}.bui-MenuPopover .bui-ScrollAreaRoot{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.bui-MenuPopover .bui-ScrollAreaScrollbar{margin-inline:var(--bui-space-1_5)}.bui-MenuItem{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&[data-focused],&[data-open]{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-color=danger]{color:var(--bui-fg-danger)}&[data-color=danger][data-focused]{background:var(--bui-bg-danger);color:var(--bui-fg-danger)}&[data-has-submenu]{&>.bui-MenuItemArrow{display:block}}}.bui-MenuItemListBox{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&:hover{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-selected] .bui-MenuItemListBoxCheck{&>svg{opacity:1;color:var(--bui-fg-primary)}}}.bui-MenuItemListBoxCheck{justify-content:center;align-items:center;width:1rem;height:1rem;display:flex;&>svg{opacity:0;width:1rem;height:1rem}}.bui-MenuItemContent{align-items:center;gap:var(--bui-space-2);display:flex;&>svg{width:1rem;height:1rem}}.bui-MenuItemArrow{width:1rem;height:1rem;display:none;&>svg{width:1rem;height:1rem}}.bui-MenuSection{&:first-child .bui-MenuSectionHeader{padding-top:0}}.bui-MenuSectionHeader{height:2rem;padding-top:var(--bui-space-3);padding-left:var(--bui-space-2);color:var(--bui-fg-primary);font-size:var(--bui-font-size-1);letter-spacing:.05rem;text-transform:uppercase;align-items:center;font-weight:700;display:flex}.bui-MenuSeparator{background:var(--bui-border);height:1px;margin-inline:var(--bui-space-1_5);margin-block:var(--bui-space-1)}.bui-MenuSearchField{font-family:var(--bui-font-regular);flex-shrink:0;width:100%;position:relative;&[data-empty]{& .bui-MenuSearchFieldClear{display:none}}}.bui-MenuSearchFieldInput{padding:0 var(--bui-space-3);border:none;border-bottom: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:2rem;cursor:inherit;outline:none;align-items:center;display:flex;&::-webkit-search-cancel-button,&::-webkit-search-decoration{-webkit-appearance:none}}.bui-MenuSearchFieldClear{right:var(--bui-space-2);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;&>svg{width:1rem;height:1rem}}.bui-MenuEmptyState{padding:var(--bui-space-1);color:var(--bui-fg-secondary);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular)}.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-TagList{gap:var(--bui-space-2);flex-wrap:wrap;display:flex}.bui-Tag{color:var(--bui-fg-primary);background-color:var(--bui-gray-2);border-radius:var(--bui-radius-2);font-weight:var(--bui-font-weight-regular);justify-content:center;align-items:center;gap:var(--bui-space-1);box-sizing:border-box;transition-property:background-color,box-shadow,color;transition-duration:.2s;transition-timing-function:ease-in-out;display:flex}.bui-Tag[data-size=small]{height:26px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-1)}.bui-Tag[data-size=medium]{height:32px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-2)}.bui-Tag[data-hovered]{background-color:var(--bui-gray-3);cursor:pointer}.bui-Tag[data-focus-visible]{outline:2px solid var(--bui-ring);outline-offset:1px}.bui-Tag[data-selected]{box-shadow:inset 0 0 0 1px var(--bui-gray-8)}.bui-Tag[data-disabled]{color:var(--bui-fg-disabled);cursor:not-allowed}.bui-TagRemoveButton{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;width:1rem;height:1rem;margin:0;padding:0}.bui-TagIcon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:flex;& svg{width:1rem;height:1rem}}.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-PasswordField{font-family:var(--bui-font-regular);--bui-passwordmanager-icon-width:var(--bui-space-1);flex-direction:column;flex-shrink:0;width:100%;display:flex}.bui-InputVisibility{right:var(--bui-passwordmanager-icon-width);cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:absolute;top:0;bottom:0;&[data-size=small]{width:2rem;height:2rem}&[data-size=small] svg{width:1rem;height:1rem}&[data-size=medium]{width:2.5rem;height:2.5rem}&[data-size=medium] svg{width:1.25rem;height:1.25rem}}.bui-PasswordField .bui-InputWrapper[data-size=small] .bui-Input{padding-right:calc(2rem + var(--bui-passwordmanager-icon-width))}.bui-PasswordField .bui-InputWrapper[data-size=medium] .bui-Input{padding-right:calc(2.5rem + var(--bui-passwordmanager-icon-width))}.bui-SearchField{flex:1 0;&[data-empty]{& .bui-InputClear{display:none}}&[data-start-collapsed=true]{flex:0 auto;padding:0;transition:flex-basis .3s ease-in-out;&[data-collapsed=true]{flex-basis:200px}&[data-collapsed=false]{cursor:pointer;&[data-size=medium]{flex-basis:2.5rem;height:2.5rem}&[data-size=small]{flex-basis:2rem;height:2rem}&[data-size=medium] .bui-Input{&::placeholder{opacity:0}}&[data-size=small] .bui-Input{&::placeholder{opacity:0}}& .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:0}}}}}.bui-SearchField .bui-Input{transition:padding .3s ease-in-out,border-color .2s ease-in-out,outline-color .2s ease-in-out;&[data-hovered]{border-color:var(--bui-border-hover)}&[data-focused]{border-color:var(--bui-border-pressed);outline-width:0}}.bui-SearchField .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:var(--bui-space-6)}}.bui-SearchField .bui-InputIcon{justify-content:center;display:flex;left:0;&[data-size=small]{width:var(--bui-space-8)}&[data-size=medium]{width:var(--bui-space-10)}}.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/packages/ui/css/styles.css b/packages/ui/css/styles.css index 0554276dc2..d93ba87829 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -10431,16 +10431,6 @@ display: flex; } -.bui-PasswordField { - font-family: var(--bui-font-regular); - flex-direction: column; - flex-shrink: 0; - width: 100%; - display: flex; - /* Reserve space for browser/password manager icon (e.g. 1Password) */ - --bui-passwordmanager-icon-width: var(--bui-space-1); -} - .bui-InputWrapper { position: relative; @@ -10461,60 +10451,6 @@ } } -.bui-InputAction { - position: absolute; - display: flex; - flex-direction: row; - right: var(--bui-space-1); - top: 50%; - transform: translateY(-50%); - color: var(--bui-fg-primary); - flex-shrink: 0; - /* To animate the icon when the input is collapsed */ - transition: right 0.2s ease-in-out; - - &[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-InputVisibility { - background-color: transparent; - cursor: pointer; - border: none; - padding: 0; - margin: 0; - display: flex; - align-items: center; - justify-content: center; - color: var(--bui-fg-primary); - - /* Size: small */ - &[data-size="small"] { width: 2rem; height: 2rem; } - &[data-size="small"] svg { width: 1rem; height: 1rem; } - - /* Size: medium */ - &[data-size="medium"] { width: 2.5rem; height: 2.5rem; } - &[data-size="medium"] svg { width: 1.25rem; height: 1.25rem; } -} - -/* Ensure input has enough right padding for our toggle + PM icon */ -.bui-PasswordField .bui-InputWrapper[data-size='small'] .bui-Input { - padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); -} - -.bui-PasswordField .bui-InputWrapper[data-size='medium'] .bui-Input { - padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); -} - .bui-InputIcon { left: var(--bui-space-3); margin-right: var(--bui-space-1); @@ -10586,6 +10522,59 @@ } } +.bui-PasswordField { + font-family: var(--bui-font-regular); + --bui-passwordmanager-icon-width: var(--bui-space-1); + flex-direction: column; + flex-shrink: 0; + width: 100%; + display: flex; +} + +.bui-InputVisibility { + right: var(--bui-passwordmanager-icon-width); + cursor: pointer; + color: var(--bui-fg-primary); + background-color: #0000; + border: none; + justify-content: center; + align-items: center; + margin: 0; + padding: 0; + display: flex; + position: absolute; + top: 0; + bottom: 0; + + &[data-size="small"] { + width: 2rem; + height: 2rem; + } + + &[data-size="small"] svg { + width: 1rem; + height: 1rem; + } + + &[data-size="medium"] { + width: 2.5rem; + height: 2.5rem; + } + + &[data-size="medium"] svg { + width: 1.25rem; + height: 1.25rem; + } +} + +.bui-PasswordField .bui-InputWrapper[data-size="small"] .bui-Input { + padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); +} + +.bui-PasswordField .bui-InputWrapper[data-size="medium"] .bui-Input { + padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); +} + .bui-SearchField { flex: 1 0; From f2cf56451897fd398a47c11a9c303c41e5a55ef3 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 29 Sep 2025 13:53:28 +0200 Subject: [PATCH 28/67] cli: remove jest script module cache Signed-off-by: Patrik Oldsberg --- .changeset/full-chefs-roll.md | 5 +++++ packages/cli/config/jestCachingModuleLoader.js | 17 ----------------- 2 files changed, 5 insertions(+), 17 deletions(-) create mode 100644 .changeset/full-chefs-roll.md diff --git a/.changeset/full-chefs-roll.md b/.changeset/full-chefs-roll.md new file mode 100644 index 0000000000..2eaa8b8026 --- /dev/null +++ b/.changeset/full-chefs-roll.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Removed the script transform cache from the default Jest configuration. The script cache provided a moderate performance boost, but it is incomatible with Jest 30. diff --git a/packages/cli/config/jestCachingModuleLoader.js b/packages/cli/config/jestCachingModuleLoader.js index b2b6a4f8ae..a3fdf106e9 100644 --- a/packages/cli/config/jestCachingModuleLoader.js +++ b/packages/cli/config/jestCachingModuleLoader.js @@ -16,29 +16,12 @@ const { default: JestRuntime } = require('jest-runtime'); -const scriptTransformCache = new Map(); - module.exports = class CachingJestRuntime extends JestRuntime { constructor(config, ...restArgs) { super(config, ...restArgs); this.allowLoadAsEsm = config.extensionsToTreatAsEsm.includes('.mts'); } - // This may or may not be a good idea. Theoretically I don't know why this would impact - // test correctness and flakiness, but it seems like it may introduce flakiness and strange failures. - // It does seem to speed up test execution by a fair amount though. - createScriptFromCode(scriptSource, filename) { - let script = scriptTransformCache.get(scriptSource); - if (!script) { - script = super.createScriptFromCode(scriptSource, filename); - // Tried to store the script object in a WeakRef here. It starts out at - // about 90% hit rate, but eventually drops all the way to 20%, and overall - // it seemed to increase memory usage by 20% or so. - scriptTransformCache.set(scriptSource, script); - } - return script; - } - // Unfortunately we need to use this unstable API to make sure that .js files // are only loaded as modules where ESM is supported, i.e. Node.js packages. unstable_shouldLoadAsEsm(path, ...restArgs) { From 032a19f3fbe1405e0e4c46f8a824d99a0917b826 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 30 Sep 2025 09:34:03 +0200 Subject: [PATCH 29/67] Fix typo in changeset for coreExtensionData.title Signed-off-by: Patrik Oldsberg --- .changeset/nasty-moose-rescue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nasty-moose-rescue.md b/.changeset/nasty-moose-rescue.md index ff8cf1b02c..875c19e9a4 100644 --- a/.changeset/nasty-moose-rescue.md +++ b/.changeset/nasty-moose-rescue.md @@ -2,4 +2,4 @@ '@backstage/frontend-plugin-api': patch --- -Added `coreExtensionData.title`, especially useful for creating extensible layout with tabbed pages, but availble for use for other cases too. +Added `coreExtensionData.title`, especially useful for creating extensible layout with tabbed pages, but available for use for other cases too. From c49f392f9e1ee1194e91d75dbf6150ece81d8eb9 Mon Sep 17 00:00:00 2001 From: Christine Lee Date: Mon, 6 Oct 2025 10:34:52 -0400 Subject: [PATCH 30/67] add datadog-entity-sync.yaml Signed-off-by: Christine Lee --- microsite/data/plugins/datadog-entity-sync.yaml | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 microsite/data/plugins/datadog-entity-sync.yaml diff --git a/microsite/data/plugins/datadog-entity-sync.yaml b/microsite/data/plugins/datadog-entity-sync.yaml new file mode 100644 index 0000000000..2f0cd06cd5 --- /dev/null +++ b/microsite/data/plugins/datadog-entity-sync.yaml @@ -0,0 +1,10 @@ +--- +title: Datadog Entity Sync +author: datadog +authorUrl: https://www.datadoghq.com/ +category: Development +description: Sync entities from the Backstage catalog to the Datadog Software Catalog. +documentation: https://github.com/DataDog/datadog-backstage-plugins/tree/main/plugins/datadog-entity-sync-backend#installation +iconUrl: https://imgix.datadoghq.com/img/about/presskit/logo-v/dd_vertical_purple.png?auto=format&fit=max&w=847&dpr=2 +npmPackageName: '@datadog/backstage-plugin-datadog-entity-sync-backend' +addedDate: '2025-09-19' From f3c9a474004b78da6028517e707c00789f575bf7 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 7 Oct 2025 07:27:01 +0100 Subject: [PATCH 31/67] Small fixes Signed-off-by: Charles de Dreuille --- .github/vale/config/vocabularies/Backstage/accept.txt | 1 + docs-ui/src/app/theming/page.mdx | 2 +- docs/conf/user-interface/index.md | 2 +- docs/dls/component-design-guidelines.md | 4 ---- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt index b0225be547..1497386418 100644 --- a/.github/vale/config/vocabularies/Backstage/accept.txt +++ b/.github/vale/config/vocabularies/Backstage/accept.txt @@ -280,6 +280,7 @@ modularization monorepo Monorepo monorepos +monospace morgan msgraph msw diff --git a/docs-ui/src/app/theming/page.mdx b/docs-ui/src/app/theming/page.mdx index 73275020bc..92b5256791 100644 --- a/docs-ui/src/app/theming/page.mdx +++ b/docs-ui/src/app/theming/page.mdx @@ -226,7 +226,7 @@ color of your app. ### Foreground colors -Foreground colours are meant to work in pair with a background colours. Typeically this would work +Foreground colours are meant to work in pair with a background colours. Typically this would work for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors are prefixed with `fg` to make it easier to identify. diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md index aeae086b59..81acfdf720 100644 --- a/docs/conf/user-interface/index.md +++ b/docs/conf/user-interface/index.md @@ -178,7 +178,7 @@ These colors are used for the background of your application. We are mostly usin #### Foreground colors -Foreground colours are meant to work in pair with a background colours. Typeically this would work for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors are prefixed with `fg` to make it easier to identify. +Foreground colours are meant to work in pair with a background colours. Typically this would work for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors are prefixed with `fg` to make it easier to identify. | Token Name | Description | | ------------------------ | ----------------------------------------------------------------- | diff --git a/docs/dls/component-design-guidelines.md b/docs/dls/component-design-guidelines.md index 17e9d1f11a..fddffd9fd9 100644 --- a/docs/dls/component-design-guidelines.md +++ b/docs/dls/component-design-guidelines.md @@ -104,7 +104,3 @@ accessibility. [8]: https://v4.mui.com/customization/palette/#default-values [9]: https://v4.mui.com/customization/typography/ [10]: https://backstage.io/docs/conf/user-interface - - - -[12]: https://v4.mui.com/customization/default-theme/#explore From 7b41d9dd31e831c00f6c08f50090b9c1acdd94ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Tue, 7 Oct 2025 15:23:00 +0200 Subject: [PATCH 32/67] Remove app-root-element:signals/signals-display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .changeset/forty-crabs-travel.md | 5 +++++ plugins/signals/report-alpha.api.md | 12 ------------ plugins/signals/src/alpha.tsx | 12 +----------- 3 files changed, 6 insertions(+), 23 deletions(-) create mode 100644 .changeset/forty-crabs-travel.md diff --git a/.changeset/forty-crabs-travel.md b/.changeset/forty-crabs-travel.md new file mode 100644 index 0000000000..83e281aa51 --- /dev/null +++ b/.changeset/forty-crabs-travel.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-signals': patch +--- + +Remove `app-root-element:signals/signals-display` which was not doing anything useful diff --git a/plugins/signals/report-alpha.api.md b/plugins/signals/report-alpha.api.md index cd2f384e10..91bd2b6726 100644 --- a/plugins/signals/report-alpha.api.md +++ b/plugins/signals/report-alpha.api.md @@ -8,7 +8,6 @@ import { ApiFactory } from '@backstage/frontend-plugin-api'; import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api'; import { ExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; -import { JSX as JSX_2 } from 'react'; import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api'; // @alpha (undocumented) @@ -31,17 +30,6 @@ const _default: OverridableFrontendPlugin< params: ApiFactory, ) => ExtensionBlueprintParams; }>; - 'app-root-element:signals/signals-display': ExtensionDefinition<{ - kind: 'app-root-element'; - name: 'signals-display'; - config: {}; - configInput: {}; - output: ExtensionDataRef; - inputs: {}; - params: { - element: JSX.Element; - }; - }>; } >; export default _default; diff --git a/plugins/signals/src/alpha.tsx b/plugins/signals/src/alpha.tsx index 5f9cd6f91b..c32bff140e 100644 --- a/plugins/signals/src/alpha.tsx +++ b/plugins/signals/src/alpha.tsx @@ -16,15 +16,12 @@ import { ApiBlueprint, - AppRootElementBlueprint, createFrontendPlugin, discoveryApiRef, identityApiRef, } from '@backstage/frontend-plugin-api'; import { signalApiRef } from '@backstage/plugin-signals-react'; import { SignalClient } from './api/SignalClient'; -import { SignalsDisplay } from './plugin'; -import { compatWrapper } from '@backstage/core-compat-api'; const api = ApiBlueprint.make({ params: defineParams => @@ -43,16 +40,9 @@ const api = ApiBlueprint.make({ }), }); -const signalsDisplayAppRootElement = AppRootElementBlueprint.make({ - name: 'signals-display', - params: { - element: compatWrapper(), - }, -}); - /** @alpha */ export default createFrontendPlugin({ pluginId: 'signals', info: { packageJson: () => import('../package.json') }, - extensions: [api, signalsDisplayAppRootElement], + extensions: [api], }); From b8cf31a93a21fba498a48e29ffcde17e1265b4f1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 7 Oct 2025 13:57:14 +0000 Subject: [PATCH 33/67] chore(deps): bump nodemailer from 6.9.16 to 7.0.7 Bumps [nodemailer](https://github.com/nodemailer/nodemailer) from 6.9.16 to 7.0.7. - [Release notes](https://github.com/nodemailer/nodemailer/releases) - [Changelog](https://github.com/nodemailer/nodemailer/blob/master/CHANGELOG.md) - [Commits](https://github.com/nodemailer/nodemailer/compare/v6.9.16...v7.0.7) --- updated-dependencies: - dependency-name: nodemailer dependency-version: 7.0.7 dependency-type: direct:production ... Signed-off-by: dependabot[bot] --- .changeset/dependabot-eaf5987.md | 5 +++++ .../notifications-backend-module-email/package.json | 2 +- yarn.lock | 10 +++++----- 3 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/dependabot-eaf5987.md diff --git a/.changeset/dependabot-eaf5987.md b/.changeset/dependabot-eaf5987.md new file mode 100644 index 0000000000..bf1475613a --- /dev/null +++ b/.changeset/dependabot-eaf5987.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications-backend-module-email': patch +--- + +chore(deps): bump `nodemailer` from 6.9.16 to 7.0.7 diff --git a/plugins/notifications-backend-module-email/package.json b/plugins/notifications-backend-module-email/package.json index 7c1e279c6c..9f16340057 100644 --- a/plugins/notifications-backend-module-email/package.json +++ b/plugins/notifications-backend-module-email/package.json @@ -48,7 +48,7 @@ "@backstage/plugin-notifications-node": "workspace:^", "@backstage/types": "workspace:^", "lodash": "^4.17.21", - "nodemailer": "^6.9.13", + "nodemailer": "^7.0.7", "p-throttle": "^4.1.1" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 8e09ebae47..73647d22b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5723,7 +5723,7 @@ __metadata: "@backstage/types": "workspace:^" "@types/nodemailer": "npm:^6.4.14" lodash: "npm:^4.17.21" - nodemailer: "npm:^6.9.13" + nodemailer: "npm:^7.0.7" p-throttle: "npm:^4.1.1" languageName: unknown linkType: soft @@ -38906,10 +38906,10 @@ __metadata: languageName: node linkType: hard -"nodemailer@npm:^6.9.13": - version: 6.9.16 - resolution: "nodemailer@npm:6.9.16" - checksum: 10/f131888d3111238fde4ee03539e62f1764b99365ff31d556dde0367dfefcee1f2eb8948558f35ba84fe5cd805f2d01294eee63a5675d3aa501e7df548a2518ce +"nodemailer@npm:^7.0.7": + version: 7.0.9 + resolution: "nodemailer@npm:7.0.9" + checksum: 10/88883c58afe356d2b4c24b1e976c04857e8a7a7145e1752dab69072900b0cc2e3daa0964a08c653e692fb64382453e1cfcee3d863828844c8d6f6239727b9023 languageName: node linkType: hard From da97dad6253f6723fde6974799ef68ed8252f258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= Date: Tue, 7 Oct 2025 16:20:49 +0200 Subject: [PATCH 34/67] Revert "Merge pull request #31230 from backstage/bui-fix-tooltip" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 60c5db13568fe1acbb2a7c64298d11e6a1d98647, reversing changes made to 47f5d67bea83b3179f2540ad18a06cb44fabc5b9. Signed-off-by: Sofia Sjöblad --- .changeset/moody-singers-deny.md | 5 ----- .../ui/src/components/Button/Button.stories.tsx | 10 ---------- packages/ui/src/components/Button/Button.tsx | 16 ++-------------- 3 files changed, 2 insertions(+), 29 deletions(-) delete mode 100644 .changeset/moody-singers-deny.md diff --git a/.changeset/moody-singers-deny.md b/.changeset/moody-singers-deny.md deleted file mode 100644 index 28072baf4b..0000000000 --- a/.changeset/moody-singers-deny.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/ui': patch ---- - -Enable tooltips on disabled buttons with automatic wrapper diff --git a/packages/ui/src/components/Button/Button.stories.tsx b/packages/ui/src/components/Button/Button.stories.tsx index 1604c04eb4..db8e999f98 100644 --- a/packages/ui/src/components/Button/Button.stories.tsx +++ b/packages/ui/src/components/Button/Button.stories.tsx @@ -19,7 +19,6 @@ import { Button } from './Button'; import { Flex } from '../Flex'; import { Text } from '../Text'; import { Icon } from '../Icon'; -import { Tooltip, TooltipTrigger } from '../Tooltip'; const meta = { title: 'Backstage UI/Button', @@ -217,12 +216,3 @@ export const Playground: Story = { ), }; - -export const DisabledWithTooltips: Story = { - render: () => ( - - - Why this is disabled - - ), -}; diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index 9f658fd00a..40879e51ed 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -16,7 +16,7 @@ import clsx from 'clsx'; import { forwardRef, Ref } from 'react'; -import { Button as RAButton, Focusable } from 'react-aria-components'; +import { Button as RAButton } from 'react-aria-components'; import type { ButtonProps } from './types'; import { useStyles } from '../../hooks/useStyles'; @@ -30,7 +30,6 @@ export const Button = forwardRef( iconEnd, children, className, - isDisabled, ...rest } = props; @@ -39,29 +38,18 @@ export const Button = forwardRef( variant, }); - const btn = ( + return ( {iconStart} {children} {iconEnd} ); - - return isDisabled ? ( - - - {btn} - - - ) : ( - btn - ); }, ); From 67fc6fe48ce0f692acb0cf5db808d6682846da9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Tue, 7 Oct 2025 16:40:11 +0200 Subject: [PATCH 35/67] Update .changeset/full-chefs-roll.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .changeset/full-chefs-roll.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/full-chefs-roll.md b/.changeset/full-chefs-roll.md index 2eaa8b8026..0a13f116ec 100644 --- a/.changeset/full-chefs-roll.md +++ b/.changeset/full-chefs-roll.md @@ -2,4 +2,4 @@ '@backstage/cli': patch --- -Removed the script transform cache from the default Jest configuration. The script cache provided a moderate performance boost, but it is incomatible with Jest 30. +Removed the script transform cache from the default Jest configuration. The script cache provided a moderate performance boost, but it is incompatible with Jest 30. From 316d0774b854d1a617937d9d03a938bd2a5c6ae6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 7 Oct 2025 15:00:59 +0000 Subject: [PATCH 36/67] Version Packages (next) --- .changeset/create-app-1759849206.md | 5 + .changeset/pre.json | 21 +- docs/releases/v1.44.0-next.3-changelog.md | 219 ++++++++++++++++++ package.json | 2 +- packages/backend-app-api/CHANGELOG.md | 6 + packages/backend-app-api/package.json | 2 +- packages/cli/CHANGELOG.md | 13 ++ packages/cli/package.json | 2 +- packages/core-components/CHANGELOG.md | 6 + packages/core-components/package.json | 2 +- packages/create-app/CHANGELOG.md | 6 + packages/create-app/package.json | 2 +- packages/frontend-plugin-api/CHANGELOG.md | 8 + packages/frontend-plugin-api/package.json | 2 +- packages/ui/CHANGELOG.md | 9 + packages/ui/package.json | 2 +- plugins/app-visualizer/CHANGELOG.md | 9 + plugins/app-visualizer/package.json | 2 +- .../catalog-backend-module-aws/CHANGELOG.md | 6 + .../catalog-backend-module-aws/package.json | 2 +- .../catalog-backend-module-azure/CHANGELOG.md | 6 + .../catalog-backend-module-azure/package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- .../CHANGELOG.md | 8 + .../package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- .../CHANGELOG.md | 8 + .../package.json | 2 +- .../CHANGELOG.md | 7 + .../package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- plugins/catalog-graph/CHANGELOG.md | 9 + plugins/catalog-graph/package.json | 2 +- plugins/home/CHANGELOG.md | 9 + plugins/home/package.json | 2 +- plugins/kubernetes-cluster/CHANGELOG.md | 8 + plugins/kubernetes-cluster/package.json | 2 +- plugins/kubernetes/CHANGELOG.md | 9 + plugins/kubernetes/package.json | 2 +- .../CHANGELOG.md | 7 + .../package.json | 2 +- plugins/notifications-backend/CHANGELOG.md | 6 + plugins/notifications-backend/package.json | 2 +- plugins/notifications/CHANGELOG.md | 9 + plugins/notifications/package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- .../CHANGELOG.md | 6 + .../package.json | 2 +- plugins/scaffolder/CHANGELOG.md | 9 + plugins/scaffolder/package.json | 2 +- plugins/signals/CHANGELOG.md | 9 + plugins/signals/package.json | 2 +- 62 files changed, 489 insertions(+), 31 deletions(-) create mode 100644 .changeset/create-app-1759849206.md create mode 100644 docs/releases/v1.44.0-next.3-changelog.md diff --git a/.changeset/create-app-1759849206.md b/.changeset/create-app-1759849206.md new file mode 100644 index 0000000000..b50d431d4b --- /dev/null +++ b/.changeset/create-app-1759849206.md @@ -0,0 +1,5 @@ +--- +'@backstage/create-app': patch +--- + +Bumped create-app version. diff --git a/.changeset/pre.json b/.changeset/pre.json index 486fc27ac5..458c97896e 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -218,12 +218,20 @@ "create-app-1758639549", "create-app-1758718573", "create-app-1759243273", + "create-app-1759849206", + "cuddly-mugs-act", "curvy-bobcats-melt", + "dependabot-eaf5987", "eager-toes-start", "famous-loops-tickle", "fast-heads-brake", "fast-queens-guess", + "few-weeks-create", "five-olives-bet", + "flat-peas-run", + "forty-crabs-travel", + "full-chefs-roll", + "fuzzy-trams-kick", "giant-weeks-jump", "heavy-cooks-divide", "hungry-crews-fetch", @@ -232,6 +240,7 @@ "legal-eagles-jog", "modern-pugs-appear", "moody-singers-deny", + "nasty-moose-rescue", "nice-readers-judge", "public-sites-admire", "public-wombats-say", @@ -240,18 +249,28 @@ "ready-pots-arrive", "red-dodos-work", "red-times-bet", + "sad-women-rule", "salty-words-wash", + "shiny-candles-hide", "short-aliens-invite", + "silent-mice-play", "six-cooks-battle", "slimy-signs-agree", "solid-bikes-leave", "tame-hairs-smash", "tender-cups-tap", + "thin-hoops-bathe", "thirty-rules-press", + "tidy-coats-know", "tired-mice-cheer", + "tough-clocks-attack", "twelve-guests-sit", + "twelve-oranges-grin", + "two-emus-like", "unified-theme-attr-stack", + "warm-items-look", "wet-spiders-wait", - "wide-flies-jog" + "wide-flies-jog", + "yarn-plugin-integration" ] } diff --git a/docs/releases/v1.44.0-next.3-changelog.md b/docs/releases/v1.44.0-next.3-changelog.md new file mode 100644 index 0000000000..8a65d6d6a6 --- /dev/null +++ b/docs/releases/v1.44.0-next.3-changelog.md @@ -0,0 +1,219 @@ +# Release v1.44.0-next.3 + +Upgrade Helper: [https://backstage.github.io/upgrade-helper/?to=1.44.0-next.3](https://backstage.github.io/upgrade-helper/?to=1.44.0-next.3) + +## @backstage/backend-app-api@1.2.8-next.1 + +### Patch Changes + +- dd69cf6: Moved up registration of unhandled rejections and errors listeners to be done as early as possible, avoiding flakiness in backend startups and instead always logging these failures rather than sometimes crashing the process. + +## @backstage/cli@0.34.4-next.3 + +### Patch Changes + +- f2cf564: Removed the script transform cache from the default Jest configuration. The script cache provided a moderate performance boost, but it is incompatible with Jest 30. + +- 024645e: Remove unused @octokit modules from cli package + + - @octokit/graphql + - @octokit/graphql-schema + - @octokit/oauth-app + +- d14ef24: Added automatic detection and support for the Backstage Yarn plugin when generating new packages with `yarn new`. When the plugin is installed, new packages will automatically use `backstage:^` ranges for `@backstage/*` dependencies. + +## @backstage/core-components@0.18.2-next.3 + +### Patch Changes + +- 431130c: Added `renderEdge` prop to `` component in `@backstage/core-components` to allow custom rendering of graph edges. + +## @backstage/create-app@0.7.5-next.3 + +### Patch Changes + +- Bumped create-app version. + +## @backstage/frontend-plugin-api@0.12.1-next.2 + +### Patch Changes + +- 8ed53eb: Added `coreExtensionData.title`, especially useful for creating extensible layout with tabbed pages, but available for use for other cases too. +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + +## @backstage/ui@0.7.2-next.2 + +### Patch Changes + +- 3c921c5: Making href mandatory in tabs that are part of a Header component +- 5c21e45: Add react router for internal routing for ButtonLinks +- 9781815: Remove auto selection of tabs for tabs that all have href defined +- f6dff5b: Using react router for internal links in the Menu component + +## @backstage/plugin-app-visualizer@0.1.24-next.2 + +### Patch Changes + +- 4406144: Ensure that the text rendering has react keys for all elements +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + +## @backstage/plugin-catalog-backend-module-aws@0.4.16-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-azure@0.3.10-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-bitbucket-cloud@0.5.4-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-bitbucket-server@0.5.4-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-gerrit@0.3.7-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-github@0.11.1-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-github-org@0.3.15-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/plugin-catalog-backend-module-github@0.11.1-next.2 + +## @backstage/plugin-catalog-backend-module-gitlab@0.7.4-next.2 + +### Patch Changes + +- 0443119: Fixed an issue in `GitlabDiscoveryEntityProvider` where entity fetching could fail for projects with special characters or that had been renamed or moved. +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-gitlab-org@0.2.14-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/plugin-catalog-backend-module-gitlab@0.7.4-next.2 + +## @backstage/plugin-catalog-backend-module-msgraph@0.8.1-next.1 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-backend-module-puppetdb@0.2.15-next.1 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + +## @backstage/plugin-catalog-graph@0.5.2-next.2 + +### Patch Changes + +- 431130c: Added `renderEdge` prop to `` component in `@backstage/core-components` to allow custom rendering of graph edges. +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + +## @backstage/plugin-home@0.8.13-next.3 + +### Patch Changes + +- e7d59d3: fix(home): correct `clearAll` logic to properly handle `deletable` flag +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + +## @backstage/plugin-kubernetes@0.12.12-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + +## @backstage/plugin-kubernetes-cluster@0.0.30-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + +## @backstage/plugin-notifications@0.5.10-next.3 + +### Patch Changes + +- f5e0963: Removed unused dependencies +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + +## @backstage/plugin-notifications-backend@0.5.11-next.2 + +### Patch Changes + +- f5e0963: Removed unused dependencies + +## @backstage/plugin-notifications-backend-module-email@0.3.14-next.1 + +### Patch Changes + +- b8cf31a: chore(deps): bump `nodemailer` from 6.9.16 to 7.0.7 +- f5e0963: Removed unused dependencies + +## @backstage/plugin-scaffolder@1.34.2-next.3 + +### Patch Changes + +- d9aed74: Forward `ui:disabled` in `OwnedEntityPicker` to allow disabling it +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + +## @backstage/plugin-scaffolder-backend-module-bitbucket-server@0.2.14-next.2 + +### Patch Changes + +- f5e0963: Removed unused dependencies + +## @backstage/plugin-scaffolder-backend-module-gitlab@0.9.6-next.2 + +### Patch Changes + +- f5e0963: Removed unused dependencies + +## @backstage/plugin-signals@0.0.24-next.3 + +### Patch Changes + +- 7b41d9d: Remove `app-root-element:signals/signals-display` which was not doing anything useful +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 diff --git a/package.json b/package.json index a22ab1666a..5ef45ce170 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "root", - "version": "1.44.0-next.2", + "version": "1.44.0-next.3", "backstage": { "cli": { "new": { diff --git a/packages/backend-app-api/CHANGELOG.md b/packages/backend-app-api/CHANGELOG.md index a0176a008f..e36a8a781b 100644 --- a/packages/backend-app-api/CHANGELOG.md +++ b/packages/backend-app-api/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/backend-app-api +## 1.2.8-next.1 + +### Patch Changes + +- dd69cf6: Moved up registration of unhandled rejections and errors listeners to be done as early as possible, avoiding flakiness in backend startups and instead always logging these failures rather than sometimes crashing the process. + ## 1.2.8-next.0 ### Patch Changes diff --git a/packages/backend-app-api/package.json b/packages/backend-app-api/package.json index b082de0cfa..1613e05cc0 100644 --- a/packages/backend-app-api/package.json +++ b/packages/backend-app-api/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/backend-app-api", - "version": "1.2.8-next.0", + "version": "1.2.8-next.1", "description": "Core API used by Backstage backend apps", "backstage": { "role": "node-library" diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 7382ef147b..900401a8fa 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,18 @@ # @backstage/cli +## 0.34.4-next.3 + +### Patch Changes + +- f2cf564: Removed the script transform cache from the default Jest configuration. The script cache provided a moderate performance boost, but it is incompatible with Jest 30. +- 024645e: Remove unused @octokit modules from cli package + + - @octokit/graphql + - @octokit/graphql-schema + - @octokit/oauth-app + +- d14ef24: Added automatic detection and support for the Backstage Yarn plugin when generating new packages with `yarn new`. When the plugin is installed, new packages will automatically use `backstage:^` ranges for `@backstage/*` dependencies. + ## 0.34.4-next.2 ### Patch Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index 5b62c9a02a..19d9428979 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/cli", - "version": "0.34.4-next.2", + "version": "0.34.4-next.3", "description": "CLI for developing Backstage plugins and apps", "backstage": { "role": "cli" diff --git a/packages/core-components/CHANGELOG.md b/packages/core-components/CHANGELOG.md index 807d844712..90b0695ab9 100644 --- a/packages/core-components/CHANGELOG.md +++ b/packages/core-components/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/core-components +## 0.18.2-next.3 + +### Patch Changes + +- 431130c: Added `renderEdge` prop to `` component in `@backstage/core-components` to allow custom rendering of graph edges. + ## 0.18.2-next.2 ### Patch Changes diff --git a/packages/core-components/package.json b/packages/core-components/package.json index 3418bbe033..fdde2c7e79 100644 --- a/packages/core-components/package.json +++ b/packages/core-components/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/core-components", - "version": "0.18.2-next.2", + "version": "0.18.2-next.3", "description": "Core components used by Backstage plugins and apps", "backstage": { "role": "web-library" diff --git a/packages/create-app/CHANGELOG.md b/packages/create-app/CHANGELOG.md index baa76026b6..dfff2af4f3 100644 --- a/packages/create-app/CHANGELOG.md +++ b/packages/create-app/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/create-app +## 0.7.5-next.3 + +### Patch Changes + +- Bumped create-app version. + ## 0.7.5-next.2 ### Patch Changes diff --git a/packages/create-app/package.json b/packages/create-app/package.json index eac44e445a..9fa8af4c1b 100644 --- a/packages/create-app/package.json +++ b/packages/create-app/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/create-app", - "version": "0.7.5-next.2", + "version": "0.7.5-next.3", "description": "A CLI that helps you create your own Backstage app", "backstage": { "role": "cli" diff --git a/packages/frontend-plugin-api/CHANGELOG.md b/packages/frontend-plugin-api/CHANGELOG.md index e12aedb385..9f6a380b07 100644 --- a/packages/frontend-plugin-api/CHANGELOG.md +++ b/packages/frontend-plugin-api/CHANGELOG.md @@ -1,5 +1,13 @@ # @backstage/frontend-plugin-api +## 0.12.1-next.2 + +### Patch Changes + +- 8ed53eb: Added `coreExtensionData.title`, especially useful for creating extensible layout with tabbed pages, but available for use for other cases too. +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + ## 0.12.1-next.1 ### Patch Changes diff --git a/packages/frontend-plugin-api/package.json b/packages/frontend-plugin-api/package.json index 15e557101c..0dd0748f97 100644 --- a/packages/frontend-plugin-api/package.json +++ b/packages/frontend-plugin-api/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/frontend-plugin-api", - "version": "0.12.1-next.1", + "version": "0.12.1-next.2", "backstage": { "role": "web-library" }, diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 2efdbb2b9e..95314bf768 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/ui +## 0.7.2-next.2 + +### Patch Changes + +- 3c921c5: Making href mandatory in tabs that are part of a Header component +- 5c21e45: Add react router for internal routing for ButtonLinks +- 9781815: Remove auto selection of tabs for tabs that all have href defined +- f6dff5b: Using react router for internal links in the Menu component + ## 0.7.2-next.1 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 448905ab9d..fd6ecd169c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/ui", - "version": "0.7.2-next.1", + "version": "0.7.2-next.2", "backstage": { "role": "web-library" }, diff --git a/plugins/app-visualizer/CHANGELOG.md b/plugins/app-visualizer/CHANGELOG.md index ea0b147aff..cdd5db4986 100644 --- a/plugins/app-visualizer/CHANGELOG.md +++ b/plugins/app-visualizer/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/plugin-app-visualizer +## 0.1.24-next.2 + +### Patch Changes + +- 4406144: Ensure that the text rendering has react keys for all elements +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + ## 0.1.24-next.1 ### Patch Changes diff --git a/plugins/app-visualizer/package.json b/plugins/app-visualizer/package.json index fa30acefe2..f55c085ed0 100644 --- a/plugins/app-visualizer/package.json +++ b/plugins/app-visualizer/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-app-visualizer", - "version": "0.1.24-next.1", + "version": "0.1.24-next.2", "description": "Visualizes the Backstage app structure", "backstage": { "role": "frontend-plugin", diff --git a/plugins/catalog-backend-module-aws/CHANGELOG.md b/plugins/catalog-backend-module-aws/CHANGELOG.md index a77ccf785c..2ee7746b87 100644 --- a/plugins/catalog-backend-module-aws/CHANGELOG.md +++ b/plugins/catalog-backend-module-aws/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-aws +## 0.4.16-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.4.16-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-aws/package.json b/plugins/catalog-backend-module-aws/package.json index 39b199d03d..eef358548a 100644 --- a/plugins/catalog-backend-module-aws/package.json +++ b/plugins/catalog-backend-module-aws/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-aws", - "version": "0.4.16-next.1", + "version": "0.4.16-next.2", "description": "A Backstage catalog backend module that helps integrate towards AWS", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-azure/CHANGELOG.md b/plugins/catalog-backend-module-azure/CHANGELOG.md index 8f04f5cae5..d170204031 100644 --- a/plugins/catalog-backend-module-azure/CHANGELOG.md +++ b/plugins/catalog-backend-module-azure/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-azure +## 0.3.10-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.3.10-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-azure/package.json b/plugins/catalog-backend-module-azure/package.json index a390224e50..2b2ef5fe35 100644 --- a/plugins/catalog-backend-module-azure/package.json +++ b/plugins/catalog-backend-module-azure/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-azure", - "version": "0.3.10-next.1", + "version": "0.3.10-next.2", "description": "A Backstage catalog backend module that helps integrate towards Azure", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md b/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md index bce5bc231b..f9ac3b6966 100644 --- a/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md +++ b/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-bitbucket-cloud +## 0.5.4-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.5.4-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-bitbucket-cloud/package.json b/plugins/catalog-backend-module-bitbucket-cloud/package.json index e10df5a382..e77dfa9ee0 100644 --- a/plugins/catalog-backend-module-bitbucket-cloud/package.json +++ b/plugins/catalog-backend-module-bitbucket-cloud/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-bitbucket-cloud", - "version": "0.5.4-next.1", + "version": "0.5.4-next.2", "description": "A Backstage catalog backend module that helps integrate towards Bitbucket Cloud", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md b/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md index cb7767ce16..fe2cae0334 100644 --- a/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md +++ b/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-bitbucket-server +## 0.5.4-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.5.4-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-bitbucket-server/package.json b/plugins/catalog-backend-module-bitbucket-server/package.json index 21d6ece100..c9021d42c1 100644 --- a/plugins/catalog-backend-module-bitbucket-server/package.json +++ b/plugins/catalog-backend-module-bitbucket-server/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-bitbucket-server", - "version": "0.5.4-next.1", + "version": "0.5.4-next.2", "backstage": { "role": "backend-plugin-module", "pluginId": "catalog", diff --git a/plugins/catalog-backend-module-gerrit/CHANGELOG.md b/plugins/catalog-backend-module-gerrit/CHANGELOG.md index c1f9fe3867..0235f98580 100644 --- a/plugins/catalog-backend-module-gerrit/CHANGELOG.md +++ b/plugins/catalog-backend-module-gerrit/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-gerrit +## 0.3.7-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.3.7-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-gerrit/package.json b/plugins/catalog-backend-module-gerrit/package.json index 7427ed0906..e345190ece 100644 --- a/plugins/catalog-backend-module-gerrit/package.json +++ b/plugins/catalog-backend-module-gerrit/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-gerrit", - "version": "0.3.7-next.1", + "version": "0.3.7-next.2", "backstage": { "role": "backend-plugin-module", "pluginId": "catalog", diff --git a/plugins/catalog-backend-module-github-org/CHANGELOG.md b/plugins/catalog-backend-module-github-org/CHANGELOG.md index df63d6fb8f..61b5aa19dd 100644 --- a/plugins/catalog-backend-module-github-org/CHANGELOG.md +++ b/plugins/catalog-backend-module-github-org/CHANGELOG.md @@ -1,5 +1,13 @@ # @backstage/plugin-catalog-backend-module-github-org +## 0.3.15-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/plugin-catalog-backend-module-github@0.11.1-next.2 + ## 0.3.15-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-github-org/package.json b/plugins/catalog-backend-module-github-org/package.json index 0329bebbf6..93bc6517e0 100644 --- a/plugins/catalog-backend-module-github-org/package.json +++ b/plugins/catalog-backend-module-github-org/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-github-org", - "version": "0.3.15-next.1", + "version": "0.3.15-next.2", "description": "The github-org backend module for the catalog plugin.", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-github/CHANGELOG.md b/plugins/catalog-backend-module-github/CHANGELOG.md index 2921c3960d..da546ffe8e 100644 --- a/plugins/catalog-backend-module-github/CHANGELOG.md +++ b/plugins/catalog-backend-module-github/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-github +## 0.11.1-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.11.1-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-github/package.json b/plugins/catalog-backend-module-github/package.json index c91bb5e96a..32c8a14614 100644 --- a/plugins/catalog-backend-module-github/package.json +++ b/plugins/catalog-backend-module-github/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-github", - "version": "0.11.1-next.1", + "version": "0.11.1-next.2", "description": "A Backstage catalog backend module that helps integrate towards GitHub", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md b/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md index b162bf1103..b6e85af5fd 100644 --- a/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md +++ b/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md @@ -1,5 +1,13 @@ # @backstage/plugin-catalog-backend-module-gitlab-org +## 0.2.14-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/plugin-catalog-backend-module-gitlab@0.7.4-next.2 + ## 0.2.14-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-gitlab-org/package.json b/plugins/catalog-backend-module-gitlab-org/package.json index 80c1ba769c..9be7de1635 100644 --- a/plugins/catalog-backend-module-gitlab-org/package.json +++ b/plugins/catalog-backend-module-gitlab-org/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-gitlab-org", - "version": "0.2.14-next.1", + "version": "0.2.14-next.2", "description": "The gitlab-org backend module for the catalog plugin.", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-gitlab/CHANGELOG.md b/plugins/catalog-backend-module-gitlab/CHANGELOG.md index 18a1915ee6..91dbf57f9e 100644 --- a/plugins/catalog-backend-module-gitlab/CHANGELOG.md +++ b/plugins/catalog-backend-module-gitlab/CHANGELOG.md @@ -1,5 +1,12 @@ # @backstage/plugin-catalog-backend-module-gitlab +## 0.7.4-next.2 + +### Patch Changes + +- 0443119: Fixed an issue in `GitlabDiscoveryEntityProvider` where entity fetching could fail for projects with special characters or that had been renamed or moved. +- 99fcf98: Removed unused dependencies + ## 0.7.4-next.1 ### Patch Changes diff --git a/plugins/catalog-backend-module-gitlab/package.json b/plugins/catalog-backend-module-gitlab/package.json index 0c20cdd30a..1de716499e 100644 --- a/plugins/catalog-backend-module-gitlab/package.json +++ b/plugins/catalog-backend-module-gitlab/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-gitlab", - "version": "0.7.4-next.1", + "version": "0.7.4-next.2", "description": "A Backstage catalog backend module that helps integrate towards GitLab", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-msgraph/CHANGELOG.md b/plugins/catalog-backend-module-msgraph/CHANGELOG.md index 3db73151fe..9bd2ff31d0 100644 --- a/plugins/catalog-backend-module-msgraph/CHANGELOG.md +++ b/plugins/catalog-backend-module-msgraph/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-msgraph +## 0.8.1-next.1 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.8.1-next.0 ### Patch Changes diff --git a/plugins/catalog-backend-module-msgraph/package.json b/plugins/catalog-backend-module-msgraph/package.json index 35d38e12d4..bcf0ae17a3 100644 --- a/plugins/catalog-backend-module-msgraph/package.json +++ b/plugins/catalog-backend-module-msgraph/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-msgraph", - "version": "0.8.1-next.0", + "version": "0.8.1-next.1", "description": "A Backstage catalog backend module that helps integrate towards Microsoft Graph", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-backend-module-puppetdb/CHANGELOG.md b/plugins/catalog-backend-module-puppetdb/CHANGELOG.md index cdbee9bfb8..7645b8d390 100644 --- a/plugins/catalog-backend-module-puppetdb/CHANGELOG.md +++ b/plugins/catalog-backend-module-puppetdb/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-catalog-backend-module-puppetdb +## 0.2.15-next.1 + +### Patch Changes + +- 99fcf98: Removed unused dependencies + ## 0.2.15-next.0 ### Patch Changes diff --git a/plugins/catalog-backend-module-puppetdb/package.json b/plugins/catalog-backend-module-puppetdb/package.json index d76b965b90..4a01305a1a 100644 --- a/plugins/catalog-backend-module-puppetdb/package.json +++ b/plugins/catalog-backend-module-puppetdb/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-backend-module-puppetdb", - "version": "0.2.15-next.0", + "version": "0.2.15-next.1", "description": "A Backstage catalog backend module that helps integrate towards PuppetDB", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/catalog-graph/CHANGELOG.md b/plugins/catalog-graph/CHANGELOG.md index b492c41a37..41c3c1c519 100644 --- a/plugins/catalog-graph/CHANGELOG.md +++ b/plugins/catalog-graph/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/plugin-catalog-graph +## 0.5.2-next.2 + +### Patch Changes + +- 431130c: Added `renderEdge` prop to `` component in `@backstage/core-components` to allow custom rendering of graph edges. +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + ## 0.5.2-next.1 ### Patch Changes diff --git a/plugins/catalog-graph/package.json b/plugins/catalog-graph/package.json index f455dbce31..7531a926a4 100644 --- a/plugins/catalog-graph/package.json +++ b/plugins/catalog-graph/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-catalog-graph", - "version": "0.5.2-next.1", + "version": "0.5.2-next.2", "backstage": { "role": "frontend-plugin", "pluginId": "catalog-graph", diff --git a/plugins/home/CHANGELOG.md b/plugins/home/CHANGELOG.md index 68ef6448a5..85e2a009f4 100644 --- a/plugins/home/CHANGELOG.md +++ b/plugins/home/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/plugin-home +## 0.8.13-next.3 + +### Patch Changes + +- e7d59d3: fix(home): correct `clearAll` logic to properly handle `deletable` flag +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + ## 0.8.13-next.2 ### Patch Changes diff --git a/plugins/home/package.json b/plugins/home/package.json index 910d6c036f..060f090974 100644 --- a/plugins/home/package.json +++ b/plugins/home/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-home", - "version": "0.8.13-next.2", + "version": "0.8.13-next.3", "description": "A Backstage plugin that helps you build a home page", "backstage": { "role": "frontend-plugin", diff --git a/plugins/kubernetes-cluster/CHANGELOG.md b/plugins/kubernetes-cluster/CHANGELOG.md index 527c13c88d..be3fed6035 100644 --- a/plugins/kubernetes-cluster/CHANGELOG.md +++ b/plugins/kubernetes-cluster/CHANGELOG.md @@ -1,5 +1,13 @@ # @backstage/plugin-kubernetes-cluster +## 0.0.30-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + ## 0.0.30-next.1 ### Patch Changes diff --git a/plugins/kubernetes-cluster/package.json b/plugins/kubernetes-cluster/package.json index ea1bb80570..033e1138f4 100644 --- a/plugins/kubernetes-cluster/package.json +++ b/plugins/kubernetes-cluster/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-kubernetes-cluster", - "version": "0.0.30-next.1", + "version": "0.0.30-next.2", "description": "A Backstage plugin that shows details of Kubernetes clusters", "backstage": { "role": "frontend-plugin", diff --git a/plugins/kubernetes/CHANGELOG.md b/plugins/kubernetes/CHANGELOG.md index 62ffb354bf..670ff085f6 100644 --- a/plugins/kubernetes/CHANGELOG.md +++ b/plugins/kubernetes/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/plugin-kubernetes +## 0.12.12-next.2 + +### Patch Changes + +- 99fcf98: Removed unused dependencies +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + ## 0.12.12-next.1 ### Patch Changes diff --git a/plugins/kubernetes/package.json b/plugins/kubernetes/package.json index 2fe8506310..113deee19f 100644 --- a/plugins/kubernetes/package.json +++ b/plugins/kubernetes/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-kubernetes", - "version": "0.12.12-next.1", + "version": "0.12.12-next.2", "description": "A Backstage plugin that integrates towards Kubernetes", "backstage": { "role": "frontend-plugin", diff --git a/plugins/notifications-backend-module-email/CHANGELOG.md b/plugins/notifications-backend-module-email/CHANGELOG.md index 99f2277dad..cf891bebc1 100644 --- a/plugins/notifications-backend-module-email/CHANGELOG.md +++ b/plugins/notifications-backend-module-email/CHANGELOG.md @@ -1,5 +1,12 @@ # @backstage/plugin-notifications-backend-module-email +## 0.3.14-next.1 + +### Patch Changes + +- b8cf31a: chore(deps): bump `nodemailer` from 6.9.16 to 7.0.7 +- f5e0963: Removed unused dependencies + ## 0.3.14-next.0 ### Patch Changes diff --git a/plugins/notifications-backend-module-email/package.json b/plugins/notifications-backend-module-email/package.json index 7f5711d27d..94a3635ef1 100644 --- a/plugins/notifications-backend-module-email/package.json +++ b/plugins/notifications-backend-module-email/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-notifications-backend-module-email", - "version": "0.3.14-next.0", + "version": "0.3.14-next.1", "description": "The email backend module for the notifications plugin.", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/notifications-backend/CHANGELOG.md b/plugins/notifications-backend/CHANGELOG.md index 713066e692..d99785fd12 100644 --- a/plugins/notifications-backend/CHANGELOG.md +++ b/plugins/notifications-backend/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-notifications-backend +## 0.5.11-next.2 + +### Patch Changes + +- f5e0963: Removed unused dependencies + ## 0.5.11-next.1 ### Patch Changes diff --git a/plugins/notifications-backend/package.json b/plugins/notifications-backend/package.json index e03f07c1c9..0f270b1e37 100644 --- a/plugins/notifications-backend/package.json +++ b/plugins/notifications-backend/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-notifications-backend", - "version": "0.5.11-next.1", + "version": "0.5.11-next.2", "backstage": { "role": "backend-plugin", "pluginId": "notifications", diff --git a/plugins/notifications/CHANGELOG.md b/plugins/notifications/CHANGELOG.md index caedf21e35..b5a6da6ba1 100644 --- a/plugins/notifications/CHANGELOG.md +++ b/plugins/notifications/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/plugin-notifications +## 0.5.10-next.3 + +### Patch Changes + +- f5e0963: Removed unused dependencies +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + ## 0.5.10-next.2 ### Patch Changes diff --git a/plugins/notifications/package.json b/plugins/notifications/package.json index 9d7e36c1ac..68996bc7c0 100644 --- a/plugins/notifications/package.json +++ b/plugins/notifications/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-notifications", - "version": "0.5.10-next.2", + "version": "0.5.10-next.3", "backstage": { "role": "frontend-plugin", "pluginId": "notifications", diff --git a/plugins/scaffolder-backend-module-bitbucket-server/CHANGELOG.md b/plugins/scaffolder-backend-module-bitbucket-server/CHANGELOG.md index 9df81bc074..055f52a047 100644 --- a/plugins/scaffolder-backend-module-bitbucket-server/CHANGELOG.md +++ b/plugins/scaffolder-backend-module-bitbucket-server/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-scaffolder-backend-module-bitbucket-server +## 0.2.14-next.2 + +### Patch Changes + +- f5e0963: Removed unused dependencies + ## 0.2.14-next.1 ### Patch Changes diff --git a/plugins/scaffolder-backend-module-bitbucket-server/package.json b/plugins/scaffolder-backend-module-bitbucket-server/package.json index 53564814d1..f53b075403 100644 --- a/plugins/scaffolder-backend-module-bitbucket-server/package.json +++ b/plugins/scaffolder-backend-module-bitbucket-server/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-scaffolder-backend-module-bitbucket-server", - "version": "0.2.14-next.1", + "version": "0.2.14-next.2", "description": "The Bitbucket Server module for @backstage/plugin-scaffolder-backend", "backstage": { "role": "backend-plugin-module", diff --git a/plugins/scaffolder-backend-module-gitlab/CHANGELOG.md b/plugins/scaffolder-backend-module-gitlab/CHANGELOG.md index c1312cc2a6..c0ea9e94dd 100644 --- a/plugins/scaffolder-backend-module-gitlab/CHANGELOG.md +++ b/plugins/scaffolder-backend-module-gitlab/CHANGELOG.md @@ -1,5 +1,11 @@ # @backstage/plugin-scaffolder-backend-module-gitlab +## 0.9.6-next.2 + +### Patch Changes + +- f5e0963: Removed unused dependencies + ## 0.9.6-next.1 ### Patch Changes diff --git a/plugins/scaffolder-backend-module-gitlab/package.json b/plugins/scaffolder-backend-module-gitlab/package.json index c9644543a5..d34526b65b 100644 --- a/plugins/scaffolder-backend-module-gitlab/package.json +++ b/plugins/scaffolder-backend-module-gitlab/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-scaffolder-backend-module-gitlab", - "version": "0.9.6-next.1", + "version": "0.9.6-next.2", "backstage": { "role": "backend-plugin-module", "pluginId": "scaffolder", diff --git a/plugins/scaffolder/CHANGELOG.md b/plugins/scaffolder/CHANGELOG.md index 649965149d..8abe46b3c7 100644 --- a/plugins/scaffolder/CHANGELOG.md +++ b/plugins/scaffolder/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/plugin-scaffolder +## 1.34.2-next.3 + +### Patch Changes + +- d9aed74: Forward `ui:disabled` in `OwnedEntityPicker` to allow disabling it +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + ## 1.34.2-next.2 ### Patch Changes diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json index 21e57a97c8..4a64a18ca4 100644 --- a/plugins/scaffolder/package.json +++ b/plugins/scaffolder/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-scaffolder", - "version": "1.34.2-next.2", + "version": "1.34.2-next.3", "description": "The Backstage plugin that helps you create new things", "backstage": { "role": "frontend-plugin", diff --git a/plugins/signals/CHANGELOG.md b/plugins/signals/CHANGELOG.md index 1e41067d82..02e57ebeca 100644 --- a/plugins/signals/CHANGELOG.md +++ b/plugins/signals/CHANGELOG.md @@ -1,5 +1,14 @@ # @backstage/plugin-signals +## 0.0.24-next.3 + +### Patch Changes + +- 7b41d9d: Remove `app-root-element:signals/signals-display` which was not doing anything useful +- Updated dependencies + - @backstage/core-components@0.18.2-next.3 + - @backstage/frontend-plugin-api@0.12.1-next.2 + ## 0.0.24-next.2 ### Patch Changes diff --git a/plugins/signals/package.json b/plugins/signals/package.json index 13bf863b60..d67709a5ca 100644 --- a/plugins/signals/package.json +++ b/plugins/signals/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-signals", - "version": "0.0.24-next.2", + "version": "0.0.24-next.3", "backstage": { "role": "frontend-plugin", "pluginId": "signals", From 74dcd32da46125c1c18d33ad8137a2e0ee784072 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 7 Oct 2025 17:45:12 +0100 Subject: [PATCH 37/67] Update sidebars.ts Signed-off-by: Charles de Dreuille --- microsite/sidebars.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/microsite/sidebars.ts b/microsite/sidebars.ts index b7e89825ca..2d5065400b 100644 --- a/microsite/sidebars.ts +++ b/microsite/sidebars.ts @@ -396,17 +396,7 @@ export default { 'conf/index', 'conf/reading', 'conf/writing', - 'conf/defining', - { - type: 'category', - label: 'User Interface', - items: [ - 'conf/user-interface/index', - 'conf/user-interface/logo', - 'conf/user-interface/icons', - 'conf/user-interface/sidebar', - ], - }, + 'conf/defining' ], Framework: [ { @@ -551,6 +541,16 @@ export default { 'tooling/package-metadata', ], }, + { + type: 'category', + label: 'User Interface', + items: [ + 'conf/user-interface/index', + 'conf/user-interface/logo', + 'conf/user-interface/icons', + 'conf/user-interface/sidebar', + ], + }, ], Tutorials: [ { 'Non-technical': ['overview/adopting'] }, From 1ac09a8060abf264d9558ceed17f7cc547779dfb Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 7 Oct 2025 18:01:11 +0100 Subject: [PATCH 38/67] Update docusaurus.config.ts Signed-off-by: Charles de Dreuille --- microsite/docusaurus.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsite/docusaurus.config.ts b/microsite/docusaurus.config.ts index 83f2f75689..206dbba97f 100644 --- a/microsite/docusaurus.config.ts +++ b/microsite/docusaurus.config.ts @@ -272,7 +272,7 @@ const config: Config = { { from: '/docs/getting-started/app-custom-theme', to: '/docs/conf/user-interface', - } + }, ], }), [ From 79d72fa86e3dc00c4af07066ed243ed4bf0a3a16 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 7 Oct 2025 18:15:18 +0100 Subject: [PATCH 39/67] Update sidebars.ts Signed-off-by: Charles de Dreuille --- microsite/sidebars.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsite/sidebars.ts b/microsite/sidebars.ts index 2d5065400b..1f05660d7e 100644 --- a/microsite/sidebars.ts +++ b/microsite/sidebars.ts @@ -396,7 +396,7 @@ export default { 'conf/index', 'conf/reading', 'conf/writing', - 'conf/defining' + 'conf/defining', ], Framework: [ { From 43afbe50aa3c30968b8443dbbf69c637673069c5 Mon Sep 17 00:00:00 2001 From: Gabriel Dugny Date: Tue, 7 Oct 2025 19:29:14 +0200 Subject: [PATCH 40/67] feat(techdocs): POC livereload for techdocs-cli serve (#30541) * feat(techdocs): POC livereload for techdocs-cli serve Signed-off-by: Gabriel Dugny * chore: techdocs reload tests, refactor Signed-off-by: Gabriel Dugny --------- Signed-off-by: Gabriel Dugny --- .changeset/brown-symbols-create.md | 5 + .../techdocs-cli-embedded-app/app-config.yaml | 4 + .../techdocs-cli-embedded-app/src/App.tsx | 10 + .../src/LiveReloadAddon.test.tsx | 111 +++++++++++ .../src/LiveReloadAddon.tsx | 121 ++++++++++++ packages/techdocs-cli/src/lib/httpServer.ts | 32 +++- .../techdocs-cli/src/lib/livereload.test.ts | 180 ++++++++++++++++++ packages/techdocs-cli/src/lib/livereload.ts | 175 +++++++++++++++++ 8 files changed, 636 insertions(+), 2 deletions(-) create mode 100644 .changeset/brown-symbols-create.md create mode 100644 packages/techdocs-cli-embedded-app/src/LiveReloadAddon.test.tsx create mode 100644 packages/techdocs-cli-embedded-app/src/LiveReloadAddon.tsx create mode 100644 packages/techdocs-cli/src/lib/livereload.test.ts create mode 100644 packages/techdocs-cli/src/lib/livereload.ts diff --git a/.changeset/brown-symbols-create.md b/.changeset/brown-symbols-create.md new file mode 100644 index 0000000000..d4a62b1280 --- /dev/null +++ b/.changeset/brown-symbols-create.md @@ -0,0 +1,5 @@ +--- +'@techdocs/cli': minor +--- + +Techdocs CLI serve supports automatic refresh, relying on `mkdocs` `watch` feature. diff --git a/packages/techdocs-cli-embedded-app/app-config.yaml b/packages/techdocs-cli-embedded-app/app-config.yaml index 6ede05b587..c8dfa1683c 100644 --- a/packages/techdocs-cli-embedded-app/app-config.yaml +++ b/packages/techdocs-cli-embedded-app/app-config.yaml @@ -7,3 +7,7 @@ backend: techdocs: builder: 'external' + sanitizer: + # Allow live reload locally. Added in this config to avoid updating the main techdocs plugin. + allowedCustomElementTagNameRegExp: '^live-reload$' + allowedCustomElementAttributeNameRegExp: '^live-reload-(epoch|request-id)$' diff --git a/packages/techdocs-cli-embedded-app/src/App.tsx b/packages/techdocs-cli-embedded-app/src/App.tsx index 273a828b4a..13d5b925f0 100644 --- a/packages/techdocs-cli-embedded-app/src/App.tsx +++ b/packages/techdocs-cli-embedded-app/src/App.tsx @@ -36,6 +36,7 @@ import * as plugins from './plugins'; import { configLoader } from './config'; import { Root } from './components/Root'; import { techDocsPage, TechDocsThemeToggle } from './components/TechDocsPage'; +import { TechDocsLiveReload } from './LiveReloadAddon'; const app = createApp({ apis, @@ -54,6 +55,14 @@ const ThemeToggleAddon = techdocsPlugin.provide( }), ); +const LiveReloadAddon = techdocsPlugin.provide( + createTechDocsAddonExtension({ + name: 'LiveReloadAddon', + component: TechDocsLiveReload, + location: TechDocsAddonLocations.Content, + }), +); + const routes = ( @@ -71,6 +80,7 @@ const routes = ( > {techDocsPage} + diff --git a/packages/techdocs-cli-embedded-app/src/LiveReloadAddon.test.tsx b/packages/techdocs-cli-embedded-app/src/LiveReloadAddon.test.tsx new file mode 100644 index 0000000000..1a80def9e9 --- /dev/null +++ b/packages/techdocs-cli-embedded-app/src/LiveReloadAddon.test.tsx @@ -0,0 +1,111 @@ +/* + * Copyright 2025 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 { render } from '@testing-library/react'; +import { TechDocsLiveReload } from './LiveReloadAddon'; + +jest.mock('@backstage/plugin-techdocs-react', () => ({ + useShadowRootElements: jest.fn(() => [ + { + querySelector: jest.fn((selector: string) => { + if (selector === 'live-reload') { + return { + getAttribute: (name: string) => { + if (name === 'live-reload-epoch') return '10'; + if (name === 'live-reload-request-id') return '1'; + return null; + }, + }; + } + return null; + }), + }, + ]), +})); + +describe('TechDocsLiveReload', () => { + const originalXHR = global.XMLHttpRequest; + let originalLocation: Location; + let openSpy: jest.Mock; + let sendSpy: jest.Mock; + + beforeEach(() => { + originalLocation = window.location; + openSpy = jest.fn(); + sendSpy = jest.fn(function (this: any) { + // simulate long-poll response that does NOT trigger reload (epoch unchanged) + setTimeout(() => { + (this as any).status = 200; + (this as any).responseText = '10'; + (this as any).onloadend?.call(this); + }, 0); + }); + + class MockXHR { + onloadend: ((this: any) => void) | null = null; + status = 0; + responseText = ''; + open = openSpy; + send = sendSpy as any; + abort = jest.fn(); + } + + global.XMLHttpRequest = MockXHR as any; + + // Replace window.location with a mutable object for tests + delete (window as any).location; + (window as any).location = { ...originalLocation, reload: jest.fn() }; + jest.spyOn(window, 'addEventListener').mockImplementation(() => {}); + jest.spyOn(window, 'removeEventListener').mockImplementation(() => {}); + Object.defineProperty(document, 'visibilityState', { + value: 'visible', + configurable: true, + }); + }); + + afterEach(() => { + global.XMLHttpRequest = originalXHR; + jest.restoreAllMocks(); + // restore original window.location + delete (window as any).location; + (window as any).location = originalLocation; + }); + + it('polls livereload endpoint and does not reload when epoch unchanged', async () => { + const reloadSpy = window.location.reload as unknown as jest.Mock; + render(); + expect(openSpy).toHaveBeenCalledWith('GET', '/.livereload/10/1'); + // give microtask queue a tick + await new Promise(res => setTimeout(res, 0)); + expect(reloadSpy).not.toHaveBeenCalled(); + }); + + it('reloads when server epoch increases', async () => { + const reloadSpy = window.location.reload as unknown as jest.Mock; + + sendSpy.mockImplementation(function (this: any) { + setTimeout(() => { + (this as any).status = 200; + (this as any).responseText = '11'; + (this as any).onloadend?.call(this); + }, 0); + }); + + render(); + await new Promise(res => setTimeout(res, 0)); + expect(reloadSpy).toHaveBeenCalled(); + }); +}); diff --git a/packages/techdocs-cli-embedded-app/src/LiveReloadAddon.tsx b/packages/techdocs-cli-embedded-app/src/LiveReloadAddon.tsx new file mode 100644 index 0000000000..905a339c72 --- /dev/null +++ b/packages/techdocs-cli-embedded-app/src/LiveReloadAddon.tsx @@ -0,0 +1,121 @@ +/* + * Copyright 2025 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 { useShadowRootElements } from '@backstage/plugin-techdocs-react'; +import { useEffect, useRef } from 'react'; + +interface TechDocsLiveReloadProps { + /** Whether to enable livereload (default: true in development) */ + enabled?: boolean; +} + +/** + * LiveReload addon for Techdocs CLI. + * + * Support mkdocs built-in livereload, in a TechDocs CLI preview environment. + * See https://github.com/backstage/backstage/issues/30514 for more details. + */ +export const TechDocsLiveReload = ({ + enabled = true, +}: TechDocsLiveReloadProps) => { + const body = useShadowRootElements(['body']); + const reqRef = useRef(null); + const timeoutRef = useRef(null); + const LIVE_RELOAD_ELEMENT = 'live-reload'; + const LIVE_RELOAD_ATTR_EPOCH = 'live-reload-epoch'; + const LIVE_RELOAD_ATTR_REQUEST_ID = 'live-reload-request-id'; + const CLI_LIVERELOAD_PATH = '/.livereload'; + + useEffect(() => { + if (!enabled || !body[0]) { + return undefined; + } + + const liveReloadElement = body[0].querySelector(LIVE_RELOAD_ELEMENT); + + if (!liveReloadElement) { + return undefined; + } + + const epoch = parseInt( + liveReloadElement.getAttribute(LIVE_RELOAD_ATTR_EPOCH) || '0', + 10, + ); + const requestId = parseInt( + liveReloadElement.getAttribute(LIVE_RELOAD_ATTR_REQUEST_ID) || '0', + 10, + ); + + if (!epoch || !requestId) { + return undefined; + } + + const livereloadUrl = CLI_LIVERELOAD_PATH; + + const poll = () => { + reqRef.current = new XMLHttpRequest(); + reqRef.current.onloadend = function handleLoadEnd(this: XMLHttpRequest) { + if (parseFloat(this.responseText) > epoch) { + window.location.reload(); + } else { + timeoutRef.current = setTimeout(poll, this.status === 200 ? 0 : 3000); + } + }; + reqRef.current.open('GET', `${livereloadUrl}/${epoch}/${requestId}`); + reqRef.current.send(); + }; + + const stop = () => { + if (reqRef.current) { + reqRef.current.abort(); + reqRef.current = null; + } + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + }; + + // Stop when tab is inactive + const handleVisibilityChange = () => { + if (document.visibilityState === 'visible') { + poll(); + } else { + stop(); + } + }; + + const handleBeforeUnload = () => { + stop(); + }; + + // Start polling if page is visible + if (document.visibilityState === 'visible') { + poll(); + } + + document.addEventListener('visibilitychange', handleVisibilityChange); + window.addEventListener('beforeunload', handleBeforeUnload); + + return () => { + stop(); + document.removeEventListener('visibilitychange', handleVisibilityChange); + window.removeEventListener('beforeunload', handleBeforeUnload); + }; + }, [body, enabled]); + + return null; +}; diff --git a/packages/techdocs-cli/src/lib/httpServer.ts b/packages/techdocs-cli/src/lib/httpServer.ts index c38bc86d7a..d7e8f62ea0 100644 --- a/packages/techdocs-cli/src/lib/httpServer.ts +++ b/packages/techdocs-cli/src/lib/httpServer.ts @@ -18,6 +18,10 @@ import serveHandler from 'serve-handler'; import http from 'http'; import httpProxy from 'http-proxy'; import { createLogger } from './utility'; +import { + proxyHtmlWithLivereloadInjection, + proxyMkdocsLivereload, +} from './livereload'; export default class HTTPServer { private readonly proxyEndpoint: string; @@ -59,8 +63,8 @@ export default class HTTPServer { const proxyHandler = this.createProxy(); const server = http.createServer( (request: http.IncomingMessage, response: http.ServerResponse) => { - // This endpoind is used by the frontend to issue a cookie for the user. - // But the MkDocs server doesn't expose it as a the Backestage backend does. + // This endpoint is used by the frontend to issue a cookie for the user. + // But the MkDocs server doesn't expose it as a the Backstage backend does. // So we need to fake it here to prevent 404 errors. if (request.url === '/api/techdocs/.backstage/auth/v1/cookie') { const oneHourInMilliseconds = 60 * 60 * 1000; @@ -72,6 +76,19 @@ export default class HTTPServer { } if (request.url?.startsWith(this.proxyEndpoint)) { + // Handle HTML files with livereload parameter injection + if (request.url?.endsWith('.html')) { + proxyHtmlWithLivereloadInjection({ + request, + response, + mkdocsTargetAddress: this.mkdocsTargetAddress, + proxyEndpoint: this.proxyEndpoint, + onError: (error: Error) => reject(error), + }); + return; + } + + // Handle non-HTML files with regular proxy const [proxy, forwardPath] = proxyHandler(request); proxy.on('error', (error: Error) => { @@ -93,6 +110,17 @@ export default class HTTPServer { return; } + // This endpoint is used by the frontend to pass livereload requests to the mkdocs server. + if (request.url?.startsWith('/.livereload')) { + proxyMkdocsLivereload({ + request, + response, + mkdocsTargetAddress: this.mkdocsTargetAddress, + onError: (error: Error) => reject(error), + }); + return; + } + serveHandler(request, response, { public: this.backstageBundleDir, trailingSlash: true, diff --git a/packages/techdocs-cli/src/lib/livereload.test.ts b/packages/techdocs-cli/src/lib/livereload.test.ts new file mode 100644 index 0000000000..b21251c45a --- /dev/null +++ b/packages/techdocs-cli/src/lib/livereload.test.ts @@ -0,0 +1,180 @@ +/* + * Copyright 2025 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 http from 'http'; +import { + injectLivereloadParameters, + proxyHtmlWithLivereloadInjection, + proxyMkdocsLivereload, +} from './livereload'; + +// Note: This mock returns a singleton proxy object so tests can access the +// registered event handlers (e.g. `proxyRes`) from code under test. +jest.mock('http-proxy', () => { + const handlers: Record = {}; + const fakeProxy = { + on: jest.fn((event: string, cb: Function) => { + handlers[event] = cb; + }), + web: jest.fn((_req: unknown, _res: unknown) => { + // no-op; tests will manually trigger handlers['proxyRes'] when needed + }), + __handlers: handlers, + }; + const create = jest.fn(() => fakeProxy); + return { + __esModule: true, + default: { createProxyServer: create }, + createProxyServer: create, + }; +}); + +describe('livereload helpers', () => { + describe('injectLivereloadParameters', () => { + it('injects live-reload element when mkdocs script is present', () => { + const html = + ''; + const result = injectLivereloadParameters(html); + expect(result).toContain(''); + }); + + it('returns original html when mkdocs script is absent', () => { + const html = '

No livereload

'; + const result = injectLivereloadParameters(html); + expect(result).toBe(html); + }); + }); + + describe('proxyHtmlWithLivereloadInjection', () => { + it('injects parameters into HTML responses and sets CORS headers', () => { + const { createProxyServer } = jest.requireMock('http-proxy') as any; + const proxy = createProxyServer(); + + const req = { + url: '/api/techdocs/some/path/index.html', + } as unknown as http.IncomingMessage; + const headers: Record = {}; + const res = { + setHeader: (k: string, v: any) => { + headers[k] = String(v); + }, + end: jest.fn(), + } as unknown as http.ServerResponse; + + proxyHtmlWithLivereloadInjection({ + request: req, + response: res, + mkdocsTargetAddress: 'http://localhost:8000', + proxyEndpoint: '/api/techdocs/', + onError: () => {}, + }); + + // Simulate mkdocs proxy response with HTML + const proxyRes: any = { + headers: { 'content-type': 'text/html; charset=utf-8' }, + on: (event: string, cb: Function) => { + if (event === 'data') { + cb(''); + } + if (event === 'end') { + cb(); + } + }, + pipe: jest.fn(), + }; + + (proxy as any).__handlers.proxyRes(proxyRes, {} as any, res); + + expect(res.end).toHaveBeenCalled(); + const injectedHtml = (res.end as jest.Mock).mock.calls[0][0] as string; + expect(injectedHtml).toContain(' { + const { createProxyServer } = jest.requireMock('http-proxy') as any; + const proxy = createProxyServer(); + + const req = { + url: '/api/techdocs/some/path/asset.css', + } as unknown as http.IncomingMessage; + const headers: Record = {}; + const res = { + setHeader: (k: string, v: any) => { + headers[k] = String(v); + }, + end: jest.fn(), + } as unknown as http.ServerResponse; + + proxyHtmlWithLivereloadInjection({ + request: req, + response: res, + mkdocsTargetAddress: 'http://localhost:8000', + proxyEndpoint: '/api/techdocs/', + onError: () => {}, + }); + + const proxyRes: any = { + headers: { 'content-type': 'text/css' }, + on: jest.fn(), + pipe: jest.fn(), + }; + + (proxy as any).__handlers.proxyRes(proxyRes, {} as any, res); + + expect(res.end).not.toHaveBeenCalled(); + expect(proxyRes.pipe).toHaveBeenCalledWith(res); + expect(headers['Access-Control-Allow-Origin']).toBe('*'); + expect(headers['Access-Control-Allow-Methods']).toBe('GET, OPTIONS'); + }); + }); + + describe('proxyMkdocsLivereload', () => { + it('rewrites path and sets CORS headers', () => { + const { createProxyServer } = jest.requireMock('http-proxy') as any; + const proxy = createProxyServer(); + + const req = { + url: '/.livereload/1/2', + } as unknown as http.IncomingMessage; + const headers: Record = {}; + const res = { + setHeader: (k: string, v: any) => { + headers[k] = String(v); + }, + } as unknown as http.ServerResponse; + + proxyMkdocsLivereload({ + request: req, + response: res, + mkdocsTargetAddress: 'http://localhost:8000', + onError: () => {}, + }); + + expect(req.url).toBe('/livereload/1/2'); + expect(headers['Access-Control-Allow-Origin']).toBe('*'); + expect(headers['Access-Control-Allow-Methods']).toBe('GET, OPTIONS'); + expect(headers['Access-Control-Allow-Headers']).toBe('Content-Type'); + expect((proxy as any).web).toHaveBeenCalled(); + }); + }); +}); diff --git a/packages/techdocs-cli/src/lib/livereload.ts b/packages/techdocs-cli/src/lib/livereload.ts new file mode 100644 index 0000000000..c108971b82 --- /dev/null +++ b/packages/techdocs-cli/src/lib/livereload.ts @@ -0,0 +1,175 @@ +/* + * Copyright 2025 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 http from 'http'; +import httpProxy from 'http-proxy'; + +/** + * Livereload support for techdocs-cli. + * + * Context: + * - MkDocs implements autoreload using a long-poll endpoint `/livereload` and a script that injects + * a call like: `livereload(epoch, request_id)`, where `epoch` is derived from Python's + * `time.monotonic()`. + * - Node.js monotonic clocks (`process.hrtime`/`performance.now`) are not compatible with Python's + * value across processes and platforms. We therefore CANNOT reliably re-create the same epoch on + * the frontend or in this CLI, and must read the values produced by MkDocs itself. + * - The MkDocs script tag is removed by DOM sanitization (DomPurify) in TechDocs, so we can't rely + * on the script being present in the embedded app. To bridge this, we extract the parameters on + * the server side while proxying HTML and inject them as a safe custom element that survives + * sanitization: ``. + * - The frontend addon reads that element and polls `/.livereload` (served by techdocs-cli), which + * this module maps to MkDocs `/livereload` with permissive CORS headers. + * - Quality-of-life: if extraction fails or the endpoint is unavailable, normal docs still work. + * + * See issue for background and rationale: https://github.com/backstage/backstage/issues/30514 + */ + +const LIVE_RELOAD_ELEMENT = 'live-reload'; +const LIVE_RELOAD_ATTR_EPOCH = 'live-reload-epoch'; +const LIVE_RELOAD_ATTR_REQUEST_ID = 'live-reload-request-id'; +const CLI_LIVERELOAD_PATH = '/.livereload'; +const MKDOCS_LIVERELOAD_PATH = '/livereload'; +const CONTENT_TYPE_HTML = 'text/html'; +const HEADER_CONTENT_LENGTH = 'content-length'; + +const BODY_START_RE = /]*>/; +// Matches mkdocs injected call livereload(epoch, requestId) +const MKDOCS_LIVERELOAD_CALL_RE = /livereload\(\s*(\d+)\s*,\s*(\d+)\s*\)\s*;?/; + +/** + * Extract livereload parameters from mkdocs HTML and inject them as a custom element. + * The injected element will later be read by the frontend addon even after DOM sanitization. + * + * Note: + * - we don't add to because of DomPurify sanitization. + * - we add close to the body opening to avoid reading too far into the body. + * - we should use streamed injection to improve performance. + */ +export function injectLivereloadParameters(html: string): string { + const livereloadMatch = html.match(MKDOCS_LIVERELOAD_CALL_RE); + + // If we couldn't find livereload parameters, return original HTML untouched. + if (!livereloadMatch) { + return html; + } + + const [, epoch, requestId] = livereloadMatch; + // Insert a minimal custom element that the frontend addon can discover post-sanitization. + // Note: embedded app needs a custom config to allow the element to survive sanitization. + const liveReloadTag = `<${LIVE_RELOAD_ELEMENT} ${LIVE_RELOAD_ATTR_EPOCH}="${epoch}" ${LIVE_RELOAD_ATTR_REQUEST_ID}="${requestId}">`; + + // Naively find where to insert the livereload tag. + const bodyStart = html.match(BODY_START_RE); + const bodyStartIndex = bodyStart?.index ?? 0; + const bodyStartLength = bodyStart?.[0]?.length ?? 0; + if (bodyStartIndex === 0 || bodyStartLength === 0) { + return html; + } + const bodyEndIndex = bodyStartIndex + bodyStartLength; + + return html.slice(0, bodyEndIndex) + liveReloadTag + html.slice(bodyEndIndex); +} + +function setCorsHeaders(response: http.ServerResponse) { + response.setHeader('Access-Control-Allow-Origin', '*'); + response.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS'); +} + +/** + * Proxies a mkdocs HTML response, injecting livereload parameters into the HTML body. + */ +export function proxyHtmlWithLivereloadInjection(options: { + request: http.IncomingMessage; + response: http.ServerResponse; + mkdocsTargetAddress: string; + proxyEndpoint: string; + onError: (error: Error) => void; +}): void { + const { request, response, mkdocsTargetAddress, proxyEndpoint, onError } = + options; + + const htmlProxy = httpProxy.createProxyServer({ + target: mkdocsTargetAddress, + selfHandleResponse: true, + }); + + htmlProxy.on('error', onError); + + // Intercept HTML responses to inject `` + htmlProxy.on('proxyRes', (proxyRes, _req, res) => { + const contentType = proxyRes.headers['content-type']; + const contentEncoding = proxyRes.headers['content-encoding']; + const isHtml = + contentType && + typeof contentType === 'string' && + contentType.startsWith(CONTENT_TYPE_HTML); + if (isHtml && !contentEncoding) { + const chunks: Buffer[] = []; + proxyRes.on('data', (chunk: Buffer | string) => { + chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)); + }); + proxyRes.on('end', () => { + const body = Buffer.concat(chunks).toString('utf8'); + const modifiedHtml = injectLivereloadParameters(body); + res.statusCode = (proxyRes.statusCode as number | undefined) ?? 200; + Object.keys(proxyRes.headers).forEach(key => { + if (key.toLowerCase() !== HEADER_CONTENT_LENGTH) { + res.setHeader(key, proxyRes.headers[key]!); + } + }); + setCorsHeaders(res); + res.end(modifiedHtml); + }); + } else { + res.statusCode = (proxyRes.statusCode as number | undefined) ?? 200; + Object.keys(proxyRes.headers).forEach(key => { + res.setHeader(key, proxyRes.headers[key]!); + }); + setCorsHeaders(res); + proxyRes.pipe(res); + } + }); + + const forwardPath = + request.url?.replace(new RegExp(`^${proxyEndpoint}`, 'i'), '') || ''; + request.url = forwardPath; + htmlProxy.web(request, response); +} + +/** + * Proxies mkdocs livereload long-polling requests, mapping the CLI path to mkdocs path. + */ +export function proxyMkdocsLivereload(options: { + request: http.IncomingMessage; + response: http.ServerResponse; + mkdocsTargetAddress: string; + onError: (error: Error) => void; +}): void { + const { request, response, mkdocsTargetAddress, onError } = options; + + const proxy = httpProxy.createProxyServer({ target: mkdocsTargetAddress }); + proxy.on('error', onError); + + setCorsHeaders(response); + response.setHeader('Access-Control-Allow-Headers', 'Content-Type'); + + request.url = request.url?.replace( + CLI_LIVERELOAD_PATH, + MKDOCS_LIVERELOAD_PATH, + ); + proxy.web(request, response); +} From 7dcedff2fbf180fda446563a31daedabf83bdeb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Wed, 8 Oct 2025 10:17:19 +0200 Subject: [PATCH 41/67] bump create-app sqlite version MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .changeset/modern-cats-double.md | 5 +++++ .../templates/next-app/packages/backend/package.json.hbs | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/modern-cats-double.md diff --git a/.changeset/modern-cats-double.md b/.changeset/modern-cats-double.md new file mode 100644 index 0000000000..0c5681aaad --- /dev/null +++ b/.changeset/modern-cats-double.md @@ -0,0 +1,5 @@ +--- +'@backstage/create-app': patch +--- + +Bump `better-sqlite3` to the latest version diff --git a/packages/create-app/templates/next-app/packages/backend/package.json.hbs b/packages/create-app/templates/next-app/packages/backend/package.json.hbs index 483c0b7a4e..518683ffd7 100644 --- a/packages/create-app/templates/next-app/packages/backend/package.json.hbs +++ b/packages/create-app/templates/next-app/packages/backend/package.json.hbs @@ -44,7 +44,7 @@ "@backstage/plugin-signals-backend": "^{{version '@backstage/plugin-signals-backend'}}", "@backstage/plugin-techdocs-backend": "^{{version '@backstage/plugin-techdocs-backend'}}", "app": "link:../app", - "better-sqlite3": "^9.0.0", + "better-sqlite3": "^12.0.0", "node-gyp": "^10.0.0", "pg": "^8.11.3" }, From 74b810a301fb4065b159eada0fc6928499db69fd Mon Sep 17 00:00:00 2001 From: birdhb Date: Wed, 8 Oct 2025 10:37:44 +0100 Subject: [PATCH 42/67] Update .changeset/eighty-cows-care.md Co-authored-by: Patrik Oldsberg Signed-off-by: birdhb --- .changeset/eighty-cows-care.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eighty-cows-care.md b/.changeset/eighty-cows-care.md index 73ec239b36..d4c9fafa4d 100644 --- a/.changeset/eighty-cows-care.md +++ b/.changeset/eighty-cows-care.md @@ -2,4 +2,4 @@ '@backstage/ui': minor --- -**Breaking** We are adding a new component `PasswordField`. We will be removing support for types `password` and `search` on `TextField`. +**BREAKING**: Added a new `PasswordField` component. As part of this change, the `password` and `search` types have been removed from `TextField`. From 019f3a64aa995252da1758289ae65faa9c0ea53e Mon Sep 17 00:00:00 2001 From: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> Date: Wed, 8 Oct 2025 11:28:08 -0400 Subject: [PATCH 43/67] Create doc-landing-page.md using html for table (#30884) * Create doc-landing-page.md using html for table HTML is used for the tables in this new doc landing page. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md Changed id of documentation and corrected some spelling mistakes. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md rearrange table and add links Incorporated PR suggestions. Added trial links in two different flavors to see which way works. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md fix prettier spacing Changed all indents to 2 spaces to try to fix prettier errors. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md changed top to "top" for valign attribute Changed valign=top to valign="top" to see if it fixes prettier errors. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md changes double quotes to single quotes Changed all double quotes to single quotes and removed all hrefs to see if I can get the file to pass the prettier check. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md fix prettier errors Hopefully, fixed prettier errors by removing extra lines. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md try to fix prettier errors Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md added links for understanding, using, and administering backstage Added links for each of the bullet points in "Understanding Backstage", "Using Backstage" and "Backstage Administration". Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md added remainder of links Added links for additional features, plugin development, references, and contributing to Backstage. Changed "Scaffolder" bullet to "Software Templates (aka Scaffolder)" Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md to remove Update a Component The document explaining how to update a component has not yet been written. So removing this bullet until the updating documentation exists. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update docusaurus.config.ts for new doc landing page Changed landing page from What is Backstage to the new doc-landing-page.md file. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Update doc-landing-page.md added new technical overview Added a bullet under Learn about Backstage for the new Technical Overview. Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> * Apply suggestion from @aramissennyeydd Signed-off-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> --------- Signed-off-by: milliehartnt123 <108491788+milliehartnt123@users.noreply.github.com> Signed-off-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> Co-authored-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> --- docs/landing-page/doc-landing-page.md | 109 ++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 docs/landing-page/doc-landing-page.md diff --git a/docs/landing-page/doc-landing-page.md b/docs/landing-page/doc-landing-page.md new file mode 100644 index 0000000000..cb1b889851 --- /dev/null +++ b/docs/landing-page/doc-landing-page.md @@ -0,0 +1,109 @@ +--- +id: doc-landing-page +title: Documentation +description: Documentation landing page. +--- + +## Understand, try, and administer Backstage + + + + + + + + + + + + + + +
Understand BackstageTry BackstageAdministrationAdditional Features
Learn about Backstage.

+ + 		Build a customizable Backstage app.
+ + 		Configure, Deploy, & Upgrade.

+ + 		Additional Backstage Features

+ +
+ +## Plugin Development, references, and how to contribute + + + + + + + + + + + + +
Plugin DevelopmentReferencesContribute to Backstage
Creating and Configuring Plugins

+ + 		Glossary, FAQ, and other reference material.
+ + 		Contributions are welcome and greatly appreciated!
+ +
From ee0e5b3257b50a9548f7d37d3422f45868878346 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Wed, 8 Oct 2025 17:46:15 +0200 Subject: [PATCH 44/67] docs: fix monospace font usage Signed-off-by: Vincenzo Scamporlino --- docs-ui/src/app/theming/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-ui/src/app/theming/page.mdx b/docs-ui/src/app/theming/page.mdx index 92b5256791..455b2cd7f5 100644 --- a/docs-ui/src/app/theming/page.mdx +++ b/docs-ui/src/app/theming/page.mdx @@ -446,7 +446,7 @@ monospace font that we use for code blocks and tables. - --bui-font-mono + --bui-font-monospace The monospace font for the theme. From 69729c759fe20291f135b754e42612889292ba3a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 17:16:06 +0100 Subject: [PATCH 45/67] Remove CSS baseline from UnifiedThemeProvider Signed-off-by: Charles de Dreuille --- .../theme/src/unified/UnifiedThemeProvider.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 64694aff37..45358c13da 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,7 +15,6 @@ */ import { ReactNode } from 'react'; -import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider, StylesProvider, @@ -68,7 +67,7 @@ import { useApplyThemeAttributes } from './useApplyThemeAttributes'; export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, ): JSX.Element { - const { children, theme, noCssBaseline = false } = props; + const { children, theme } = props; const v4Theme = theme.getTheme('v4') as Mui4Theme; const v5Theme = theme.getTheme('v5') as Mui5Theme; @@ -78,17 +77,7 @@ export function UnifiedThemeProvider( 'backstage', ); - let cssBaseline: JSX.Element | undefined = undefined; - if (!noCssBaseline) { - cssBaseline = ; - } - - let result = ( - <> - {cssBaseline} - {children} - - ); + let result = children as JSX.Element; if (v4Theme) { result = ( From c396392c5c2d70c3fe8f571b4a87e72bb5aea12f Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 17:22:17 +0100 Subject: [PATCH 46/67] Fix body background Signed-off-by: Charles de Dreuille --- packages/ui/css/styles.css | 4 ++++ packages/ui/src/css/core.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index d93ba87829..61051fdf07 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -9098,6 +9098,10 @@ } } +body { + background-color: var(--bui-bg); +} + :root { --bui-font-regular: system-ui; --bui-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; diff --git a/packages/ui/src/css/core.css b/packages/ui/src/css/core.css index 088d4d6f2b..a8ab7cfc6b 100644 --- a/packages/ui/src/css/core.css +++ b/packages/ui/src/css/core.css @@ -30,6 +30,10 @@ } } +body { + background-color: var(--bui-bg); +} + /* Light theme tokens */ :root { /* Font families */ From 865bce8ac9bae088fcd9769cabab1c6009153b98 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 17:35:45 +0100 Subject: [PATCH 47/67] Remove noCssBaseline Signed-off-by: Charles de Dreuille --- .changeset/salty-baths-buy.md | 5 +++++ .changeset/warm-dancers-call.md | 5 +++++ packages/theme/report.api.md | 2 -- packages/theme/src/unified/UnifiedThemeProvider.tsx | 1 - 4 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 .changeset/salty-baths-buy.md create mode 100644 .changeset/warm-dancers-call.md diff --git a/.changeset/salty-baths-buy.md b/.changeset/salty-baths-buy.md new file mode 100644 index 0000000000..c3b72189eb --- /dev/null +++ b/.changeset/salty-baths-buy.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Added a background color default on the body diff --git a/.changeset/warm-dancers-call.md b/.changeset/warm-dancers-call.md new file mode 100644 index 0000000000..62cdfb9baf --- /dev/null +++ b/.changeset/warm-dancers-call.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': minor +--- + +**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index ebdae12a05..18ac96ecec 100644 --- a/packages/theme/report.api.md +++ b/packages/theme/report.api.md @@ -459,8 +459,6 @@ export interface UnifiedThemeProviderProps { // (undocumented) children: ReactNode; // (undocumented) - noCssBaseline?: boolean; - // (undocumented) theme: UnifiedTheme; } ``` diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 45358c13da..d0886cd146 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -37,7 +37,6 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material export interface UnifiedThemeProviderProps { children: ReactNode; theme: UnifiedTheme; - noCssBaseline?: boolean; } /** From 5f8ba7c1fb75928446591266a075f3c1c87980a9 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 21:17:55 +0100 Subject: [PATCH 48/67] Update react-aria-components Signed-off-by: Charles de Dreuille --- packages/ui/package.json | 2 +- yarn.lock | 2673 +++++++++++++++++++------------------- 2 files changed, 1337 insertions(+), 1338 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index fd6ecd169c..85f4440690 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -42,7 +42,7 @@ "@remixicon/react": "^4.6.0", "@tanstack/react-table": "^8.21.3", "clsx": "^2.1.1", - "react-aria-components": "^1.10.1" + "react-aria-components": "^1.13.0" }, "devDependencies": { "@backstage/cli": "workspace:^", diff --git a/yarn.lock b/yarn.lock index 81c9de6628..865c2a931e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7528,7 +7528,7 @@ __metadata: lightningcss: "npm:^1.29.1" mini-css-extract-plugin: "npm:^2.9.2" react: "npm:^18.0.2" - react-aria-components: "npm:^1.10.1" + react-aria-components: "npm:^1.13.0" react-dom: "npm:^18.0.2" react-router-dom: "npm:^6.3.0" storybook: "npm:^9.1.7" @@ -9619,12 +9619,12 @@ __metadata: languageName: unknown linkType: soft -"@internationalized/date@npm:^3.8.2": - version: 3.8.2 - resolution: "@internationalized/date@npm:3.8.2" +"@internationalized/date@npm:^3.10.0": + version: 3.10.0 + resolution: "@internationalized/date@npm:3.10.0" dependencies: "@swc/helpers": "npm:^0.5.0" - checksum: 10/ca281d8785acff520ba4782d4eb0c542bb6c2783dbd3eb5457aeddbb68b9674f860fc00c6dd467f39c12eff9a04381742b07f0b9e210a115c094507e046d7b5a + checksum: 10/5940667ea2b0be54b798088ef995f787508bf4305d3741babc8b1f48de008c872555a5440ae61fa7399461a7339d3257fb8e86cc2111e72e185fc37d99e06392 languageName: node linkType: hard @@ -9638,12 +9638,12 @@ __metadata: languageName: node linkType: hard -"@internationalized/number@npm:^3.6.3": - version: 3.6.3 - resolution: "@internationalized/number@npm:3.6.3" +"@internationalized/number@npm:^3.6.5": + version: 3.6.5 + resolution: "@internationalized/number@npm:3.6.5" dependencies: "@swc/helpers": "npm:^0.5.0" - checksum: 10/b6f1793d12f89aca4c5bd88b60643739c4b02cade50a42c61192a2a5e0a913088ee35e4013b7ef3f675bdc919ebaf9a1631f1c40b1ceffd998f3fc14201a01c3 + checksum: 10/f80618842b9b8ea04e235277911eeb8e2ee129f1b266b94704a9f773df7536486c25db41ae708f6c2f4845cdb0a25e7d1856332370daba6c530528ac0ee997e3 languageName: node linkType: hard @@ -14544,929 +14544,928 @@ __metadata: languageName: node linkType: hard -"@react-aria/autocomplete@npm:3.0.0-beta.5": - version: 3.0.0-beta.5 - resolution: "@react-aria/autocomplete@npm:3.0.0-beta.5" - dependencies: - "@react-aria/combobox": "npm:^3.12.5" - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/listbox": "npm:^3.14.6" - "@react-aria/searchfield": "npm:^3.8.6" - "@react-aria/textfield": "npm:^3.17.5" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/autocomplete": "npm:3.0.0-beta.2" - "@react-stately/combobox": "npm:^3.10.6" - "@react-types/autocomplete": "npm:3.0.0-alpha.32" - "@react-types/button": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/f8b4427b310a4bd221cb0e38b031a4150c306f7d1177926c5a2bea0dd4370db6e49e220ca2358c283ea4c009f0a65611340486d161193f7943659a60e20a1881 - languageName: node - linkType: hard - -"@react-aria/breadcrumbs@npm:^3.5.26": - version: 3.5.26 - resolution: "@react-aria/breadcrumbs@npm:3.5.26" - dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/link": "npm:^3.8.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/breadcrumbs": "npm:^3.7.14" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/e0b9fe416cb84281e207ab12644d3bf21d6af82b4ec5d5ac204209ef6aff9abcc242660c23b2f3ef3572aa0f1e72dcc33905066f720afa1ccfc3cf3d4b916c31 - languageName: node - linkType: hard - -"@react-aria/button@npm:^3.13.3": - version: 3.13.3 - resolution: "@react-aria/button@npm:3.13.3" - dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/toolbar": "npm:3.0.0-beta.18" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/toggle": "npm:^3.8.5" - "@react-types/button": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/c360899930f648c56f16bf5d0d2d8c01b5d59449b87fff4e758e68127aa8e453396ffbdc6ee0fa2fbcf18fce73472041da36d21929b2d28bd55770bbfd75e384 - languageName: node - linkType: hard - -"@react-aria/calendar@npm:^3.8.3": - version: 3.8.3 - resolution: "@react-aria/calendar@npm:3.8.3" - dependencies: - "@internationalized/date": "npm:^3.8.2" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/live-announcer": "npm:^3.4.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/calendar": "npm:^3.8.2" - "@react-types/button": "npm:^3.12.2" - "@react-types/calendar": "npm:^3.7.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/53570c8c95fced3704a908ba218ee316db46f5c58352a5970f3b0a863257d8293dd732b0aaeb983921358f45acd50df623db88afa49df4d6735508d08369212b - languageName: node - linkType: hard - -"@react-aria/checkbox@npm:^3.15.7": - version: 3.15.7 - resolution: "@react-aria/checkbox@npm:3.15.7" - dependencies: - "@react-aria/form": "npm:^3.0.18" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/toggle": "npm:^3.11.5" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/checkbox": "npm:^3.6.15" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/toggle": "npm:^3.8.5" - "@react-types/checkbox": "npm:^3.9.5" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/a041baf3977d41f0f46db184b80da9f4d928209ca0bd764cb43202e5fc2f7a1ed44d7b9963d38f11dab934bf0ac5c0ee9311894b8177ed890c4f174b0640b8c8 - languageName: node - linkType: hard - -"@react-aria/collections@npm:3.0.0-rc.3": +"@react-aria/autocomplete@npm:3.0.0-rc.3": version: 3.0.0-rc.3 - resolution: "@react-aria/collections@npm:3.0.0-rc.3" + resolution: "@react-aria/autocomplete@npm:3.0.0-rc.3" dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/ssr": "npm:^3.9.9" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - use-sync-external-store: "npm:^1.4.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/a7a6ba15554ba6f3047cf6898a222e800b8317d4f0b05dbe11cf4301bc3aaa249ea2ae855ec4b0afd9f95c33e47f9ad10227299f6c382995155d91a94ce91493 - languageName: node - linkType: hard - -"@react-aria/color@npm:^3.0.9": - version: 3.0.9 - resolution: "@react-aria/color@npm:3.0.9" - dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/numberfield": "npm:^3.11.16" - "@react-aria/slider": "npm:^3.7.21" - "@react-aria/spinbutton": "npm:^3.6.16" - "@react-aria/textfield": "npm:^3.17.5" - "@react-aria/utils": "npm:^3.29.1" - "@react-aria/visually-hidden": "npm:^3.8.25" - "@react-stately/color": "npm:^3.8.6" - "@react-stately/form": "npm:^3.1.5" - "@react-types/color": "npm:^3.0.6" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/combobox": "npm:^3.14.0" + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/listbox": "npm:^3.15.0" + "@react-aria/searchfield": "npm:^3.8.9" + "@react-aria/textfield": "npm:^3.18.2" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/autocomplete": "npm:3.0.0-beta.3" + "@react-stately/combobox": "npm:^3.12.0" + "@react-types/autocomplete": "npm:3.0.0-alpha.35" + "@react-types/button": "npm:^3.14.1" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/387b1609bafa89297525384925f5c7e290f5a2b592488daae4482873518401b0b5f1eb712000a3ad823f66888937499d3e0522b85ae9adc1e819ea8761abf19a + checksum: 10/7acddd01b0f07bdbd2cf09d01a8b0fb9551d27656a92adf995411620a1599f8ff6421a72de1fcd56611d5eced49073cae48aee8127f3620fc1ca38d4ce3dcb62 languageName: node linkType: hard -"@react-aria/combobox@npm:^3.12.5": - version: 3.12.5 - resolution: "@react-aria/combobox@npm:3.12.5" +"@react-aria/breadcrumbs@npm:^3.5.29": + version: 3.5.29 + resolution: "@react-aria/breadcrumbs@npm:3.5.29" dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/listbox": "npm:^3.14.6" - "@react-aria/live-announcer": "npm:^3.4.3" - "@react-aria/menu": "npm:^3.18.5" - "@react-aria/overlays": "npm:^3.27.3" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/textfield": "npm:^3.17.5" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/combobox": "npm:^3.10.6" - "@react-stately/form": "npm:^3.1.5" - "@react-types/button": "npm:^3.12.2" - "@react-types/combobox": "npm:^3.13.6" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/link": "npm:^3.8.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/breadcrumbs": "npm:^3.7.17" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/171d27bb3a2eefc3c5e3ecdca1d760e44116a68d6169bfa214b05caf840aa879033855a3c1ea273f8d288d066800182f4f8a1299c3dbb7f0dff137db78ad9c41 + checksum: 10/875c2280539362e33200a9869dc52e5cec8a7407e068faa70cc190eaf266135448410acf9dd37b59bd86e53f330ac32e7598ceec468a2339cc04f18f826c4cbc languageName: node linkType: hard -"@react-aria/datepicker@npm:^3.14.5": - version: 3.14.5 - resolution: "@react-aria/datepicker@npm:3.14.5" - dependencies: - "@internationalized/date": "npm:^3.8.2" - "@internationalized/number": "npm:^3.6.3" - "@internationalized/string": "npm:^3.2.7" - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/form": "npm:^3.0.18" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/spinbutton": "npm:^3.6.16" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/datepicker": "npm:^3.14.2" - "@react-stately/form": "npm:^3.1.5" - "@react-types/button": "npm:^3.12.2" - "@react-types/calendar": "npm:^3.7.2" - "@react-types/datepicker": "npm:^3.12.2" - "@react-types/dialog": "npm:^3.5.19" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/440475577e9aee6c18c5e8f5d2c91f22f5a528ee283b472627eb8cf226c7a2125fa537b30b7e5f20e9d6325631e13c5dfa23f88d6f7e6c1e9fd41eff8ccb7590 - languageName: node - linkType: hard - -"@react-aria/dialog@npm:^3.5.27": - version: 3.5.27 - resolution: "@react-aria/dialog@npm:3.5.27" - dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/overlays": "npm:^3.27.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/dialog": "npm:^3.5.19" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/21257bb14352ab611e5659ce555cd845d8de51d30eea0cf7882b5119848c2136cd35f796a3031bbbcbc9640bffadeb35eee6f6254b34f2791c5a739c550e60da - languageName: node - linkType: hard - -"@react-aria/disclosure@npm:^3.0.6": - version: 3.0.6 - resolution: "@react-aria/disclosure@npm:3.0.6" - dependencies: - "@react-aria/ssr": "npm:^3.9.9" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/disclosure": "npm:^3.0.5" - "@react-types/button": "npm:^3.12.2" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/c1e602d6bc91b8b4884b2ec4ef4c3f1ea3d3052ead219a73eb4be110348ef0bde8fd3a68af92e7d8af83a59465b208e8a0d363b1ecffde53134516ce13f0361a - languageName: node - linkType: hard - -"@react-aria/dnd@npm:^3.10.1": - version: 3.10.1 - resolution: "@react-aria/dnd@npm:3.10.1" - dependencies: - "@internationalized/string": "npm:^3.2.7" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/live-announcer": "npm:^3.4.3" - "@react-aria/overlays": "npm:^3.27.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/dnd": "npm:^3.6.0" - "@react-types/button": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/bf1058f59d20054571541455d9fa25eff469363b6f65852d237d9479bee4d6323fc3bd8497115d16e93d4396ab2faba0317875416c93d65a1a566881771624c1 - languageName: node - linkType: hard - -"@react-aria/focus@npm:^3.20.5": - version: 3.20.5 - resolution: "@react-aria/focus@npm:3.20.5" - dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - clsx: "npm:^2.0.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/543c2f18c1d4f10940662608ca67947d1bc22630ae272e73136b36c2aefec61243148668201442132825bf4e9c0ab64add86c9870b9a51cb7bde2dfab7453a6e - languageName: node - linkType: hard - -"@react-aria/form@npm:^3.0.18": - version: 3.0.18 - resolution: "@react-aria/form@npm:3.0.18" - dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/form": "npm:^3.1.5" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/8c3edfaf3f2be28a16d7b0dcf00c677926e6e505fe26ebc348201f6f4e9e44aced1f17400a6c19717b18a3378be28438f269b438317a18f2070529fe2ac1e770 - languageName: node - linkType: hard - -"@react-aria/grid@npm:^3.14.2": +"@react-aria/button@npm:^3.14.2": version: 3.14.2 - resolution: "@react-aria/grid@npm:3.14.2" + resolution: "@react-aria/button@npm:3.14.2" dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/live-announcer": "npm:^3.4.3" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/grid": "npm:^3.11.3" - "@react-stately/selection": "npm:^3.20.3" - "@react-types/checkbox": "npm:^3.9.5" - "@react-types/grid": "npm:^3.3.3" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/toolbar": "npm:3.0.0-beta.21" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/toggle": "npm:^3.9.2" + "@react-types/button": "npm:^3.14.1" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/5f19539b1fe01d82b3693166269acae3fe74467b318f257babca79e5689b932ec83e5d7894ea0cbfd5e568fae3ffa61d04ae049a8967af09384f12d8e75792fa + checksum: 10/d6891ab39a81b349a80ac2c381a5663e33caf209d29aa536b0a8ca2963898b011913593c71f4bceb3f48a54a95cd5bc842b0ffbb33498d38a120d1a6d28f932b languageName: node linkType: hard -"@react-aria/gridlist@npm:^3.13.2": - version: 3.13.2 - resolution: "@react-aria/gridlist@npm:3.13.2" +"@react-aria/calendar@npm:^3.9.2": + version: 3.9.2 + resolution: "@react-aria/calendar@npm:3.9.2" dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/grid": "npm:^3.14.2" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/list": "npm:^3.12.3" - "@react-stately/tree": "npm:^3.9.0" - "@react-types/shared": "npm:^3.30.0" + "@internationalized/date": "npm:^3.10.0" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/calendar": "npm:^3.9.0" + "@react-types/button": "npm:^3.14.1" + "@react-types/calendar": "npm:^3.8.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/ea5e2f986fc74b627afe4918f94aa8cc778f146d7781822ce55788bb59a90e5765446d7c0bb5bcc86c1e4dd17ced3bd52ab6f703a50e8253bef25b70d3be0b56 + checksum: 10/3697b14765895c864db1a9393b86e0370cda01fab44464e9c1966150d7c793bcc9fd1e7a50d34022b0730fcaf9fd1995d431ccb1b5518eb086ccfb4b35e47ff2 languageName: node linkType: hard -"@react-aria/i18n@npm:^3.12.10": - version: 3.12.10 - resolution: "@react-aria/i18n@npm:3.12.10" +"@react-aria/checkbox@npm:^3.16.2": + version: 3.16.2 + resolution: "@react-aria/checkbox@npm:3.16.2" dependencies: - "@internationalized/date": "npm:^3.8.2" - "@internationalized/message": "npm:^3.1.8" - "@internationalized/number": "npm:^3.6.3" - "@internationalized/string": "npm:^3.2.7" - "@react-aria/ssr": "npm:^3.9.9" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/form": "npm:^3.1.2" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/toggle": "npm:^3.12.2" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/checkbox": "npm:^3.7.2" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/toggle": "npm:^3.9.2" + "@react-types/checkbox": "npm:^3.10.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6f331ceb62a1364d32f2336257ed82715f712e27d3e04a173296efc320f6532626561e883c2c3639ef4efdcd03498005e87d7160d8942ea8255d18d57770d3a0 + checksum: 10/77058d41d78b8feea4801022ba56f225b69f9b6577edc42a747dea21e4b38ea8d343f3a38455e9ae47a95a41b77e37fa0929a7136507f7b446111919f5e34478 languageName: node linkType: hard -"@react-aria/interactions@npm:^3.25.3": - version: 3.25.3 - resolution: "@react-aria/interactions@npm:3.25.3" +"@react-aria/collections@npm:^3.0.0": + version: 3.0.0 + resolution: "@react-aria/collections@npm:3.0.0" dependencies: - "@react-aria/ssr": "npm:^3.9.9" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/flags": "npm:^3.1.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/21754f3e15c35430262b8e283d00010543c8855bac9b9feeb701c967394940d4063b63380b59637c7da8e9b922f29edb3525d15d6005202a6dc22fd32a0d951f - languageName: node - linkType: hard - -"@react-aria/label@npm:^3.7.19": - version: 3.7.19 - resolution: "@react-aria/label@npm:3.7.19" - dependencies: - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/984a97ac0bca6487031bc006d8b697766d990e78e381d5e230414429542e51d84197459b45b834069615d9f17f5b162e671e464e62f78854ac8fbb458d1b3346 - languageName: node - linkType: hard - -"@react-aria/landmark@npm:^3.0.4": - version: 3.0.4 - resolution: "@react-aria/landmark@npm:3.0.4" - dependencies: - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" use-sync-external-store: "npm:^1.4.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/ab1d9cc93e83b0f486157dc878474e59b601631220bb688840c55baf6ccfd65d8fe2a04adaaa055f0e2883f3e7428b74d52cc13d32e15f930c0cb1c189309ee8 + checksum: 10/2704d35e0cc67e8e2f7fa61f593160768a633e2ff3ced45f01806928dc15738dcd005c49ff7130c0c92fbaabf0b0624833e54b7d24a10181c7910a469a9da52b languageName: node linkType: hard -"@react-aria/link@npm:^3.8.3": - version: 3.8.3 - resolution: "@react-aria/link@npm:3.8.3" +"@react-aria/color@npm:^3.1.2": + version: 3.1.2 + resolution: "@react-aria/color@npm:3.1.2" dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/link": "npm:^3.6.2" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/numberfield": "npm:^3.12.2" + "@react-aria/slider": "npm:^3.8.2" + "@react-aria/spinbutton": "npm:^3.6.19" + "@react-aria/textfield": "npm:^3.18.2" + "@react-aria/utils": "npm:^3.31.0" + "@react-aria/visually-hidden": "npm:^3.8.28" + "@react-stately/color": "npm:^3.9.2" + "@react-stately/form": "npm:^3.2.2" + "@react-types/color": "npm:^3.1.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/978f875a81616f46706da3596dfb52845af93420c3b2ce29d83c8eed5203cd0b5bdd3f988039dff3e3420de668927be46c2971333d628fa7af3f83b7796159f8 + checksum: 10/8b2c29097e86e2fa30bb5a53777dd09a7b2b24f6fb44ac1847275345aa895bb663735dcdc94bac90ba6fee074f11fe571f7effc5ba4ac4adb0bc87f67705479c languageName: node linkType: hard -"@react-aria/listbox@npm:^3.14.6": - version: 3.14.6 - resolution: "@react-aria/listbox@npm:3.14.6" +"@react-aria/combobox@npm:^3.14.0": + version: 3.14.0 + resolution: "@react-aria/combobox@npm:3.14.0" dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/list": "npm:^3.12.3" - "@react-types/listbox": "npm:^3.7.1" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/listbox": "npm:^3.15.0" + "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/menu": "npm:^3.19.3" + "@react-aria/overlays": "npm:^3.30.0" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/textfield": "npm:^3.18.2" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/combobox": "npm:^3.12.0" + "@react-stately/form": "npm:^3.2.2" + "@react-types/button": "npm:^3.14.1" + "@react-types/combobox": "npm:^3.13.9" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/068a1e5d56516436dbc8bde6e3a98db7ec277f0a0ce73ce6334e762c196570ae751dc0b0503f1e66624569d89ce412bc9292fa67f5a52db03db3104bb1d2f300 + checksum: 10/e583a99133b884e49b5848271a18d3dcbc6fdb4fb9aa9477d2164790b7386ada3316f6a4c19af3e8d989ed9c6207af12e2377c2f1644e8114afd916697a26c33 languageName: node linkType: hard -"@react-aria/live-announcer@npm:^3.4.3": - version: 3.4.3 - resolution: "@react-aria/live-announcer@npm:3.4.3" +"@react-aria/datepicker@npm:^3.15.2": + version: 3.15.2 + resolution: "@react-aria/datepicker@npm:3.15.2" dependencies: - "@swc/helpers": "npm:^0.5.0" - checksum: 10/73e3fc9bc2796cbccbcd0e01e2b4bd62d0b1a3915b1d0f01d2054141033c6b2a5275a7b7c52bdc0a3b9ef738881b4a84bb5d6df57d1ee066278e5bdf40a8f979 - languageName: node - linkType: hard - -"@react-aria/menu@npm:^3.18.5": - version: 3.18.5 - resolution: "@react-aria/menu@npm:3.18.5" - dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/overlays": "npm:^3.27.3" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/menu": "npm:^3.9.5" - "@react-stately/selection": "npm:^3.20.3" - "@react-stately/tree": "npm:^3.9.0" - "@react-types/button": "npm:^3.12.2" - "@react-types/menu": "npm:^3.10.2" - "@react-types/shared": "npm:^3.30.0" + "@internationalized/date": "npm:^3.10.0" + "@internationalized/number": "npm:^3.6.5" + "@internationalized/string": "npm:^3.2.7" + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/form": "npm:^3.1.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/spinbutton": "npm:^3.6.19" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/datepicker": "npm:^3.15.2" + "@react-stately/form": "npm:^3.2.2" + "@react-types/button": "npm:^3.14.1" + "@react-types/calendar": "npm:^3.8.0" + "@react-types/datepicker": "npm:^3.13.2" + "@react-types/dialog": "npm:^3.5.22" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/409f21cfa7d9cca62ca7c21b047bd72314181782b2d6ea0bb16a33075280653eef1b4d9c4b0ad15ebe72ec59e12103f3b1f86e6e7cd8886571956d6d099ae200 + checksum: 10/05f9b7bda5e5aa304ea4eebfded8040ea040b12284f2aa67f6b2a9e5458526a1e8dfbe077a53989a8633debb8184123e0907186f5b511c5a4c85a48f4c755f4b languageName: node linkType: hard -"@react-aria/meter@npm:^3.4.24": - version: 3.4.24 - resolution: "@react-aria/meter@npm:3.4.24" +"@react-aria/dialog@npm:^3.5.31": + version: 3.5.31 + resolution: "@react-aria/dialog@npm:3.5.31" dependencies: - "@react-aria/progress": "npm:^3.4.24" - "@react-types/meter": "npm:^3.4.10" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/overlays": "npm:^3.30.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/dialog": "npm:^3.5.22" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/980e46d3b784c59523ea9eb342c28e2a29e0549937da4def5f61ce011abb2da40f833dbe3f14550ffcd384860e08d4e8ee286e58834100b04c7de93fa5587e50 + checksum: 10/ea5d197b13d1441b45b5288382f9f25cf4ecec07ea6c8e989ce62b5f0ce2eaa7e6afe7e40fc808451b040eda2c41aa64f8e510d5205b26a5a07324b86468e53d languageName: node linkType: hard -"@react-aria/numberfield@npm:^3.11.16": - version: 3.11.16 - resolution: "@react-aria/numberfield@npm:3.11.16" +"@react-aria/disclosure@npm:^3.1.0": + version: 3.1.0 + resolution: "@react-aria/disclosure@npm:3.1.0" dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/spinbutton": "npm:^3.6.16" - "@react-aria/textfield": "npm:^3.17.5" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/numberfield": "npm:^3.9.13" - "@react-types/button": "npm:^3.12.2" - "@react-types/numberfield": "npm:^3.8.12" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/disclosure": "npm:^3.0.8" + "@react-types/button": "npm:^3.14.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/3e83938fe4fe76ef662c543734988b56d60824d8d2d19de5adffe06191106aa98b2b6dd4241ed49fc3e7ad3e1c4c43cbdd81c6fc32d728959e5b377faf8ffdcd + checksum: 10/34f5a0b5c7130fc686025f8015cefe219b84ed153dbca93ee4b47b2f598ca833ed161426dc76d2f09ee480b88741df046fcbb600516eb77b919afcb80b1b61a3 languageName: node linkType: hard -"@react-aria/overlays@npm:^3.26.1, @react-aria/overlays@npm:^3.27.3": - version: 3.27.3 - resolution: "@react-aria/overlays@npm:3.27.3" +"@react-aria/dnd@npm:^3.11.3": + version: 3.11.3 + resolution: "@react-aria/dnd@npm:3.11.3" dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/ssr": "npm:^3.9.9" - "@react-aria/utils": "npm:^3.29.1" - "@react-aria/visually-hidden": "npm:^3.8.25" - "@react-stately/overlays": "npm:^3.6.17" - "@react-types/button": "npm:^3.12.2" - "@react-types/overlays": "npm:^3.8.16" - "@react-types/shared": "npm:^3.30.0" + "@internationalized/string": "npm:^3.2.7" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/overlays": "npm:^3.30.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/dnd": "npm:^3.7.1" + "@react-types/button": "npm:^3.14.1" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/8cee1a99bc9ff4ecf0577b76f54cccaf684dde2278d0c270e82c683ef6f42bb8100de4596ae411e775643a3765abbd87fdb1c5d46bf05481ed9df9ed9b82276a + checksum: 10/48c58ab1fdb0e4dfce2e5933b580df3e46c0407535a28d2434fc6921d049bde45d0b3b94b7f3f4775e683e77c4a5b17ccfd9894c345230b7f49c7c0742663dce languageName: node linkType: hard -"@react-aria/progress@npm:^3.4.24": - version: 3.4.24 - resolution: "@react-aria/progress@npm:3.4.24" +"@react-aria/focus@npm:^3.21.2": + version: 3.21.2 + resolution: "@react-aria/focus@npm:3.21.2" dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/progress": "npm:^3.5.13" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/e7e4cf6f904f1b35a54704aa6d473c4eb239130ba8fbba71f6298b68a92c067162132fb5adf1e6f8960bdc8a2913004d979e088575761b0ba5252c28cdf62b0b - languageName: node - linkType: hard - -"@react-aria/radio@npm:^3.11.5": - version: 3.11.5 - resolution: "@react-aria/radio@npm:3.11.5" - dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/form": "npm:^3.0.18" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/radio": "npm:^3.10.14" - "@react-types/radio": "npm:^3.8.10" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/63bbca9ad7a065453f60bb759c0377a8febeb0e4582807726d7eef36a05c806d6d0c9d86ad7b73c42cc0a1c47bab5a1d0369e0d670fc4f58924662395418b24d - languageName: node - linkType: hard - -"@react-aria/searchfield@npm:^3.8.6": - version: 3.8.6 - resolution: "@react-aria/searchfield@npm:3.8.6" - dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/textfield": "npm:^3.17.5" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/searchfield": "npm:^3.5.13" - "@react-types/button": "npm:^3.12.2" - "@react-types/searchfield": "npm:^3.6.3" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/7db3dd61084e49c9d2c9fa9aa10821087aff91cfadeade78b559cd1877c67a49dcdd238b48a8b2501cd7070b9123d276e8ef6170cb5438cdce28ef6889eea366 - languageName: node - linkType: hard - -"@react-aria/select@npm:^3.15.7": - version: 3.15.7 - resolution: "@react-aria/select@npm:3.15.7" - dependencies: - "@react-aria/form": "npm:^3.0.18" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/listbox": "npm:^3.14.6" - "@react-aria/menu": "npm:^3.18.5" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-aria/visually-hidden": "npm:^3.8.25" - "@react-stately/select": "npm:^3.6.14" - "@react-types/button": "npm:^3.12.2" - "@react-types/select": "npm:^3.9.13" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/8e0974ddc558051c384a7d9da1eeea4623cbe4a61f0f0402aebeb4be23a1cb5875b839608dcc6aaca4ab6c288143c202eb0fa2ee3ed8f62b7e33d142604f2fba - languageName: node - linkType: hard - -"@react-aria/selection@npm:^3.24.3": - version: 3.24.3 - resolution: "@react-aria/selection@npm:3.24.3" - dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/selection": "npm:^3.20.3" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/f2575161b69d87e7c5ee7d0d658c96c97e815a0de74d121f3744efcfb62f181efd3250f3842b0347d54e9d27c85b41292728927efb3bcc2bdcf8873d92647eb1 - languageName: node - linkType: hard - -"@react-aria/separator@npm:^3.4.10": - version: 3.4.10 - resolution: "@react-aria/separator@npm:3.4.10" - dependencies: - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/706aed510aa306f70ff98a82061995f3fb1ffa6ca0134b282ac9a776441fe4241ff87f8008fa04761b3edaadf8020c96f55720821a7ff4b5c362cad3eb7ed98a - languageName: node - linkType: hard - -"@react-aria/slider@npm:^3.7.21": - version: 3.7.21 - resolution: "@react-aria/slider@npm:3.7.21" - dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/slider": "npm:^3.6.5" - "@react-types/shared": "npm:^3.30.0" - "@react-types/slider": "npm:^3.7.12" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/1a063533b33f224adf782840664e517a8034a28129648908b7391c648c4141c58103dc9733c81f12b1848320669dcca64a059a3279c4114ae81df796a274da59 - languageName: node - linkType: hard - -"@react-aria/spinbutton@npm:^3.6.16": - version: 3.6.16 - resolution: "@react-aria/spinbutton@npm:3.6.16" - dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/live-announcer": "npm:^3.4.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/button": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/2f032d3206738902e91661b0e5ff1cdd75005c40b75a219bbf6aab48b3aad16d1d1090c873ab2e1e0400dee74db56c455948ff2ebe0a6c7f1edb200dfea826e5 - languageName: node - linkType: hard - -"@react-aria/ssr@npm:^3.9.9": - version: 3.9.9 - resolution: "@react-aria/ssr@npm:3.9.9" - dependencies: - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d0675357b51784e9dbe3add97aa0e6acc810ab0ef01d1c7a317ff8ead5eae64d66c60cc751ea3d10f874bb381e445099bb31cb7f1955801848ce6dce91b588a2 - languageName: node - linkType: hard - -"@react-aria/switch@npm:^3.7.5": - version: 3.7.5 - resolution: "@react-aria/switch@npm:3.7.5" - dependencies: - "@react-aria/toggle": "npm:^3.11.5" - "@react-stately/toggle": "npm:^3.8.5" - "@react-types/shared": "npm:^3.30.0" - "@react-types/switch": "npm:^3.5.12" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/1f716296b444b1db28bd55493ddabbdc403fc48a865cbbd0e383e69e2e42b97e778446383740330cf7e76a4a2dcc0de6f84fed1cddd0f0760b6ffa34118794cb - languageName: node - linkType: hard - -"@react-aria/table@npm:^3.17.5": - version: 3.17.5 - resolution: "@react-aria/table@npm:3.17.5" - dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/grid": "npm:^3.14.2" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/live-announcer": "npm:^3.4.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-aria/visually-hidden": "npm:^3.8.25" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/flags": "npm:^3.1.2" - "@react-stately/table": "npm:^3.14.3" - "@react-types/checkbox": "npm:^3.9.5" - "@react-types/grid": "npm:^3.3.3" - "@react-types/shared": "npm:^3.30.0" - "@react-types/table": "npm:^3.13.1" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d10e2432b66b0279413fec031673172ed8c49d93185cd1657511467b04ec780bc089a7e45d75c9ba71c94419355107e961e679acd254da8a19d446e1c9343a70 - languageName: node - linkType: hard - -"@react-aria/tabs@npm:^3.10.5": - version: 3.10.5 - resolution: "@react-aria/tabs@npm:3.10.5" - dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/tabs": "npm:^3.8.3" - "@react-types/shared": "npm:^3.30.0" - "@react-types/tabs": "npm:^3.3.16" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/39db9d4d5a0e87e7cbdb91bcdc5385e02fd21cb1e1c181ecf226e6b0fba9c948c03623cceb11d831a87056c6bc3a0528a7e7a9f58292b0c4dfaa6b9cce56f3bb - languageName: node - linkType: hard - -"@react-aria/tag@npm:^3.6.2": - version: 3.6.2 - resolution: "@react-aria/tag@npm:3.6.2" - dependencies: - "@react-aria/gridlist": "npm:^3.13.2" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/list": "npm:^3.12.3" - "@react-types/button": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/fbfb3a9769077bcc23199aacd80c83b42e89f752d0690c6a5751d9a95b6e760365be2915fa134db9ad040355b341b150270f553ece6f791378a27102e90e7fca - languageName: node - linkType: hard - -"@react-aria/textfield@npm:^3.17.5": - version: 3.17.5 - resolution: "@react-aria/textfield@npm:3.17.5" - dependencies: - "@react-aria/form": "npm:^3.0.18" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/shared": "npm:^3.30.0" - "@react-types/textfield": "npm:^3.12.3" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/59f2df9650b8acb961a1eaec59bb8a0b18ef6b0b1f3d8bbc2f398ae4fcfc8b3a2a2c22c357319bb53bc166b4e2c624ab58187104621b164de22f465ab342f72d - languageName: node - linkType: hard - -"@react-aria/toast@npm:^3.0.5": - version: 3.0.5 - resolution: "@react-aria/toast@npm:3.0.5" - dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/landmark": "npm:^3.0.4" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/toast": "npm:^3.1.1" - "@react-types/button": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d674bde2446e29b44fe393386da154d8a467954edf29c9c2cdb922972ea6f962e4f16220c03a410bb0be555b9f96f96f71146762123b9d9187e081a74696bee2 - languageName: node - linkType: hard - -"@react-aria/toggle@npm:^3.11.5": - version: 3.11.5 - resolution: "@react-aria/toggle@npm:3.11.5" - dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/toggle": "npm:^3.8.5" - "@react-types/checkbox": "npm:^3.9.5" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6490a53496b317d3f12c93e347b2d9dd0e7e4835d66eb0823612d3918836338566c0ed2ac22bf4d94649c6019bf411d9c9a1b8f49d420d52eab8f737c2c3f8c5 - languageName: node - linkType: hard - -"@react-aria/toolbar@npm:3.0.0-beta.18": - version: 3.0.0-beta.18 - resolution: "@react-aria/toolbar@npm:3.0.0-beta.18" - dependencies: - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/0ea1d0d73dad265773678fc66712800840b20558d3e19f0b6aa1f0953ba57e48be9ad293d1f48db3e609b017998ded11227d1aebfb998bcfbe05467498318ced - languageName: node - linkType: hard - -"@react-aria/tooltip@npm:^3.8.5": - version: 3.8.5 - resolution: "@react-aria/tooltip@npm:3.8.5" - dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/tooltip": "npm:^3.5.5" - "@react-types/shared": "npm:^3.30.0" - "@react-types/tooltip": "npm:^3.4.18" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/4398c4ca41ab302b8e50a86c07909b461275bf5025c0163ecb5ae57bbe98e15164927ed58a1137a235996626b19d5397916736ee3257d8bc33d09ec0b1d3f70e - languageName: node - linkType: hard - -"@react-aria/tree@npm:^3.1.1": - version: 3.1.1 - resolution: "@react-aria/tree@npm:3.1.1" - dependencies: - "@react-aria/gridlist": "npm:^3.13.2" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/tree": "npm:^3.9.0" - "@react-types/button": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" - "@swc/helpers": "npm:^0.5.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d387de7a9de81df8f45a16882ddb24ecf8da06638822b8be4d66357b0b3edd67a85aa185f8cf947c4c8f9036c396bea406dd5e277ef0f74828a29d2dd86fd809 - languageName: node - linkType: hard - -"@react-aria/utils@npm:^3.29.1": - version: 3.29.1 - resolution: "@react-aria/utils@npm:3.29.1" - dependencies: - "@react-aria/ssr": "npm:^3.9.9" - "@react-stately/flags": "npm:^3.1.2" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" clsx: "npm:^2.0.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/90af5ee5b9c7db063ba66a28cfecb8594f356c2b0fc4cce2fcee94543f3b160214e4a9c280e83355af89452b88b1def8856493705c770874da7121ba1d3d0cc0 + checksum: 10/4bce20d956c24ab08b707e84896afafd66b3496971efb6dd611dae1c4c1f47a5c99c786a96b2fd0eb083a7c9ba5368ac04ce3a937cc48fdcc8bb85f81e7a3098 languageName: node linkType: hard -"@react-aria/virtualizer@npm:^4.1.7": - version: 4.1.7 - resolution: "@react-aria/virtualizer@npm:4.1.7" +"@react-aria/form@npm:^3.1.2": + version: 3.1.2 + resolution: "@react-aria/form@npm:3.1.2" dependencies: - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-stately/virtualizer": "npm:^4.4.1" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/form": "npm:^3.2.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/4bb747314ac96da76c64490041ab95f4a0889bab7e5805b0e18cb71bdb290ae73932ddd866657cfcdfac8382d6b3017c3dfb1a91ae415a6d1ab45b11d88f66ec + checksum: 10/140d8cb830fab6fc4d885e79fbdfc92f06af43134b6ab68ec93b58fec25220b823b58698bd9bbd574bc21d1c0d443813df89b44f5ea33b5bcd314128560bd4fd languageName: node linkType: hard -"@react-aria/visually-hidden@npm:^3.8.25": - version: 3.8.25 - resolution: "@react-aria/visually-hidden@npm:3.8.25" +"@react-aria/grid@npm:^3.14.5": + version: 3.14.5 + resolution: "@react-aria/grid@npm:3.14.5" dependencies: - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/grid": "npm:^3.11.6" + "@react-stately/selection": "npm:^3.20.6" + "@react-types/checkbox": "npm:^3.10.2" + "@react-types/grid": "npm:^3.3.6" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/362a793beac35fde101e598f4cac9cd98394b9a0171309842e2428b25074ee696358c45d2ded8244bc40a9db8471440994be59b0f347d2c643092c6445aaca61 + checksum: 10/7e8731b55366b05f619259fbeb149b63d7c17158e25a2ebaacbe3368f50e71f054e4cef3a943ca6076d3ebf0242cfcb155ff276ab984a7495dc46f6b5b13f1d2 + languageName: node + linkType: hard + +"@react-aria/gridlist@npm:^3.14.1": + version: 3.14.1 + resolution: "@react-aria/gridlist@npm:3.14.1" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/grid": "npm:^3.14.5" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/list": "npm:^3.13.1" + "@react-stately/tree": "npm:^3.9.3" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/1d7ff55a869a3157edd266b5d14a9e1380561bcb8d949fdd43e983e64932ec251aa7221e6156e93ea977b8942c5b9b8f9aae5f04ebc2ed27eef9be2b7e00b5ab + languageName: node + linkType: hard + +"@react-aria/i18n@npm:^3.12.13": + version: 3.12.13 + resolution: "@react-aria/i18n@npm:3.12.13" + dependencies: + "@internationalized/date": "npm:^3.10.0" + "@internationalized/message": "npm:^3.1.8" + "@internationalized/number": "npm:^3.6.5" + "@internationalized/string": "npm:^3.2.7" + "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/a5464213e626c60d63e0dbab84907ab452c53022a27a5c482c8f86f23c96b53522e52005c5cfc829f388c807eaf246cded69d5bee24b9e0fc08f34f9b0359e82 + languageName: node + linkType: hard + +"@react-aria/interactions@npm:^3.25.6": + version: 3.25.6 + resolution: "@react-aria/interactions@npm:3.25.6" + dependencies: + "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/flags": "npm:^3.1.2" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/fd30e14107d919be25909ca8f69fb99d88aa1f1ead523717a390a40be6d774e40de47dd7f9fcc7e6d66e0f4abc12238001a10d2128cbd7af9b141641cacf6da4 + languageName: node + linkType: hard + +"@react-aria/label@npm:^3.7.22": + version: 3.7.22 + resolution: "@react-aria/label@npm:3.7.22" + dependencies: + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/2bbfca230465057230597fd23f47ebe591bb5307ff7e37a082a4922e132f1310b69a06dcb4905c356b674b159bd09c2ca690e0526d9f303bed8f66eeb8a61b13 + languageName: node + linkType: hard + +"@react-aria/landmark@npm:^3.0.7": + version: 3.0.7 + resolution: "@react-aria/landmark@npm:3.0.7" + dependencies: + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + use-sync-external-store: "npm:^1.4.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/b86cbd8356fa08e01318644082b9ef948cb3d61695c3dfdb5bdc67a59ce3e3f774c91bf62795280c7ac620b87f9d7e66635c7e02a2c2eb2663b3e2b6a77a448a + languageName: node + linkType: hard + +"@react-aria/link@npm:^3.8.6": + version: 3.8.6 + resolution: "@react-aria/link@npm:3.8.6" + dependencies: + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/link": "npm:^3.6.5" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/7f0fd02e7eb5c69ba5e280c57b0e7ec6568fbca231159f591201f9d753bd2f985613d0f75a54465f292a617684a55d8f5f10585538ce1fbc3f9f29fb3d339529 + languageName: node + linkType: hard + +"@react-aria/listbox@npm:^3.15.0": + version: 3.15.0 + resolution: "@react-aria/listbox@npm:3.15.0" + dependencies: + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/list": "npm:^3.13.1" + "@react-types/listbox": "npm:^3.7.4" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/e361b11ab4ae521a3e4d41ea811f15e2863b97aa9e65c19eef06c38b9f378191c34dfedf545d1ea4667aa0b89aa157712ed6f78950d71cfc712643666cc59d7a + languageName: node + linkType: hard + +"@react-aria/live-announcer@npm:^3.4.4": + version: 3.4.4 + resolution: "@react-aria/live-announcer@npm:3.4.4" + dependencies: + "@swc/helpers": "npm:^0.5.0" + checksum: 10/058859f7c0895bccd902f038586333016d7a33d38508e5edaf0f4c809a00217c19db3aa00604e78f3a788e399c3701a8d7fe95e2eb29c8ae754ff4bb62da1f7a + languageName: node + linkType: hard + +"@react-aria/menu@npm:^3.19.3": + version: 3.19.3 + resolution: "@react-aria/menu@npm:3.19.3" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/overlays": "npm:^3.30.0" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/menu": "npm:^3.9.8" + "@react-stately/selection": "npm:^3.20.6" + "@react-stately/tree": "npm:^3.9.3" + "@react-types/button": "npm:^3.14.1" + "@react-types/menu": "npm:^3.10.5" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/04987d1fae12979335a755093b74e0a9c61d2bf1f207111bca2a8513ea43962b282315976d33e5f06d3e2e1fc1927e2f9030365c4e4a26024e156ebcb88a8d9c + languageName: node + linkType: hard + +"@react-aria/meter@npm:^3.4.27": + version: 3.4.27 + resolution: "@react-aria/meter@npm:3.4.27" + dependencies: + "@react-aria/progress": "npm:^3.4.27" + "@react-types/meter": "npm:^3.4.13" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/b79bc0f2a96b53ec427a25315cdec4a50dd1bc1cb1fbff9f84847c0bb2597851a514ecbbf4b0fbb18b165bc007142ad45bd432641301b8db990e09f281563d39 + languageName: node + linkType: hard + +"@react-aria/numberfield@npm:^3.12.2": + version: 3.12.2 + resolution: "@react-aria/numberfield@npm:3.12.2" + dependencies: + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/spinbutton": "npm:^3.6.19" + "@react-aria/textfield": "npm:^3.18.2" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/numberfield": "npm:^3.10.2" + "@react-types/button": "npm:^3.14.1" + "@react-types/numberfield": "npm:^3.8.15" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/7ec498b0d3bf6a55e891e61d1693a6395a3e7b89a04d81af433a0cb3dd673603ce5dd7f861d39658a5fe6c0cd48356c8120c39b9a4495563d9b13af0f8c0b3ca + languageName: node + linkType: hard + +"@react-aria/overlays@npm:^3.26.1, @react-aria/overlays@npm:^3.30.0": + version: 3.30.0 + resolution: "@react-aria/overlays@npm:3.30.0" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/utils": "npm:^3.31.0" + "@react-aria/visually-hidden": "npm:^3.8.28" + "@react-stately/overlays": "npm:^3.6.20" + "@react-types/button": "npm:^3.14.1" + "@react-types/overlays": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/32c25162b55078cf18ca6f514065d97982a9447b1ec9d75fda4db69fa909cd5dcc3d5b4c8917edecce7d8dd5b20bc51c3862945110c0badef021c86878e8fb4d + languageName: node + linkType: hard + +"@react-aria/progress@npm:^3.4.27": + version: 3.4.27 + resolution: "@react-aria/progress@npm:3.4.27" + dependencies: + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/progress": "npm:^3.5.16" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/7b0ac3c2da6205096e94b4d72a2b2b0250f864cace05b562e49b86986dbebbab633e62fcc39ffa915974318de37d5f6256b1f584d8e33ebca70e564d32b3aca2 + languageName: node + linkType: hard + +"@react-aria/radio@npm:^3.12.2": + version: 3.12.2 + resolution: "@react-aria/radio@npm:3.12.2" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/form": "npm:^3.1.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/radio": "npm:^3.11.2" + "@react-types/radio": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/709bdd0515e797f2bf37dc17f55e46103aa918a4549880c15ecca7c03adc0716e5650376b1cc877437b12e5df4e3050138699707e4ec9fa611614a1e38b98eb0 + languageName: node + linkType: hard + +"@react-aria/searchfield@npm:^3.8.9": + version: 3.8.9 + resolution: "@react-aria/searchfield@npm:3.8.9" + dependencies: + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/textfield": "npm:^3.18.2" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/searchfield": "npm:^3.5.16" + "@react-types/button": "npm:^3.14.1" + "@react-types/searchfield": "npm:^3.6.6" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/a088f7b1c434aea1d4603acb34e591c8f11a1532a41407b68336933a73e1e5f55b07bb6323642af5ebeebe39756e1e60943487d77d69882409c491fd816e86f4 + languageName: node + linkType: hard + +"@react-aria/select@npm:^3.17.0": + version: 3.17.0 + resolution: "@react-aria/select@npm:3.17.0" + dependencies: + "@react-aria/form": "npm:^3.1.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/listbox": "npm:^3.15.0" + "@react-aria/menu": "npm:^3.19.3" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-aria/visually-hidden": "npm:^3.8.28" + "@react-stately/select": "npm:^3.8.0" + "@react-types/button": "npm:^3.14.1" + "@react-types/select": "npm:^3.11.0" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/e986470eb5d8c675fbd5753e0051827c94dad00c5472015d4744e4e9233e7a4ff97f4634e94c5686ef9f65f2b6ffa894b24f3a07bde0437de6fe5802901969cd + languageName: node + linkType: hard + +"@react-aria/selection@npm:^3.26.0": + version: 3.26.0 + resolution: "@react-aria/selection@npm:3.26.0" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/selection": "npm:^3.20.6" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/6c3c59993c719cfdfd42ef9c753212e7bddf30c348117726e8abfe977876f583e0d0b6fa4ce73e46f1fa53e79e42f0866a333e257cef400c4a24bd5d1c81c379 + languageName: node + linkType: hard + +"@react-aria/separator@npm:^3.4.13": + version: 3.4.13 + resolution: "@react-aria/separator@npm:3.4.13" + dependencies: + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/4326c36d002f3931c8c717b7aacbe30943d42ca190fe400a151d8f480dd65359a0bc9192da33213d4e8215bbfd47436de07fedfe957e83be4101a926d116862e + languageName: node + linkType: hard + +"@react-aria/slider@npm:^3.8.2": + version: 3.8.2 + resolution: "@react-aria/slider@npm:3.8.2" + dependencies: + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/slider": "npm:^3.7.2" + "@react-types/shared": "npm:^3.32.1" + "@react-types/slider": "npm:^3.8.2" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/3b9115eaf61f722929dcb739cd910b9e84f04644fdce8add21bc0f9305a3e7d0948c2e417afe424783b22738d52060505a32187aba1e7aca19dd572ebb6d10ed + languageName: node + linkType: hard + +"@react-aria/spinbutton@npm:^3.6.19": + version: 3.6.19 + resolution: "@react-aria/spinbutton@npm:3.6.19" + dependencies: + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/button": "npm:^3.14.1" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/9b87a1c87a09ddde141bb23e8e3ce1b1137cb1931df848d6fd3bbcd0773b3579045413b725686629da02c22733ad5b5dfc57e06c5fefaf07f8cfb8c4e2334997 + languageName: node + linkType: hard + +"@react-aria/ssr@npm:^3.9.10": + version: 3.9.10 + resolution: "@react-aria/ssr@npm:3.9.10" + dependencies: + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/3b414b5b174769e874014604749d9beaf2556f360f61d3df3223bca6150c16dd37fbf16800e669a2b0045bd221df70212756991a426a7a472c56aac6c0dabd1b + languageName: node + linkType: hard + +"@react-aria/switch@npm:^3.7.8": + version: 3.7.8 + resolution: "@react-aria/switch@npm:3.7.8" + dependencies: + "@react-aria/toggle": "npm:^3.12.2" + "@react-stately/toggle": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" + "@react-types/switch": "npm:^3.5.15" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/2a9cc90fb6f9593c8b41517d83e4a2e05f77ba544ee41d5beeb865329863ca70afa5beec94230512d3eab44d62f0c0c25110323ba89745ba64e05bee0f34c4ec + languageName: node + linkType: hard + +"@react-aria/table@npm:^3.17.8": + version: 3.17.8 + resolution: "@react-aria/table@npm:3.17.8" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/grid": "npm:^3.14.5" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/utils": "npm:^3.31.0" + "@react-aria/visually-hidden": "npm:^3.8.28" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/flags": "npm:^3.1.2" + "@react-stately/table": "npm:^3.15.1" + "@react-types/checkbox": "npm:^3.10.2" + "@react-types/grid": "npm:^3.3.6" + "@react-types/shared": "npm:^3.32.1" + "@react-types/table": "npm:^3.13.4" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/39281b279c2efea9342877e4e2cb1af38f776a7349bcbe6e6daabf281e01445c28b8c7cd38c4f3cfeaea42a126552fd332fc242abd1e5e009c9252e3f1b88512 + languageName: node + linkType: hard + +"@react-aria/tabs@npm:^3.10.8": + version: 3.10.8 + resolution: "@react-aria/tabs@npm:3.10.8" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/tabs": "npm:^3.8.6" + "@react-types/shared": "npm:^3.32.1" + "@react-types/tabs": "npm:^3.3.19" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/eae72fb6636ae1352ceec509605d35018d96f66aacab896748697da9f6b1e166c7bff88a0ffcfdee2869f653464df401d857906f44bdce5d5b9887b75f533287 + languageName: node + linkType: hard + +"@react-aria/tag@npm:^3.7.2": + version: 3.7.2 + resolution: "@react-aria/tag@npm:3.7.2" + dependencies: + "@react-aria/gridlist": "npm:^3.14.1" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/list": "npm:^3.13.1" + "@react-types/button": "npm:^3.14.1" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/757daed07380eee13a05b1ba0b72e062db689526dd67087cd34726a6003b4791cb450c9765be3ea32208ce1a430903db3885d07700cb8775cd8bcd97b8124cb4 + languageName: node + linkType: hard + +"@react-aria/textfield@npm:^3.18.2": + version: 3.18.2 + resolution: "@react-aria/textfield@npm:3.18.2" + dependencies: + "@react-aria/form": "npm:^3.1.2" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/shared": "npm:^3.32.1" + "@react-types/textfield": "npm:^3.12.6" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/2713e3c42f502ecd1d8a505b01c404a6531d1450d8c422a12ac477d1d45dd5e11e9da48807e75c4915948f579969b4b894f1dda14d87ce3790ab67659b20a396 + languageName: node + linkType: hard + +"@react-aria/toast@npm:^3.0.8": + version: 3.0.8 + resolution: "@react-aria/toast@npm:3.0.8" + dependencies: + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/landmark": "npm:^3.0.7" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/toast": "npm:^3.1.2" + "@react-types/button": "npm:^3.14.1" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/b8b21566723e9038f15517934c45c3e6406f28d476a682421aee270f01852e8a46f0170af13c3a5c8e80926169ebd7802d5def0115876e395dedad4fc9409f49 + languageName: node + linkType: hard + +"@react-aria/toggle@npm:^3.12.2": + version: 3.12.2 + resolution: "@react-aria/toggle@npm:3.12.2" + dependencies: + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/toggle": "npm:^3.9.2" + "@react-types/checkbox": "npm:^3.10.2" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/f6b9ce00d7a6bb0e7b6123826761cb7f40b9c7736ce8edc14b39f1865cd9165c086da8a3f6e27ddae8c8557f54f421bb0b4761c455dae81ed037a765b84b5cb7 + languageName: node + linkType: hard + +"@react-aria/toolbar@npm:3.0.0-beta.21": + version: 3.0.0-beta.21 + resolution: "@react-aria/toolbar@npm:3.0.0-beta.21" + dependencies: + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/ada5f50c4409997d46e4af0b739f1fada6d3c6ac0bdd3a7eef7ad2a440a53eaeebbd0685d19deb4b7c21832882dbe27a5a8162bf89135d2c930fbaf4bb5e0365 + languageName: node + linkType: hard + +"@react-aria/tooltip@npm:^3.8.8": + version: 3.8.8 + resolution: "@react-aria/tooltip@npm:3.8.8" + dependencies: + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/tooltip": "npm:^3.5.8" + "@react-types/shared": "npm:^3.32.1" + "@react-types/tooltip": "npm:^3.4.21" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/eddb4736b3813b26fdb21ce07cef170215a900a233d859605ad17a2c72c66ca8cc2fe105d3920f9b24fce0eb18e050551268dc25a9c5d4b987b7eca1e60b24e9 + languageName: node + linkType: hard + +"@react-aria/tree@npm:^3.1.4": + version: 3.1.4 + resolution: "@react-aria/tree@npm:3.1.4" + dependencies: + "@react-aria/gridlist": "npm:^3.14.1" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/tree": "npm:^3.9.3" + "@react-types/button": "npm:^3.14.1" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/ed3e48d011b846026b4c3bf78a96fbe91ff892d995a94e94ff6f5218dcbd6736660507dee1e06aac9ce48f9f66fdc8898cf8486192cecad428242b5b4930fde8 + languageName: node + linkType: hard + +"@react-aria/utils@npm:^3.31.0": + version: 3.31.0 + resolution: "@react-aria/utils@npm:3.31.0" + dependencies: + "@react-aria/ssr": "npm:^3.9.10" + "@react-stately/flags": "npm:^3.1.2" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + clsx: "npm:^2.0.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/b021d2c3704ce934ec41cfc4d87fa6904fb3e007030e31b824cd8287053e866076cb7c7f072d6ed2fee82ca68f2e3f4677f3d58d7938e4b3315831f1fdea4d90 + languageName: node + linkType: hard + +"@react-aria/virtualizer@npm:^4.1.10": + version: 4.1.10 + resolution: "@react-aria/virtualizer@npm:4.1.10" + dependencies: + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-stately/virtualizer": "npm:^4.4.4" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/a9d1083ee2e424a33cbe5520fc86fd5194a77555b3be21792f648a723770998320220bc32e49ae1551ce5e00b024520ad0bca6ca0d7fdee86bc6216eb1cf78dc + languageName: node + linkType: hard + +"@react-aria/visually-hidden@npm:^3.8.28": + version: 3.8.28 + resolution: "@react-aria/visually-hidden@npm:3.8.28" + dependencies: + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/utils": "npm:^3.31.0" + "@react-types/shared": "npm:^3.32.1" + "@swc/helpers": "npm:^0.5.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/07e61b18d385127353014c2bd2bb9bba5035ac064988fa1bfc2f13d8050ccc9488891d4d3fbe6c79a808bfed7f06f1867b89ec1c975818712a36266040d76597 languageName: node linkType: hard @@ -15493,151 +15492,150 @@ __metadata: languageName: node linkType: hard -"@react-stately/autocomplete@npm:3.0.0-beta.2": - version: 3.0.0-beta.2 - resolution: "@react-stately/autocomplete@npm:3.0.0-beta.2" +"@react-stately/autocomplete@npm:3.0.0-beta.3": + version: 3.0.0-beta.3 + resolution: "@react-stately/autocomplete@npm:3.0.0-beta.3" dependencies: - "@react-stately/utils": "npm:^3.10.7" + "@react-stately/utils": "npm:^3.10.8" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/836e593688c33ab118547b60fae93ffb1e9e440aed0ffc8c382290f414bfdc313a88964a00a6bd8b7e7b9aca691538b66adfaafee6065b93cedeb80c5aeef675 + checksum: 10/3920ce479e577730870bc6845ee888a44a9a1f90188cf68efb60c74a8264b5886c9059b0cedc07b82fcb26afd770bff5fc971bef0d93ff6ba7d07024a3e628cd languageName: node linkType: hard -"@react-stately/calendar@npm:^3.8.2": - version: 3.8.2 - resolution: "@react-stately/calendar@npm:3.8.2" +"@react-stately/calendar@npm:^3.9.0": + version: 3.9.0 + resolution: "@react-stately/calendar@npm:3.9.0" dependencies: - "@internationalized/date": "npm:^3.8.2" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/calendar": "npm:^3.7.2" - "@react-types/shared": "npm:^3.30.0" + "@internationalized/date": "npm:^3.10.0" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/calendar": "npm:^3.8.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d2858a42dc2c324248c4c1ddb6f6fe66de11bfe2703c85f0fd739075712f668427212207626ed35af2fcbe15cd0ee6e2ad53eafe98766fd7352e0e2f134435c4 + checksum: 10/6021927974cfaee9b48e07c4a4744105d1076fbad841aafdbd8633deb105c56f724a2a2f51285b426755873c3c2c8ae677649c9c38431433e7cf9e8dea7b334c languageName: node linkType: hard -"@react-stately/checkbox@npm:^3.6.15": - version: 3.6.15 - resolution: "@react-stately/checkbox@npm:3.6.15" +"@react-stately/checkbox@npm:^3.7.2": + version: 3.7.2 + resolution: "@react-stately/checkbox@npm:3.7.2" dependencies: - "@react-stately/form": "npm:^3.1.5" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/checkbox": "npm:^3.9.5" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/checkbox": "npm:^3.10.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/4c2b5213395e59432c59609b3cd2ca8316cf77f18716dcee2abe31af5c4a12fac3125408799b0631771e1095fc5924de7850e09c3fa6e53f56c0f79debc0db77 + checksum: 10/e0dda0c536ee43b2b925b9bf2932fdf5d27370b55d069633bb1e4d6a9dfb0db783ed0119ab0893ec192aa4099da0341f39fd2065bfd2e6c89ca3997e92e83ca1 languageName: node linkType: hard -"@react-stately/collections@npm:^3.12.5": - version: 3.12.5 - resolution: "@react-stately/collections@npm:3.12.5" +"@react-stately/collections@npm:^3.12.8": + version: 3.12.8 + resolution: "@react-stately/collections@npm:3.12.8" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/12024f72ec6602c9447e2bc134da566d99da2e29b41ffba207712be31aaf121b805505397dcfb1ee07dd8d234c40d3018c33364adae271f3231a004775a96fd8 + checksum: 10/da17c50d9323002f8dc05870265d54afa162575ceba83bc42d8ccd5d0ccf3bc0634d3896086e7975e1e7f1d7497de6f09ca0e5b82a697ad04349d5b59eca5a8f languageName: node linkType: hard -"@react-stately/color@npm:^3.8.6": - version: 3.8.6 - resolution: "@react-stately/color@npm:3.8.6" +"@react-stately/color@npm:^3.9.2": + version: 3.9.2 + resolution: "@react-stately/color@npm:3.9.2" dependencies: - "@internationalized/number": "npm:^3.6.3" + "@internationalized/number": "npm:^3.6.5" "@internationalized/string": "npm:^3.2.7" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/numberfield": "npm:^3.9.13" - "@react-stately/slider": "npm:^3.6.5" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/color": "npm:^3.0.6" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/numberfield": "npm:^3.10.2" + "@react-stately/slider": "npm:^3.7.2" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/color": "npm:^3.1.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/20ec019c71676c5d336c89b703729c0c8098219c942843a3018e5542fee49c6db56c47b746c4c9cddfb9ea48213a3a860861722fc5b41239e3de827c2ef84351 + checksum: 10/1aaea8dc241911b634ef072352076a8b3eec25300bb6c88ff2ce6147f05d2504688465a0342272b74a8484cdf272d10d2d9abc6cbbb64a111228046369f92ce5 languageName: node linkType: hard -"@react-stately/combobox@npm:^3.10.6": - version: 3.10.6 - resolution: "@react-stately/combobox@npm:3.10.6" +"@react-stately/combobox@npm:^3.12.0": + version: 3.12.0 + resolution: "@react-stately/combobox@npm:3.12.0" dependencies: - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/list": "npm:^3.12.3" - "@react-stately/overlays": "npm:^3.6.17" - "@react-stately/select": "npm:^3.6.14" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/combobox": "npm:^3.13.6" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/list": "npm:^3.13.1" + "@react-stately/overlays": "npm:^3.6.20" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/combobox": "npm:^3.13.9" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/8bc67ee18d1c896620cc11233a8efdaf8ec7f5ec31d068fbbc80e75a54e385617518e2b420f3211c17b905e3cac6026f8b056ae96ee114ea4e897f4ce1951502 + checksum: 10/3471a9c2f60e215784f63085b4ebcb2445ec804b3f0f50261933261afd7c9f7ed6d0675f00b5581aa43763c37561bcf6c6967a0ab485f403b1f8cf33a6b65d40 languageName: node linkType: hard -"@react-stately/data@npm:^3.13.1": - version: 3.13.1 - resolution: "@react-stately/data@npm:3.13.1" +"@react-stately/data@npm:^3.14.1": + version: 3.14.1 + resolution: "@react-stately/data@npm:3.14.1" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/b6eea6a721d4de13ffad7aa12a76012d297e1fbbc919bad35d99f57bf481feb547d56c74467e1dadf8f0cb6be9027e54faa6b10dc4aeb1b46a5c6598218baa2c + checksum: 10/ac069e41036fd534a8ec4e77847234abc35aa02c1901b0abc3af3d5cede0baadb5ce0d5f648fed5d6b2e37f673669f2b21fbf74cfb760f0e99734f1d9e841d33 languageName: node linkType: hard -"@react-stately/datepicker@npm:^3.14.2": - version: 3.14.2 - resolution: "@react-stately/datepicker@npm:3.14.2" +"@react-stately/datepicker@npm:^3.15.2": + version: 3.15.2 + resolution: "@react-stately/datepicker@npm:3.15.2" dependencies: - "@internationalized/date": "npm:^3.8.2" + "@internationalized/date": "npm:^3.10.0" "@internationalized/string": "npm:^3.2.7" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/overlays": "npm:^3.6.17" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/datepicker": "npm:^3.12.2" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/overlays": "npm:^3.6.20" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/datepicker": "npm:^3.13.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/dd10f99f32e12eef9d361eb183cd52113a1857613be844da9895b5a8954260ace283e43bd1bae3d73a71f1cb5e6381627999f8a24d4ed320903dba50f864183b + checksum: 10/59ef011e4d56a3a40923d0a2ce02f6150ca4e5c7b9dac638d4f2b512af9a213ea6cda2d8d85b114758f2db2b06a8840a93c5b9c8c30859366249d58d960ed149 languageName: node linkType: hard -"@react-stately/disclosure@npm:^3.0.5": - version: 3.0.5 - resolution: "@react-stately/disclosure@npm:3.0.5" +"@react-stately/disclosure@npm:^3.0.8": + version: 3.0.8 + resolution: "@react-stately/disclosure@npm:3.0.8" dependencies: - "@react-stately/utils": "npm:^3.10.7" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/b1f3f80e6523a0fb0c325064162a59635f560f41dbadd51fd89db02bbad9bafa843b7b1565420444b3b266f2eb92dcf556916b0dabe06d32bb86a2106849c41c + checksum: 10/8a36946589a199a788c07ef6ab04d0a30868db0484c660e5066ba38dd8bb8cef6e00fca324e7645b561fc7f3b3ffa152add555f2971c6be532d9cd3b67237b31 languageName: node linkType: hard -"@react-stately/dnd@npm:^3.6.0": - version: 3.6.0 - resolution: "@react-stately/dnd@npm:3.6.0" +"@react-stately/dnd@npm:^3.7.1": + version: 3.7.1 + resolution: "@react-stately/dnd@npm:3.7.1" dependencies: - "@react-stately/selection": "npm:^3.20.3" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/selection": "npm:^3.20.6" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/9fe59a8d5849af27b5fb0609691bdf0ab14ef8cad8a27405e0c83842d44b171e6d1409716b8e80f12797b187bb553f4acf71a87cd5acd86c76137a3525449194 + checksum: 10/d5500055a5398914556eeb767b141e4192be446990dfecb385b0348a35dc0baf0b0a72567dde806369995e09f5dc27a13fe4261739da7bc8ba483875bd88e694 languageName: node linkType: hard @@ -15650,608 +15648,608 @@ __metadata: languageName: node linkType: hard -"@react-stately/form@npm:^3.1.5": - version: 3.1.5 - resolution: "@react-stately/form@npm:3.1.5" +"@react-stately/form@npm:^3.2.2": + version: 3.2.2 + resolution: "@react-stately/form@npm:3.2.2" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6c392949ca8ac045163f3716a41f03d6ccbe3fd5704401cbece0ba572d43abbb350f5019534765540d5b511b9aeba70ca2c03dc4ba218074b59a3efbea601564 + checksum: 10/e466309999cb2f28e892b11cdfc7cee2b7d08eefced41d9e346e2c4353dd5fc1864de145a6b332735cdc94b278ff8e6b599489d2aa6945ec5389171f89a633d1 languageName: node linkType: hard -"@react-stately/grid@npm:^3.11.3": - version: 3.11.3 - resolution: "@react-stately/grid@npm:3.11.3" +"@react-stately/grid@npm:^3.11.6": + version: 3.11.6 + resolution: "@react-stately/grid@npm:3.11.6" dependencies: - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/selection": "npm:^3.20.3" - "@react-types/grid": "npm:^3.3.3" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/selection": "npm:^3.20.6" + "@react-types/grid": "npm:^3.3.6" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/09655c28cef0c3007024af0c01982d2c079e558169dcf1994966c2526c6346b442068e2e9700a8abbbbcbd13781cc0eb5b346d974dc9a85dd5c263722d96f5c7 + checksum: 10/b6bc2a24ff37bdf375caa0f73dd6812ec4368f314f7754472f8b5de47ed296c4d3aadab787768c50d17d5606732291f05448891d5b08c0facaf8a1c9f7a70d31 languageName: node linkType: hard -"@react-stately/layout@npm:^4.3.1": - version: 4.3.1 - resolution: "@react-stately/layout@npm:4.3.1" +"@react-stately/layout@npm:^4.5.1": + version: 4.5.1 + resolution: "@react-stately/layout@npm:4.5.1" dependencies: - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/table": "npm:^3.14.3" - "@react-stately/virtualizer": "npm:^4.4.1" - "@react-types/grid": "npm:^3.3.3" - "@react-types/shared": "npm:^3.30.0" - "@react-types/table": "npm:^3.13.1" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/table": "npm:^3.15.1" + "@react-stately/virtualizer": "npm:^4.4.4" + "@react-types/grid": "npm:^3.3.6" + "@react-types/shared": "npm:^3.32.1" + "@react-types/table": "npm:^3.13.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/f7d299038aefba602944b5caa81719388427778edc394582dfe14c70f9f485b74a0da6d0eeb6aab843e3fbdd6af251a3678b1a8c76c77f64adb16d695dbd22cd + checksum: 10/a4413d766efdea8decf4549cd773f5a94ce086690195223e605b78ccb9e1c0dd25011bd37a011b805c72a7a9f3a27dc1dd6c8684d9cc2a0b6efaa084fbd337a4 languageName: node linkType: hard -"@react-stately/list@npm:^3.12.3": - version: 3.12.3 - resolution: "@react-stately/list@npm:3.12.3" +"@react-stately/list@npm:^3.13.1": + version: 3.13.1 + resolution: "@react-stately/list@npm:3.13.1" dependencies: - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/selection": "npm:^3.20.3" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/selection": "npm:^3.20.6" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/e8edce5e59e061a4b71621ce7617f4e48cbef5e5c5b6377808e0977f4cad4e541726f255bdeb1c18db867b35ab19883981882bbc27ddbc3e5c26722c496b02f8 + checksum: 10/3da2ca14eaee5f0915c1c79df66268bf1e7cc5d60ce68170515180993941c4c8679033589a8bc38e08138b882a62a8ad69ca727a500c882bd0f4214ce9a69384 languageName: node linkType: hard -"@react-stately/menu@npm:^3.9.5": - version: 3.9.5 - resolution: "@react-stately/menu@npm:3.9.5" +"@react-stately/menu@npm:^3.9.8": + version: 3.9.8 + resolution: "@react-stately/menu@npm:3.9.8" dependencies: - "@react-stately/overlays": "npm:^3.6.17" - "@react-types/menu": "npm:^3.10.2" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/overlays": "npm:^3.6.20" + "@react-types/menu": "npm:^3.10.5" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/a8163b76de49ec10da7129c306304a96e8f4e689450ffdbf6ab5f56fd8b0316db5beb16ebc58da52c19b4abe28954a7200955c41e1a9088e40f5e5d00f975067 + checksum: 10/7798aa91f0af2743d4d441be1a0bac54489413c187d0e926a336cf13482ad4d54c7215426cd6ea288b8bcf621406db6ebaca5209095be5bfb4dfe4464ece7875 languageName: node linkType: hard -"@react-stately/numberfield@npm:^3.9.13": - version: 3.9.13 - resolution: "@react-stately/numberfield@npm:3.9.13" +"@react-stately/numberfield@npm:^3.10.2": + version: 3.10.2 + resolution: "@react-stately/numberfield@npm:3.10.2" dependencies: - "@internationalized/number": "npm:^3.6.3" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/numberfield": "npm:^3.8.12" + "@internationalized/number": "npm:^3.6.5" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/numberfield": "npm:^3.8.15" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/639e2064ed0afd23ec6681b32abca78f9453eb38d11b350247bf4038f6561579f6d444ead6c9c3317c1b1adaaaa22812053cfba8effdd8cb1b199d04b7ce1fbe + checksum: 10/5fd1d4cc1b90a7b03b98a82e47162044a78534291b9baa77847eddd4fb8040bddb91329dfcc7aa2a7cc38ace23817b6c9d52dd7b0f9bd7ce249f763006580797 languageName: node linkType: hard -"@react-stately/overlays@npm:^3.6.17": - version: 3.6.17 - resolution: "@react-stately/overlays@npm:3.6.17" +"@react-stately/overlays@npm:^3.6.20": + version: 3.6.20 + resolution: "@react-stately/overlays@npm:3.6.20" dependencies: - "@react-stately/utils": "npm:^3.10.7" - "@react-types/overlays": "npm:^3.8.16" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/overlays": "npm:^3.9.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/9c44f181cd8f0b99a40142aebf3d7e1d1df1e96a789b636a5ee877529e60fddece4ebcf32d9812d9848ce0298bf5cb6202df3b680552b32c89f1276bce3f8a7b + checksum: 10/e9a3023b3fc3d9383d36dbd0a1e6a0d3d84350dee4f5ce6578464d613e063ca32dd6685c4fdfaa774ded24497c9e5c56363b9650c551d5d1a4dbb6d7d1d04382 languageName: node linkType: hard -"@react-stately/radio@npm:^3.10.14": - version: 3.10.14 - resolution: "@react-stately/radio@npm:3.10.14" +"@react-stately/radio@npm:^3.11.2": + version: 3.11.2 + resolution: "@react-stately/radio@npm:3.11.2" dependencies: - "@react-stately/form": "npm:^3.1.5" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/radio": "npm:^3.8.10" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/radio": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/45ad56b50f3fcd04c1b335f8f64caceaa6f8483fd84717a461ae04ed8718dabf06f88bf8bd89fcca27d2c6bc548b4a38f0e4ef53ad51f3320aeb85c67b288846 + checksum: 10/182946fb5e963fed62df59d8893ca92443e587bcf3d644b54b991b3acb2124b777af11884e6e31c953becc2dad2226a13238a219747fb596a7e08f0e31e97a22 languageName: node linkType: hard -"@react-stately/searchfield@npm:^3.5.13": - version: 3.5.13 - resolution: "@react-stately/searchfield@npm:3.5.13" +"@react-stately/searchfield@npm:^3.5.16": + version: 3.5.16 + resolution: "@react-stately/searchfield@npm:3.5.16" dependencies: - "@react-stately/utils": "npm:^3.10.7" - "@react-types/searchfield": "npm:^3.6.3" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/searchfield": "npm:^3.6.6" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6114f1ce0c2e8ddbeedc5b5293783c4e1ecb0cc6f24e09cb6095e32be9b49bdc67619941c16f834850e31acfafd74f4241edaa3529f510ec490a2e6c8e7cdc0b + checksum: 10/879e736c6888e36e227efffa665420c7e4fd2b319c2fb11661d6689fbbdad549129adc1c218e531f79f5e52be5b4c075c3c8120363ca3238fec24195c1976527 languageName: node linkType: hard -"@react-stately/select@npm:^3.6.14": - version: 3.6.14 - resolution: "@react-stately/select@npm:3.6.14" +"@react-stately/select@npm:^3.8.0": + version: 3.8.0 + resolution: "@react-stately/select@npm:3.8.0" dependencies: - "@react-stately/form": "npm:^3.1.5" - "@react-stately/list": "npm:^3.12.3" - "@react-stately/overlays": "npm:^3.6.17" - "@react-types/select": "npm:^3.9.13" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/list": "npm:^3.13.1" + "@react-stately/overlays": "npm:^3.6.20" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/select": "npm:^3.11.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/33116af11830f0d7bf7e10cb03e52ed9c36d17d94674d96440fd73ae8d7da1b93edc4de6170a3681493c76c0ad5c8b24c2961f170b2a784447743775dce32a65 + checksum: 10/d611bbd9d6b55a2dfb31455227efe54c9fc2684f37abd9ba5633b2d1b838bc8fc182e92e64e94ef17c8bbaf351a72daf6089c9d54ce8acad76d3f1be3bdb05aa languageName: node linkType: hard -"@react-stately/selection@npm:^3.20.3": - version: 3.20.3 - resolution: "@react-stately/selection@npm:3.20.3" +"@react-stately/selection@npm:^3.20.6": + version: 3.20.6 + resolution: "@react-stately/selection@npm:3.20.6" dependencies: - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/9903810f5f4e2f37381aba8c81525a819de69316c3bd5d66b29fc5f22e49b3d349d26792e811f7167e16857879c8e6ce8d817d9838c69367481a42977a2022a2 + checksum: 10/b72941f9d23d285b826aa0a5be55e299d934b335d8ebe50c6b061f72b59f860a37549ac4fc0f41a7357eab0d40edb404207cca201fc78915b001b5532e45a9db languageName: node linkType: hard -"@react-stately/slider@npm:^3.6.5": - version: 3.6.5 - resolution: "@react-stately/slider@npm:3.6.5" +"@react-stately/slider@npm:^3.7.2": + version: 3.7.2 + resolution: "@react-stately/slider@npm:3.7.2" dependencies: - "@react-stately/utils": "npm:^3.10.7" - "@react-types/shared": "npm:^3.30.0" - "@react-types/slider": "npm:^3.7.12" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/shared": "npm:^3.32.1" + "@react-types/slider": "npm:^3.8.2" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/121f2f23cad929e7087825ec1a17c51610ac0e62a0b0951d042a6e6a354fcea1751575a7bf6648ae5054a260d89a7613dc0353bf0e9f76553e25c2dce1dba095 + checksum: 10/c11a5374904434bfad5e87767900ed40e12d4341abf74d835b59ab26efb69ad669c86016926f83eae5fb3b3e39c175f775c4457b77eec64d73785c92369a79da languageName: node linkType: hard -"@react-stately/table@npm:^3.14.3": - version: 3.14.3 - resolution: "@react-stately/table@npm:3.14.3" +"@react-stately/table@npm:^3.15.1": + version: 3.15.1 + resolution: "@react-stately/table@npm:3.15.1" dependencies: - "@react-stately/collections": "npm:^3.12.5" + "@react-stately/collections": "npm:^3.12.8" "@react-stately/flags": "npm:^3.1.2" - "@react-stately/grid": "npm:^3.11.3" - "@react-stately/selection": "npm:^3.20.3" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/grid": "npm:^3.3.3" - "@react-types/shared": "npm:^3.30.0" - "@react-types/table": "npm:^3.13.1" + "@react-stately/grid": "npm:^3.11.6" + "@react-stately/selection": "npm:^3.20.6" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/grid": "npm:^3.3.6" + "@react-types/shared": "npm:^3.32.1" + "@react-types/table": "npm:^3.13.4" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/04cd616d526b9b806808ea09ce596dc1fe5fff931deec5ccce3258d0a76ee02c787320004ccc2d3a2d67e54d39f7ab274673210254c8598bd99b767cec8eda1a + checksum: 10/005292a0803de55179a9d27aa7bb68f44865fff64921141fac7aab0fbd5d2adff27a9a70db904f9a57bd6bc8db84036e8ad58b7a1ea57c990829500eb3f3ee6d languageName: node linkType: hard -"@react-stately/tabs@npm:^3.8.3": - version: 3.8.3 - resolution: "@react-stately/tabs@npm:3.8.3" +"@react-stately/tabs@npm:^3.8.6": + version: 3.8.6 + resolution: "@react-stately/tabs@npm:3.8.6" dependencies: - "@react-stately/list": "npm:^3.12.3" - "@react-types/shared": "npm:^3.30.0" - "@react-types/tabs": "npm:^3.3.16" + "@react-stately/list": "npm:^3.13.1" + "@react-types/shared": "npm:^3.32.1" + "@react-types/tabs": "npm:^3.3.19" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/5fb036bc36b5c7fde32c6e7553795fad0f5b2d999837961298341e68d211444ca2a378554c5f73ccf0909e60299cdcd4b0e8c317e57f8c1662e6384957a1ed4a + checksum: 10/ed71a8351b6b9db7c191cbb60acf72121751864b20c1d9a552438a1f4f6c96fdd41469396a17a86ef52287463ef3c8f217167f9498bc5f36e77a621415fac388 languageName: node linkType: hard -"@react-stately/toast@npm:^3.1.1": - version: 3.1.1 - resolution: "@react-stately/toast@npm:3.1.1" +"@react-stately/toast@npm:^3.1.2": + version: 3.1.2 + resolution: "@react-stately/toast@npm:3.1.2" dependencies: "@swc/helpers": "npm:^0.5.0" use-sync-external-store: "npm:^1.4.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/c6ff8b947920e05e3e817cbb478f31c45c64035801456c7c8052c37bea5d966a3ea2c74071c2bed6f2006dec160a6b1204b7cc98965a9c10ca3b4bb4d6765f39 + checksum: 10/771eade3a6f84d7aac3f5766e9cc47826cdb179d58165d12650a843548c13cbf4b4bd3b804a1f367e884e0e28d1d51693cb6f5e7c8391ebdb233cb1dddc015c5 languageName: node linkType: hard -"@react-stately/toggle@npm:^3.8.5": - version: 3.8.5 - resolution: "@react-stately/toggle@npm:3.8.5" +"@react-stately/toggle@npm:^3.9.2": + version: 3.9.2 + resolution: "@react-stately/toggle@npm:3.9.2" dependencies: - "@react-stately/utils": "npm:^3.10.7" - "@react-types/checkbox": "npm:^3.9.5" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/checkbox": "npm:^3.10.2" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/3d8e6c4a39c64fc904355aaa3980e3a63595c24472e3f557716597ac6f9f26299dec5b0843b327b4fe1416436054a65e45ec79073a3be1fad8f093f0d2940864 + checksum: 10/06f0e11cbbda0b479113df6c82e650db9ac772162566fd749da19a3ca274d25831849dc6c67383f4a440be82f61b5dff80e97513763f66bf3994a55febed5827 languageName: node linkType: hard -"@react-stately/tooltip@npm:^3.5.5": - version: 3.5.5 - resolution: "@react-stately/tooltip@npm:3.5.5" +"@react-stately/tooltip@npm:^3.5.8": + version: 3.5.8 + resolution: "@react-stately/tooltip@npm:3.5.8" dependencies: - "@react-stately/overlays": "npm:^3.6.17" - "@react-types/tooltip": "npm:^3.4.18" + "@react-stately/overlays": "npm:^3.6.20" + "@react-types/tooltip": "npm:^3.4.21" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/0744283f1dbb811502311370495b6722a59c251fe20ac2e5373aeed8f655ec9f89d92980426a69b7191c048f7c02e3a66c78a7018452ad4638c82e5b7f99b698 + checksum: 10/fbddb1f0efc6a6275f8f558bf80b984aea0c49f6c0d17fc42fc27e48a02a3c36bc9ca3eed6de9347a3b12289d21e22dc3de159b8b4b8ab21fe18218ab8a0e4ec languageName: node linkType: hard -"@react-stately/tree@npm:^3.9.0": - version: 3.9.0 - resolution: "@react-stately/tree@npm:3.9.0" +"@react-stately/tree@npm:^3.9.3": + version: 3.9.3 + resolution: "@react-stately/tree@npm:3.9.3" dependencies: - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/selection": "npm:^3.20.3" - "@react-stately/utils": "npm:^3.10.7" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/selection": "npm:^3.20.6" + "@react-stately/utils": "npm:^3.10.8" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6980382c94f87a663124e9488e3cf5f8ea09b05fc2f0017cbb886aa19ce0d8525d8b6b8221f1e293a67543cc06786ea203813218c3444fe7e14b31d9eae65ca3 + checksum: 10/294cc70ffa08280a187a85f72c2402547d71295ddb95b2752fcfa395016947e7fe27116e970df597bab87319e18b3bf1f6b837124fb4bbda8686f7f0018b46ab languageName: node linkType: hard -"@react-stately/utils@npm:^3.10.7": - version: 3.10.7 - resolution: "@react-stately/utils@npm:3.10.7" +"@react-stately/utils@npm:^3.10.8": + version: 3.10.8 + resolution: "@react-stately/utils@npm:3.10.8" dependencies: "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/b9c1a62d4f179e252d08a2f18120a02ffc8704424f257e81e5e74da1222e3acd1e821ce84220d87d9d7b4b6d4dc2fd58d5bb380546d198bf434b700cda8ac3d8 + checksum: 10/7878ec47b132075566708bae630cb86d8237dde976eb3793bba43695abbb29fcaea9d00ea3f4f7244fcda253368f5b2b85263c37665c24e390500cdcc978c6fe languageName: node linkType: hard -"@react-stately/virtualizer@npm:^4.4.1": - version: 4.4.1 - resolution: "@react-stately/virtualizer@npm:4.4.1" +"@react-stately/virtualizer@npm:^4.4.4": + version: 4.4.4 + resolution: "@react-stately/virtualizer@npm:4.4.4" dependencies: - "@react-aria/utils": "npm:^3.29.1" - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" "@swc/helpers": "npm:^0.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/aab5c3a647dc43dd5120a6db4cdfdf24aa47f7fcabf273e05947e33af8cba172f4f442499729d53537a2aa46ca7292dcb94c6b4b4c5b017542df42c25a97a128 + checksum: 10/c9d8d4b34250b8c0e91811bc618c654bac3e8eabe7a8ec119abc8f5dbbfa19faa4b31575eb0775773fda0f533fc2835e9a233b4ed0e4ae1835ddb5f0521a18aa languageName: node linkType: hard -"@react-types/autocomplete@npm:3.0.0-alpha.32": - version: 3.0.0-alpha.32 - resolution: "@react-types/autocomplete@npm:3.0.0-alpha.32" +"@react-types/autocomplete@npm:3.0.0-alpha.35": + version: 3.0.0-alpha.35 + resolution: "@react-types/autocomplete@npm:3.0.0-alpha.35" dependencies: - "@react-types/combobox": "npm:^3.13.6" - "@react-types/searchfield": "npm:^3.6.3" - "@react-types/shared": "npm:^3.30.0" + "@react-types/combobox": "npm:^3.13.9" + "@react-types/searchfield": "npm:^3.6.6" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/ad617628499db45b2acb07d2f4a4b7aa0569124ee1b7c35b2f1eb9819a2d09a755ab4d3be489243c0d579fc16485aec24950ce3b132a655f83d302eb0d140f96 + checksum: 10/2a51111a94f5df1ce0b1b137a69ca783fa2fa399b4c305ebc7f137b0aa6a420cfe2a3925d40fda9a7d0d3b832d390823015959eee41b6c6b31f7a6b30739a596 languageName: node linkType: hard -"@react-types/breadcrumbs@npm:^3.7.14": - version: 3.7.14 - resolution: "@react-types/breadcrumbs@npm:3.7.14" +"@react-types/breadcrumbs@npm:^3.7.17": + version: 3.7.17 + resolution: "@react-types/breadcrumbs@npm:3.7.17" dependencies: - "@react-types/link": "npm:^3.6.2" - "@react-types/shared": "npm:^3.30.0" + "@react-types/link": "npm:^3.6.5" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/106fa21ce01b9ee16796ba46d1133b71b466bfc069e9a90d7f00280e177e1f009791db78701565d83c22506bf72b0469756238164d8ffa36c6712f4e95932eac + checksum: 10/e9754d1b8010f3cdfdfcd8abf03cdb5b37dc1038496fcc103569b9f349269b39680979c2293cdc04c376cd1ea7b97b00571d46677b9d4939a60dd01b55f765a6 languageName: node linkType: hard -"@react-types/button@npm:^3.12.2": - version: 3.12.2 - resolution: "@react-types/button@npm:3.12.2" +"@react-types/button@npm:^3.14.1": + version: 3.14.1 + resolution: "@react-types/button@npm:3.14.1" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d00f7e23fd6cfa863c2d9f0f91ec47fc017666b55775842af3c001fabcf949dfa55b116674bcb841de568eacaf677c3a25e079b4810dcf857547bd9cf6d60917 + checksum: 10/bbbf2e5db83f6b925af154199aaad438d950187862c4ca6f82122c0209632c0c358201ec9b0b503f9b96c8b5b765066af41c6472440ca7ea75b75031d7d9eacf languageName: node linkType: hard -"@react-types/calendar@npm:^3.7.2": - version: 3.7.2 - resolution: "@react-types/calendar@npm:3.7.2" +"@react-types/calendar@npm:^3.8.0": + version: 3.8.0 + resolution: "@react-types/calendar@npm:3.8.0" dependencies: - "@internationalized/date": "npm:^3.8.2" - "@react-types/shared": "npm:^3.30.0" + "@internationalized/date": "npm:^3.10.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/40ad15a5f937844f6626028c8a6e7d36f09e946b4cbdfcd95ff4971f6681abd86260f64aa8298cf86fdde5a0ce2de17e327b8011bb435d0f3faf10fcd9c97f38 + checksum: 10/06fe32c8e5d78eedcb511fa3d18f66582b5664ab85c572538e24b953e8204a7c5f98407df0d028625a1dfdd94223153e8e04d9d7feefd96f7533b90fb82be907 languageName: node linkType: hard -"@react-types/checkbox@npm:^3.9.5": - version: 3.9.5 - resolution: "@react-types/checkbox@npm:3.9.5" - dependencies: - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/25f6c155043f25f55379b613e3e7faa16191f34c04f13acfc75fc5bda5b83d76d3062b177aad2401f9dd1570215714d477ab1d1e3b92a33e24172aa44e9ff79e - languageName: node - linkType: hard - -"@react-types/color@npm:^3.0.6": - version: 3.0.6 - resolution: "@react-types/color@npm:3.0.6" - dependencies: - "@react-types/shared": "npm:^3.30.0" - "@react-types/slider": "npm:^3.7.12" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/33ddf5239ccfdada1ae276a69b020500dae557a0a43c4bb0fb55fcd6122331c7f2adb552ff3706753214964032ea459634708a02f147777dff948045877cc01b - languageName: node - linkType: hard - -"@react-types/combobox@npm:^3.13.6": - version: 3.13.6 - resolution: "@react-types/combobox@npm:3.13.6" - dependencies: - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/8aaf970af426d084ba4b954aeca23cc7779de221a19465c1487d7098a5f637c13bcb6446bf695619e221d78d289cf629b94faa2c86de8bb3f949ff05a5448a13 - languageName: node - linkType: hard - -"@react-types/datepicker@npm:^3.12.2": - version: 3.12.2 - resolution: "@react-types/datepicker@npm:3.12.2" - dependencies: - "@internationalized/date": "npm:^3.8.2" - "@react-types/calendar": "npm:^3.7.2" - "@react-types/overlays": "npm:^3.8.16" - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/21d6b72986b18b25b6380bf85a7a12319de05160a1dee5d0e7484378627dee955c6cda9fbb0b6909e9edcfc82181be1d9e744220fcf82d75357d7208ed2978a9 - languageName: node - linkType: hard - -"@react-types/dialog@npm:^3.5.19": - version: 3.5.19 - resolution: "@react-types/dialog@npm:3.5.19" - dependencies: - "@react-types/overlays": "npm:^3.8.16" - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/07bd55d214d8162f1a700f1ac80cd51468d0defc0d9753309d5e58a0fffbc1eb65a588b6c0709593a41fa8d72cc1f8f8dba0a65b2a336968fdc2ff92afec3596 - languageName: node - linkType: hard - -"@react-types/form@npm:^3.7.13": - version: 3.7.13 - resolution: "@react-types/form@npm:3.7.13" - dependencies: - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/2c55ceb9f5e52a08b60ae0ae95d1db3e57a67d3783eaee2fb37870602afd612153506c13effec98bf4c7b58728a148e9d966c8c3442db560543779b9ef8dd091 - languageName: node - linkType: hard - -"@react-types/grid@npm:^3.3.3": - version: 3.3.3 - resolution: "@react-types/grid@npm:3.3.3" - dependencies: - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/cac232888139186110f7095cbb45ba2525522a296254f44290ad4c87ac2b1e72485d839e2820e7265cbcd6bc4cb8e49c170c52fd57defed16d06a4eb7f7cf047 - languageName: node - linkType: hard - -"@react-types/link@npm:^3.6.2": - version: 3.6.2 - resolution: "@react-types/link@npm:3.6.2" - dependencies: - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/093a3011a98f36dd252d7675365effcba219b9a89e53619e176bdf322042520d5d24e7d9dca04bd63fa6785242f097301c3921d111c43ed888072b0938133435 - languageName: node - linkType: hard - -"@react-types/listbox@npm:^3.7.1": - version: 3.7.1 - resolution: "@react-types/listbox@npm:3.7.1" - dependencies: - "@react-types/shared": "npm:^3.30.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/2040a31a6eae1a0d0fe44f2d6410dfd6e9f99849eaba4fea4b4819ed162f2642d5e023d0badb4f78b2e0d60c4480cacc2d0745f9881f77b83c20b7c2012adf0b - languageName: node - linkType: hard - -"@react-types/menu@npm:^3.10.2": +"@react-types/checkbox@npm:^3.10.2": version: 3.10.2 - resolution: "@react-types/menu@npm:3.10.2" + resolution: "@react-types/checkbox@npm:3.10.2" dependencies: - "@react-types/overlays": "npm:^3.8.16" - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/9b6cc0818f1d63225f7794ca89d0fa25cd771bad4440fa52c403d81d7027b1f83ba600603ede4ee05dee01b57d1240c9eaa7ed890150aa9dff0c8113dc0c85ab + checksum: 10/3d2f8468ce3326825bc820c958dc52b68f11a18ff15a68de2663115b168fecb165a2381cfecf2d7a254bfba66760590d8d76dabae5f48626a15eddf309206516 languageName: node linkType: hard -"@react-types/meter@npm:^3.4.10": - version: 3.4.10 - resolution: "@react-types/meter@npm:3.4.10" +"@react-types/color@npm:^3.1.2": + version: 3.1.2 + resolution: "@react-types/color@npm:3.1.2" dependencies: - "@react-types/progress": "npm:^3.5.13" + "@react-types/shared": "npm:^3.32.1" + "@react-types/slider": "npm:^3.8.2" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/b55f4ca464fc2873662ee50d25cdc1c77995d34d39b6d2831c0b121e47c7b12051017576f51909881a3776003e03263ce899dcf572a9f083794b160320baa754 + checksum: 10/a41e786bd17b1815d5b7414f2dcbc79e655c3a4b8fe2dfa68c200c553f922bab5468a2ea272c76cdf6611d7d3f20518ca31b442729ef7b68141d91839e580410 languageName: node linkType: hard -"@react-types/numberfield@npm:^3.8.12": - version: 3.8.12 - resolution: "@react-types/numberfield@npm:3.8.12" +"@react-types/combobox@npm:^3.13.9": + version: 3.13.9 + resolution: "@react-types/combobox@npm:3.13.9" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/98989cdcd7b7bef45129c54e9bdb919d06f09109c786f0783105c617304ee3ce15c9aad01507d4d9aa0e974ee3b50b230c057ad7a48f634247e374c9668080ae + checksum: 10/0583d24f38b965e5c2cd2b436a7ad374635e183dc7c12145ce9ed0a166d7b6e46ed4685a68c9fb24aed065d1fca644ca3b0606cb360ae5fac3a9881e88ee2f2b languageName: node linkType: hard -"@react-types/overlays@npm:^3.8.16": - version: 3.8.16 - resolution: "@react-types/overlays@npm:3.8.16" +"@react-types/datepicker@npm:^3.13.2": + version: 3.13.2 + resolution: "@react-types/datepicker@npm:3.13.2" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@internationalized/date": "npm:^3.10.0" + "@react-types/calendar": "npm:^3.8.0" + "@react-types/overlays": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/12bedf8e79d31827cd9868dcb115d07b9fee7954af5e00c1a46fe87b9f2b08e971af4b1b238faa2ce7ed173600786a83c7b9cfcdee5c7464a42bc581d7dee3a6 + checksum: 10/1f1686360f64051f5eff5e170ab78e890b20e07680b6031c96c77e47085ca022c55997018911095cd61076bdf63470f61c99ac25ef9b493420f69cde6e4763bd languageName: node linkType: hard -"@react-types/progress@npm:^3.5.13": - version: 3.5.13 - resolution: "@react-types/progress@npm:3.5.13" +"@react-types/dialog@npm:^3.5.22": + version: 3.5.22 + resolution: "@react-types/dialog@npm:3.5.22" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/overlays": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/f666892cff510323e90b1e72e5351eef4f38eb752e568f46cb30250a7de8b9a4435f3506fc590d748d3a0ce30a5f64d449a88a8656369137d06a584ef667d0a8 + checksum: 10/dedac6cf8a85568344242eb6e7f9c6f9dd9fff31711d23586374a1cfc4f3b7b7bed43fdff633d54135792dcdd9941a8a15a34bbbec1a9d4caff7b869b35dd71e languageName: node linkType: hard -"@react-types/radio@npm:^3.8.10": - version: 3.8.10 - resolution: "@react-types/radio@npm:3.8.10" +"@react-types/form@npm:^3.7.16": + version: 3.7.16 + resolution: "@react-types/form@npm:3.7.16" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/ba87e61b7a84547c417baa9553bdfebf2fcd03d45038f0d6a0031a5d4e6c94f9d9a81fe8a98579c6830dcffad68c71560ccac8fd842d5f2469a05ce275d92250 + checksum: 10/3e8f156318746d31ef7470d366dcc1004f3a59b1a3a3f9e54331921a4b251ff51c6bf76a32be229f6d8c524b5b1292f3c1135597de6b0f52bae2d8c32a542a74 languageName: node linkType: hard -"@react-types/searchfield@npm:^3.6.3": - version: 3.6.3 - resolution: "@react-types/searchfield@npm:3.6.3" +"@react-types/grid@npm:^3.3.6": + version: 3.3.6 + resolution: "@react-types/grid@npm:3.3.6" dependencies: - "@react-types/shared": "npm:^3.30.0" - "@react-types/textfield": "npm:^3.12.3" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/ffe5a909fb94a28c674c1ae798e511d93be5175c3fc8adcadc88e040c6e5aca4cf55565b321219311537c11c5ce70c005aa214d8dc708a4b1583a1f1a68a75f6 + checksum: 10/2b4be0fd8f6d07d3feca68039b89e0c13e1e566d27334a6ca7b6368f073ee55cf026833c5af664c78ccd137716aefd4f46b88f1b97709cd8080d7380c79454df languageName: node linkType: hard -"@react-types/select@npm:^3.9.13": - version: 3.9.13 - resolution: "@react-types/select@npm:3.9.13" +"@react-types/link@npm:^3.6.5": + version: 3.6.5 + resolution: "@react-types/link@npm:3.6.5" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/9fba560d2060eb852289be76f0e0b691bddd48f744f969862da10d38c8963f6931190cb53cc8c5ea01eab3f447b8a680e6da378fe6287ec80d3f48a62d312759 + checksum: 10/59fb6011b146cffcdaae94e8fdd9241cb70697f7e518d39e3aacd14f244db6eea7ba3984d8b13d3ce601e6f160da36fd1bfa56827b2e1df728505e426a8db353 languageName: node linkType: hard -"@react-types/shared@npm:^3.30.0": - version: 3.30.0 - resolution: "@react-types/shared@npm:3.30.0" +"@react-types/listbox@npm:^3.7.4": + version: 3.7.4 + resolution: "@react-types/listbox@npm:3.7.4" + dependencies: + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/58af4134275a347bf18ac5d15e3dcfd07dcf623e1d494f140303e06f2149b7aad86408979e163393346df613f6390a3a387f77a2937f0bf1908c6672a44f7b69 + checksum: 10/79dd3f6a7284b74f5156cc2265b384d2074ddfb7b38e608be855ec4ad1234aa0e7cdbfc0d7ef899e34113781381a6ee18b820dbe3dbee67364c72ac240144522 languageName: node linkType: hard -"@react-types/slider@npm:^3.7.12": - version: 3.7.12 - resolution: "@react-types/slider@npm:3.7.12" +"@react-types/menu@npm:^3.10.5": + version: 3.10.5 + resolution: "@react-types/menu@npm:3.10.5" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/overlays": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/38b8a556f87bb64c7f47af482a1a3ce688345a3d4b7a2c71e99522bdcb9668f8ed8e3ea0797b32d5ac1a95d6557c5f9e8eadab51e8eb780f9e66efa89ba50fa0 + checksum: 10/0466f5b7602ccfc8cb8fec3cd2482d587acbfd1701d427c7d79a121eb3f2b137feca70e62fd401aea95022fd616460575c4d5dd541cf3d69d8644ca54a2446c8 languageName: node linkType: hard -"@react-types/switch@npm:^3.5.12": - version: 3.5.12 - resolution: "@react-types/switch@npm:3.5.12" +"@react-types/meter@npm:^3.4.13": + version: 3.4.13 + resolution: "@react-types/meter@npm:3.4.13" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/progress": "npm:^3.5.16" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6552f113b0c3abf52f590b8cedf17f5901e7fa2d0ed94b30408fd2fbda907ee17e7792af6d86985ca742a3cb5b667bcbf6cec725e66265ccdfd201b77e7f524b + checksum: 10/28b519a4640c72732719c056903fcf4037582984d235c388095319b5005eb9d5d2698306d9f79d1ad61d594b8ceda115acae27c22e95cb771d0e07da30305708 languageName: node linkType: hard -"@react-types/table@npm:^3.13.1": - version: 3.13.1 - resolution: "@react-types/table@npm:3.13.1" +"@react-types/numberfield@npm:^3.8.15": + version: 3.8.15 + resolution: "@react-types/numberfield@npm:3.8.15" dependencies: - "@react-types/grid": "npm:^3.3.3" - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/be1bac716d13148b47016f2156ee0769c044d301b538df934f6b8aa5466265a750391e462f9fcdebff7dbb93cf9e373e2117f91eab528b3f5cef062174e547ee + checksum: 10/242584ab3ece90a5e26ebee9788c25fd44b85d6be405c5f31e08bda9d58ad8d7fcf199744a2fcd816275da13ae546ca0239175403e68788a43563f2a070c0574 languageName: node linkType: hard -"@react-types/tabs@npm:^3.3.16": - version: 3.3.16 - resolution: "@react-types/tabs@npm:3.3.16" +"@react-types/overlays@npm:^3.9.2": + version: 3.9.2 + resolution: "@react-types/overlays@npm:3.9.2" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/fae8d98776408b0e9776d0217a545a1ed6035ac976321e413e4f442b525375c56854a328c33e77564efe525e66bc7b79dc89e38ff02373788b996c4b46bb6c5d + checksum: 10/6cab7f2cbb813f710696095db1169f902cfe7e4a9aeef496848343ff5116be3782bfea68dffbeaf3f984a0475c2fb6c4a26ad9fb563172c4ec3e47110ca1e672 languageName: node linkType: hard -"@react-types/textfield@npm:^3.12.3": - version: 3.12.3 - resolution: "@react-types/textfield@npm:3.12.3" +"@react-types/progress@npm:^3.5.16": + version: 3.5.16 + resolution: "@react-types/progress@npm:3.5.16" dependencies: - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d8bf58fd569b30fa13f98de834a025c9ef71d6de8c669912aa7083c83f88f7261852e0b1b30953e903d377b5b63cc849b848fd549a1466c82d6a74cb6c540cf5 + checksum: 10/315b34314dc135a6c9319f4ffd83570fac8c0da377b00d56f17c6eb3d416904682738b522b05d6d8cbb89d3ef92c5118bf8e58eca10fac121da6dcaa40563b8d languageName: node linkType: hard -"@react-types/tooltip@npm:^3.4.18": - version: 3.4.18 - resolution: "@react-types/tooltip@npm:3.4.18" +"@react-types/radio@npm:^3.9.2": + version: 3.9.2 + resolution: "@react-types/radio@npm:3.9.2" dependencies: - "@react-types/overlays": "npm:^3.8.16" - "@react-types/shared": "npm:^3.30.0" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/5eed69c83727496a6d06796617da86740ab2629b3bd6a106c6ddfb384aaa74725aed3c3eed44f329dcebe7cf87a261ce33e8aa8a5899549446321c1a86d27b87 + checksum: 10/3375d13bbeed28a1b959077e727b43324f4282cf43ec985edbaaa5b3e50b46199c083550882e2a9e4788c74555bfd25f5cc2b0351bf48a768f81a4ba6bf73222 + languageName: node + linkType: hard + +"@react-types/searchfield@npm:^3.6.6": + version: 3.6.6 + resolution: "@react-types/searchfield@npm:3.6.6" + dependencies: + "@react-types/shared": "npm:^3.32.1" + "@react-types/textfield": "npm:^3.12.6" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/942cb80234be5d61cae410c144873d75a243dec0bbf8bb0c696f13d66fd729dabb188bb6214d4bfadeb0d54e14eed3bb7e86c6721206bcb395658b613f22b53f + languageName: node + linkType: hard + +"@react-types/select@npm:^3.11.0": + version: 3.11.0 + resolution: "@react-types/select@npm:3.11.0" + dependencies: + "@react-types/shared": "npm:^3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/6c431daa847a034ce06625fe75f220f301e8bdb50961c74e915f36919641f7907aa0d16d15127b9889853d197d66d964fd3726bd6c446b8aecf0e756e30e3925 + languageName: node + linkType: hard + +"@react-types/shared@npm:^3.32.1": + version: 3.32.1 + resolution: "@react-types/shared@npm:3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/33c39d1e23fd73a18519679742ba548c128097831710af4803bec244ae96800271f88dcc4eab958734fc501bb65c17e590028596733761610fb0103c5dea6e36 + languageName: node + linkType: hard + +"@react-types/slider@npm:^3.8.2": + version: 3.8.2 + resolution: "@react-types/slider@npm:3.8.2" + dependencies: + "@react-types/shared": "npm:^3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/cb9600a1842ace218be1a8bdb7b6785113c7165fde0cc76682b82cf7809927d2f45f95facb2570e7abb683f28f0a2ed0590c8ec8e948ed8dadffadb8905918d9 + languageName: node + linkType: hard + +"@react-types/switch@npm:^3.5.15": + version: 3.5.15 + resolution: "@react-types/switch@npm:3.5.15" + dependencies: + "@react-types/shared": "npm:^3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/f35c075188b93aa07b6ab367a6d5bcc4316bcd5481d47e1b0319944411e3a12b15455c443079159280b6d168da36271f3df8bc55808a7d8249b239f5886f0253 + languageName: node + linkType: hard + +"@react-types/table@npm:^3.13.4": + version: 3.13.4 + resolution: "@react-types/table@npm:3.13.4" + dependencies: + "@react-types/grid": "npm:^3.3.6" + "@react-types/shared": "npm:^3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/2f8c1878c8b9a6515a62c7592a335e9688c95a07e0445a891dd6069cbe26921573db6f7d6d2e0c22a8818ec5ef3f48f242ae24d955a1b18e7868f306fadfe7f5 + languageName: node + linkType: hard + +"@react-types/tabs@npm:^3.3.19": + version: 3.3.19 + resolution: "@react-types/tabs@npm:3.3.19" + dependencies: + "@react-types/shared": "npm:^3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/cdc3217251502c6f89621ab366a4d23e32a334dc3ca2f5366cd980fb828bb413be1262a76f4c4794a0908bfd02c3237a3608e283b02ef472707fb7c22b80b44b + languageName: node + linkType: hard + +"@react-types/textfield@npm:^3.12.6": + version: 3.12.6 + resolution: "@react-types/textfield@npm:3.12.6" + dependencies: + "@react-types/shared": "npm:^3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/e223531d29bbaad566f142b44a0f2e42b4ce08eab5661962ad3451391311a604077c49181f89a407aecf8697d59d887f5524f6eff8e9fe7416afda6b1f3ac7b3 + languageName: node + linkType: hard + +"@react-types/tooltip@npm:^3.4.21": + version: 3.4.21 + resolution: "@react-types/tooltip@npm:3.4.21" + dependencies: + "@react-types/overlays": "npm:^3.9.2" + "@react-types/shared": "npm:^3.32.1" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/50d1beea407a7e58ef8e3638c2517d8c90f6b15777d396b4adf7cffbd80d38dfb7d68d6a38127ed130bfe7b0c3116c5d499de3f7b6353f54d022a22739e0141d languageName: node linkType: hard @@ -42168,95 +42166,96 @@ __metadata: languageName: node linkType: hard -"react-aria-components@npm:^1.10.1": - version: 1.10.1 - resolution: "react-aria-components@npm:1.10.1" +"react-aria-components@npm:^1.13.0": + version: 1.13.0 + resolution: "react-aria-components@npm:1.13.0" dependencies: - "@internationalized/date": "npm:^3.8.2" + "@internationalized/date": "npm:^3.10.0" "@internationalized/string": "npm:^3.2.7" - "@react-aria/autocomplete": "npm:3.0.0-beta.5" - "@react-aria/collections": "npm:3.0.0-rc.3" - "@react-aria/dnd": "npm:^3.10.1" - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/live-announcer": "npm:^3.4.3" - "@react-aria/overlays": "npm:^3.27.3" - "@react-aria/ssr": "npm:^3.9.9" - "@react-aria/toolbar": "npm:3.0.0-beta.18" - "@react-aria/utils": "npm:^3.29.1" - "@react-aria/virtualizer": "npm:^4.1.7" - "@react-stately/autocomplete": "npm:3.0.0-beta.2" - "@react-stately/layout": "npm:^4.3.1" - "@react-stately/selection": "npm:^3.20.3" - "@react-stately/table": "npm:^3.14.3" - "@react-stately/utils": "npm:^3.10.7" - "@react-stately/virtualizer": "npm:^4.4.1" - "@react-types/form": "npm:^3.7.13" - "@react-types/grid": "npm:^3.3.3" - "@react-types/shared": "npm:^3.30.0" - "@react-types/table": "npm:^3.13.1" + "@react-aria/autocomplete": "npm:3.0.0-rc.3" + "@react-aria/collections": "npm:^3.0.0" + "@react-aria/dnd": "npm:^3.11.3" + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/live-announcer": "npm:^3.4.4" + "@react-aria/overlays": "npm:^3.30.0" + "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/textfield": "npm:^3.18.2" + "@react-aria/toolbar": "npm:3.0.0-beta.21" + "@react-aria/utils": "npm:^3.31.0" + "@react-aria/virtualizer": "npm:^4.1.10" + "@react-stately/autocomplete": "npm:3.0.0-beta.3" + "@react-stately/layout": "npm:^4.5.1" + "@react-stately/selection": "npm:^3.20.6" + "@react-stately/table": "npm:^3.15.1" + "@react-stately/utils": "npm:^3.10.8" + "@react-stately/virtualizer": "npm:^4.4.4" + "@react-types/form": "npm:^3.7.16" + "@react-types/grid": "npm:^3.3.6" + "@react-types/shared": "npm:^3.32.1" + "@react-types/table": "npm:^3.13.4" "@swc/helpers": "npm:^0.5.0" client-only: "npm:^0.0.1" - react-aria: "npm:^3.41.1" - react-stately: "npm:^3.39.0" + react-aria: "npm:^3.44.0" + react-stately: "npm:^3.42.0" use-sync-external-store: "npm:^1.4.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6fcc35404bdd8718bbfb05263bd0c67157d2ba665e0446c47f42f78262ef92231bb0512fc7734c2114bb20c28fff8eb13694c9719c741d2c7a59181fd8fdf115 + checksum: 10/8bff1890ef342b0c32d6a50329ce4657bce2fcc91f2a2f903351f375354b186b47f265e7718caaff0ed9a5f630037f17649d85d00bc20a4928a6417204d75ff2 languageName: node linkType: hard -"react-aria@npm:^3.41.1": - version: 3.41.1 - resolution: "react-aria@npm:3.41.1" +"react-aria@npm:^3.44.0": + version: 3.44.0 + resolution: "react-aria@npm:3.44.0" dependencies: "@internationalized/string": "npm:^3.2.7" - "@react-aria/breadcrumbs": "npm:^3.5.26" - "@react-aria/button": "npm:^3.13.3" - "@react-aria/calendar": "npm:^3.8.3" - "@react-aria/checkbox": "npm:^3.15.7" - "@react-aria/color": "npm:^3.0.9" - "@react-aria/combobox": "npm:^3.12.5" - "@react-aria/datepicker": "npm:^3.14.5" - "@react-aria/dialog": "npm:^3.5.27" - "@react-aria/disclosure": "npm:^3.0.6" - "@react-aria/dnd": "npm:^3.10.1" - "@react-aria/focus": "npm:^3.20.5" - "@react-aria/gridlist": "npm:^3.13.2" - "@react-aria/i18n": "npm:^3.12.10" - "@react-aria/interactions": "npm:^3.25.3" - "@react-aria/label": "npm:^3.7.19" - "@react-aria/landmark": "npm:^3.0.4" - "@react-aria/link": "npm:^3.8.3" - "@react-aria/listbox": "npm:^3.14.6" - "@react-aria/menu": "npm:^3.18.5" - "@react-aria/meter": "npm:^3.4.24" - "@react-aria/numberfield": "npm:^3.11.16" - "@react-aria/overlays": "npm:^3.27.3" - "@react-aria/progress": "npm:^3.4.24" - "@react-aria/radio": "npm:^3.11.5" - "@react-aria/searchfield": "npm:^3.8.6" - "@react-aria/select": "npm:^3.15.7" - "@react-aria/selection": "npm:^3.24.3" - "@react-aria/separator": "npm:^3.4.10" - "@react-aria/slider": "npm:^3.7.21" - "@react-aria/ssr": "npm:^3.9.9" - "@react-aria/switch": "npm:^3.7.5" - "@react-aria/table": "npm:^3.17.5" - "@react-aria/tabs": "npm:^3.10.5" - "@react-aria/tag": "npm:^3.6.2" - "@react-aria/textfield": "npm:^3.17.5" - "@react-aria/toast": "npm:^3.0.5" - "@react-aria/tooltip": "npm:^3.8.5" - "@react-aria/tree": "npm:^3.1.1" - "@react-aria/utils": "npm:^3.29.1" - "@react-aria/visually-hidden": "npm:^3.8.25" - "@react-types/shared": "npm:^3.30.0" + "@react-aria/breadcrumbs": "npm:^3.5.29" + "@react-aria/button": "npm:^3.14.2" + "@react-aria/calendar": "npm:^3.9.2" + "@react-aria/checkbox": "npm:^3.16.2" + "@react-aria/color": "npm:^3.1.2" + "@react-aria/combobox": "npm:^3.14.0" + "@react-aria/datepicker": "npm:^3.15.2" + "@react-aria/dialog": "npm:^3.5.31" + "@react-aria/disclosure": "npm:^3.1.0" + "@react-aria/dnd": "npm:^3.11.3" + "@react-aria/focus": "npm:^3.21.2" + "@react-aria/gridlist": "npm:^3.14.1" + "@react-aria/i18n": "npm:^3.12.13" + "@react-aria/interactions": "npm:^3.25.6" + "@react-aria/label": "npm:^3.7.22" + "@react-aria/landmark": "npm:^3.0.7" + "@react-aria/link": "npm:^3.8.6" + "@react-aria/listbox": "npm:^3.15.0" + "@react-aria/menu": "npm:^3.19.3" + "@react-aria/meter": "npm:^3.4.27" + "@react-aria/numberfield": "npm:^3.12.2" + "@react-aria/overlays": "npm:^3.30.0" + "@react-aria/progress": "npm:^3.4.27" + "@react-aria/radio": "npm:^3.12.2" + "@react-aria/searchfield": "npm:^3.8.9" + "@react-aria/select": "npm:^3.17.0" + "@react-aria/selection": "npm:^3.26.0" + "@react-aria/separator": "npm:^3.4.13" + "@react-aria/slider": "npm:^3.8.2" + "@react-aria/ssr": "npm:^3.9.10" + "@react-aria/switch": "npm:^3.7.8" + "@react-aria/table": "npm:^3.17.8" + "@react-aria/tabs": "npm:^3.10.8" + "@react-aria/tag": "npm:^3.7.2" + "@react-aria/textfield": "npm:^3.18.2" + "@react-aria/toast": "npm:^3.0.8" + "@react-aria/tooltip": "npm:^3.8.8" + "@react-aria/tree": "npm:^3.1.4" + "@react-aria/utils": "npm:^3.31.0" + "@react-aria/visually-hidden": "npm:^3.8.28" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/6ec619bc9b26800516e22054a428ea29ebc7bcfabf762918893a5a1a73d1576dd4b1c99d85aae02ae69eb16a49d1a765ab34cb840a500134a76e145a4e995f42 + checksum: 10/46b428af3f68703c03d7836a79f288dae1e945cb34164220a61f57d77df0a5adfc6c4a4c993282f9dbf57f159c9d249e1d644b57b61caca3dec8af1285404ec1 languageName: node linkType: hard @@ -42866,39 +42865,39 @@ __metadata: languageName: node linkType: hard -"react-stately@npm:^3.39.0": - version: 3.39.0 - resolution: "react-stately@npm:3.39.0" +"react-stately@npm:^3.42.0": + version: 3.42.0 + resolution: "react-stately@npm:3.42.0" dependencies: - "@react-stately/calendar": "npm:^3.8.2" - "@react-stately/checkbox": "npm:^3.6.15" - "@react-stately/collections": "npm:^3.12.5" - "@react-stately/color": "npm:^3.8.6" - "@react-stately/combobox": "npm:^3.10.6" - "@react-stately/data": "npm:^3.13.1" - "@react-stately/datepicker": "npm:^3.14.2" - "@react-stately/disclosure": "npm:^3.0.5" - "@react-stately/dnd": "npm:^3.6.0" - "@react-stately/form": "npm:^3.1.5" - "@react-stately/list": "npm:^3.12.3" - "@react-stately/menu": "npm:^3.9.5" - "@react-stately/numberfield": "npm:^3.9.13" - "@react-stately/overlays": "npm:^3.6.17" - "@react-stately/radio": "npm:^3.10.14" - "@react-stately/searchfield": "npm:^3.5.13" - "@react-stately/select": "npm:^3.6.14" - "@react-stately/selection": "npm:^3.20.3" - "@react-stately/slider": "npm:^3.6.5" - "@react-stately/table": "npm:^3.14.3" - "@react-stately/tabs": "npm:^3.8.3" - "@react-stately/toast": "npm:^3.1.1" - "@react-stately/toggle": "npm:^3.8.5" - "@react-stately/tooltip": "npm:^3.5.5" - "@react-stately/tree": "npm:^3.9.0" - "@react-types/shared": "npm:^3.30.0" + "@react-stately/calendar": "npm:^3.9.0" + "@react-stately/checkbox": "npm:^3.7.2" + "@react-stately/collections": "npm:^3.12.8" + "@react-stately/color": "npm:^3.9.2" + "@react-stately/combobox": "npm:^3.12.0" + "@react-stately/data": "npm:^3.14.1" + "@react-stately/datepicker": "npm:^3.15.2" + "@react-stately/disclosure": "npm:^3.0.8" + "@react-stately/dnd": "npm:^3.7.1" + "@react-stately/form": "npm:^3.2.2" + "@react-stately/list": "npm:^3.13.1" + "@react-stately/menu": "npm:^3.9.8" + "@react-stately/numberfield": "npm:^3.10.2" + "@react-stately/overlays": "npm:^3.6.20" + "@react-stately/radio": "npm:^3.11.2" + "@react-stately/searchfield": "npm:^3.5.16" + "@react-stately/select": "npm:^3.8.0" + "@react-stately/selection": "npm:^3.20.6" + "@react-stately/slider": "npm:^3.7.2" + "@react-stately/table": "npm:^3.15.1" + "@react-stately/tabs": "npm:^3.8.6" + "@react-stately/toast": "npm:^3.1.2" + "@react-stately/toggle": "npm:^3.9.2" + "@react-stately/tooltip": "npm:^3.5.8" + "@react-stately/tree": "npm:^3.9.3" + "@react-types/shared": "npm:^3.32.1" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/f59f86aca0797e389698fc20a7e88a26748e00e56e011dd6d9f7a4fa1ba7fda32083bc8e5f2af000957d20ad9f4c74dd151cb667b958dcac8f3959d860905fd4 + checksum: 10/4913f8ae9beb909d07669b97c0960dadad72c3c9e572051158a64acac3eadc73ff495b3c145b3673c15494751506e5b8a666a59f65364900fa66917412971d32 languageName: node linkType: hard From df7d2cfca92898db7ecf8db5b61379fb000b3f58 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 21:19:11 +0100 Subject: [PATCH 49/67] Create grumpy-items-peel.md Signed-off-by: Charles de Dreuille --- .changeset/grumpy-items-peel.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/grumpy-items-peel.md diff --git a/.changeset/grumpy-items-peel.md b/.changeset/grumpy-items-peel.md new file mode 100644 index 0000000000..bace05e42e --- /dev/null +++ b/.changeset/grumpy-items-peel.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Update react-aria-components to version 1.13.0 From 5e0b5299d3b5026ab53b6a18c8be67cee2483e52 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 9 Oct 2025 11:18:48 +0200 Subject: [PATCH 50/67] Adjust stale issue and PR settings in workflow Signed-off-by: Patrik Oldsberg --- .github/workflows/automate_stale.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/automate_stale.yml b/.github/workflows/automate_stale.yml index d6c86b9afb..5b92c6211b 100644 --- a/.github/workflows/automate_stale.yml +++ b/.github/workflows/automate_stale.yml @@ -27,7 +27,7 @@ jobs: recent activity. It will be closed if no further activity occurs. Thank you for your contributions. days-before-issue-stale: 60 - days-before-issue-close: 7 + days-before-issue-close: 14 exempt-issue-labels: after vacations,no stale stale-issue-label: stale stale-pr-message: > @@ -35,8 +35,8 @@ jobs: recent activity from the author. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution! - days-before-pr-stale: 14 - days-before-pr-close: 7 + days-before-pr-stale: 30 + days-before-pr-close: 14 exempt-pr-labels: after vacations,no stale stale-pr-label: stale operations-per-run: 100 From 796d866a1673dca70cae8109e27f065572f73afb Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 9 Oct 2025 11:33:31 +0200 Subject: [PATCH 51/67] workflows/e2e-techdocs: add explicit node setup Signed-off-by: Patrik Oldsberg --- .github/workflows/verify_e2e-techdocs.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/verify_e2e-techdocs.yml b/.github/workflows/verify_e2e-techdocs.yml index 64ce9e7b12..e933efe3f8 100644 --- a/.github/workflows/verify_e2e-techdocs.yml +++ b/.github/workflows/verify_e2e-techdocs.yml @@ -41,6 +41,10 @@ jobs: with: python-version: '3.9' + - name: use node.js ${{ matrix.node-version }} + uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + with: + node-version: ${{ matrix.node-version }} - name: yarn install uses: backstage/actions/yarn-install@b3c1841fd69e1658ac631afafd0fb140a2309024 # v0.6.17 with: From e979fe207683c52cb359646d56eddbf1ba7e723e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 10:36:38 +0100 Subject: [PATCH 52/67] Update warm-dancers-call.md Signed-off-by: Charles de Dreuille --- .changeset/warm-dancers-call.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/warm-dancers-call.md b/.changeset/warm-dancers-call.md index 62cdfb9baf..aa69005663 100644 --- a/.changeset/warm-dancers-call.md +++ b/.changeset/warm-dancers-call.md @@ -2,4 +2,4 @@ '@backstage/theme': minor --- -**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. +**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. If your Backstage instance looks broken after this update, there's a high chance that you forgot to add our new Backstage UI global CSS. To do that, please add @backstage/ui/css/styles.css at the root of your application. From 66eb76aea3a896629f11eb43317d92e889d9427d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 10:57:48 +0100 Subject: [PATCH 53/67] Update warm-dancers-call.md Signed-off-by: Charles de Dreuille --- .changeset/warm-dancers-call.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.changeset/warm-dancers-call.md b/.changeset/warm-dancers-call.md index aa69005663..404fa16a68 100644 --- a/.changeset/warm-dancers-call.md +++ b/.changeset/warm-dancers-call.md @@ -2,4 +2,10 @@ '@backstage/theme': minor --- -**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. If your Backstage instance looks broken after this update, there's a high chance that you forgot to add our new Backstage UI global CSS. To do that, please add @backstage/ui/css/styles.css at the root of your application. +**BREAKING**: Removed the built-in `CssBaseline` from `UnifiedThemeProvider`. If your Backstage instance looks broken after this update, you likely forgot to add our new Backstage UI global CSS. To do that, please import `@backstage/ui/css/styles.css` in `packages/app/src/index.tsx`: + +```tsx +import '@backstage/ui/css/styles.css'; +``` + +This change also removes the `noCssBaseline` prop, which became redundant. From 02299cddc6570750a5c6270ab3aaf9081aec412f Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 14:16:28 +0100 Subject: [PATCH 54/67] Add new layers to global CSS Signed-off-by: Charles de Dreuille --- packages/ui/css/styles.css | 2 +- packages/ui/src/css/components.css | 48 - packages/ui/src/css/styles.css | 83 +- packages/ui/src/css/tokens.css | 186 ++ packages/ui/src/css/utilities.css | 54 - packages/ui/src/css/utilities/display.css | 196 +- packages/ui/src/css/utilities/flex.css | 522 ++--- packages/ui/src/css/utilities/gap.css | 716 +++--- packages/ui/src/css/utilities/grid.css | 2324 ++++++++++---------- packages/ui/src/css/utilities/height.css | 158 +- packages/ui/src/css/utilities/m.css | 716 +++--- packages/ui/src/css/utilities/mb.css | 716 +++--- packages/ui/src/css/utilities/ml.css | 716 +++--- packages/ui/src/css/utilities/mr.css | 716 +++--- packages/ui/src/css/utilities/mt.css | 716 +++--- packages/ui/src/css/utilities/mx.css | 888 ++++---- packages/ui/src/css/utilities/my.css | 888 ++++---- packages/ui/src/css/utilities/p.css | 716 +++--- packages/ui/src/css/utilities/pb.css | 716 +++--- packages/ui/src/css/utilities/pl.css | 716 +++--- packages/ui/src/css/utilities/position.css | 234 +- packages/ui/src/css/utilities/pr.css | 716 +++--- packages/ui/src/css/utilities/pt.css | 716 +++--- packages/ui/src/css/utilities/px.css | 888 ++++---- packages/ui/src/css/utilities/py.css | 888 ++++---- packages/ui/src/css/utilities/sm.css | 2 +- packages/ui/src/css/utilities/width.css | 158 +- packages/ui/src/css/utilities/xs.css | 2 +- 28 files changed, 7970 insertions(+), 7427 deletions(-) delete mode 100644 packages/ui/src/css/components.css create mode 100644 packages/ui/src/css/tokens.css delete mode 100644 packages/ui/src/css/utilities.css diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 61051fdf07..6ca70c9c43 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -11069,4 +11069,4 @@ body { transition: all .2s; display: block; } -} +} \ No newline at end of file diff --git a/packages/ui/src/css/components.css b/packages/ui/src/css/components.css deleted file mode 100644 index 9696425431..0000000000 --- a/packages/ui/src/css/components.css +++ /dev/null @@ -1,48 +0,0 @@ -/* - * Copyright 2025 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 '../components/Avatar/Avatar.styles.css'; -@import '../components/Box/styles.css'; -@import '../components/Button/styles.css'; -@import '../components/ButtonIcon/styles.css'; -@import '../components/Card/Card.styles.css'; -@import '../components/Checkbox/styles.css'; -@import '../components/Collapsible/Collapsible.styles.css'; -@import '../components/Container/styles.css'; -@import '../components/FieldError/FieldError.styles.css'; -@import '../components/FieldLabel/FieldLabel.styles.css'; -@import '../components/Flex/styles.css'; -@import '../components/Grid/styles.css'; -@import '../components/Header/Header.styles.css'; -@import '../components/HeaderPage/HeaderPage.styles.css'; -@import '../components/Icon/styles.css'; -@import '../components/Link/styles.css'; -@import '../components/Menu/Menu.styles.css'; -@import '../components/Popover/Popover.styles.css'; -@import '../components/RadioGroup/RadioGroup.styles.css'; -@import '../components/Table/Table.styles.css'; -@import '../components/TablePagination/TablePagination.styles.css'; -@import '../components/Tabs/Tabs.styles.css'; -@import '../components/TagGroup/TagGroup.styles.css'; -@import '../components/Text/styles.css'; -@import '../components/TextField/TextField.styles.css'; -@import '../components/PasswordField/PasswordField.styles.css'; -@import '../components/SearchField/SearchField.styles.css'; -@import '../components/Skeleton/Skeleton.styles.css'; -@import '../components/Tooltip/Tooltip.styles.css'; -@import '../components/ScrollArea/ScrollArea.styles.css'; -@import '../components/Select/Select.styles.css'; -@import '../components/Switch/Switch.styles.css'; diff --git a/packages/ui/src/css/styles.css b/packages/ui/src/css/styles.css index f5d623389f..4f5aa31744 100644 --- a/packages/ui/src/css/styles.css +++ b/packages/ui/src/css/styles.css @@ -14,5 +14,86 @@ * limitations under the License. */ +@layer tokens, base, components, utilities, legacy; + +/* Tokens */ +@import './tokens.css'; + +/* Base */ +@import './normalize.css'; @import './core.css'; -@import './components.css'; + +/* Components */ +@import '../components/Avatar/Avatar.styles.css'; +@import '../components/Box/styles.css'; +@import '../components/Button/styles.css'; +@import '../components/ButtonIcon/styles.css'; +@import '../components/Card/Card.styles.css'; +@import '../components/Checkbox/styles.css'; +@import '../components/Collapsible/Collapsible.styles.css'; +@import '../components/Container/styles.css'; +@import '../components/FieldError/FieldError.styles.css'; +@import '../components/FieldLabel/FieldLabel.styles.css'; +@import '../components/Flex/styles.css'; +@import '../components/Grid/styles.css'; +@import '../components/Header/Header.styles.css'; +@import '../components/HeaderPage/HeaderPage.styles.css'; +@import '../components/Icon/styles.css'; +@import '../components/Link/styles.css'; +@import '../components/Menu/Menu.styles.css'; +@import '../components/Popover/Popover.styles.css'; +@import '../components/RadioGroup/RadioGroup.styles.css'; +@import '../components/Table/Table.styles.css'; +@import '../components/TablePagination/TablePagination.styles.css'; +@import '../components/Tabs/Tabs.styles.css'; +@import '../components/TagGroup/TagGroup.styles.css'; +@import '../components/Text/styles.css'; +@import '../components/TextField/TextField.styles.css'; +@import '../components/PasswordField/PasswordField.styles.css'; +@import '../components/SearchField/SearchField.styles.css'; +@import '../components/Skeleton/Skeleton.styles.css'; +@import '../components/Tooltip/Tooltip.styles.css'; +@import '../components/ScrollArea/ScrollArea.styles.css'; +@import '../components/Select/Select.styles.css'; +@import '../components/Switch/Switch.styles.css'; + +/* Utilities */ + +/* Padding */ +@import './utilities/p.css'; +@import './utilities/pl.css'; +@import './utilities/pr.css'; +@import './utilities/pt.css'; +@import './utilities/pb.css'; +@import './utilities/py.css'; +@import './utilities/px.css'; + +/* Margin */ +@import './utilities/m.css'; +@import './utilities/ml.css'; +@import './utilities/mr.css'; +@import './utilities/mt.css'; +@import './utilities/mb.css'; +@import './utilities/my.css'; +@import './utilities/mx.css'; + +/* Display */ +@import './utilities/display.css'; + +/* Width */ +@import './utilities/width.css'; + +/* Height */ +@import './utilities/height.css'; + +/* Position */ +@import './utilities/position.css'; + +/* Grid */ +@import './utilities/grid.css'; + +/* Gap */ +@import './utilities/gap.css'; + +/* Flex */ +@import './utilities/flex.css'; diff --git a/packages/ui/src/css/tokens.css b/packages/ui/src/css/tokens.css new file mode 100644 index 0000000000..028c60311d --- /dev/null +++ b/packages/ui/src/css/tokens.css @@ -0,0 +1,186 @@ +/* + * 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. + */ + +@layer tokens { + /* Light theme tokens */ + :root { + /* Font families */ + --bui-font-regular: system-ui; + --bui-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas', + 'Liberation Mono', 'Courier New', monospace; + + /* Font weights */ + --bui-font-weight-regular: 400; + --bui-font-weight-bold: 600; + + /* Font sizes */ + --bui-font-size-1: 0.625rem; /* 10px */ + --bui-font-size-2: 0.75rem; /* 12px */ + --bui-font-size-3: 0.875rem; /* 14px */ + --bui-font-size-4: 1rem; /* 16px */ + --bui-font-size-5: 1.25rem; /* 20px */ + --bui-font-size-6: 1.5rem; /* 24px */ + --bui-font-size-7: 2rem; /* 32px */ + --bui-font-size-8: 3rem; /* 48px */ + --bui-font-size-9: 4rem; /* 64px */ + --bui-font-size-10: 5.75rem; /* 92px */ + + /* Spacing */ + --bui-space: 0.25rem; /* This is the spacing multiplier */ + --bui-space-0_5: calc(var(--bui-space) * 0.5); /* 2px */ + --bui-space-1: var(--bui-space); /* 4px */ + --bui-space-1_5: calc(var(--bui-space) * 1.5); /* 6px */ + --bui-space-2: calc(var(--bui-space) * 2); /* 8px */ + --bui-space-3: calc(var(--bui-space) * 3); /* 12px */ + --bui-space-4: calc(var(--bui-space) * 4); /* 16px */ + --bui-space-5: calc(var(--bui-space) * 5); /* 20px */ + --bui-space-6: calc(var(--bui-space) * 6); /* 24px */ + --bui-space-7: calc(var(--bui-space) * 7); /* 28px */ + --bui-space-8: calc(var(--bui-space) * 8); /* 32px */ + --bui-space-9: calc(var(--bui-space) * 9); /* 36px */ + --bui-space-10: calc(var(--bui-space) * 10); /* 40px */ + --bui-space-11: calc(var(--bui-space) * 11); /* 44px */ + --bui-space-12: calc(var(--bui-space) * 12); /* 48px */ + --bui-space-13: calc(var(--bui-space) * 13); /* 52px */ + --bui-space-14: calc(var(--bui-space) * 14); /* 56px */ + + /* Radius */ + --bui-radius-1: calc(0.125rem); + --bui-radius-2: calc(0.25rem); + --bui-radius-3: calc(0.5rem); + --bui-radius-4: calc(0.75rem); + --bui-radius-5: calc(1rem); + --bui-radius-6: calc(1.25rem); + --bui-radius-full: 9999px; + + /* Base Colors */ + --bui-black: #000000; + --bui-white: #ffffff; + + /* Gray scale */ + --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; + + /* Background Colors */ + --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: rgba(31, 84, 147, 0.4); + --bui-bg-tint-pressed: rgba(31, 84, 147, 0.6); + --bui-bg-tint-disabled: #ebebeb; + --bui-bg-danger: #feebe7; + --bui-bg-warning: #fff2b2; + --bui-bg-success: #e6f6eb; + + /* Foreground Colors */ + --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; + + /* Border Colors */ + --bui-border: rgba(0, 0, 0, 0.1); + --bui-border-hover: rgba(0, 0, 0, 0.2); + --bui-border-pressed: rgba(0, 0, 0, 0.4); + --bui-border-disabled: rgba(0, 0, 0, 0.1); + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + + /* Special Colors */ + --bui-ring: #1f5493; + --bui-scrollbar: #a0a0a03b; + --bui-scrollbar-thumb: #a0a0a0; + + --bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + /* Dark theme tokens */ + [data-theme-mode='dark'] { + /* Gray scale */ + --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; + + /* Background Colors */ + --bui-bg: #333333; + --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: #222222; + --bui-bg-tint: transparent; + --bui-bg-tint-hover: rgba(156, 201, 255, 0.12); + --bui-bg-tint-pressed: rgba(156, 201, 255, 0.16); + --bui-bg-tint-disabled: transparent; + --bui-bg-danger: #3b1219; + --bui-bg-warning: #302008; + --bui-bg-success: #132d21; + + /* Foreground Colors */ + --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; + + /* Border Colors */ + --bui-border: rgba(255, 255, 255, 0.12); + --bui-border-hover: rgba(255, 255, 255, 0.4); + --bui-border-pressed: rgba(255, 255, 255, 0.5); + --bui-border-disabled: rgba(255, 255, 255, 0.2); + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + + /* Special Colors */ + --bui-ring: #1f5493; + --bui-scrollbar: #3636363a; + --bui-scrollbar-thumb: #575757; + } +} diff --git a/packages/ui/src/css/utilities.css b/packages/ui/src/css/utilities.css deleted file mode 100644 index 226e30722b..0000000000 --- a/packages/ui/src/css/utilities.css +++ /dev/null @@ -1,54 +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. - */ - -/* Padding */ -@import './utilities/p.css'; -@import './utilities/pl.css'; -@import './utilities/pr.css'; -@import './utilities/pt.css'; -@import './utilities/pb.css'; -@import './utilities/py.css'; -@import './utilities/px.css'; - -/* Margin */ -@import './utilities/m.css'; -@import './utilities/ml.css'; -@import './utilities/mr.css'; -@import './utilities/mt.css'; -@import './utilities/mb.css'; -@import './utilities/my.css'; -@import './utilities/mx.css'; - -/* Display */ -@import './utilities/display.css'; - -/* Width */ -@import './utilities/width.css'; - -/* Height */ -@import './utilities/height.css'; - -/* Position */ -@import './utilities/position.css'; - -/* Grid */ -@import './utilities/grid.css'; - -/* Gap */ -@import './utilities/gap.css'; - -/* Flex */ -@import './utilities/flex.css'; diff --git a/packages/ui/src/css/utilities/display.css b/packages/ui/src/css/utilities/display.css index 179d80f860..437fb26993 100644 --- a/packages/ui/src/css/utilities/display.css +++ b/packages/ui/src/css/utilities/display.css @@ -1,110 +1,128 @@ -.bui-display-none { - display: none; -} +/* + * Copyright 2025 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. + */ -.bui-display-inline { - display: inline; -} - -.bui-display-inline-block { - display: inline-block; -} - -.bui-display-block { - display: block; -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-display-none { +@layer utilities { + .bui-display-none { display: none; } - .xs\:bui-display-inline { + .bui-display-inline { display: inline; } - .xs\:bui-display-inline-block { + .bui-display-inline-block { display: inline-block; } - .xs\:bui-display-block { + .bui-display-block { display: block; } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-display-none { - display: none; + /* Breakpoint xs */ + @media (min-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; + } } - .sm\:bui-display-inline { - display: inline; + /* Breakpoint sm */ + @media (min-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; + } } - .sm\:bui-display-inline-block { - display: inline-block; + /* Breakpoint md */ + @media (min-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; + } } - .sm\:bui-display-block { - display: block; - } -} - -/* Breakpoint md */ -@media (min-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; - } -} - -/* Breakpoint lg */ -@media (min-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; - } -} - -/* Breakpoint xl */ -@media (min-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; + /* Breakpoint lg */ + @media (min-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; + } + } + + /* Breakpoint xl */ + @media (min-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; + } } } diff --git a/packages/ui/src/css/utilities/flex.css b/packages/ui/src/css/utilities/flex.css index fa2b7b5ff2..2248addfee 100644 --- a/packages/ui/src/css/utilities/flex.css +++ b/packages/ui/src/css/utilities/flex.css @@ -1,306 +1,324 @@ -.bui-align-start { - align-items: start; -} +/* + * Copyright 2025 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. + */ -.bui-align-center { - align-items: center; -} - -.bui-align-end { - align-items: end; -} - -.bui-align-baseline { - align-items: baseline; -} - -.bui-align-stretch { - align-items: stretch; -} - -.bui-jc-start { - justify-content: start; -} - -.bui-jc-center { - justify-content: center; -} - -.bui-jc-end { - justify-content: end; -} - -.bui-jc-between { - justify-content: space-between; -} - -.bui-fd-row { - flex-direction: row; -} - -.bui-fd-column { - flex-direction: column; -} - -.bui-fd-row-reverse { - flex-direction: row-reverse; -} - -.bui-fd-column-reverse { - flex-direction: column-reverse; -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-align-start { +@layer utilities { + .bui-align-start { align-items: start; } - .xs\:bui-align-center { + .bui-align-center { align-items: center; } - .xs\:bui-align-end { + .bui-align-end { align-items: end; } - .xs\:bui-align-stretch { + .bui-align-baseline { + align-items: baseline; + } + + .bui-align-stretch { align-items: stretch; } - .xs\:bui-jc-start { + .bui-jc-start { justify-content: start; } - .xs\:bui-jc-center { + .bui-jc-center { justify-content: center; } - .xs\:bui-jc-end { + .bui-jc-end { justify-content: end; } - .xs\:bui-jc-between { + .bui-jc-between { justify-content: space-between; } - .xs\:bui-fd-row { + .bui-fd-row { flex-direction: row; } - .xs\:bui-fd-column { + .bui-fd-column { flex-direction: column; } - .xs\:bui-fd-row-reverse { + .bui-fd-row-reverse { flex-direction: row-reverse; } - .xs\:bui-fd-column-reverse { + .bui-fd-column-reverse { flex-direction: column-reverse; } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-align-start { - align-items: start; + /* Breakpoint xs */ + @media (min-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; + } } - .sm\:bui-align-center { - align-items: center; + /* Breakpoint sm */ + @media (min-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; + } } - .sm\:bui-align-end { - align-items: end; + /* Breakpoint md */ + @media (min-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; + } } - .sm\:bui-align-stretch { - align-items: stretch; + /* Breakpoint lg */ + @media (min-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; + } } - .sm\:bui-jc-start { - justify-content: start; - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-align-start { + align-items: start; + } - .sm\:bui-jc-center { - justify-content: center; - } + .xl\:bui-align-center { + align-items: center; + } - .sm\:bui-jc-end { - justify-content: end; - } + .xl\:bui-align-end { + align-items: end; + } - .sm\:bui-jc-between { - justify-content: space-between; - } + .xl\:bui-align-stretch { + align-items: stretch; + } - .sm\:bui-fd-row { - flex-direction: row; - } + .xl\:bui-jc-start { + justify-content: start; + } - .sm\:bui-fd-column { - flex-direction: column; - } + .xl\:bui-jc-center { + justify-content: center; + } - .sm\:bui-fd-row-reverse { - flex-direction: row-reverse; - } + .xl\:bui-jc-end { + justify-content: end; + } - .sm\:bui-fd-column-reverse { - flex-direction: column-reverse; - } -} - -/* Breakpoint md */ -@media (min-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; - } -} - -/* Breakpoint lg */ -@media (min-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; - } -} - -/* Breakpoint xl */ -@media (min-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; + .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; + } } } diff --git a/packages/ui/src/css/utilities/gap.css b/packages/ui/src/css/utilities/gap.css index ec4168fa6b..f9ea4f97d9 100644 --- a/packages/ui/src/css/utilities/gap.css +++ b/packages/ui/src/css/utilities/gap.css @@ -1,422 +1,440 @@ -.bui-gap { - gap: var(--gap); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-gap { - gap: var(--gap-xs); +@layer utilities { + .bui-gap { + gap: var(--gap); } - .xs\:bui-gap-0\.5 { + .bui-gap-0\.5 { gap: var(--bui-space-0_5); } - .xs\:bui-gap-1 { + .bui-gap-1 { gap: var(--bui-space-1); } - .xs\:bui-gap-1\.5 { + .bui-gap-1\.5 { gap: var(--bui-space-1_5); } - .xs\:bui-gap-2 { + .bui-gap-2 { gap: var(--bui-space-2); } - .xs\:bui-gap-3 { + .bui-gap-3 { gap: var(--bui-space-3); } - .xs\:bui-gap-4 { + .bui-gap-4 { gap: var(--bui-space-4); } - .xs\:bui-gap-5 { + .bui-gap-5 { gap: var(--bui-space-5); } - .xs\:bui-gap-6 { + .bui-gap-6 { gap: var(--bui-space-6); } - .xs\:bui-gap-7 { + .bui-gap-7 { gap: var(--bui-space-7); } - .xs\:bui-gap-8 { + .bui-gap-8 { gap: var(--bui-space-8); } - .xs\:bui-gap-9 { + .bui-gap-9 { gap: var(--bui-space-9); } - .xs\:bui-gap-10 { + .bui-gap-10 { gap: var(--bui-space-10); } - .xs\:bui-gap-11 { + .bui-gap-11 { gap: var(--bui-space-11); } - .xs\:bui-gap-12 { + .bui-gap-12 { gap: var(--bui-space-12); } - .xs\:bui-gap-13 { + .bui-gap-13 { gap: var(--bui-space-13); } - .xs\:bui-gap-14 { + .bui-gap-14 { gap: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-gap { - gap: var(--gap-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-gap-0\.5 { - gap: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-gap-1 { - gap: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-gap-1\.5 { - gap: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-gap-2 { - gap: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-gap { + gap: var(--gap-xl); + } - .sm\:bui-gap-3 { - gap: var(--bui-space-3); - } + .xl\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } - .sm\:bui-gap-4 { - gap: var(--bui-space-4); - } + .xl\:bui-gap-1 { + gap: var(--bui-space-1); + } - .sm\:bui-gap-5 { - gap: var(--bui-space-5); - } + .xl\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } - .sm\:bui-gap-6 { - gap: var(--bui-space-6); - } + .xl\:bui-gap-2 { + gap: var(--bui-space-2); + } - .sm\:bui-gap-7 { - gap: var(--bui-space-7); - } + .xl\:bui-gap-3 { + gap: var(--bui-space-3); + } - .sm\:bui-gap-8 { - gap: var(--bui-space-8); - } + .xl\:bui-gap-4 { + gap: var(--bui-space-4); + } - .sm\:bui-gap-9 { - gap: var(--bui-space-9); - } + .xl\:bui-gap-5 { + gap: var(--bui-space-5); + } - .sm\:bui-gap-10 { - gap: var(--bui-space-10); - } + .xl\:bui-gap-6 { + gap: var(--bui-space-6); + } - .sm\:bui-gap-11 { - gap: var(--bui-space-11); - } + .xl\:bui-gap-7 { + gap: var(--bui-space-7); + } - .sm\:bui-gap-12 { - gap: var(--bui-space-12); - } + .xl\:bui-gap-8 { + gap: var(--bui-space-8); + } - .sm\:bui-gap-13 { - gap: var(--bui-space-13); - } + .xl\:bui-gap-9 { + gap: var(--bui-space-9); + } - .sm\:bui-gap-14 { - gap: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/grid.css b/packages/ui/src/css/utilities/grid.css index 11de40bd7f..989a7fd88a 100644 --- a/packages/ui/src/css/utilities/grid.css +++ b/packages/ui/src/css/utilities/grid.css @@ -1,1292 +1,1310 @@ -.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; -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-columns-1 { +/* + * Copyright 2025 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. + */ + +@layer utilities { + .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; - } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-columns-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - .sm\:bui-columns-2 { + .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; - } -} -/* Breakpoint md */ -@media (min-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 { + .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; - } -} -/* Breakpoint lg */ -@media (min-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 { + .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; - } -} -/* Breakpoint xl */ -@media (min-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 { + .bui-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } - .xl\:bui-columns-6 { + + .bui-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } - .xl\:bui-columns-7 { + + .bui-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } - .xl\:bui-columns-8 { + + .bui-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } - .xl\:bui-columns-9 { + + .bui-columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } - .xl\:bui-columns-10 { + + .bui-columns-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } - .xl\:bui-columns-11 { + + .bui-columns-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } - .xl\:bui-columns-12 { + + .bui-columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } - .xl\:bui-columns-auto { + + .bui-columns-auto { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } - .xl\:bui-col-span-1 { + + .bui-col-span-1 { grid-column: span 1 / span 1; } - .xl\:bui-col-span-2 { + + .bui-col-span-2 { grid-column: span 2 / span 2; } - .xl\:bui-col-span-3 { + + .bui-col-span-3 { grid-column: span 3 / span 3; } - .xl\:bui-col-span-4 { + + .bui-col-span-4 { grid-column: span 4 / span 4; } - .xl\:bui-col-span-5 { + + .bui-col-span-5 { grid-column: span 5 / span 5; } - .xl\:bui-col-span-6 { + + .bui-col-span-6 { grid-column: span 6 / span 6; } - .xl\:bui-col-span-7 { + + .bui-col-span-7 { grid-column: span 7 / span 7; } - .xl\:bui-col-span-8 { + + .bui-col-span-8 { grid-column: span 8 / span 8; } - .xl\:bui-col-span-9 { + + .bui-col-span-9 { grid-column: span 9 / span 9; } - .xl\:bui-col-span-10 { + + .bui-col-span-10 { grid-column: span 10 / span 10; } - .xl\:bui-col-span-11 { + + .bui-col-span-11 { grid-column: span 11 / span 11; } - .xl\:bui-col-span-12 { + + .bui-col-span-12 { grid-column: span 12 / span 12; } - .xl\:bui-col-span-auto { + + .bui-col-span-auto { grid-column: span auto / span auto; } - .xl\:bui-col-start-1 { + + .bui-col-start-1 { grid-column-start: 1; } - .xl\:bui-col-start-2 { + + .bui-col-start-2 { grid-column-start: 2; } - .xl\:bui-col-start-3 { + + .bui-col-start-3 { grid-column-start: 3; } - .xl\:bui-col-start-4 { + + .bui-col-start-4 { grid-column-start: 4; } - .xl\:bui-col-start-5 { + + .bui-col-start-5 { grid-column-start: 5; } - .xl\:bui-col-start-6 { + + .bui-col-start-6 { grid-column-start: 6; } - .xl\:bui-col-start-7 { + + .bui-col-start-7 { grid-column-start: 7; } - .xl\:bui-col-start-8 { + + .bui-col-start-8 { grid-column-start: 8; } - .xl\:bui-col-start-9 { + + .bui-col-start-9 { grid-column-start: 9; } - .xl\:bui-col-start-10 { + + .bui-col-start-10 { grid-column-start: 10; } - .xl\:bui-col-start-11 { + + .bui-col-start-11 { grid-column-start: 11; } - .xl\:bui-col-start-12 { + + .bui-col-start-12 { grid-column-start: 12; } - .xl\:bui-col-start-13 { + + .bui-col-start-13 { grid-column-start: 13; } - .xl\:bui-col-start-auto { + + .bui-col-start-auto { grid-column-start: auto; } - .xl\:bui-col-end-1 { + + .bui-col-end-1 { grid-column-end: 1; } - .xl\:bui-col-end-2 { + + .bui-col-end-2 { grid-column-end: 2; } - .xl\:bui-col-end-3 { + + .bui-col-end-3 { grid-column-end: 3; } - .xl\:bui-col-end-4 { + + .bui-col-end-4 { grid-column-end: 4; } - .xl\:bui-col-end-5 { + + .bui-col-end-5 { grid-column-end: 5; } - .xl\:bui-col-end-6 { + + .bui-col-end-6 { grid-column-end: 6; } - .xl\:bui-col-end-7 { + + .bui-col-end-7 { grid-column-end: 7; } - .xl\:bui-col-end-8 { + + .bui-col-end-8 { grid-column-end: 8; } - .xl\:bui-col-end-9 { + + .bui-col-end-9 { grid-column-end: 9; } - .xl\:bui-col-end-10 { + + .bui-col-end-10 { grid-column-end: 10; } - .xl\:bui-col-end-11 { + + .bui-col-end-11 { grid-column-end: 11; } - .xl\:bui-col-end-12 { + + .bui-col-end-12 { grid-column-end: 12; } - .xl\:bui-col-end-13 { + + .bui-col-end-13 { grid-column-end: 13; } - .xl\:bui-col-end-auto { + + .bui-col-end-auto { grid-column-end: auto; } - .xl\:bui-row-span-1 { + + .bui-row-span-1 { grid-row: span 1 / span 1; } - .xl\:bui-row-span-2 { + + .bui-row-span-2 { grid-row: span 2 / span 2; } - .xl\:bui-row-span-3 { + + .bui-row-span-3 { grid-row: span 3 / span 3; } - .xl\:bui-row-span-4 { + + .bui-row-span-4 { grid-row: span 4 / span 4; } - .xl\:bui-row-span-5 { + + .bui-row-span-5 { grid-row: span 5 / span 5; } - .xl\:bui-row-span-6 { + + .bui-row-span-6 { grid-row: span 6 / span 6; } - .xl\:bui-row-span-7 { + + .bui-row-span-7 { grid-row: span 7 / span 7; } - .xl\:bui-row-span-8 { + + .bui-row-span-8 { grid-row: span 8 / span 8; } - .xl\:bui-row-span-9 { + + .bui-row-span-9 { grid-row: span 9 / span 9; } - .xl\:bui-row-span-10 { + + .bui-row-span-10 { grid-row: span 10 / span 10; } - .xl\:bui-row-span-11 { + + .bui-row-span-11 { grid-row: span 11 / span 11; } - .xl\:bui-row-span-12 { + + .bui-row-span-12 { grid-row: span 12 / span 12; } - .xl\:bui-row-span-auto { + + .bui-row-span-auto { grid-row: span auto / span auto; } + + /* Breakpoint xs */ + @media (min-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; + } + } + + /* Breakpoint sm */ + @media (min-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; + } + } + + /* Breakpoint md */ + @media (min-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; + } + } + + /* Breakpoint lg */ + @media (min-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; + } + } + + /* Breakpoint xl */ + @media (min-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; + } + } } diff --git a/packages/ui/src/css/utilities/height.css b/packages/ui/src/css/utilities/height.css index 5c245cbfb9..2028ed1510 100644 --- a/packages/ui/src/css/utilities/height.css +++ b/packages/ui/src/css/utilities/height.css @@ -1,86 +1,104 @@ -.bui-h { - height: var(--height); -} +/* + * Copyright 2025 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. + */ -.bui-min-h { - min-height: var(--min-height); -} - -.bui-max-h { - max-height: var(--max-height); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-h { +@layer utilities { + .bui-h { height: var(--height); } - .xs\:bui-min-h { + .bui-min-h { min-height: var(--min-height); } - .xs\:bui-max-h { + .bui-max-h { max-height: var(--max-height); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-h { - height: var(--height); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-min-h { - min-height: var(--min-height); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-max-h { - max-height: var(--max-height); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + /* Breakpoint md */ + @media (min-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); + } + } + + /* Breakpoint lg */ + @media (min-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); + } + } + + /* Breakpoint xl */ + @media (min-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); + } } } diff --git a/packages/ui/src/css/utilities/m.css b/packages/ui/src/css/utilities/m.css index b2c1099d9b..75d150acfb 100644 --- a/packages/ui/src/css/utilities/m.css +++ b/packages/ui/src/css/utilities/m.css @@ -1,422 +1,440 @@ -.bui-m { - margin: var(--m); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-m { - margin: var(--p-xs); +@layer utilities { + .bui-m { + margin: var(--m); } - .xs\:bui-m-0\.5 { + .bui-m-0\.5 { margin: var(--bui-space-0_5); } - .xs\:bui-m-1 { + .bui-m-1 { margin: var(--bui-space-1); } - .xs\:bui-m-1\.5 { + .bui-m-1\.5 { margin: var(--bui-space-1_5); } - .xs\:bui-m-2 { + .bui-m-2 { margin: var(--bui-space-2); } - .xs\:bui-m-3 { + .bui-m-3 { margin: var(--bui-space-3); } - .xs\:bui-m-4 { + .bui-m-4 { margin: var(--bui-space-4); } - .xs\:bui-m-5 { + .bui-m-5 { margin: var(--bui-space-5); } - .xs\:bui-m-6 { + .bui-m-6 { margin: var(--bui-space-6); } - .xs\:bui-m-7 { + .bui-m-7 { margin: var(--bui-space-7); } - .xs\:bui-m-8 { + .bui-m-8 { margin: var(--bui-space-8); } - .xs\:bui-m-9 { + .bui-m-9 { margin: var(--bui-space-9); } - .xs\:bui-m-10 { + .bui-m-10 { margin: var(--bui-space-10); } - .xs\:bui-m-11 { + .bui-m-11 { margin: var(--bui-space-11); } - .xs\:bui-m-12 { + .bui-m-12 { margin: var(--bui-space-12); } - .xs\:bui-m-13 { + .bui-m-13 { margin: var(--bui-space-13); } - .xs\:bui-m-14 { + .bui-m-14 { margin: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-m { - margin: var(--p-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-m-0\.5 { - margin: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-m-1 { - margin: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-m-1\.5 { - margin: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-m-2 { - margin: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-m { + margin: var(--p-xl); + } - .sm\:bui-m-3 { - margin: var(--bui-space-3); - } + .xl\:bui-m-0\.5 { + margin: var(--bui-space-0_5); + } - .sm\:bui-m-4 { - margin: var(--bui-space-4); - } + .xl\:bui-m-1 { + margin: var(--bui-space-1); + } - .sm\:bui-m-5 { - margin: var(--bui-space-5); - } + .xl\:bui-m-1\.5 { + margin: var(--bui-space-1_5); + } - .sm\:bui-m-6 { - margin: var(--bui-space-6); - } + .xl\:bui-m-2 { + margin: var(--bui-space-2); + } - .sm\:bui-m-7 { - margin: var(--bui-space-7); - } + .xl\:bui-m-3 { + margin: var(--bui-space-3); + } - .sm\:bui-m-8 { - margin: var(--bui-space-8); - } + .xl\:bui-m-4 { + margin: var(--bui-space-4); + } - .sm\:bui-m-9 { - margin: var(--bui-space-9); - } + .xl\:bui-m-5 { + margin: var(--bui-space-5); + } - .sm\:bui-m-10 { - margin: var(--bui-space-10); - } + .xl\:bui-m-6 { + margin: var(--bui-space-6); + } - .sm\:bui-m-11 { - margin: var(--bui-space-11); - } + .xl\:bui-m-7 { + margin: var(--bui-space-7); + } - .sm\:bui-m-12 { - margin: var(--bui-space-12); - } + .xl\:bui-m-8 { + margin: var(--bui-space-8); + } - .sm\:bui-m-13 { - margin: var(--bui-space-13); - } + .xl\:bui-m-9 { + margin: var(--bui-space-9); + } - .sm\:bui-m-14 { - margin: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/mb.css b/packages/ui/src/css/utilities/mb.css index 576d4d488e..6394937af4 100644 --- a/packages/ui/src/css/utilities/mb.css +++ b/packages/ui/src/css/utilities/mb.css @@ -1,422 +1,440 @@ -.bui-mb { - margin-bottom: var(--mb); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-mb { - margin-bottom: var(--pb-xs); +@layer utilities { + .bui-mb { + margin-bottom: var(--mb); } - .xs\:bui-mb-0\.5 { + .bui-mb-0\.5 { margin-bottom: var(--bui-space-0_5); } - .xs\:bui-mb-1 { + .bui-mb-1 { margin-bottom: var(--bui-space-1); } - .xs\:bui-mb-1\.5 { + .bui-mb-1\.5 { margin-bottom: var(--bui-space-1_5); } - .xs\:bui-mb-2 { + .bui-mb-2 { margin-bottom: var(--bui-space-2); } - .xs\:bui-mb-3 { + .bui-mb-3 { margin-bottom: var(--bui-space-3); } - .xs\:bui-mb-4 { + .bui-mb-4 { margin-bottom: var(--bui-space-4); } - .xs\:bui-mb-5 { + .bui-mb-5 { margin-bottom: var(--bui-space-5); } - .xs\:bui-mb-6 { + .bui-mb-6 { margin-bottom: var(--bui-space-6); } - .xs\:bui-mb-7 { + .bui-mb-7 { margin-bottom: var(--bui-space-7); } - .xs\:bui-mb-8 { + .bui-mb-8 { margin-bottom: var(--bui-space-8); } - .xs\:bui-mb-9 { + .bui-mb-9 { margin-bottom: var(--bui-space-9); } - .xs\:bui-mb-10 { + .bui-mb-10 { margin-bottom: var(--bui-space-10); } - .xs\:bui-mb-11 { + .bui-mb-11 { margin-bottom: var(--bui-space-11); } - .xs\:bui-mb-12 { + .bui-mb-12 { margin-bottom: var(--bui-space-12); } - .xs\:bui-mb-13 { + .bui-mb-13 { margin-bottom: var(--bui-space-13); } - .xs\:bui-mb-14 { + .bui-mb-14 { margin-bottom: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-mb { - margin-bottom: var(--pb-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-mb-0\.5 { - margin-bottom: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-mb-1 { - margin-bottom: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-mb-1\.5 { - margin-bottom: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-mb-2 { - margin-bottom: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-mb { + margin-bottom: var(--pb-xl); + } - .sm\:bui-mb-3 { - margin-bottom: var(--bui-space-3); - } + .xl\:bui-mb-0\.5 { + margin-bottom: var(--bui-space-0_5); + } - .sm\:bui-mb-4 { - margin-bottom: var(--bui-space-4); - } + .xl\:bui-mb-1 { + margin-bottom: var(--bui-space-1); + } - .sm\:bui-mb-5 { - margin-bottom: var(--bui-space-5); - } + .xl\:bui-mb-1\.5 { + margin-bottom: var(--bui-space-1_5); + } - .sm\:bui-mb-6 { - margin-bottom: var(--bui-space-6); - } + .xl\:bui-mb-2 { + margin-bottom: var(--bui-space-2); + } - .sm\:bui-mb-7 { - margin-bottom: var(--bui-space-7); - } + .xl\:bui-mb-3 { + margin-bottom: var(--bui-space-3); + } - .sm\:bui-mb-8 { - margin-bottom: var(--bui-space-8); - } + .xl\:bui-mb-4 { + margin-bottom: var(--bui-space-4); + } - .sm\:bui-mb-9 { - margin-bottom: var(--bui-space-9); - } + .xl\:bui-mb-5 { + margin-bottom: var(--bui-space-5); + } - .sm\:bui-mb-10 { - margin-bottom: var(--bui-space-10); - } + .xl\:bui-mb-6 { + margin-bottom: var(--bui-space-6); + } - .sm\:bui-mb-11 { - margin-bottom: var(--bui-space-11); - } + .xl\:bui-mb-7 { + margin-bottom: var(--bui-space-7); + } - .sm\:bui-mb-12 { - margin-bottom: var(--bui-space-12); - } + .xl\:bui-mb-8 { + margin-bottom: var(--bui-space-8); + } - .sm\:bui-mb-13 { - margin-bottom: var(--bui-space-13); - } + .xl\:bui-mb-9 { + margin-bottom: var(--bui-space-9); + } - .sm\:bui-mb-14 { - margin-bottom: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/ml.css b/packages/ui/src/css/utilities/ml.css index b11fe779fb..7b82b73ab8 100644 --- a/packages/ui/src/css/utilities/ml.css +++ b/packages/ui/src/css/utilities/ml.css @@ -1,422 +1,440 @@ -.bui-ml { - margin-left: var(--ml); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-ml { - margin-left: var(--pl-xs); +@layer utilities { + .bui-ml { + margin-left: var(--ml); } - .xs\:bui-ml-0\.5 { + .bui-ml-0\.5 { margin-left: var(--bui-space-0_5); } - .xs\:bui-ml-1 { + .bui-ml-1 { margin-left: var(--bui-space-1); } - .xs\:bui-ml-1\.5 { + .bui-ml-1\.5 { margin-left: var(--bui-space-1_5); } - .xs\:bui-ml-2 { + .bui-ml-2 { margin-left: var(--bui-space-2); } - .xs\:bui-ml-3 { + .bui-ml-3 { margin-left: var(--bui-space-3); } - .xs\:bui-ml-4 { + .bui-ml-4 { margin-left: var(--bui-space-4); } - .xs\:bui-ml-5 { + .bui-ml-5 { margin-left: var(--bui-space-5); } - .xs\:bui-ml-6 { + .bui-ml-6 { margin-left: var(--bui-space-6); } - .xs\:bui-ml-7 { + .bui-ml-7 { margin-left: var(--bui-space-7); } - .xs\:bui-ml-8 { + .bui-ml-8 { margin-left: var(--bui-space-8); } - .xs\:bui-ml-9 { + .bui-ml-9 { margin-left: var(--bui-space-9); } - .xs\:bui-ml-10 { + .bui-ml-10 { margin-left: var(--bui-space-10); } - .xs\:bui-ml-11 { + .bui-ml-11 { margin-left: var(--bui-space-11); } - .xs\:bui-ml-12 { + .bui-ml-12 { margin-left: var(--bui-space-12); } - .xs\:bui-ml-13 { + .bui-ml-13 { margin-left: var(--bui-space-13); } - .xs\:bui-ml-14 { + .bui-ml-14 { margin-left: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-ml { - margin-left: var(--pl-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-ml-0\.5 { - margin-left: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-ml-1 { - margin-left: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-ml-1\.5 { - margin-left: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-ml-2 { - margin-left: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-ml { + margin-left: var(--pl-xl); + } - .sm\:bui-ml-3 { - margin-left: var(--bui-space-3); - } + .xl\:bui-ml-0\.5 { + margin-left: var(--bui-space-0_5); + } - .sm\:bui-ml-4 { - margin-left: var(--bui-space-4); - } + .xl\:bui-ml-1 { + margin-left: var(--bui-space-1); + } - .sm\:bui-ml-5 { - margin-left: var(--bui-space-5); - } + .xl\:bui-ml-1\.5 { + margin-left: var(--bui-space-1_5); + } - .sm\:bui-ml-6 { - margin-left: var(--bui-space-6); - } + .xl\:bui-ml-2 { + margin-left: var(--bui-space-2); + } - .sm\:bui-ml-7 { - margin-left: var(--bui-space-7); - } + .xl\:bui-ml-3 { + margin-left: var(--bui-space-3); + } - .sm\:bui-ml-8 { - margin-left: var(--bui-space-8); - } + .xl\:bui-ml-4 { + margin-left: var(--bui-space-4); + } - .sm\:bui-ml-9 { - margin-left: var(--bui-space-9); - } + .xl\:bui-ml-5 { + margin-left: var(--bui-space-5); + } - .sm\:bui-ml-10 { - margin-left: var(--bui-space-10); - } + .xl\:bui-ml-6 { + margin-left: var(--bui-space-6); + } - .sm\:bui-ml-11 { - margin-left: var(--bui-space-11); - } + .xl\:bui-ml-7 { + margin-left: var(--bui-space-7); + } - .sm\:bui-ml-12 { - margin-left: var(--bui-space-12); - } + .xl\:bui-ml-8 { + margin-left: var(--bui-space-8); + } - .sm\:bui-ml-13 { - margin-left: var(--bui-space-13); - } + .xl\:bui-ml-9 { + margin-left: var(--bui-space-9); + } - .sm\:bui-ml-14 { - margin-left: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/mr.css b/packages/ui/src/css/utilities/mr.css index 215a9dc88d..bac16b3ed3 100644 --- a/packages/ui/src/css/utilities/mr.css +++ b/packages/ui/src/css/utilities/mr.css @@ -1,422 +1,440 @@ -.bui-mr { - margin-right: var(--mr); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-mr { - margin-right: var(--pr-xs); +@layer utilities { + .bui-mr { + margin-right: var(--mr); } - .xs\:bui-mr-0\.5 { + .bui-mr-0\.5 { margin-right: var(--bui-space-0_5); } - .xs\:bui-mr-1 { + .bui-mr-1 { margin-right: var(--bui-space-1); } - .xs\:bui-mr-1\.5 { + .bui-mr-1\.5 { margin-right: var(--bui-space-1_5); } - .xs\:bui-mr-2 { + .bui-mr-2 { margin-right: var(--bui-space-2); } - .xs\:bui-mr-3 { + .bui-mr-3 { margin-right: var(--bui-space-3); } - .xs\:bui-mr-4 { + .bui-mr-4 { margin-right: var(--bui-space-4); } - .xs\:bui-mr-5 { + .bui-mr-5 { margin-right: var(--bui-space-5); } - .xs\:bui-mr-6 { + .bui-mr-6 { margin-right: var(--bui-space-6); } - .xs\:bui-mr-7 { + .bui-mr-7 { margin-right: var(--bui-space-7); } - .xs\:bui-mr-8 { + .bui-mr-8 { margin-right: var(--bui-space-8); } - .xs\:bui-mr-9 { + .bui-mr-9 { margin-right: var(--bui-space-9); } - .xs\:bui-mr-10 { + .bui-mr-10 { margin-right: var(--bui-space-10); } - .xs\:bui-mr-11 { + .bui-mr-11 { margin-right: var(--bui-space-11); } - .xs\:bui-mr-12 { + .bui-mr-12 { margin-right: var(--bui-space-12); } - .xs\:bui-mr-13 { + .bui-mr-13 { margin-right: var(--bui-space-13); } - .xs\:bui-mr-14 { + .bui-mr-14 { margin-right: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-mr { - margin-right: var(--pr-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-mr-0\.5 { - margin-right: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-mr-1 { - margin-right: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-mr-1\.5 { - margin-right: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-mr-2 { - margin-right: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-mr { + margin-right: var(--pr-xl); + } - .sm\:bui-mr-3 { - margin-right: var(--bui-space-3); - } + .xl\:bui-mr-0\.5 { + margin-right: var(--bui-space-0_5); + } - .sm\:bui-mr-4 { - margin-right: var(--bui-space-4); - } + .xl\:bui-mr-1 { + margin-right: var(--bui-space-1); + } - .sm\:bui-mr-5 { - margin-right: var(--bui-space-5); - } + .xl\:bui-mr-1\.5 { + margin-right: var(--bui-space-1_5); + } - .sm\:bui-mr-6 { - margin-right: var(--bui-space-6); - } + .xl\:bui-mr-2 { + margin-right: var(--bui-space-2); + } - .sm\:bui-mr-7 { - margin-right: var(--bui-space-7); - } + .xl\:bui-mr-3 { + margin-right: var(--bui-space-3); + } - .sm\:bui-mr-8 { - margin-right: var(--bui-space-8); - } + .xl\:bui-mr-4 { + margin-right: var(--bui-space-4); + } - .sm\:bui-mr-9 { - margin-right: var(--bui-space-9); - } + .xl\:bui-mr-5 { + margin-right: var(--bui-space-5); + } - .sm\:bui-mr-10 { - margin-right: var(--bui-space-10); - } + .xl\:bui-mr-6 { + margin-right: var(--bui-space-6); + } - .sm\:bui-mr-11 { - margin-right: var(--bui-space-11); - } + .xl\:bui-mr-7 { + margin-right: var(--bui-space-7); + } - .sm\:bui-mr-12 { - margin-right: var(--bui-space-12); - } + .xl\:bui-mr-8 { + margin-right: var(--bui-space-8); + } - .sm\:bui-mr-13 { - margin-right: var(--bui-space-13); - } + .xl\:bui-mr-9 { + margin-right: var(--bui-space-9); + } - .sm\:bui-mr-14 { - margin-right: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/mt.css b/packages/ui/src/css/utilities/mt.css index 30035bf8bd..2f6ecc4aa8 100644 --- a/packages/ui/src/css/utilities/mt.css +++ b/packages/ui/src/css/utilities/mt.css @@ -1,422 +1,440 @@ -.bui-mt { - margin-top: var(--mt); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-mt { - margin-top: var(--pt-xs); +@layer utilities { + .bui-mt { + margin-top: var(--mt); } - .xs\:bui-mt-0\.5 { + .bui-mt-0\.5 { margin-top: var(--bui-space-0_5); } - .xs\:bui-mt-1 { + .bui-mt-1 { margin-top: var(--bui-space-1); } - .xs\:bui-mt-1\.5 { + .bui-mt-1\.5 { margin-top: var(--bui-space-1_5); } - .xs\:bui-mt-2 { + .bui-mt-2 { margin-top: var(--bui-space-2); } - .xs\:bui-mt-3 { + .bui-mt-3 { margin-top: var(--bui-space-3); } - .xs\:bui-mt-4 { + .bui-mt-4 { margin-top: var(--bui-space-4); } - .xs\:bui-mt-5 { + .bui-mt-5 { margin-top: var(--bui-space-5); } - .xs\:bui-mt-6 { + .bui-mt-6 { margin-top: var(--bui-space-6); } - .xs\:bui-mt-7 { + .bui-mt-7 { margin-top: var(--bui-space-7); } - .xs\:bui-mt-8 { + .bui-mt-8 { margin-top: var(--bui-space-8); } - .xs\:bui-mt-9 { + .bui-mt-9 { margin-top: var(--bui-space-9); } - .xs\:bui-mt-10 { + .bui-mt-10 { margin-top: var(--bui-space-10); } - .xs\:bui-mt-11 { + .bui-mt-11 { margin-top: var(--bui-space-11); } - .xs\:bui-mt-12 { + .bui-mt-12 { margin-top: var(--bui-space-12); } - .xs\:bui-mt-13 { + .bui-mt-13 { margin-top: var(--bui-space-13); } - .xs\:bui-mt-14 { + .bui-mt-14 { margin-top: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-mt { - margin-top: var(--pt-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-mt-0\.5 { - margin-top: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-mt-1 { - margin-top: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-mt-1\.5 { - margin-top: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-mt-2 { - margin-top: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-mt { + margin-top: var(--pt-xl); + } - .sm\:bui-mt-3 { - margin-top: var(--bui-space-3); - } + .xl\:bui-mt-0\.5 { + margin-top: var(--bui-space-0_5); + } - .sm\:bui-mt-4 { - margin-top: var(--bui-space-4); - } + .xl\:bui-mt-1 { + margin-top: var(--bui-space-1); + } - .sm\:bui-mt-5 { - margin-top: var(--bui-space-5); - } + .xl\:bui-mt-1\.5 { + margin-top: var(--bui-space-1_5); + } - .sm\:bui-mt-6 { - margin-top: var(--bui-space-6); - } + .xl\:bui-mt-2 { + margin-top: var(--bui-space-2); + } - .sm\:bui-mt-7 { - margin-top: var(--bui-space-7); - } + .xl\:bui-mt-3 { + margin-top: var(--bui-space-3); + } - .sm\:bui-mt-8 { - margin-top: var(--bui-space-8); - } + .xl\:bui-mt-4 { + margin-top: var(--bui-space-4); + } - .sm\:bui-mt-9 { - margin-top: var(--bui-space-9); - } + .xl\:bui-mt-5 { + margin-top: var(--bui-space-5); + } - .sm\:bui-mt-10 { - margin-top: var(--bui-space-10); - } + .xl\:bui-mt-6 { + margin-top: var(--bui-space-6); + } - .sm\:bui-mt-11 { - margin-top: var(--bui-space-11); - } + .xl\:bui-mt-7 { + margin-top: var(--bui-space-7); + } - .sm\:bui-mt-12 { - margin-top: var(--bui-space-12); - } + .xl\:bui-mt-8 { + margin-top: var(--bui-space-8); + } - .sm\:bui-mt-13 { - margin-top: var(--bui-space-13); - } + .xl\:bui-mt-9 { + margin-top: var(--bui-space-9); + } - .sm\:bui-mt-14 { - margin-top: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/mx.css b/packages/ui/src/css/utilities/mx.css index 36bdf32796..4898fc2352 100644 --- a/packages/ui/src/css/utilities/mx.css +++ b/packages/ui/src/css/utilities/mx.css @@ -1,524 +1,542 @@ -.bui-mx { - margin-left: var(--mx); - margin-right: var(--mx); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-mx { - margin-left: var(--px-xs); - margin-right: var(--px-xs); +@layer utilities { + .bui-mx { + margin-left: var(--mx); + margin-right: var(--mx); } - .xs\:bui-mx-0\.5 { + .bui-mx-0\.5 { margin-left: var(--bui-space-0_5); margin-right: var(--bui-space-0_5); } - .xs\:bui-mx-1 { + .bui-mx-1 { margin-left: var(--bui-space-1); margin-right: var(--bui-space-1); } - .xs\:bui-mx-1\.5 { + .bui-mx-1\.5 { margin-left: var(--bui-space-1_5); margin-right: var(--bui-space-1_5); } - .xs\:bui-mx-2 { + .bui-mx-2 { margin-left: var(--bui-space-2); margin-right: var(--bui-space-2); } - .xs\:bui-mx-3 { + .bui-mx-3 { margin-left: var(--bui-space-3); margin-right: var(--bui-space-3); } - .xs\:bui-mx-4 { + .bui-mx-4 { margin-left: var(--bui-space-4); margin-right: var(--bui-space-4); } - .xs\:bui-mx-5 { + .bui-mx-5 { margin-left: var(--bui-space-5); margin-right: var(--bui-space-5); } - .xs\:bui-mx-6 { + .bui-mx-6 { margin-left: var(--bui-space-6); margin-right: var(--bui-space-6); } - .xs\:bui-mx-7 { + .bui-mx-7 { margin-left: var(--bui-space-7); margin-right: var(--bui-space-7); } - .xs\:bui-mx-8 { + .bui-mx-8 { margin-left: var(--bui-space-8); margin-right: var(--bui-space-8); } - .xs\:bui-mx-9 { + .bui-mx-9 { margin-left: var(--bui-space-9); margin-right: var(--bui-space-9); } - .xs\:bui-mx-10 { + .bui-mx-10 { margin-left: var(--bui-space-10); margin-right: var(--bui-space-10); } - .xs\:bui-mx-11 { + .bui-mx-11 { margin-left: var(--bui-space-11); margin-right: var(--bui-space-11); } - .xs\:bui-mx-12 { + .bui-mx-12 { margin-left: var(--bui-space-12); margin-right: var(--bui-space-12); } - .xs\:bui-mx-13 { + .bui-mx-13 { margin-left: var(--bui-space-13); margin-right: var(--bui-space-13); } - .xs\:bui-mx-14 { + .bui-mx-14 { margin-left: var(--bui-space-14); margin-right: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-mx { - margin-left: var(--px-sm); - margin-right: var(--px-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-mx-0\.5 { - margin-left: var(--bui-space-0_5); - margin-right: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-mx-1 { - margin-left: var(--bui-space-1); - margin-right: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-mx-1\.5 { - margin-left: var(--bui-space-1_5); - margin-right: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-mx-2 { - margin-left: var(--bui-space-2); - margin-right: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-mx { + margin-left: var(--px-xl); + margin-right: var(--px-xl); + } - .sm\:bui-mx-3 { - margin-left: var(--bui-space-3); - margin-right: var(--bui-space-3); - } + .xl\:bui-mx-0\.5 { + margin-left: var(--bui-space-0_5); + margin-right: var(--bui-space-0_5); + } - .sm\:bui-mx-4 { - margin-left: var(--bui-space-4); - margin-right: var(--bui-space-4); - } + .xl\:bui-mx-1 { + margin-left: var(--bui-space-1); + margin-right: var(--bui-space-1); + } - .sm\:bui-mx-5 { - margin-left: var(--bui-space-5); - margin-right: var(--bui-space-5); - } + .xl\:bui-mx-1\.5 { + margin-left: var(--bui-space-1_5); + margin-right: var(--bui-space-1_5); + } - .sm\:bui-mx-6 { - margin-left: var(--bui-space-6); - margin-right: var(--bui-space-6); - } + .xl\:bui-mx-2 { + margin-left: var(--bui-space-2); + margin-right: var(--bui-space-2); + } - .sm\:bui-mx-7 { - margin-left: var(--bui-space-7); - margin-right: var(--bui-space-7); - } + .xl\:bui-mx-3 { + margin-left: var(--bui-space-3); + margin-right: var(--bui-space-3); + } - .sm\:bui-mx-8 { - margin-left: var(--bui-space-8); - margin-right: var(--bui-space-8); - } + .xl\:bui-mx-4 { + margin-left: var(--bui-space-4); + margin-right: var(--bui-space-4); + } - .sm\:bui-mx-9 { - margin-left: var(--bui-space-9); - margin-right: var(--bui-space-9); - } + .xl\:bui-mx-5 { + margin-left: var(--bui-space-5); + margin-right: var(--bui-space-5); + } - .sm\:bui-mx-10 { - margin-left: var(--bui-space-10); - margin-right: var(--bui-space-10); - } + .xl\:bui-mx-6 { + margin-left: var(--bui-space-6); + margin-right: var(--bui-space-6); + } - .sm\:bui-mx-11 { - margin-left: var(--bui-space-11); - margin-right: var(--bui-space-11); - } + .xl\:bui-mx-7 { + margin-left: var(--bui-space-7); + margin-right: var(--bui-space-7); + } - .sm\:bui-mx-12 { - margin-left: var(--bui-space-12); - margin-right: var(--bui-space-12); - } + .xl\:bui-mx-8 { + margin-left: var(--bui-space-8); + margin-right: var(--bui-space-8); + } - .sm\:bui-mx-13 { - margin-left: var(--bui-space-13); - margin-right: var(--bui-space-13); - } + .xl\:bui-mx-9 { + margin-left: var(--bui-space-9); + margin-right: var(--bui-space-9); + } - .sm\:bui-mx-14 { - margin-left: var(--bui-space-14); - margin-right: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/my.css b/packages/ui/src/css/utilities/my.css index ab3aadf77e..a165ad478e 100644 --- a/packages/ui/src/css/utilities/my.css +++ b/packages/ui/src/css/utilities/my.css @@ -1,524 +1,542 @@ -.bui-my { - margin-top: var(--my); - margin-bottom: var(--my); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-my { - margin-top: var(--py-xs); - margin-bottom: var(--py-xs); +@layer utilities { + .bui-my { + margin-top: var(--my); + margin-bottom: var(--my); } - .xs\:bui-my-0\.5 { + .bui-my-0\.5 { margin-top: var(--bui-space-0_5); margin-bottom: var(--bui-space-0_5); } - .xs\:bui-my-1 { + .bui-my-1 { margin-top: var(--bui-space-1); margin-bottom: var(--bui-space-1); } - .xs\:bui-my-1\.5 { + .bui-my-1\.5 { margin-top: var(--bui-space-1_5); margin-bottom: var(--bui-space-1_5); } - .xs\:bui-my-2 { + .bui-my-2 { margin-top: var(--bui-space-2); margin-bottom: var(--bui-space-2); } - .xs\:bui-my-3 { + .bui-my-3 { margin-top: var(--bui-space-3); margin-bottom: var(--bui-space-3); } - .xs\:bui-my-4 { + .bui-my-4 { margin-top: var(--bui-space-4); margin-bottom: var(--bui-space-4); } - .xs\:bui-my-5 { + .bui-my-5 { margin-top: var(--bui-space-5); margin-bottom: var(--bui-space-5); } - .xs\:bui-my-6 { + .bui-my-6 { margin-top: var(--bui-space-6); margin-bottom: var(--bui-space-6); } - .xs\:bui-my-7 { + .bui-my-7 { margin-top: var(--bui-space-7); margin-bottom: var(--bui-space-7); } - .xs\:bui-my-8 { + .bui-my-8 { margin-top: var(--bui-space-8); margin-bottom: var(--bui-space-8); } - .xs\:bui-my-9 { + .bui-my-9 { margin-top: var(--bui-space-9); margin-bottom: var(--bui-space-9); } - .xs\:bui-my-10 { + .bui-my-10 { margin-top: var(--bui-space-10); margin-bottom: var(--bui-space-10); } - .xs\:bui-my-11 { + .bui-my-11 { margin-top: var(--bui-space-11); margin-bottom: var(--bui-space-11); } - .xs\:bui-my-12 { + .bui-my-12 { margin-top: var(--bui-space-12); margin-bottom: var(--bui-space-12); } - .xs\:bui-my-13 { + .bui-my-13 { margin-top: var(--bui-space-13); margin-bottom: var(--bui-space-13); } - .xs\:bui-my-14 { + .bui-my-14 { margin-top: var(--bui-space-14); margin-bottom: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-my { - margin-top: var(--py-sm); - margin-bottom: var(--py-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-my-0\.5 { - margin-top: var(--bui-space-0_5); - margin-bottom: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-my-1 { - margin-top: var(--bui-space-1); - margin-bottom: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-my-1\.5 { - margin-top: var(--bui-space-1_5); - margin-bottom: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-my-2 { - margin-top: var(--bui-space-2); - margin-bottom: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-my { + margin-top: var(--py-xl); + margin-bottom: var(--py-xl); + } - .sm\:bui-my-3 { - margin-top: var(--bui-space-3); - margin-bottom: var(--bui-space-3); - } + .xl\:bui-my-0\.5 { + margin-top: var(--bui-space-0_5); + margin-bottom: var(--bui-space-0_5); + } - .sm\:bui-my-4 { - margin-top: var(--bui-space-4); - margin-bottom: var(--bui-space-4); - } + .xl\:bui-my-1 { + margin-top: var(--bui-space-1); + margin-bottom: var(--bui-space-1); + } - .sm\:bui-my-5 { - margin-top: var(--bui-space-5); - margin-bottom: var(--bui-space-5); - } + .xl\:bui-my-1\.5 { + margin-top: var(--bui-space-1_5); + margin-bottom: var(--bui-space-1_5); + } - .sm\:bui-my-6 { - margin-top: var(--bui-space-6); - margin-bottom: var(--bui-space-6); - } + .xl\:bui-my-2 { + margin-top: var(--bui-space-2); + margin-bottom: var(--bui-space-2); + } - .sm\:bui-my-7 { - margin-top: var(--bui-space-7); - margin-bottom: var(--bui-space-7); - } + .xl\:bui-my-3 { + margin-top: var(--bui-space-3); + margin-bottom: var(--bui-space-3); + } - .sm\:bui-my-8 { - margin-top: var(--bui-space-8); - margin-bottom: var(--bui-space-8); - } + .xl\:bui-my-4 { + margin-top: var(--bui-space-4); + margin-bottom: var(--bui-space-4); + } - .sm\:bui-my-9 { - margin-top: var(--bui-space-9); - margin-bottom: var(--bui-space-9); - } + .xl\:bui-my-5 { + margin-top: var(--bui-space-5); + margin-bottom: var(--bui-space-5); + } - .sm\:bui-my-10 { - margin-top: var(--bui-space-10); - margin-bottom: var(--bui-space-10); - } + .xl\:bui-my-6 { + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } - .sm\:bui-my-11 { - margin-top: var(--bui-space-11); - margin-bottom: var(--bui-space-11); - } + .xl\:bui-my-7 { + margin-top: var(--bui-space-7); + margin-bottom: var(--bui-space-7); + } - .sm\:bui-my-12 { - margin-top: var(--bui-space-12); - margin-bottom: var(--bui-space-12); - } + .xl\:bui-my-8 { + margin-top: var(--bui-space-8); + margin-bottom: var(--bui-space-8); + } - .sm\:bui-my-13 { - margin-top: var(--bui-space-13); - margin-bottom: var(--bui-space-13); - } + .xl\:bui-my-9 { + margin-top: var(--bui-space-9); + margin-bottom: var(--bui-space-9); + } - .sm\:bui-my-14 { - margin-top: var(--bui-space-14); - margin-bottom: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/p.css b/packages/ui/src/css/utilities/p.css index 113f10777e..27713d9662 100644 --- a/packages/ui/src/css/utilities/p.css +++ b/packages/ui/src/css/utilities/p.css @@ -1,422 +1,440 @@ -.bui-p { - padding: var(--p); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-p { - padding: var(--p-xs); +@layer utilities { + .bui-p { + padding: var(--p); } - .xs\:bui-p-0\.5 { + .bui-p-0\.5 { padding: var(--bui-space-0_5); } - .xs\:bui-p-1 { + .bui-p-1 { padding: var(--bui-space-1); } - .xs\:bui-p-1\.5 { + .bui-p-1\.5 { padding: var(--bui-space-1_5); } - .xs\:bui-p-2 { + .bui-p-2 { padding: var(--bui-space-2); } - .xs\:bui-p-3 { + .bui-p-3 { padding: var(--bui-space-3); } - .xs\:bui-p-4 { + .bui-p-4 { padding: var(--bui-space-4); } - .xs\:bui-p-5 { + .bui-p-5 { padding: var(--bui-space-5); } - .xs\:bui-p-6 { + .bui-p-6 { padding: var(--bui-space-6); } - .xs\:bui-p-7 { + .bui-p-7 { padding: var(--bui-space-7); } - .xs\:bui-p-8 { + .bui-p-8 { padding: var(--bui-space-8); } - .xs\:bui-p-9 { + .bui-p-9 { padding: var(--bui-space-9); } - .xs\:bui-p-10 { + .bui-p-10 { padding: var(--bui-space-10); } - .xs\:bui-p-11 { + .bui-p-11 { padding: var(--bui-space-11); } - .xs\:bui-p-12 { + .bui-p-12 { padding: var(--bui-space-12); } - .xs\:bui-p-13 { + .bui-p-13 { padding: var(--bui-space-13); } - .xs\:bui-p-14 { + .bui-p-14 { padding: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-p { - padding: var(--p-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-p-0\.5 { - padding: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-p-1 { - padding: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-p-1\.5 { - padding: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-p-2 { - padding: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-p { + padding: var(--p-xl); + } - .sm\:bui-p-3 { - padding: var(--bui-space-3); - } + .xl\:bui-p-0\.5 { + padding: var(--bui-space-0_5); + } - .sm\:bui-p-4 { - padding: var(--bui-space-4); - } + .xl\:bui-p-1 { + padding: var(--bui-space-1); + } - .sm\:bui-p-5 { - padding: var(--bui-space-5); - } + .xl\:bui-p-1\.5 { + padding: var(--bui-space-1_5); + } - .sm\:bui-p-6 { - padding: var(--bui-space-6); - } + .xl\:bui-p-2 { + padding: var(--bui-space-2); + } - .sm\:bui-p-7 { - padding: var(--bui-space-7); - } + .xl\:bui-p-3 { + padding: var(--bui-space-3); + } - .sm\:bui-p-8 { - padding: var(--bui-space-8); - } + .xl\:bui-p-4 { + padding: var(--bui-space-4); + } - .sm\:bui-p-9 { - padding: var(--bui-space-9); - } + .xl\:bui-p-5 { + padding: var(--bui-space-5); + } - .sm\:bui-p-10 { - padding: var(--bui-space-10); - } + .xl\:bui-p-6 { + padding: var(--bui-space-6); + } - .sm\:bui-p-11 { - padding: var(--bui-space-11); - } + .xl\:bui-p-7 { + padding: var(--bui-space-7); + } - .sm\:bui-p-12 { - padding: var(--bui-space-12); - } + .xl\:bui-p-8 { + padding: var(--bui-space-8); + } - .sm\:bui-p-13 { - padding: var(--bui-space-13); - } + .xl\:bui-p-9 { + padding: var(--bui-space-9); + } - .sm\:bui-p-14 { - padding: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/pb.css b/packages/ui/src/css/utilities/pb.css index bdd3881f86..f32d284f37 100644 --- a/packages/ui/src/css/utilities/pb.css +++ b/packages/ui/src/css/utilities/pb.css @@ -1,422 +1,440 @@ -.bui-pb { - padding-bottom: var(--pb); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-pb { - padding-bottom: var(--pb-xs); +@layer utilities { + .bui-pb { + padding-bottom: var(--pb); } - .xs\:bui-pb-0\.5 { + .bui-pb-0\.5 { padding-bottom: var(--bui-space-0_5); } - .xs\:bui-pb-1 { + .bui-pb-1 { padding-bottom: var(--bui-space-1); } - .xs\:bui-pb-1\.5 { + .bui-pb-1\.5 { padding-bottom: var(--bui-space-1_5); } - .xs\:bui-pb-2 { + .bui-pb-2 { padding-bottom: var(--bui-space-2); } - .xs\:bui-pb-3 { + .bui-pb-3 { padding-bottom: var(--bui-space-3); } - .xs\:bui-pb-4 { + .bui-pb-4 { padding-bottom: var(--bui-space-4); } - .xs\:bui-pb-5 { + .bui-pb-5 { padding-bottom: var(--bui-space-5); } - .xs\:bui-pb-6 { + .bui-pb-6 { padding-bottom: var(--bui-space-6); } - .xs\:bui-pb-7 { + .bui-pb-7 { padding-bottom: var(--bui-space-7); } - .xs\:bui-pb-8 { + .bui-pb-8 { padding-bottom: var(--bui-space-8); } - .xs\:bui-pb-9 { + .bui-pb-9 { padding-bottom: var(--bui-space-9); } - .xs\:bui-pb-10 { + .bui-pb-10 { padding-bottom: var(--bui-space-10); } - .xs\:bui-pb-11 { + .bui-pb-11 { padding-bottom: var(--bui-space-11); } - .xs\:bui-pb-12 { + .bui-pb-12 { padding-bottom: var(--bui-space-12); } - .xs\:bui-pb-13 { + .bui-pb-13 { padding-bottom: var(--bui-space-13); } - .xs\:bui-pb-14 { + .bui-pb-14 { padding-bottom: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-pb { - padding-bottom: var(--pb-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-pb-0\.5 { - padding-bottom: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-pb-1 { - padding-bottom: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-pb-1\.5 { - padding-bottom: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-pb-2 { - padding-bottom: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-pb { + padding-bottom: var(--pb-xl); + } - .sm\:bui-pb-3 { - padding-bottom: var(--bui-space-3); - } + .xl\:bui-pb-0\.5 { + padding-bottom: var(--bui-space-0_5); + } - .sm\:bui-pb-4 { - padding-bottom: var(--bui-space-4); - } + .xl\:bui-pb-1 { + padding-bottom: var(--bui-space-1); + } - .sm\:bui-pb-5 { - padding-bottom: var(--bui-space-5); - } + .xl\:bui-pb-1\.5 { + padding-bottom: var(--bui-space-1_5); + } - .sm\:bui-pb-6 { - padding-bottom: var(--bui-space-6); - } + .xl\:bui-pb-2 { + padding-bottom: var(--bui-space-2); + } - .sm\:bui-pb-7 { - padding-bottom: var(--bui-space-7); - } + .xl\:bui-pb-3 { + padding-bottom: var(--bui-space-3); + } - .sm\:bui-pb-8 { - padding-bottom: var(--bui-space-8); - } + .xl\:bui-pb-4 { + padding-bottom: var(--bui-space-4); + } - .sm\:bui-pb-9 { - padding-bottom: var(--bui-space-9); - } + .xl\:bui-pb-5 { + padding-bottom: var(--bui-space-5); + } - .sm\:bui-pb-10 { - padding-bottom: var(--bui-space-10); - } + .xl\:bui-pb-6 { + padding-bottom: var(--bui-space-6); + } - .sm\:bui-pb-11 { - padding-bottom: var(--bui-space-11); - } + .xl\:bui-pb-7 { + padding-bottom: var(--bui-space-7); + } - .sm\:bui-pb-12 { - padding-bottom: var(--bui-space-12); - } + .xl\:bui-pb-8 { + padding-bottom: var(--bui-space-8); + } - .sm\:bui-pb-13 { - padding-bottom: var(--bui-space-13); - } + .xl\:bui-pb-9 { + padding-bottom: var(--bui-space-9); + } - .sm\:bui-pb-14 { - padding-bottom: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/pl.css b/packages/ui/src/css/utilities/pl.css index 07e064293a..65bbfcf5e8 100644 --- a/packages/ui/src/css/utilities/pl.css +++ b/packages/ui/src/css/utilities/pl.css @@ -1,422 +1,440 @@ -.bui-pl { - padding-left: var(--pl); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-pl { - padding-left: var(--pl-xs); +@layer utilities { + .bui-pl { + padding-left: var(--pl); } - .xs\:bui-pl-0\.5 { + .bui-pl-0\.5 { padding-left: var(--bui-space-0_5); } - .xs\:bui-pl-1 { + .bui-pl-1 { padding-left: var(--bui-space-1); } - .xs\:bui-pl-1\.5 { + .bui-pl-1\.5 { padding-left: var(--bui-space-1_5); } - .xs\:bui-pl-2 { + .bui-pl-2 { padding-left: var(--bui-space-2); } - .xs\:bui-pl-3 { + .bui-pl-3 { padding-left: var(--bui-space-3); } - .xs\:bui-pl-4 { + .bui-pl-4 { padding-left: var(--bui-space-4); } - .xs\:bui-pl-5 { + .bui-pl-5 { padding-left: var(--bui-space-5); } - .xs\:bui-pl-6 { + .bui-pl-6 { padding-left: var(--bui-space-6); } - .xs\:bui-pl-7 { + .bui-pl-7 { padding-left: var(--bui-space-7); } - .xs\:bui-pl-8 { + .bui-pl-8 { padding-left: var(--bui-space-8); } - .xs\:bui-pl-9 { + .bui-pl-9 { padding-left: var(--bui-space-9); } - .xs\:bui-pl-10 { + .bui-pl-10 { padding-left: var(--bui-space-10); } - .xs\:bui-pl-11 { + .bui-pl-11 { padding-left: var(--bui-space-11); } - .xs\:bui-pl-12 { + .bui-pl-12 { padding-left: var(--bui-space-12); } - .xs\:bui-pl-13 { + .bui-pl-13 { padding-left: var(--bui-space-13); } - .xs\:bui-pl-14 { + .bui-pl-14 { padding-left: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-pl { - padding-left: var(--pl-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-pl-0\.5 { - padding-left: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-pl-1 { - padding-left: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-pl-1\.5 { - padding-left: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-pl-2 { - padding-left: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-pl { + padding-left: var(--pl-xl); + } - .sm\:bui-pl-3 { - padding-left: var(--bui-space-3); - } + .xl\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } - .sm\:bui-pl-4 { - padding-left: var(--bui-space-4); - } + .xl\:bui-pl-1 { + padding-left: var(--bui-space-1); + } - .sm\:bui-pl-5 { - padding-left: var(--bui-space-5); - } + .xl\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } - .sm\:bui-pl-6 { - padding-left: var(--bui-space-6); - } + .xl\:bui-pl-2 { + padding-left: var(--bui-space-2); + } - .sm\:bui-pl-7 { - padding-left: var(--bui-space-7); - } + .xl\:bui-pl-3 { + padding-left: var(--bui-space-3); + } - .sm\:bui-pl-8 { - padding-left: var(--bui-space-8); - } + .xl\:bui-pl-4 { + padding-left: var(--bui-space-4); + } - .sm\:bui-pl-9 { - padding-left: var(--bui-space-9); - } + .xl\:bui-pl-5 { + padding-left: var(--bui-space-5); + } - .sm\:bui-pl-10 { - padding-left: var(--bui-space-10); - } + .xl\:bui-pl-6 { + padding-left: var(--bui-space-6); + } - .sm\:bui-pl-11 { - padding-left: var(--bui-space-11); - } + .xl\:bui-pl-7 { + padding-left: var(--bui-space-7); + } - .sm\:bui-pl-12 { - padding-left: var(--bui-space-12); - } + .xl\:bui-pl-8 { + padding-left: var(--bui-space-8); + } - .sm\:bui-pl-13 { - padding-left: var(--bui-space-13); - } + .xl\:bui-pl-9 { + padding-left: var(--bui-space-9); + } - .sm\:bui-pl-14 { - padding-left: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/position.css b/packages/ui/src/css/utilities/position.css index 11cc0994b6..307e25cc04 100644 --- a/packages/ui/src/css/utilities/position.css +++ b/packages/ui/src/css/utilities/position.css @@ -1,134 +1,152 @@ -.bui-position-absolute { - position: absolute; -} +/* + * Copyright 2025 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. + */ -.bui-position-fixed { - position: fixed; -} - -.bui-position-sticky { - position: sticky; -} - -.bui-position-relative { - position: relative; -} - -.bui-position-static { - position: static; -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-position-absolute { +@layer utilities { + .bui-position-absolute { position: absolute; } - .xs\:bui-position-fixed { + .bui-position-fixed { position: fixed; } - .xs\:bui-position-sticky { + .bui-position-sticky { position: sticky; } - .xs\:bui-position-relative { + .bui-position-relative { position: relative; } - .xs\:bui-position-static { + .bui-position-static { position: static; } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-position-absolute { - position: absolute; + /* Breakpoint xs */ + @media (min-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; + } } - .sm\:bui-position-fixed { - position: fixed; + /* Breakpoint sm */ + @media (min-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; + } } - .sm\:bui-position-sticky { - position: sticky; + /* Breakpoint md */ + @media (min-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; + } } - .sm\:bui-position-relative { - position: relative; + /* Breakpoint lg */ + @media (min-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; + } } - .sm\:bui-position-static { - position: static; - } -} - -/* Breakpoint md */ -@media (min-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; - } -} - -/* Breakpoint lg */ -@media (min-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; - } -} - -/* Breakpoint xl */ -@media (min-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; + /* Breakpoint xl */ + @media (min-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; + } } } diff --git a/packages/ui/src/css/utilities/pr.css b/packages/ui/src/css/utilities/pr.css index c6fa94a1c5..e228fe1c13 100644 --- a/packages/ui/src/css/utilities/pr.css +++ b/packages/ui/src/css/utilities/pr.css @@ -1,422 +1,440 @@ -.bui-pr { - padding-right: var(--pr); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-pr { - padding-right: var(--pr-xs); +@layer utilities { + .bui-pr { + padding-right: var(--pr); } - .xs\:bui-pr-0\.5 { + .bui-pr-0\.5 { padding-right: var(--bui-space-0_5); } - .xs\:bui-pr-1 { + .bui-pr-1 { padding-right: var(--bui-space-1); } - .xs\:bui-pr-1\.5 { + .bui-pr-1\.5 { padding-right: var(--bui-space-1_5); } - .xs\:bui-pr-2 { + .bui-pr-2 { padding-right: var(--bui-space-2); } - .xs\:bui-pr-3 { + .bui-pr-3 { padding-right: var(--bui-space-3); } - .xs\:bui-pr-4 { + .bui-pr-4 { padding-right: var(--bui-space-4); } - .xs\:bui-pr-5 { + .bui-pr-5 { padding-right: var(--bui-space-5); } - .xs\:bui-pr-6 { + .bui-pr-6 { padding-right: var(--bui-space-6); } - .xs\:bui-pr-7 { + .bui-pr-7 { padding-right: var(--bui-space-7); } - .xs\:bui-pr-8 { + .bui-pr-8 { padding-right: var(--bui-space-8); } - .xs\:bui-pr-9 { + .bui-pr-9 { padding-right: var(--bui-space-9); } - .xs\:bui-pr-10 { + .bui-pr-10 { padding-right: var(--bui-space-10); } - .xs\:bui-pr-11 { + .bui-pr-11 { padding-right: var(--bui-space-11); } - .xs\:bui-pr-12 { + .bui-pr-12 { padding-right: var(--bui-space-12); } - .xs\:bui-pr-13 { + .bui-pr-13 { padding-right: var(--bui-space-13); } - .xs\:bui-pr-14 { + .bui-pr-14 { padding-right: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-pr { - padding-right: var(--pr-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-pr-0\.5 { - padding-right: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-pr-1 { - padding-right: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-pr-1\.5 { - padding-right: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-pr-2 { - padding-right: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-pr { + padding-right: var(--pr-xl); + } - .sm\:bui-pr-3 { - padding-right: var(--bui-space-3); - } + .xl\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } - .sm\:bui-pr-4 { - padding-right: var(--bui-space-4); - } + .xl\:bui-pr-1 { + padding-right: var(--bui-space-1); + } - .sm\:bui-pr-5 { - padding-right: var(--bui-space-5); - } + .xl\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } - .sm\:bui-pr-6 { - padding-right: var(--bui-space-6); - } + .xl\:bui-pr-2 { + padding-right: var(--bui-space-2); + } - .sm\:bui-pr-7 { - padding-right: var(--bui-space-7); - } + .xl\:bui-pr-3 { + padding-right: var(--bui-space-3); + } - .sm\:bui-pr-8 { - padding-right: var(--bui-space-8); - } + .xl\:bui-pr-4 { + padding-right: var(--bui-space-4); + } - .sm\:bui-pr-9 { - padding-right: var(--bui-space-9); - } + .xl\:bui-pr-5 { + padding-right: var(--bui-space-5); + } - .sm\:bui-pr-10 { - padding-right: var(--bui-space-10); - } + .xl\:bui-pr-6 { + padding-right: var(--bui-space-6); + } - .sm\:bui-pr-11 { - padding-right: var(--bui-space-11); - } + .xl\:bui-pr-7 { + padding-right: var(--bui-space-7); + } - .sm\:bui-pr-12 { - padding-right: var(--bui-space-12); - } + .xl\:bui-pr-8 { + padding-right: var(--bui-space-8); + } - .sm\:bui-pr-13 { - padding-right: var(--bui-space-13); - } + .xl\:bui-pr-9 { + padding-right: var(--bui-space-9); + } - .sm\:bui-pr-14 { - padding-right: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/pt.css b/packages/ui/src/css/utilities/pt.css index cf557257e3..f9f17c1afc 100644 --- a/packages/ui/src/css/utilities/pt.css +++ b/packages/ui/src/css/utilities/pt.css @@ -1,422 +1,440 @@ -.bui-pt { - padding-top: var(--pt); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-pt { - padding-top: var(--pt-xs); +@layer utilities { + .bui-pt { + padding-top: var(--pt); } - .xs\:bui-pt-0\.5 { + .bui-pt-0\.5 { padding-top: var(--bui-space-0_5); } - .xs\:bui-pt-1 { + .bui-pt-1 { padding-top: var(--bui-space-1); } - .xs\:bui-pt-1\.5 { + .bui-pt-1\.5 { padding-top: var(--bui-space-1_5); } - .xs\:bui-pt-2 { + .bui-pt-2 { padding-top: var(--bui-space-2); } - .xs\:bui-pt-3 { + .bui-pt-3 { padding-top: var(--bui-space-3); } - .xs\:bui-pt-4 { + .bui-pt-4 { padding-top: var(--bui-space-4); } - .xs\:bui-pt-5 { + .bui-pt-5 { padding-top: var(--bui-space-5); } - .xs\:bui-pt-6 { + .bui-pt-6 { padding-top: var(--bui-space-6); } - .xs\:bui-pt-7 { + .bui-pt-7 { padding-top: var(--bui-space-7); } - .xs\:bui-pt-8 { + .bui-pt-8 { padding-top: var(--bui-space-8); } - .xs\:bui-pt-9 { + .bui-pt-9 { padding-top: var(--bui-space-9); } - .xs\:bui-pt-10 { + .bui-pt-10 { padding-top: var(--bui-space-10); } - .xs\:bui-pt-11 { + .bui-pt-11 { padding-top: var(--bui-space-11); } - .xs\:bui-pt-12 { + .bui-pt-12 { padding-top: var(--bui-space-12); } - .xs\:bui-pt-13 { + .bui-pt-13 { padding-top: var(--bui-space-13); } - .xs\:bui-pt-14 { + .bui-pt-14 { padding-top: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-pt { - padding-top: var(--pt-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-pt-0\.5 { - padding-top: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-pt-1 { - padding-top: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-pt-1\.5 { - padding-top: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-pt-2 { - padding-top: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-pt { + padding-top: var(--pt-xl); + } - .sm\:bui-pt-3 { - padding-top: var(--bui-space-3); - } + .xl\:bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); + } - .sm\:bui-pt-4 { - padding-top: var(--bui-space-4); - } + .xl\:bui-pt-1 { + padding-top: var(--bui-space-1); + } - .sm\:bui-pt-5 { - padding-top: var(--bui-space-5); - } + .xl\:bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); + } - .sm\:bui-pt-6 { - padding-top: var(--bui-space-6); - } + .xl\:bui-pt-2 { + padding-top: var(--bui-space-2); + } - .sm\:bui-pt-7 { - padding-top: var(--bui-space-7); - } + .xl\:bui-pt-3 { + padding-top: var(--bui-space-3); + } - .sm\:bui-pt-8 { - padding-top: var(--bui-space-8); - } + .xl\:bui-pt-4 { + padding-top: var(--bui-space-4); + } - .sm\:bui-pt-9 { - padding-top: var(--bui-space-9); - } + .xl\:bui-pt-5 { + padding-top: var(--bui-space-5); + } - .sm\:bui-pt-10 { - padding-top: var(--bui-space-10); - } + .xl\:bui-pt-6 { + padding-top: var(--bui-space-6); + } - .sm\:bui-pt-11 { - padding-top: var(--bui-space-11); - } + .xl\:bui-pt-7 { + padding-top: var(--bui-space-7); + } - .sm\:bui-pt-12 { - padding-top: var(--bui-space-12); - } + .xl\:bui-pt-8 { + padding-top: var(--bui-space-8); + } - .sm\:bui-pt-13 { - padding-top: var(--bui-space-13); - } + .xl\:bui-pt-9 { + padding-top: var(--bui-space-9); + } - .sm\:bui-pt-14 { - padding-top: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/px.css b/packages/ui/src/css/utilities/px.css index 37a41d832e..bb0cf12bbb 100644 --- a/packages/ui/src/css/utilities/px.css +++ b/packages/ui/src/css/utilities/px.css @@ -1,524 +1,542 @@ -.bui-px { - padding-left: var(--px); - padding-right: var(--px); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-px { - padding-left: var(--px-xs); - padding-right: var(--px-xs); +@layer utilities { + .bui-px { + padding-left: var(--px); + padding-right: var(--px); } - .xs\:bui-px-0\.5 { + .bui-px-0\.5 { padding-left: var(--bui-space-0_5); padding-right: var(--bui-space-0_5); } - .xs\:bui-px-1 { + .bui-px-1 { padding-left: var(--bui-space-1); padding-right: var(--bui-space-1); } - .xs\:bui-px-1\.5 { + .bui-px-1\.5 { padding-left: var(--bui-space-1_5); padding-right: var(--bui-space-1_5); } - .xs\:bui-px-2 { + .bui-px-2 { padding-left: var(--bui-space-2); padding-right: var(--bui-space-2); } - .xs\:bui-px-3 { + .bui-px-3 { padding-left: var(--bui-space-3); padding-right: var(--bui-space-3); } - .xs\:bui-px-4 { + .bui-px-4 { padding-left: var(--bui-space-4); padding-right: var(--bui-space-4); } - .xs\:bui-px-5 { + .bui-px-5 { padding-left: var(--bui-space-5); padding-right: var(--bui-space-5); } - .xs\:bui-px-6 { + .bui-px-6 { padding-left: var(--bui-space-6); padding-right: var(--bui-space-6); } - .xs\:bui-px-7 { + .bui-px-7 { padding-left: var(--bui-space-7); padding-right: var(--bui-space-7); } - .xs\:bui-px-8 { + .bui-px-8 { padding-left: var(--bui-space-8); padding-right: var(--bui-space-8); } - .xs\:bui-px-9 { + .bui-px-9 { padding-left: var(--bui-space-9); padding-right: var(--bui-space-9); } - .xs\:bui-px-10 { + .bui-px-10 { padding-left: var(--bui-space-10); padding-right: var(--bui-space-10); } - .xs\:bui-px-11 { + .bui-px-11 { padding-left: var(--bui-space-11); padding-right: var(--bui-space-11); } - .xs\:bui-px-12 { + .bui-px-12 { padding-left: var(--bui-space-12); padding-right: var(--bui-space-12); } - .xs\:bui-px-13 { + .bui-px-13 { padding-left: var(--bui-space-13); padding-right: var(--bui-space-13); } - .xs\:bui-px-14 { + .bui-px-14 { padding-left: var(--bui-space-14); padding-right: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-px { - padding-left: var(--px-sm); - padding-right: var(--px-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-px-0\.5 { - padding-left: var(--bui-space-0_5); - padding-right: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-px-1 { - padding-left: var(--bui-space-1); - padding-right: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-px-1\.5 { - padding-left: var(--bui-space-1_5); - padding-right: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-px-2 { - padding-left: var(--bui-space-2); - padding-right: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-px { + padding-left: var(--px-xl); + padding-right: var(--px-xl); + } - .sm\:bui-px-3 { - padding-left: var(--bui-space-3); - padding-right: var(--bui-space-3); - } + .xl\:bui-px-0\.5 { + padding-left: var(--bui-space-0_5); + padding-right: var(--bui-space-0_5); + } - .sm\:bui-px-4 { - padding-left: var(--bui-space-4); - padding-right: var(--bui-space-4); - } + .xl\:bui-px-1 { + padding-left: var(--bui-space-1); + padding-right: var(--bui-space-1); + } - .sm\:bui-px-5 { - padding-left: var(--bui-space-5); - padding-right: var(--bui-space-5); - } + .xl\:bui-px-1\.5 { + padding-left: var(--bui-space-1_5); + padding-right: var(--bui-space-1_5); + } - .sm\:bui-px-6 { - padding-left: var(--bui-space-6); - padding-right: var(--bui-space-6); - } + .xl\:bui-px-2 { + padding-left: var(--bui-space-2); + padding-right: var(--bui-space-2); + } - .sm\:bui-px-7 { - padding-left: var(--bui-space-7); - padding-right: var(--bui-space-7); - } + .xl\:bui-px-3 { + padding-left: var(--bui-space-3); + padding-right: var(--bui-space-3); + } - .sm\:bui-px-8 { - padding-left: var(--bui-space-8); - padding-right: var(--bui-space-8); - } + .xl\:bui-px-4 { + padding-left: var(--bui-space-4); + padding-right: var(--bui-space-4); + } - .sm\:bui-px-9 { - padding-left: var(--bui-space-9); - padding-right: var(--bui-space-9); - } + .xl\:bui-px-5 { + padding-left: var(--bui-space-5); + padding-right: var(--bui-space-5); + } - .sm\:bui-px-10 { - padding-left: var(--bui-space-10); - padding-right: var(--bui-space-10); - } + .xl\:bui-px-6 { + padding-left: var(--bui-space-6); + padding-right: var(--bui-space-6); + } - .sm\:bui-px-11 { - padding-left: var(--bui-space-11); - padding-right: var(--bui-space-11); - } + .xl\:bui-px-7 { + padding-left: var(--bui-space-7); + padding-right: var(--bui-space-7); + } - .sm\:bui-px-12 { - padding-left: var(--bui-space-12); - padding-right: var(--bui-space-12); - } + .xl\:bui-px-8 { + padding-left: var(--bui-space-8); + padding-right: var(--bui-space-8); + } - .sm\:bui-px-13 { - padding-left: var(--bui-space-13); - padding-right: var(--bui-space-13); - } + .xl\:bui-px-9 { + padding-left: var(--bui-space-9); + padding-right: var(--bui-space-9); + } - .sm\:bui-px-14 { - padding-left: var(--bui-space-14); - padding-right: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/py.css b/packages/ui/src/css/utilities/py.css index e3738df00c..aeaef05c6e 100644 --- a/packages/ui/src/css/utilities/py.css +++ b/packages/ui/src/css/utilities/py.css @@ -1,524 +1,542 @@ -.bui-py { - padding-top: var(--py); - padding-bottom: var(--py); -} +/* + * Copyright 2025 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. + */ -.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); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-py { - padding-top: var(--py-xs); - padding-bottom: var(--py-xs); +@layer utilities { + .bui-py { + padding-top: var(--py); + padding-bottom: var(--py); } - .xs\:bui-py-0\.5 { + .bui-py-0\.5 { padding-top: var(--bui-space-0_5); padding-bottom: var(--bui-space-0_5); } - .xs\:bui-py-1 { + .bui-py-1 { padding-top: var(--bui-space-1); padding-bottom: var(--bui-space-1); } - .xs\:bui-py-1\.5 { + .bui-py-1\.5 { padding-top: var(--bui-space-1_5); padding-bottom: var(--bui-space-1_5); } - .xs\:bui-py-2 { + .bui-py-2 { padding-top: var(--bui-space-2); padding-bottom: var(--bui-space-2); } - .xs\:bui-py-3 { + .bui-py-3 { padding-top: var(--bui-space-3); padding-bottom: var(--bui-space-3); } - .xs\:bui-py-4 { + .bui-py-4 { padding-top: var(--bui-space-4); padding-bottom: var(--bui-space-4); } - .xs\:bui-py-5 { + .bui-py-5 { padding-top: var(--bui-space-5); padding-bottom: var(--bui-space-5); } - .xs\:bui-py-6 { + .bui-py-6 { padding-top: var(--bui-space-6); padding-bottom: var(--bui-space-6); } - .xs\:bui-py-7 { + .bui-py-7 { padding-top: var(--bui-space-7); padding-bottom: var(--bui-space-7); } - .xs\:bui-py-8 { + .bui-py-8 { padding-top: var(--bui-space-8); padding-bottom: var(--bui-space-8); } - .xs\:bui-py-9 { + .bui-py-9 { padding-top: var(--bui-space-9); padding-bottom: var(--bui-space-9); } - .xs\:bui-py-10 { + .bui-py-10 { padding-top: var(--bui-space-10); padding-bottom: var(--bui-space-10); } - .xs\:bui-py-11 { + .bui-py-11 { padding-top: var(--bui-space-11); padding-bottom: var(--bui-space-11); } - .xs\:bui-py-12 { + .bui-py-12 { padding-top: var(--bui-space-12); padding-bottom: var(--bui-space-12); } - .xs\:bui-py-13 { + .bui-py-13 { padding-top: var(--bui-space-13); padding-bottom: var(--bui-space-13); } - .xs\:bui-py-14 { + .bui-py-14 { padding-top: var(--bui-space-14); padding-bottom: var(--bui-space-14); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-py { - padding-top: var(--py-sm); - padding-bottom: var(--py-sm); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-py-0\.5 { - padding-top: var(--bui-space-0_5); - padding-bottom: var(--bui-space-0_5); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-py-1 { - padding-top: var(--bui-space-1); - padding-bottom: var(--bui-space-1); + /* Breakpoint md */ + @media (min-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); + } } - .sm\:bui-py-1\.5 { - padding-top: var(--bui-space-1_5); - padding-bottom: var(--bui-space-1_5); + /* Breakpoint lg */ + @media (min-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); + } } - .sm\:bui-py-2 { - padding-top: var(--bui-space-2); - padding-bottom: var(--bui-space-2); - } + /* Breakpoint xl */ + @media (min-width: 1536px) { + .xl\:bui-py { + padding-top: var(--py-xl); + padding-bottom: var(--py-xl); + } - .sm\:bui-py-3 { - padding-top: var(--bui-space-3); - padding-bottom: var(--bui-space-3); - } + .xl\:bui-py-0\.5 { + padding-top: var(--bui-space-0_5); + padding-bottom: var(--bui-space-0_5); + } - .sm\:bui-py-4 { - padding-top: var(--bui-space-4); - padding-bottom: var(--bui-space-4); - } + .xl\:bui-py-1 { + padding-top: var(--bui-space-1); + padding-bottom: var(--bui-space-1); + } - .sm\:bui-py-5 { - padding-top: var(--bui-space-5); - padding-bottom: var(--bui-space-5); - } + .xl\:bui-py-1\.5 { + padding-top: var(--bui-space-1_5); + padding-bottom: var(--bui-space-1_5); + } - .sm\:bui-py-6 { - padding-top: var(--bui-space-6); - padding-bottom: var(--bui-space-6); - } + .xl\:bui-py-2 { + padding-top: var(--bui-space-2); + padding-bottom: var(--bui-space-2); + } - .sm\:bui-py-7 { - padding-top: var(--bui-space-7); - padding-bottom: var(--bui-space-7); - } + .xl\:bui-py-3 { + padding-top: var(--bui-space-3); + padding-bottom: var(--bui-space-3); + } - .sm\:bui-py-8 { - padding-top: var(--bui-space-8); - padding-bottom: var(--bui-space-8); - } + .xl\:bui-py-4 { + padding-top: var(--bui-space-4); + padding-bottom: var(--bui-space-4); + } - .sm\:bui-py-9 { - padding-top: var(--bui-space-9); - padding-bottom: var(--bui-space-9); - } + .xl\:bui-py-5 { + padding-top: var(--bui-space-5); + padding-bottom: var(--bui-space-5); + } - .sm\:bui-py-10 { - padding-top: var(--bui-space-10); - padding-bottom: var(--bui-space-10); - } + .xl\:bui-py-6 { + padding-top: var(--bui-space-6); + padding-bottom: var(--bui-space-6); + } - .sm\:bui-py-11 { - padding-top: var(--bui-space-11); - padding-bottom: var(--bui-space-11); - } + .xl\:bui-py-7 { + padding-top: var(--bui-space-7); + padding-bottom: var(--bui-space-7); + } - .sm\:bui-py-12 { - padding-top: var(--bui-space-12); - padding-bottom: var(--bui-space-12); - } + .xl\:bui-py-8 { + padding-top: var(--bui-space-8); + padding-bottom: var(--bui-space-8); + } - .sm\:bui-py-13 { - padding-top: var(--bui-space-13); - padding-bottom: var(--bui-space-13); - } + .xl\:bui-py-9 { + padding-top: var(--bui-space-9); + padding-bottom: var(--bui-space-9); + } - .sm\:bui-py-14 { - padding-top: var(--bui-space-14); - padding-bottom: var(--bui-space-14); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + .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); + } } } diff --git a/packages/ui/src/css/utilities/sm.css b/packages/ui/src/css/utilities/sm.css index 61baaa6b0d..a9c8ea8ab5 100644 --- a/packages/ui/src/css/utilities/sm.css +++ b/packages/ui/src/css/utilities/sm.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. diff --git a/packages/ui/src/css/utilities/width.css b/packages/ui/src/css/utilities/width.css index 6dad08814a..5a9ff0a899 100644 --- a/packages/ui/src/css/utilities/width.css +++ b/packages/ui/src/css/utilities/width.css @@ -1,86 +1,104 @@ -.bui-w { - width: var(--width); -} +/* + * Copyright 2025 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. + */ -.bui-min-w { - min-width: var(--min-width); -} - -.bui-max-w { - max-width: var(--max-width); -} - -/* Breakpoint xs */ -@media (min-width: 640px) { - .xs\:bui-w { +@layer utilities { + .bui-w { width: var(--width); } - .xs\:bui-min-w { + .bui-min-w { min-width: var(--min-width); } - .xs\:bui-max-w { + .bui-max-w { max-width: var(--max-width); } -} -/* Breakpoint sm */ -@media (min-width: 768px) { - .sm\:bui-w { - width: var(--width); + /* Breakpoint xs */ + @media (min-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); + } } - .sm\:bui-min-w { - min-width: var(--min-width); + /* Breakpoint sm */ + @media (min-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); + } } - .sm\:bui-max-w { - max-width: var(--max-width); - } -} - -/* Breakpoint md */ -@media (min-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); - } -} - -/* Breakpoint lg */ -@media (min-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); - } -} - -/* Breakpoint xl */ -@media (min-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); + /* Breakpoint md */ + @media (min-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); + } + } + + /* Breakpoint lg */ + @media (min-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); + } + } + + /* Breakpoint xl */ + @media (min-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); + } } } diff --git a/packages/ui/src/css/utilities/xs.css b/packages/ui/src/css/utilities/xs.css index 27adb7c7e4..2907c7d468 100644 --- a/packages/ui/src/css/utilities/xs.css +++ b/packages/ui/src/css/utilities/xs.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. From af4d9b492e43a81a887a4ab514a4b5d1d29b71bc Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 15:07:09 +0100 Subject: [PATCH 55/67] Update components Signed-off-by: Charles de Dreuille --- .changeset/seven-lines-stay.md | 5 + .../src/components/Avatar/Avatar.styles.css | 88 ++-- packages/ui/src/components/Box/styles.css | 26 +- packages/ui/src/components/Button/styles.css | 210 ++++---- .../ui/src/components/ButtonIcon/styles.css | 24 +- .../ui/src/components/Card/Card.styles.css | 50 +- .../ui/src/components/Checkbox/styles.css | 106 ++-- .../Collapsible/Collapsible.styles.css | 18 +- .../ui/src/components/Container/styles.css | 34 +- .../FieldError/FieldError.styles.css | 30 +- .../FieldLabel/FieldLabel.styles.css | 64 ++- packages/ui/src/components/Flex/styles.css | 12 +- packages/ui/src/components/Grid/styles.css | 22 +- .../src/components/Header/Header.styles.css | 146 +++--- .../HeaderPage/HeaderPage.styles.css | 54 ++- packages/ui/src/components/Icon/styles.css | 10 +- packages/ui/src/components/Link/styles.css | 30 +- .../ui/src/components/Menu/Menu.styles.css | 456 +++++++++--------- .../PasswordField/PasswordField.styles.css | 102 ++-- .../src/components/Popover/Popover.styles.css | 20 +- .../RadioGroup/RadioGroup.styles.css | 174 ++++--- .../ScrollArea/ScrollArea.styles.css | 92 ++-- .../SearchField/SearchField.styles.css | 226 ++++----- .../src/components/Select/Select.styles.css | 298 ++++++------ .../components/Skeleton/Skeleton.styles.css | 18 +- .../src/components/Switch/Switch.styles.css | 92 ++-- .../ui/src/components/Table/Table.styles.css | 250 +++++----- .../TablePagination.styles.css | 56 ++- .../ui/src/components/Tabs/Tabs.styles.css | 168 ++++--- .../components/TagGroup/TagGroup.styles.css | 126 ++--- packages/ui/src/components/Text/styles.css | 142 +++--- .../components/TextField/TextField.styles.css | 192 ++++---- .../src/components/Tooltip/Tooltip.styles.css | 182 +++---- 33 files changed, 1868 insertions(+), 1655 deletions(-) create mode 100644 .changeset/seven-lines-stay.md diff --git a/.changeset/seven-lines-stay.md b/.changeset/seven-lines-stay.md new file mode 100644 index 0000000000..4148a4eb83 --- /dev/null +++ b/.changeset/seven-lines-stay.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +We are restructuring our CSS to have a better layer structure. diff --git a/packages/ui/src/components/Avatar/Avatar.styles.css b/packages/ui/src/components/Avatar/Avatar.styles.css index ce3afea3b5..ce2573c4b0 100644 --- a/packages/ui/src/components/Avatar/Avatar.styles.css +++ b/packages/ui/src/components/Avatar/Avatar.styles.css @@ -14,52 +14,54 @@ * limitations under the License. */ -.bui-AvatarRoot { - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: middle; - border-radius: 100%; - user-select: none; - font-weight: 500; - color: var(--bui-fg-primary); - background-color: var(--bui-bg-surface-2); - font-size: 1rem; - line-height: 1; - overflow: hidden; - height: 2rem; - width: 2rem; -} +@layer components { + .bui-AvatarRoot { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: middle; + border-radius: 100%; + user-select: none; + font-weight: 500; + color: var(--bui-fg-primary); + background-color: var(--bui-bg-surface-2); + font-size: 1rem; + line-height: 1; + overflow: hidden; + height: 2rem; + width: 2rem; + } -.bui-AvatarRoot[data-size='small'] { - height: 1.5rem; - width: 1.5rem; -} + .bui-AvatarRoot[data-size='small'] { + height: 1.5rem; + width: 1.5rem; + } -.bui-AvatarRoot[data-size='medium'] { - height: 2rem; - width: 2rem; -} + .bui-AvatarRoot[data-size='medium'] { + height: 2rem; + width: 2rem; + } -.bui-AvatarRoot[data-size='large'] { - height: 3rem; - width: 3rem; -} + .bui-AvatarRoot[data-size='large'] { + height: 3rem; + width: 3rem; + } -.bui-AvatarImage { - object-fit: cover; - height: 100%; - width: 100%; -} + .bui-AvatarImage { + object-fit: cover; + height: 100%; + width: 100%; + } -.bui-AvatarFallback { - align-items: center; - display: flex; - justify-content: center; - height: 100%; - width: 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); + .bui-AvatarFallback { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 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); + } } diff --git a/packages/ui/src/components/Box/styles.css b/packages/ui/src/components/Box/styles.css index c499657230..a1648b476c 100644 --- a/packages/ui/src/components/Box/styles.css +++ b/packages/ui/src/components/Box/styles.css @@ -1,5 +1,23 @@ -.bui-Box { - font-family: var(--bui-font-regular); - font-weight: var(--bui-font-weight-regular); - color: var(--bui-fg-primary); +/* + * Copyright 2025 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. + */ + +@layer components { + .bui-Box { + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); + color: var(--bui-fg-primary); + } } diff --git a/packages/ui/src/components/Button/styles.css b/packages/ui/src/components/Button/styles.css index 03138a7c44..aec754c740 100644 --- a/packages/ui/src/components/Button/styles.css +++ b/packages/ui/src/components/Button/styles.css @@ -14,118 +14,120 @@ * limitations under the License. */ -.bui-Button { - border: none; - display: inline-flex; - align-items: center; - justify-content: center; - user-select: none; - font-family: var(--bui-font-regular); - font-weight: var(--bui-font-weight-bold); - padding: 0; - cursor: pointer; - border-radius: var(--bui-radius-2); - gap: var(--bui-space-1_5); - flex-shrink: 0; +@layer components { + .bui-Button { + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + user-select: none; + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-bold); + padding: 0; + cursor: pointer; + border-radius: var(--bui-radius-2); + gap: var(--bui-space-1_5); + flex-shrink: 0; - &[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 150ms ease; + &[data-disabled='true'] { + cursor: not-allowed; + } } - &:active { - background-color: var(--bui-bg-solid-pressed); + .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 150ms ease; + } + + &: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); + } } - &: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 150ms ease; - } - - &:active { - box-shadow: inset 0 0 0 1px var(--bui-border-pressed); - } - - &:focus-visible { - outline: none; - transition: none; - box-shadow: inset 0 0 0 2px var(--bui-ring); - } - - &[data-disabled='true'] { - box-shadow: inset 0 0 0 1px var(--bui-border-disabled); - color: var(--bui-fg-disabled); - } -} - -.bui-Button[data-variant='tertiary'] { - background-color: transparent; - color: var(--bui-fg-primary); - - &:hover { + .bui-Button[data-variant='secondary'] { background-color: var(--bui-bg-surface-1); - transition: background-color 200ms ease; + 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 150ms ease; + } + + &:active { + box-shadow: inset 0 0 0 1px var(--bui-border-pressed); + } + + &:focus-visible { + outline: none; + transition: none; + box-shadow: inset 0 0 0 2px var(--bui-ring); + } + + &[data-disabled='true'] { + box-shadow: inset 0 0 0 1px var(--bui-border-disabled); + color: var(--bui-fg-disabled); + } } - &:active { - background-color: var(--bui-bg-surface-2); - } - - &:focus-visible { - outline: none; - transition: none; - box-shadow: inset 0 0 0 2px var(--bui-ring); - } - - &[data-disabled='true'] { + .bui-Button[data-variant='tertiary'] { background-color: transparent; - color: var(--bui-fg-disabled); + color: var(--bui-fg-primary); + + &:hover { + background-color: var(--bui-bg-surface-1); + transition: background-color 200ms ease; + } + + &:active { + background-color: var(--bui-bg-surface-2); + } + + &:focus-visible { + outline: none; + transition: none; + box-shadow: inset 0 0 0 2px var(--bui-ring); + } + + &[data-disabled='true'] { + background-color: transparent; + color: var(--bui-fg-disabled); + } + } + + .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-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; -} diff --git a/packages/ui/src/components/ButtonIcon/styles.css b/packages/ui/src/components/ButtonIcon/styles.css index cbd19071a9..56b73a8a66 100644 --- a/packages/ui/src/components/ButtonIcon/styles.css +++ b/packages/ui/src/components/ButtonIcon/styles.css @@ -14,17 +14,19 @@ * limitations under the License. */ -.bui-ButtonIcon { - align-items: center; - justify-content: center; -} +@layer components { + .bui-ButtonIcon { + align-items: center; + justify-content: center; + } -.bui-ButtonIcon[data-size='small'] { - padding: 0; - width: 2rem; -} + .bui-ButtonIcon[data-size='small'] { + padding: 0; + width: 2rem; + } -.bui-ButtonIcon[data-size='medium'] { - padding: 0; - width: 2.5rem; + .bui-ButtonIcon[data-size='medium'] { + padding: 0; + width: 2.5rem; + } } diff --git a/packages/ui/src/components/Card/Card.styles.css b/packages/ui/src/components/Card/Card.styles.css index 1643ba0b8a..670e5de2c3 100644 --- a/packages/ui/src/components/Card/Card.styles.css +++ b/packages/ui/src/components/Card/Card.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,30 +14,32 @@ * limitations under the License. */ -.bui-Card { - display: flex; - flex-direction: column; - 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); - overflow: hidden; - min-height: 0; - width: 100%; -} +@layer components { + .bui-Card { + display: flex; + flex-direction: column; + 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); + overflow: hidden; + min-height: 0; + width: 100%; + } -.bui-CardBody { - flex: 1; - min-height: 0; - overflow: auto; -} + .bui-CardBody { + flex: 1; + min-height: 0; + overflow: auto; + } -.bui-CardHeader { - padding-inline: var(--bui-space-3); -} + .bui-CardHeader { + padding-inline: var(--bui-space-3); + } -.bui-CardFooter { - padding-inline: var(--bui-space-3); + .bui-CardFooter { + padding-inline: var(--bui-space-3); + } } diff --git a/packages/ui/src/components/Checkbox/styles.css b/packages/ui/src/components/Checkbox/styles.css index 75d57e72aa..af813d4098 100644 --- a/packages/ui/src/components/Checkbox/styles.css +++ b/packages/ui/src/components/Checkbox/styles.css @@ -1,52 +1,70 @@ -.bui-CheckboxRoot { - border: none; - display: flex; - align-items: center; - justify-content: center; - width: 1rem; - height: 1rem; - box-shadow: inset 0 0 0 1px var(--bui-border); - cursor: pointer; - border-radius: 2px; - transition: background-color 0.2s ease-in-out; - background-color: var(--bui-bg-surface-1); - padding: 0; - flex-shrink: 0; -} +/* + * Copyright 2025 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. + */ -.bui-CheckboxRoot:focus-visible { - transition: none; - outline: 2px solid var(--bui-ring); - outline-offset: 2px; -} +@layer components { + .bui-CheckboxRoot { + border: none; + display: flex; + align-items: center; + justify-content: center; + width: 1rem; + height: 1rem; + box-shadow: inset 0 0 0 1px var(--bui-border); + cursor: pointer; + border-radius: 2px; + transition: background-color 0.2s ease-in-out; + background-color: var(--bui-bg-surface-1); + padding: 0; + flex-shrink: 0; + } -.bui-CheckboxRoot[data-checked] { - background-color: var(--bui-bg-solid); - box-shadow: none; - color: var(--bui-fg-solid); -} + .bui-CheckboxRoot:focus-visible { + transition: none; + outline: 2px solid var(--bui-ring); + outline-offset: 2px; + } -.bui-CheckboxLabel { - display: flex; - flex-direction: row; - 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; + .bui-CheckboxRoot[data-checked] { + background-color: var(--bui-bg-solid); + box-shadow: none; + color: var(--bui-fg-solid); + } - &:hover { - & .bui-CheckboxRoot:not([data-checked]) { - box-shadow: inset 0 0 0 1px var(--bui-border-hover); + .bui-CheckboxLabel { + display: flex; + flex-direction: row; + 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; + + &:hover { + & .bui-CheckboxRoot:not([data-checked]) { + box-shadow: inset 0 0 0 1px var(--bui-border-hover); + } } } -} -.bui-CheckboxIndicator { - display: flex; - align-items: center; - justify-content: center; - color: var(--bui-fg-solid); + .bui-CheckboxIndicator { + display: flex; + align-items: center; + justify-content: center; + color: var(--bui-fg-solid); + } } diff --git a/packages/ui/src/components/Collapsible/Collapsible.styles.css b/packages/ui/src/components/Collapsible/Collapsible.styles.css index e1fbf00a82..35b0992a62 100644 --- a/packages/ui/src/components/Collapsible/Collapsible.styles.css +++ b/packages/ui/src/components/Collapsible/Collapsible.styles.css @@ -14,14 +14,16 @@ * limitations under the License. */ -.bui-CollapsiblePanel { - display: flex; - height: var(--collapsible-panel-height); - overflow: hidden; - transition: all 150ms ease-out; +@layer components { + .bui-CollapsiblePanel { + display: flex; + height: var(--collapsible-panel-height); + overflow: hidden; + transition: all 150ms ease-out; - &[data-starting-style], - &[data-ending-style] { - height: 0; + &[data-starting-style], + &[data-ending-style] { + height: 0; + } } } diff --git a/packages/ui/src/components/Container/styles.css b/packages/ui/src/components/Container/styles.css index a812b7c767..515e449457 100644 --- a/packages/ui/src/components/Container/styles.css +++ b/packages/ui/src/components/Container/styles.css @@ -1,12 +1,30 @@ -.bui-Container { - max-width: 120rem; - padding-inline: var(--bui-space-4); - margin-inline: auto; - transition: padding 0.2s ease-in-out; -} +/* + * Copyright 2025 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. + */ -@media (min-width: 640px) { +@layer components { .bui-Container { - padding-inline: var(--bui-space-5); + max-width: 120rem; + padding-inline: var(--bui-space-4); + margin-inline: auto; + transition: padding 0.2s ease-in-out; + } + + @media (min-width: 640px) { + .bui-Container { + padding-inline: var(--bui-space-5); + } } } diff --git a/packages/ui/src/components/FieldError/FieldError.styles.css b/packages/ui/src/components/FieldError/FieldError.styles.css index e69e8637d3..90b0547ab7 100644 --- a/packages/ui/src/components/FieldError/FieldError.styles.css +++ b/packages/ui/src/components/FieldError/FieldError.styles.css @@ -1,7 +1,25 @@ -.bui-FieldError { - display: inline-block; - 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); +/* + * Copyright 2025 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. + */ + +@layer components { + .bui-FieldError { + display: inline-block; + 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); + } } diff --git a/packages/ui/src/components/FieldLabel/FieldLabel.styles.css b/packages/ui/src/components/FieldLabel/FieldLabel.styles.css index 2dfc28a49d..0a70e69ea2 100644 --- a/packages/ui/src/components/FieldLabel/FieldLabel.styles.css +++ b/packages/ui/src/components/FieldLabel/FieldLabel.styles.css @@ -1,27 +1,45 @@ -.bui-FieldLabelWrapper { - display: flex; - flex-direction: column; - margin-bottom: var(--bui-space-3); - gap: var(--bui-space-1); -} +/* + * Copyright 2025 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. + */ -.bui-FieldLabel { - color: var(--bui-fg-primary); - margin-right: auto; - cursor: pointer; - font-weight: var(--bui-font-weight-regular); - font-size: var(--bui-font-size-2); -} +@layer components { + .bui-FieldLabelWrapper { + display: flex; + flex-direction: column; + margin-bottom: var(--bui-space-3); + gap: var(--bui-space-1); + } -.bui-FieldSecondaryLabel { - color: var(--bui-fg-secondary); - font-weight: var(--bui-font-weight-regular); - margin-left: var(--bui-space-1); -} + .bui-FieldLabel { + color: var(--bui-fg-primary); + margin-right: auto; + cursor: pointer; + font-weight: var(--bui-font-weight-regular); + font-size: var(--bui-font-size-2); + } -.bui-FieldDescription { - font-weight: var(--bui-font-weight-regular); - font-size: var(--bui-font-size-2); - color: var(--bui-fg-secondary); - margin: 0; + .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; + } } diff --git a/packages/ui/src/components/Flex/styles.css b/packages/ui/src/components/Flex/styles.css index 96c94ab58a..7c5eee12cd 100644 --- a/packages/ui/src/components/Flex/styles.css +++ b/packages/ui/src/components/Flex/styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,9 +14,11 @@ * limitations under the License. */ -.bui-Flex { - display: flex; +@layer components { + .bui-Flex { + display: flex; - /* This helps when using `truncate` on text inside a flex container */ - min-width: 0; + /* This helps when using `truncate` on text inside a flex container */ + min-width: 0; + } } diff --git a/packages/ui/src/components/Grid/styles.css b/packages/ui/src/components/Grid/styles.css index e21191ad47..28e792ab54 100644 --- a/packages/ui/src/components/Grid/styles.css +++ b/packages/ui/src/components/Grid/styles.css @@ -1,3 +1,21 @@ -.bui-Grid { - display: grid; +/* + * Copyright 2025 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. + */ + +@layer components { + .bui-Grid { + display: grid; + } } diff --git a/packages/ui/src/components/Header/Header.styles.css b/packages/ui/src/components/Header/Header.styles.css index 69c0065394..56f5573e0f 100644 --- a/packages/ui/src/components/Header/Header.styles.css +++ b/packages/ui/src/components/Header/Header.styles.css @@ -14,81 +14,83 @@ * limitations under the License. */ -.bui-HeaderToolbar { - margin-bottom: var(--bui-space-6); +@layer components { + .bui-HeaderToolbar { + margin-bottom: var(--bui-space-6); - &::before { - content: ''; - position: absolute; - top: 0; - left: 0px; - right: 0px; + &::before { + content: ''; + position: absolute; + top: 0; + left: 0px; + right: 0px; + height: 16px; + background-color: var(--bui-bg); + z-index: 0; + } + + &[data-has-tabs='true'] { + margin-bottom: 0; + } + } + + .bui-HeaderToolbarWrapper { + position: relative; + z-index: 1; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + 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); + height: 52px; + } + + .bui-HeaderToolbarContent { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--bui-space-2); + } + + .bui-HeaderToolbarName { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--bui-space-2); + font-size: var(--bui-font-size-3); + font-weight: var(--bui-font-weight-regular); + flex-shrink: 0; + } + + .bui-HeaderToolbarIcon { + width: 16px; height: 16px; - background-color: var(--bui-bg); - z-index: 0; + color: var(--bui-fg-primary); + + & svg { + width: 100%; + height: 100%; + } } - &[data-has-tabs='true'] { - margin-bottom: 0; + .bui-HeaderToolbarControls { + position: absolute; + right: var(--bui-space-5); + top: 50%; + transform: translateY(-50%); + display: flex; + flex-direction: row; + align-items: center; + gap: var(--bui-space-2); + } + + .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-HeaderToolbarWrapper { - position: relative; - z-index: 1; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - 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); - height: 52px; -} - -.bui-HeaderToolbarContent { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--bui-space-2); -} - -.bui-HeaderToolbarName { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--bui-space-2); - font-size: var(--bui-font-size-3); - font-weight: var(--bui-font-weight-regular); - flex-shrink: 0; -} - -.bui-HeaderToolbarIcon { - width: 16px; - height: 16px; - color: var(--bui-fg-primary); - - & svg { - width: 100%; - height: 100%; - } -} - -.bui-HeaderToolbarControls { - position: absolute; - right: var(--bui-space-5); - top: 50%; - transform: translateY(-50%); - display: flex; - flex-direction: row; - align-items: center; - gap: var(--bui-space-2); -} - -.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); -} diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.styles.css b/packages/ui/src/components/HeaderPage/HeaderPage.styles.css index aca756872c..b85320c9d4 100644 --- a/packages/ui/src/components/HeaderPage/HeaderPage.styles.css +++ b/packages/ui/src/components/HeaderPage/HeaderPage.styles.css @@ -14,34 +14,36 @@ * limitations under the License. */ -.bui-HeaderPage { - display: flex; - flex-direction: column; - gap: var(--bui-space-1); - margin-top: var(--bui-space-6); - margin-bottom: var(--bui-space-6); -} +@layer components { + .bui-HeaderPage { + display: flex; + flex-direction: column; + gap: var(--bui-space-1); + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } -.bui-HeaderPageContent { - display: flex; - flex-direction: row; - justify-content: space-between; -} + .bui-HeaderPageContent { + display: flex; + flex-direction: row; + justify-content: space-between; + } -.bui-HeaderPageTabsWrapper { - margin-left: -8px; -} + .bui-HeaderPageTabsWrapper { + margin-left: -8px; + } -.bui-HeaderPageControls { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--bui-space-2); -} + .bui-HeaderPageControls { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--bui-space-2); + } -.bui-HeaderPageBreadcrumbs { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--bui-space-2); + .bui-HeaderPageBreadcrumbs { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--bui-space-2); + } } diff --git a/packages/ui/src/components/Icon/styles.css b/packages/ui/src/components/Icon/styles.css index a6a3f7d49c..b96d9d5f2b 100644 --- a/packages/ui/src/components/Icon/styles.css +++ b/packages/ui/src/components/Icon/styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,7 +14,9 @@ * limitations under the License. */ -.bui-Icon { - width: 1rem; - height: 1rem; +@layer components { + .bui-Icon { + width: 1rem; + height: 1rem; + } } diff --git a/packages/ui/src/components/Link/styles.css b/packages/ui/src/components/Link/styles.css index 76a56e2d7a..5931a1dfe2 100644 --- a/packages/ui/src/components/Link/styles.css +++ b/packages/ui/src/components/Link/styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,19 +14,21 @@ * limitations under the License. */ -.bui-Link { - font-family: var(--bui-font-regular); - padding: 0; - margin: 0; - cursor: pointer; - text-decoration-line: none; - display: inline-block; +@layer components { + .bui-Link { + font-family: var(--bui-font-regular); + padding: 0; + margin: 0; + cursor: pointer; + text-decoration-line: none; + display: inline-block; - &:hover { - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-thickness: min(2px, max(1px, 0.05em)); - text-underline-offset: calc(0.025em + 2px); - text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); + &:hover { + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-thickness: min(2px, max(1px, 0.05em)); + text-underline-offset: calc(0.025em + 2px); + text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); + } } } diff --git a/packages/ui/src/components/Menu/Menu.styles.css b/packages/ui/src/components/Menu/Menu.styles.css index 1d21233ae3..507c772d71 100644 --- a/packages/ui/src/components/Menu/Menu.styles.css +++ b/packages/ui/src/components/Menu/Menu.styles.css @@ -14,256 +14,258 @@ * limitations under the License. */ -.bui-MenuPopover { - display: flex; - flex-direction: column; - border: 1px solid var(--bui-border); - border-radius: var(--bui-radius-2); - background: var(--bui-bg-surface-1); - color: var(--bui-fg-primary); - outline: none; - transition: transform 200ms, opacity 200ms; - /* Let React Aria handle height constraints naturally */ - min-height: 0; - /* Remove overflow from popover since ScrollArea will handle it */ - overflow: hidden; - - &[data-entering], - &[data-exiting] { - transform: var(--origin); - opacity: 0; - } - - &[data-placement='top'] { - --origin: translateY(8px); - } - - &[data-placement='bottom'] { - --origin: translateY(-8px); - } - - &[data-placement='right'] { - --origin: translateX(-8px); - } - - &[data-placement='left'] { - --origin: translateX(8px); - } -} - -.bui-MenuContent { - max-height: inherit; - box-sizing: border-box; - overflow: auto; - padding: var(--bui-space-1); - min-width: 150px; - box-sizing: border-box; - outline: none; -} - -/* Ensure ScrollArea works properly within MenuRA popover */ -.bui-MenuPopover .bui-ScrollAreaRoot { - /* Take full height of popover */ - height: 100%; - min-height: 0; - flex: 1; - /* Ensure the root container has proper height constraints */ - display: flex; - flex-direction: column; -} - -.bui-MenuPopover .bui-ScrollAreaScrollbar { - margin-inline: var(--bui-space-1_5); -} - -.bui-MenuItem { - display: flex; - align-items: center; - justify-content: space-between; - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - outline: none; - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - gap: var(--bui-space-6); - - &[data-focused] { - background: var(--bui-bg-surface-2); +@layer components { + .bui-MenuPopover { + display: flex; + flex-direction: column; + border: 1px solid var(--bui-border); + border-radius: var(--bui-radius-2); + background: var(--bui-bg-surface-1); color: var(--bui-fg-primary); - } + outline: none; + transition: transform 200ms, opacity 200ms; + /* Let React Aria handle height constraints naturally */ + min-height: 0; + /* Remove overflow from popover since ScrollArea will handle it */ + overflow: hidden; - &[data-open] { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); - } + &[data-entering], + &[data-exiting] { + transform: var(--origin); + opacity: 0; + } - &[data-color='danger'] { - color: var(--bui-fg-danger); - } + &[data-placement='top'] { + --origin: translateY(8px); + } - &[data-color='danger'][data-focused] { - background: var(--bui-bg-danger); - color: var(--bui-fg-danger); - } + &[data-placement='bottom'] { + --origin: translateY(-8px); + } - &[data-has-submenu] { - & > .bui-MenuItemArrow { - display: block; + &[data-placement='right'] { + --origin: translateX(-8px); + } + + &[data-placement='left'] { + --origin: translateX(8px); } } -} -.bui-MenuItemListBox { - display: flex; - align-items: center; - justify-content: space-between; - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - outline: none; - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - gap: var(--bui-space-6); - - &:hover { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); + .bui-MenuContent { + max-height: inherit; + box-sizing: border-box; + overflow: auto; + padding: var(--bui-space-1); + min-width: 150px; + box-sizing: border-box; + outline: none; } - &[data-selected] .bui-MenuItemListBoxCheck { - & > svg { - opacity: 1; + /* Ensure ScrollArea works properly within MenuRA popover */ + .bui-MenuPopover .bui-ScrollAreaRoot { + /* Take full height of popover */ + height: 100%; + min-height: 0; + flex: 1; + /* Ensure the root container has proper height constraints */ + display: flex; + flex-direction: column; + } + + .bui-MenuPopover .bui-ScrollAreaScrollbar { + margin-inline: var(--bui-space-1_5); + } + + .bui-MenuItem { + display: flex; + align-items: center; + justify-content: space-between; + height: 2rem; + padding-inline: var(--bui-space-2); + border-radius: var(--bui-radius-2); + outline: none; + cursor: default; + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-3); + gap: var(--bui-space-6); + + &[data-focused] { + background: var(--bui-bg-surface-2); color: var(--bui-fg-primary); } - } -} -.bui-MenuItemListBoxCheck { - display: flex; - align-items: center; - justify-content: center; - width: 1rem; - height: 1rem; + &[data-open] { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } - & > svg { - opacity: 0; - width: 1rem; - height: 1rem; - } -} + &[data-color='danger'] { + color: var(--bui-fg-danger); + } -.bui-MenuItemContent { - display: flex; - align-items: center; - gap: var(--bui-space-2); + &[data-color='danger'][data-focused] { + background: var(--bui-bg-danger); + color: var(--bui-fg-danger); + } - & > svg { - width: 1rem; - height: 1rem; - } -} - -.bui-MenuItemArrow { - display: none; - width: 1rem; - height: 1rem; - - & > svg { - width: 1rem; - height: 1rem; - } -} - -.bui-MenuSection { - &:first-child .bui-MenuSectionHeader { - padding-top: 0; - } -} - -.bui-MenuSectionHeader { - height: 2rem; - display: flex; - align-items: center; - padding-top: var(--bui-space-3); - padding-left: var(--bui-space-2); - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-1); - font-weight: bold; - letter-spacing: 0.05rem; - text-transform: uppercase; -} - -.bui-MenuSeparator { - height: 1px; - background: var(--bui-border); - margin-inline: var(--bui-space-1_5); - margin-block: var(--bui-space-1); -} - -.bui-MenuSearchField { - position: relative; - font-family: var(--bui-font-regular); - width: 100%; - flex-shrink: 0; - - &[data-empty] { - .bui-MenuSearchFieldClear { - display: none; + &[data-has-submenu] { + & > .bui-MenuItemArrow { + display: block; + } } } -} -.bui-MenuSearchFieldInput { - display: flex; - align-items: center; - padding: 0 var(--bui-space-3); - border: none; - border-bottom: 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: 2rem; - cursor: inherit; - outline: none; + .bui-MenuItemListBox { + display: flex; + align-items: center; + justify-content: space-between; + height: 2rem; + padding-inline: var(--bui-space-2); + border-radius: var(--bui-radius-2); + outline: none; + cursor: default; + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-3); + gap: var(--bui-space-6); - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { - -webkit-appearance: none; + &:hover { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-selected] .bui-MenuItemListBoxCheck { + & > svg { + opacity: 1; + color: var(--bui-fg-primary); + } + } } -} -.bui-MenuSearchFieldClear { - position: absolute; - right: var(--bui-space-2); - top: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - border: none; - padding: 0; - margin: 0; - cursor: pointer; - color: var(--bui-fg-secondary); - transition: color 0.2s ease-in-out; - - & > svg { + .bui-MenuItemListBoxCheck { + display: flex; + align-items: center; + justify-content: center; width: 1rem; height: 1rem; + + & > svg { + opacity: 0; + width: 1rem; + height: 1rem; + } + } + + .bui-MenuItemContent { + display: flex; + align-items: center; + gap: var(--bui-space-2); + + & > svg { + width: 1rem; + height: 1rem; + } + } + + .bui-MenuItemArrow { + display: none; + width: 1rem; + height: 1rem; + + & > svg { + width: 1rem; + height: 1rem; + } + } + + .bui-MenuSection { + &:first-child .bui-MenuSectionHeader { + padding-top: 0; + } + } + + .bui-MenuSectionHeader { + height: 2rem; + display: flex; + align-items: center; + padding-top: var(--bui-space-3); + padding-left: var(--bui-space-2); + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-1); + font-weight: bold; + letter-spacing: 0.05rem; + text-transform: uppercase; + } + + .bui-MenuSeparator { + height: 1px; + background: var(--bui-border); + margin-inline: var(--bui-space-1_5); + margin-block: var(--bui-space-1); + } + + .bui-MenuSearchField { + position: relative; + font-family: var(--bui-font-regular); + width: 100%; + flex-shrink: 0; + + &[data-empty] { + .bui-MenuSearchFieldClear { + display: none; + } + } + } + + .bui-MenuSearchFieldInput { + display: flex; + align-items: center; + padding: 0 var(--bui-space-3); + border: none; + border-bottom: 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: 2rem; + cursor: inherit; + outline: none; + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; + } + } + + .bui-MenuSearchFieldClear { + position: absolute; + right: var(--bui-space-2); + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + color: var(--bui-fg-secondary); + transition: color 0.2s ease-in-out; + + & > svg { + width: 1rem; + height: 1rem; + } + } + + .bui-MenuEmptyState { + padding: var(--bui-space-1); + color: var(--bui-fg-secondary); + font-size: var(--bui-font-size-3); + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); } } - -.bui-MenuEmptyState { - padding: var(--bui-space-1); - color: var(--bui-fg-secondary); - font-size: var(--bui-font-size-3); - font-family: var(--bui-font-regular); - font-weight: var(--bui-font-weight-regular); -} diff --git a/packages/ui/src/components/PasswordField/PasswordField.styles.css b/packages/ui/src/components/PasswordField/PasswordField.styles.css index 371d769ea6..55ea499a2c 100644 --- a/packages/ui/src/components/PasswordField/PasswordField.styles.css +++ b/packages/ui/src/components/PasswordField/PasswordField.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,57 +14,59 @@ * limitations under the License. */ -.bui-PasswordField { - display: flex; - flex-direction: column; - font-family: var(--bui-font-regular); - width: 100%; - flex-shrink: 0; - /* Reserve space for browser/password manager icon (e.g. 1Password) */ - --bui-passwordmanager-icon-width: var(--bui-space-1); -} - -.bui-InputVisibility { - position: absolute; - right: var(--bui-passwordmanager-icon-width); - top: 0; - bottom: 0; - background-color: transparent; - cursor: pointer; - border: none; - padding: 0; - margin: 0; - display: flex; - align-items: center; - justify-content: center; - color: var(--bui-fg-primary); - - /* Size: small */ - &[data-size='small'] { - width: 2rem; - height: 2rem; - } - &[data-size='small'] svg { - width: 1rem; - height: 1rem; +@layer components { + .bui-PasswordField { + display: flex; + flex-direction: column; + font-family: var(--bui-font-regular); + width: 100%; + flex-shrink: 0; + /* Reserve space for browser/password manager icon (e.g. 1Password) */ + --bui-passwordmanager-icon-width: var(--bui-space-1); } - /* Size: medium */ - &[data-size='medium'] { - width: 2.5rem; - height: 2.5rem; + .bui-InputVisibility { + position: absolute; + right: var(--bui-passwordmanager-icon-width); + top: 0; + bottom: 0; + background-color: transparent; + cursor: pointer; + border: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + color: var(--bui-fg-primary); + + /* Size: small */ + &[data-size='small'] { + width: 2rem; + height: 2rem; + } + &[data-size='small'] svg { + width: 1rem; + height: 1rem; + } + + /* Size: medium */ + &[data-size='medium'] { + width: 2.5rem; + height: 2.5rem; + } + &[data-size='medium'] svg { + width: 1.25rem; + height: 1.25rem; + } } - &[data-size='medium'] svg { - width: 1.25rem; - height: 1.25rem; + + /* Ensure input has enough right padding for our toggle + PM icon */ + .bui-PasswordField .bui-InputWrapper[data-size='small'] .bui-Input { + padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); + } + + .bui-PasswordField .bui-InputWrapper[data-size='medium'] .bui-Input { + padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); } } - -/* Ensure input has enough right padding for our toggle + PM icon */ -.bui-PasswordField .bui-InputWrapper[data-size='small'] .bui-Input { - padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); -} - -.bui-PasswordField .bui-InputWrapper[data-size='medium'] .bui-Input { - padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); -} diff --git a/packages/ui/src/components/Popover/Popover.styles.css b/packages/ui/src/components/Popover/Popover.styles.css index 23ae5c1019..3f1cf66440 100644 --- a/packages/ui/src/components/Popover/Popover.styles.css +++ b/packages/ui/src/components/Popover/Popover.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,12 +14,14 @@ * limitations under the License. */ -.bui-Popover { - margin-right: 12px; - overflow: scroll; - 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); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +@layer components { + .bui-Popover { + margin-right: 12px; + overflow: scroll; + 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); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } } diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.styles.css b/packages/ui/src/components/RadioGroup/RadioGroup.styles.css index f12d5571e0..400a5216f4 100644 --- a/packages/ui/src/components/RadioGroup/RadioGroup.styles.css +++ b/packages/ui/src/components/RadioGroup/RadioGroup.styles.css @@ -1,95 +1,113 @@ -.bui-RadioGroup { - display: flex; - flex-direction: column; - color: var(--bui-fg-primary); -} +/* + * Copyright 2025 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. + */ -.bui-RadioGroup[data-orientation='horizontal'] .bui-RadioGroupContent { - flex-direction: row; - gap: var(--bui-space-4); -} - -.bui-RadioGroupContent { - display: flex; - flex-direction: column; - gap: var(--bui-space-2); -} - -.bui-Radio { - display: flex; - /* This is needed so the HiddenInput is positioned correctly */ - position: relative; - align-items: center; - gap: var(--bui-space-2); - font-size: var(--bui-font-size-2); - color: var(--bui-fg-primary); - forced-color-adjust: none; - - &:before { - content: ''; - display: block; - width: 1rem; - height: 1rem; - box-sizing: border-box; - border: 0.125rem solid var(--bui-border); - background: var(--bui-gray-1); - border-radius: var(--bui-radius-full); - transition: all 200ms; +@layer components { + .bui-RadioGroup { + display: flex; + flex-direction: column; + color: var(--bui-fg-primary); } - &[data-pressed]:before { - border-color: var(--bui-border); + .bui-RadioGroup[data-orientation='horizontal'] .bui-RadioGroupContent { + flex-direction: row; + gap: var(--bui-space-4); } - &[data-selected] { + .bui-RadioGroupContent { + display: flex; + flex-direction: column; + gap: var(--bui-space-2); + } + + .bui-Radio { + display: flex; + /* This is needed so the HiddenInput is positioned correctly */ + position: relative; + align-items: center; + gap: var(--bui-space-2); + font-size: var(--bui-font-size-2); + color: var(--bui-fg-primary); + forced-color-adjust: none; + &:before { - border-color: var(--bui-bg-solid); - border-width: 0.25rem; + content: ''; + display: block; + width: 1rem; + height: 1rem; + box-sizing: border-box; + border: 0.125rem solid var(--bui-border); + background: var(--bui-gray-1); + border-radius: var(--bui-radius-full); + transition: all 200ms; } &[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); + border-color: var(--bui-border); } - &[data-selected]:before { - border-color: var(--bui-border-disabled); - } - } + &[data-selected] { + &:before { + border-color: var(--bui-bg-solid); + border-width: 0.25rem; + } - &[data-invalid]:before { - border-color: var(--bui-border-danger); - } - - &[data-invalid][data-selected]:before { - border-color: var(--bui-border-danger); - } - - /* Ensure disabled state prevails over invalid state */ - &[data-disabled][data-invalid] { - color: var(--bui-fg-disabled); - - &:before { - border-color: var(--bui-border-disabled); - background: var(--bui-bg-disabled); + &[data-pressed]:before { + border-color: var(--bui-bg-solid); + } } - &[data-selected]:before { - border-color: var(--bui-border-disabled); + &[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 { + border-color: var(--bui-border-danger); + } + + &[data-invalid][data-selected]:before { + border-color: var(--bui-border-danger); + } + + /* Ensure disabled state prevails over invalid state */ + &[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); + } } } } diff --git a/packages/ui/src/components/ScrollArea/ScrollArea.styles.css b/packages/ui/src/components/ScrollArea/ScrollArea.styles.css index 209168c329..4e2fea06a6 100644 --- a/packages/ui/src/components/ScrollArea/ScrollArea.styles.css +++ b/packages/ui/src/components/ScrollArea/ScrollArea.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,52 +14,54 @@ * limitations under the License. */ -.bui-ScrollAreaRoot { - box-sizing: border-box; - width: 100%; -} - -.bui-ScrollAreaViewport { - height: 100%; - overscroll-behavior: contain; -} - -.bui-ScrollAreaContent { - display: flex; - flex-direction: column; - gap: 1rem; - padding-block: 0.75rem; - padding-left: 1rem; - padding-right: 1.5rem; -} - -.bui-ScrollAreaScrollbar { - display: flex; - justify-content: center; - background-color: var(--bui-scrollbar); - width: 0.25rem; - border-radius: 0.375rem; - margin: 0.5rem; - opacity: 0; - transition: opacity 150ms 300ms; - - &[data-hovering], - &[data-scrolling] { - opacity: 1; - transition-duration: 75ms; - transition-delay: 0ms; +@layer components { + .bui-ScrollAreaRoot { + box-sizing: border-box; + width: 100%; } - &::before { - content: ''; - position: absolute; - width: 1.25rem; + .bui-ScrollAreaViewport { height: 100%; + overscroll-behavior: contain; + } + + .bui-ScrollAreaContent { + display: flex; + flex-direction: column; + gap: 1rem; + padding-block: 0.75rem; + padding-left: 1rem; + padding-right: 1.5rem; + } + + .bui-ScrollAreaScrollbar { + display: flex; + justify-content: center; + background-color: var(--bui-scrollbar); + width: 0.25rem; + border-radius: 0.375rem; + margin: 0.5rem; + opacity: 0; + transition: opacity 150ms 300ms; + + &[data-hovering], + &[data-scrolling] { + opacity: 1; + transition-duration: 75ms; + transition-delay: 0ms; + } + + &::before { + content: ''; + position: absolute; + width: 1.25rem; + height: 100%; + } + } + + .bui-ScrollAreaThumb { + width: 100%; + border-radius: inherit; + background-color: var(--bui-scrollbar-thumb); } } - -.bui-ScrollAreaThumb { - width: 100%; - border-radius: inherit; - background-color: var(--bui-scrollbar-thumb); -} diff --git a/packages/ui/src/components/SearchField/SearchField.styles.css b/packages/ui/src/components/SearchField/SearchField.styles.css index a13c455b44..996ee1eb07 100644 --- a/packages/ui/src/components/SearchField/SearchField.styles.css +++ b/packages/ui/src/components/SearchField/SearchField.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,125 +14,127 @@ * limitations under the License. */ -.bui-SearchField { - flex: 1; - flex-shrink: 0; +@layer components { + .bui-SearchField { + flex: 1; + flex-shrink: 0; - &[data-empty] { - .bui-InputClear { - display: none; + &[data-empty] { + .bui-InputClear { + display: none; + } + } + + &[data-start-collapsed='true'] { + transition: flex-basis 0.3s ease-in-out; + padding: 0; + flex: 0 1 auto; + + &[data-collapsed='true'] { + flex-basis: 200px; + } + + &[data-collapsed='false'] { + cursor: pointer; + + &[data-size='medium'] { + flex-basis: 2.5rem; + height: 2.5rem; + } + + &[data-size='small'] { + flex-basis: 2rem; + height: 2rem; + } + + &[data-size='medium'] .bui-Input { + &::placeholder { + opacity: 0; + } + } + + &[data-size='small'] .bui-Input { + &::placeholder { + opacity: 0; + } + } + + .bui-InputWrapper { + .bui-Input[data-icon] { + padding-right: 0px; + } + } + } } } - &[data-start-collapsed='true'] { - transition: flex-basis 0.3s ease-in-out; + .bui-SearchField .bui-Input { + transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out, + outline-color 0.2s ease-in-out; + + &[data-hovered] { + border-color: var(--bui-border-hover); + } + + &[data-focused] { + border-color: var(--bui-border-pressed); + outline-width: 0px; + } + } + + .bui-SearchField .bui-InputWrapper { + .bui-Input[data-icon] { + padding-right: var(--bui-space-6); + } + } + + .bui-SearchField .bui-InputIcon { + left: 0; + display: flex; + justify-content: center; + + &[data-size='small'] { + width: var(--bui-space-8); + } + + &[data-size='medium'] { + width: var(--bui-space-10); + } + } + + .bui-InputClear { + position: absolute; + right: 0; + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + border: none; padding: 0; - flex: 0 1 auto; - - &[data-collapsed='true'] { - flex-basis: 200px; - } - - &[data-collapsed='false'] { - cursor: pointer; - - &[data-size='medium'] { - flex-basis: 2.5rem; - height: 2.5rem; - } - - &[data-size='small'] { - flex-basis: 2rem; - height: 2rem; - } - - &[data-size='medium'] .bui-Input { - &::placeholder { - opacity: 0; - } - } - - &[data-size='small'] .bui-Input { - &::placeholder { - opacity: 0; - } - } - - .bui-InputWrapper { - .bui-Input[data-icon] { - padding-right: 0px; - } - } - } - } -} - -.bui-SearchField .bui-Input { - transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out, - outline-color 0.2s ease-in-out; - - &[data-hovered] { - border-color: var(--bui-border-hover); + margin: 0; + cursor: pointer; + color: var(--bui-fg-secondary); + transition: color 0.2s ease-in-out; } - &[data-focused] { - border-color: var(--bui-border-pressed); - outline-width: 0px; - } -} - -.bui-SearchField .bui-InputWrapper { - .bui-Input[data-icon] { - padding-right: var(--bui-space-6); - } -} - -.bui-SearchField .bui-InputIcon { - left: 0; - display: flex; - justify-content: center; - - &[data-size='small'] { - width: var(--bui-space-8); + .bui-InputClear:hover { + color: var(--bui-fg-primary); } - &[data-size='medium'] { - width: var(--bui-space-10); + .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-InputClear { - position: absolute; - right: 0; - top: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - border: none; - padding: 0; - margin: 0; - cursor: pointer; - color: var(--bui-fg-secondary); - transition: color 0.2s ease-in-out; -} - -.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; -} diff --git a/packages/ui/src/components/Select/Select.styles.css b/packages/ui/src/components/Select/Select.styles.css index 2cbadfda32..a8dbe759dc 100644 --- a/packages/ui/src/components/Select/Select.styles.css +++ b/packages/ui/src/components/Select/Select.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,163 +14,165 @@ * limitations under the License. */ -.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); - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - gap: var(--bui-space-2); - width: 100%; - - & svg { - flex-shrink: 0; - color: var(--bui-fg-secondary); +@layer components { + .bui-Select[data-invalid] { + & .bui-SelectTrigger { + border-color: var(--bui-fg-danger); + } } - &[data-size='small'] { - height: 2rem; - padding-inline: var(--bui-space-3); + .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); + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + gap: var(--bui-space-2); + width: 100%; + + & svg { + flex-shrink: 0; + color: var(--bui-fg-secondary); + } + + &[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 { + transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; + border-color: var(--bui-border-hover); + } + + &:focus-visible { + border-color: var(--bui-border-pressed); + outline: 0; + } + + &[data-invalid] { + border-color: var(--bui-fg-danger); + } + &[data-invalid]:hover { + border-width: 2px; + } + + &[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); + } } - &[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 { - transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; - border-color: var(--bui-border-hover); - } - - &:focus-visible { - border-color: var(--bui-border-pressed); - outline: 0; - } - - &[data-invalid] { - border-color: var(--bui-fg-danger); - } - &[data-invalid]:hover { - border-width: 2px; - } - - &[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; - overflow: hidden; - 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; - - & .bui-SelectItemIndicator { - display: none; - } - - &[disabled] { - color: var(--bui-fg-disabled); - } -} - -.bui-SelectItem { - position: relative; - width: var(--anchor-width); - display: grid; - grid-template-areas: 'icon text'; - grid-template-columns: 1rem 1fr; - align-items: center; - 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); - gap: var(--bui-space-1); - outline: none; - - &[data-focused] { - z-index: 0; - position: relative; + .bui-SelectValue { + text-overflow: ellipsis; + overflow: hidden; + 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; + + & .bui-SelectItemIndicator { + display: none; + } + + &[disabled] { + color: var(--bui-fg-disabled); + } } - &[data-focused]::before { - content: ''; - z-index: -1; - position: absolute; - inset-block: 0; - inset-inline: 0.25rem; - border-radius: 0.25rem; - background-color: var(--bui-bg-tint-hover); + .bui-SelectItem { + position: relative; + width: var(--anchor-width); + display: grid; + grid-template-areas: 'icon text'; + grid-template-columns: 1rem 1fr; + align-items: center; + 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); + gap: var(--bui-space-1); + outline: none; + + &[data-focused] { + z-index: 0; + position: relative; + color: var(--bui-fg-primary); + } + + &[data-focused]::before { + content: ''; + z-index: -1; + position: absolute; + inset-block: 0; + inset-inline: 0.25rem; + border-radius: 0.25rem; + background-color: var(--bui-bg-tint-hover); + } + + &[data-disabled] { + cursor: not-allowed; + color: var(--bui-fg-disabled); + } + + &[data-selected] .bui-SelectItemIndicator { + opacity: 1; + } } - &[data-disabled] { - cursor: not-allowed; - color: var(--bui-fg-disabled); + .bui-SelectItemIndicator { + grid-area: icon; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.2s ease-in-out; } - &[data-selected] .bui-SelectItemIndicator { - opacity: 1; + .bui-SelectItemLabel { + flex: 1; + grid-area: text; } } - -.bui-SelectItemIndicator { - grid-area: icon; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.2s ease-in-out; -} - -.bui-SelectItemLabel { - flex: 1; - grid-area: text; -} diff --git a/packages/ui/src/components/Skeleton/Skeleton.styles.css b/packages/ui/src/components/Skeleton/Skeleton.styles.css index bbbb6deaeb..cbf297d24d 100644 --- a/packages/ui/src/components/Skeleton/Skeleton.styles.css +++ b/packages/ui/src/components/Skeleton/Skeleton.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,12 +14,14 @@ * limitations under the License. */ -.bui-Skeleton { - animation: var(--bui-animate-pulse); - background-color: var(--bui-bg-surface-2); - border-radius: var(--bui-radius-2); -} +@layer components { + .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-Skeleton[data-rounded='true'] { + border-radius: var(--bui-radius-full); + } } diff --git a/packages/ui/src/components/Switch/Switch.styles.css b/packages/ui/src/components/Switch/Switch.styles.css index ee2a24d013..58735e2b78 100644 --- a/packages/ui/src/components/Switch/Switch.styles.css +++ b/packages/ui/src/components/Switch/Switch.styles.css @@ -14,61 +14,63 @@ * limitations under the License. */ -.bui-Switch { - display: flex; - /* This is needed so the HiddenInput is positioned correctly */ - position: relative; - align-items: center; - gap: var(--bui-space-3); - font-size: var(--bui-font-size-3); - color: var(--bui-fg-primary); - cursor: pointer; - - &[data-pressed] .bui-SwitchIndicator { - &:before { - background: var(--bui-fg-solid); - } - } - - &[data-selected] { - .bui-SwitchIndicator { - background: var(--bui-bg-solid); +@layer components { + .bui-Switch { + display: flex; + /* This is needed so the HiddenInput is positioned correctly */ + position: relative; + align-items: center; + gap: var(--bui-space-3); + font-size: var(--bui-font-size-3); + color: var(--bui-fg-primary); + cursor: pointer; + &[data-pressed] .bui-SwitchIndicator { &:before { background: var(--bui-fg-solid); - transform: translateX(100%); } } - &[data-pressed] { - .indicator { - background: var(--bui-gray-3); + &[data-selected] { + .bui-SwitchIndicator { + background: var(--bui-bg-solid); + + &:before { + background: var(--bui-fg-solid); + transform: translateX(100%); + } } + + &[data-pressed] { + .indicator { + background: var(--bui-gray-3); + } + } + } + + &[data-focus-visible] .bui-SwitchIndicator { + outline: 2px solid; + outline-offset: 2px; } } - &[data-focus-visible] .bui-SwitchIndicator { - outline: 2px solid; - outline-offset: 2px; - } -} - -.bui-SwitchIndicator { - width: 2rem; - height: 1.143rem; - border: 2px; - background: var(--bui-gray-3); - border-radius: 1.143rem; - transition: all 200ms; - - &:before { - content: ''; - display: block; - margin: 0.143rem; - width: 0.857rem; - height: 0.857rem; - background: var(--bui-fg-solid); - border-radius: 16px; + .bui-SwitchIndicator { + width: 2rem; + height: 1.143rem; + border: 2px; + background: var(--bui-gray-3); + border-radius: 1.143rem; transition: all 200ms; + + &:before { + content: ''; + display: block; + margin: 0.143rem; + width: 0.857rem; + height: 0.857rem; + background: var(--bui-fg-solid); + border-radius: 16px; + transition: all 200ms; + } } } diff --git a/packages/ui/src/components/Table/Table.styles.css b/packages/ui/src/components/Table/Table.styles.css index 84d417604a..0bb49be742 100644 --- a/packages/ui/src/components/Table/Table.styles.css +++ b/packages/ui/src/components/Table/Table.styles.css @@ -14,136 +14,138 @@ * limitations under the License. */ -.bui-Table { - width: 100%; - caption-side: bottom; - border-collapse: collapse; -} - -.bui-TableHeader { - border-bottom: 1px solid var(--bui-border); - transition: color 0.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; - display: inline-flex; - align-items: center; - gap: var(--bui-space-1); - - &:hover svg { - opacity: 0.5; +@layer components { + .bui-Table { + width: 100%; + caption-side: bottom; + border-collapse: collapse; } - & svg { - opacity: 0; - transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; + .bui-TableHeader { + border-bottom: 1px solid var(--bui-border); + transition: color 0.2s ease-in-out; } - &[data-sort-order='asc'] svg { - opacity: 1; - transform: rotate(0); + .bui-TableHead { + text-align: left; + padding: var(--bui-space-3); + font-size: var(--bui-font-size-3); + color: var(--bui-fg-primary); } - &[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 0.2s ease-in-out; - - &[data-react-aria-pressable='true'] { + .bui-TableHeadSortButton { cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + gap: var(--bui-space-1); + + &:hover svg { + opacity: 0.5; + } + + & svg { + opacity: 0; + transition: opacity 0.1s ease-in-out, transform 0.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 0.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); + } + + .bui-TableCell { + padding: var(--bui-space-3); + font-size: var(--bui-font-size-3); + } + + .bui-TableCellContentWrapper { + display: inline-flex; + flex-direction: row; + align-items: center; + gap: var(--bui-space-2); + } + + .bui-TableCellIcon, + .bui-TableCellIcon svg { + display: inline-flex; + align-items: center; + color: var(--bui-fg-primary); + } + + .bui-TableCellContent { + display: flex; + flex-direction: column; + gap: var(--bui-space-0_5); + } + + .bui-TableCellProfile { + display: flex; + flex-direction: row; + gap: var(--bui-space-2); + align-items: center; + } + + .bui-TableCellProfileAvatar { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: middle; + border-radius: 100%; + user-select: none; + font-weight: 500; + color: var(--bui-fg-primary); + background-color: var(--bui-bg-surface-2); + font-size: 1rem; + line-height: 1; + overflow: hidden; + height: 1.25rem; + width: 1.25rem; + } + + .bui-TableCellProfileAvatarImage { + object-fit: cover; + height: 100%; + width: 100%; + } + + .bui-TableCellProfileAvatarFallback { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 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); } } - -.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); -} - -.bui-TableCell { - padding: var(--bui-space-3); - font-size: var(--bui-font-size-3); -} - -.bui-TableCellContentWrapper { - display: inline-flex; - flex-direction: row; - align-items: center; - gap: var(--bui-space-2); -} - -.bui-TableCellIcon, -.bui-TableCellIcon svg { - display: inline-flex; - align-items: center; - color: var(--bui-fg-primary); -} - -.bui-TableCellContent { - display: flex; - flex-direction: column; - gap: var(--bui-space-0_5); -} - -.bui-TableCellProfile { - display: flex; - flex-direction: row; - gap: var(--bui-space-2); - align-items: center; -} - -.bui-TableCellProfileAvatar { - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: middle; - border-radius: 100%; - user-select: none; - font-weight: 500; - color: var(--bui-fg-primary); - background-color: var(--bui-bg-surface-2); - font-size: 1rem; - line-height: 1; - overflow: hidden; - height: 1.25rem; - width: 1.25rem; -} - -.bui-TableCellProfileAvatarImage { - object-fit: cover; - height: 100%; - width: 100%; -} - -.bui-TableCellProfileAvatarFallback { - align-items: center; - display: flex; - justify-content: center; - height: 100%; - width: 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); -} diff --git a/packages/ui/src/components/TablePagination/TablePagination.styles.css b/packages/ui/src/components/TablePagination/TablePagination.styles.css index f7cbb44fc2..e305967ebe 100644 --- a/packages/ui/src/components/TablePagination/TablePagination.styles.css +++ b/packages/ui/src/components/TablePagination/TablePagination.styles.css @@ -1,23 +1,41 @@ -.bui-DataTablePagination { - display: flex; - align-items: center; - justify-content: space-between; - padding-top: var(--bui-space-5); -} +/* + * Copyright 2025 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. + */ -.bui-DataTablePagination--left { - display: flex; - align-items: center; - justify-content: space-between; -} +@layer components { + .bui-DataTablePagination { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: var(--bui-space-5); + } -.bui-DataTablePagination--right { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--bui-space-2); -} + .bui-DataTablePagination--left { + display: flex; + align-items: center; + justify-content: space-between; + } -.bui-DataTablePagination--select { - min-width: 10.5rem; + .bui-DataTablePagination--right { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--bui-space-2); + } + + .bui-DataTablePagination--select { + min-width: 10.5rem; + } } diff --git a/packages/ui/src/components/Tabs/Tabs.styles.css b/packages/ui/src/components/Tabs/Tabs.styles.css index 819fe458ed..a58d123559 100644 --- a/packages/ui/src/components/Tabs/Tabs.styles.css +++ b/packages/ui/src/components/Tabs/Tabs.styles.css @@ -1,82 +1,100 @@ -.bui-Tabs { - /* Initialize CSS variables */ - --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; +/* + * Copyright 2025 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. + */ - --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; -} +@layer components { + .bui-Tabs { + /* Initialize CSS variables */ + --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; -.bui-TabList { - display: flex; - flex-direction: row; -} + --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-TabListWrapper { - position: relative; -} + .bui-TabList { + display: flex; + flex-direction: row; + } -.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); - height: 36px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - position: relative; - z-index: 2; - padding-inline: var(--bui-space-2); + .bui-TabListWrapper { + position: relative; + } - &[data-selected='true'] { - color: var(--bui-fg-primary); + .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); + height: 36px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + z-index: 2; + padding-inline: var(--bui-space-2); + + &[data-selected='true'] { + color: var(--bui-fg-primary); + } + } + + .bui-TabActive { + content: ''; + position: absolute; + left: calc(var(--active-tab-left) + var(--bui-space-2)); + bottom: -1px; + width: calc(var(--active-tab-width) - var(--bui-space-4)); + height: 1px; + background-color: var(--bui-fg-primary); + border-radius: 4px; + transition: left var(--active-transition-duration) ease-out, + opacity 0.15s ease-out, width var(--active-transition-duration) ease-out; + opacity: 1; + } + + .bui-TabHovered { + content: ''; + position: absolute; + 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); + border-radius: 4px; + 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 0.15s ease-out; + } + + .bui-TabPanel { + padding-inline: var(--bui-space-2); + padding-top: var(--bui-space-4); } } - -.bui-TabActive { - content: ''; - position: absolute; - left: calc(var(--active-tab-left) + var(--bui-space-2)); - bottom: -1px; - width: calc(var(--active-tab-width) - var(--bui-space-4)); - height: 1px; - background-color: var(--bui-fg-primary); - border-radius: 4px; - transition: left var(--active-transition-duration) ease-out, - opacity 0.15s ease-out, width var(--active-transition-duration) ease-out; - opacity: 1; -} - -.bui-TabHovered { - content: ''; - position: absolute; - 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); - border-radius: 4px; - 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 0.15s ease-out; -} - -.bui-TabPanel { - padding-inline: var(--bui-space-2); - padding-top: var(--bui-space-4); -} diff --git a/packages/ui/src/components/TagGroup/TagGroup.styles.css b/packages/ui/src/components/TagGroup/TagGroup.styles.css index 9da99a4290..096d003f83 100644 --- a/packages/ui/src/components/TagGroup/TagGroup.styles.css +++ b/packages/ui/src/components/TagGroup/TagGroup.styles.css @@ -14,77 +14,79 @@ * limitations under the License. */ -.bui-TagList { - display: flex; - flex-wrap: wrap; - gap: var(--bui-space-2); -} +@layer components { + .bui-TagList { + display: flex; + flex-wrap: wrap; + gap: var(--bui-space-2); + } -.bui-Tag { - color: var(--bui-fg-primary); - background-color: var(--bui-gray-2); - border-radius: var(--bui-radius-2); - display: flex; - align-items: center; - justify-content: center; - font-weight: var(--bui-font-weight-regular); - gap: var(--bui-space-1); - transition-property: background-color, box-shadow, color; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - box-sizing: border-box; -} + .bui-Tag { + color: var(--bui-fg-primary); + background-color: var(--bui-gray-2); + border-radius: var(--bui-radius-2); + display: flex; + align-items: center; + justify-content: center; + font-weight: var(--bui-font-weight-regular); + gap: var(--bui-space-1); + transition-property: background-color, box-shadow, color; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + box-sizing: border-box; + } -.bui-Tag[data-size='small'] { - height: 26px; - padding: 0 var(--bui-space-2); - font-size: var(--bui-font-size-1); -} + .bui-Tag[data-size='small'] { + height: 26px; + padding: 0 var(--bui-space-2); + font-size: var(--bui-font-size-1); + } -.bui-Tag[data-size='medium'] { - height: 32px; - padding: 0 var(--bui-space-2); - font-size: var(--bui-font-size-2); -} + .bui-Tag[data-size='medium'] { + height: 32px; + padding: 0 var(--bui-space-2); + font-size: var(--bui-font-size-2); + } -.bui-Tag[data-hovered] { - background-color: var(--bui-gray-3); - cursor: pointer; -} + .bui-Tag[data-hovered] { + background-color: var(--bui-gray-3); + cursor: pointer; + } -.bui-Tag[data-focus-visible] { - outline: 2px solid var(--bui-ring); - outline-offset: 1px; -} + .bui-Tag[data-focus-visible] { + outline: 2px solid var(--bui-ring); + outline-offset: 1px; + } -.bui-Tag[data-selected] { - box-shadow: inset 0 0 0 1px var(--bui-gray-8); -} + .bui-Tag[data-selected] { + box-shadow: inset 0 0 0 1px var(--bui-gray-8); + } -.bui-Tag[data-disabled] { - color: var(--bui-fg-disabled); - cursor: not-allowed; -} + .bui-Tag[data-disabled] { + color: var(--bui-fg-disabled); + cursor: not-allowed; + } -.bui-TagRemoveButton { - background-color: transparent; - border: none; - cursor: pointer; - color: var(--bui-fg-primary); - padding: 0; - margin: 0; - width: 1rem; - height: 1rem; -} - -.bui-TagIcon { - display: flex; - align-items: center; - justify-content: center; - transition: color 0.2s ease-in-out; - - svg { + .bui-TagRemoveButton { + background-color: transparent; + border: none; + cursor: pointer; + color: var(--bui-fg-primary); + padding: 0; + margin: 0; width: 1rem; height: 1rem; } + + .bui-TagIcon { + display: flex; + align-items: center; + justify-content: center; + transition: color 0.2s ease-in-out; + + svg { + width: 1rem; + height: 1rem; + } + } } diff --git a/packages/ui/src/components/Text/styles.css b/packages/ui/src/components/Text/styles.css index 562d2a5356..47f38fe30d 100644 --- a/packages/ui/src/components/Text/styles.css +++ b/packages/ui/src/components/Text/styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,90 +14,92 @@ * limitations under the License. */ -.bui-Text { - font-family: var(--bui-font-regular); - padding: 0; - margin: 0; -} +@layer components { + .bui-Text { + font-family: var(--bui-font-regular); + padding: 0; + margin: 0; + } -.bui-Text[data-variant='title-large'] { - font-size: var(--bui-font-size-8); - line-height: 140%; -} + .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-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-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='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-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-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-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-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='regular'] { + font-weight: var(--bui-font-weight-regular); + } -.bui-Text[data-weight='bold'] { - font-weight: var(--bui-font-weight-bold); -} + .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='primary'] { + color: var(--bui-fg-primary); + } -.bui-Text[data-color='secondary'] { - color: var(--bui-fg-secondary); -} + .bui-Text[data-color='secondary'] { + color: var(--bui-fg-secondary); + } -.bui-Text[data-color='danger'] { - color: var(--bui-fg-danger); -} + .bui-Text[data-color='danger'] { + color: var(--bui-fg-danger); + } -.bui-Text[data-color='warning'] { - color: var(--bui-fg-warning); -} + .bui-Text[data-color='warning'] { + color: var(--bui-fg-warning); + } -.bui-Text[data-color='success'] { - color: var(--bui-fg-success); -} + .bui-Text[data-color='success'] { + color: var(--bui-fg-success); + } -.bui-Text[data-truncate] { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} + .bui-Text[data-truncate] { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } -.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-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; + } } diff --git a/packages/ui/src/components/TextField/TextField.styles.css b/packages/ui/src/components/TextField/TextField.styles.css index 792d5d85c9..170349a760 100644 --- a/packages/ui/src/components/TextField/TextField.styles.css +++ b/packages/ui/src/components/TextField/TextField.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,105 +14,107 @@ * limitations under the License. */ -.bui-TextField { - display: flex; - flex-direction: column; - font-family: var(--bui-font-regular); - width: 100%; - flex-shrink: 0; -} - -.bui-InputWrapper { - position: relative; - - &[data-size='small'] .bui-Input { - height: 2rem; +@layer components { + .bui-TextField { + display: flex; + flex-direction: column; + font-family: var(--bui-font-regular); + width: 100%; + flex-shrink: 0; } - &[data-size='medium'] .bui-Input { - height: 2.5rem; + .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); + } } - &[data-size='small'] .bui-Input[data-icon] { - padding-left: var(--bui-space-8); + .bui-InputIcon { + position: absolute; + left: var(--bui-space-3); + top: 50%; + transform: translateY(-50%); + margin-right: var(--bui-space-1); + color: var(--bui-fg-primary); + flex-shrink: 0; + pointer-events: none; + /* To animate the icon when the input is collapsed */ + transition: left 0.2s ease-in-out; + + &[data-size='small'], + &[data-size='small'] svg { + width: 1rem; + height: 1rem; + } + + &[data-size='medium'], + &[data-size='medium'] svg { + width: 1.25rem; + height: 1.25rem; + } } - &[data-size='medium'] .bui-Input[data-icon] { - padding-left: var(--bui-space-9); - } -} - -.bui-InputIcon { - position: absolute; - left: var(--bui-space-3); - top: 50%; - transform: translateY(-50%); - margin-right: var(--bui-space-1); - color: var(--bui-fg-primary); - flex-shrink: 0; - pointer-events: none; - /* To animate the icon when the input is collapsed */ - transition: left 0.2s ease-in-out; - - &[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 { - display: flex; - align-items: center; - 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); - transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; - width: 100%; - height: 100%; - cursor: inherit; - - &::-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: 0px; - } - - &[data-hovered] { - border-color: var(--bui-border-hover); - } - - &[data-focused] { - border-color: var(--bui-border-pressed); - outline-width: 0px; - } - - &[data-invalid] { - border-color: var(--bui-fg-danger); - } - - &[data-disabled] { - opacity: 0.5; - cursor: not-allowed; - border: 1px solid var(--bui-border-disabled); + .bui-Input { + display: flex; + align-items: center; + 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); + transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; + width: 100%; + height: 100%; + cursor: inherit; + + &::-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: 0px; + } + + &[data-hovered] { + border-color: var(--bui-border-hover); + } + + &[data-focused] { + border-color: var(--bui-border-pressed); + outline-width: 0px; + } + + &[data-invalid] { + border-color: var(--bui-fg-danger); + } + + &[data-disabled] { + opacity: 0.5; + cursor: not-allowed; + border: 1px solid var(--bui-border-disabled); + } } } diff --git a/packages/ui/src/components/Tooltip/Tooltip.styles.css b/packages/ui/src/components/Tooltip/Tooltip.styles.css index f80a12bbc1..7c035888ed 100644 --- a/packages/ui/src/components/Tooltip/Tooltip.styles.css +++ b/packages/ui/src/components/Tooltip/Tooltip.styles.css @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * Copyright 2025 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. @@ -14,110 +14,112 @@ * limitations under the License. */ -.bui-Tooltip { - box-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1), - 0 4px 6px -4px rgba(0 0 0 / 0.1); - border-radius: 4px; - background: var(--bui-bg-surface-1); - border: 1px solid var(--bui-gray-3); - forced-color-adjust: none; - outline: none; - padding: var(--bui-space-2) var(--bui-space-3); - max-width: 240px; - /* fixes FF gap */ - transform: translate3d(0, 0, 0); - transition: transform 200ms, opacity 200ms; - font-size: var(--bui-font-size-3); - font-family: var(--bui-font-regular); - color: var(--bui-fg-primary); +@layer components { + .bui-Tooltip { + box-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1), + 0 4px 6px -4px rgba(0 0 0 / 0.1); + border-radius: 4px; + background: var(--bui-bg-surface-1); + border: 1px solid var(--bui-gray-3); + forced-color-adjust: none; + outline: none; + padding: var(--bui-space-2) var(--bui-space-3); + max-width: 240px; + /* fixes FF gap */ + transform: translate3d(0, 0, 0); + transition: transform 200ms, opacity 200ms; + font-size: var(--bui-font-size-3); + font-family: var(--bui-font-regular); + color: var(--bui-fg-primary); - &[data-entering], - &[data-exiting] { - transform: var(--origin); - opacity: 0; + &[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); + } } - --tooltip-offset: var(--bui-space-3); + .bui-TooltipArrow { + & svg { + display: block; - &[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; - - /* The tooltip is rendered overlaying the main + /* The tooltip is rendered overlaying the main tooltip element by 1px. This causes the borders to overlap, which causes minor visual artifacts with transparent border colors. To mitigate this, we split the stroke and fill across separate elements in order to guarantee that the stroke is always overlaying a consistent color. */ - path:nth-child(1) { - fill: var(--bui-bg-surface-1); - } + path:nth-child(1) { + fill: var(--bui-bg-surface-1); + } - path:nth-child(2) { - fill: var(--bui-gray-3); - } + path:nth-child(2) { + fill: var(--bui-gray-3); + } - /* The arrow svg overlaps the tooltip by 2px, so we + /* The arrow svg overlaps the tooltip by 2px, so we need to adjust the margins accordingly. */ - --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:nth-child(1) { - fill: var(--bui-bg-surface-2); + --tooltip-arrow-overlap: -2px; } - svg path:nth-child(2) { - fill: var(--bui-gray-4); + &[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:nth-child(1) { + fill: var(--bui-bg-surface-2); + } + + svg path:nth-child(2) { + fill: var(--bui-gray-4); + } } } } From 9e0c6d6eaf351ba27cc2eaba0ed7b2c72a44b30f Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 11:36:33 +0100 Subject: [PATCH 56/67] Improve core Signed-off-by: Charles de Dreuille --- packages/ui/css/styles.css | 21572 +++++++++++++++++---------------- packages/ui/src/css/core.css | 196 +- 2 files changed, 10802 insertions(+), 10966 deletions(-) diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 6ca70c9c43..65fe585e39 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -1,4 +1,141 @@ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */ +@layer tokens { + :root { + --bui-font-regular: system-ui; + --bui-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; + --bui-font-weight-regular: 400; + --bui-font-weight-bold: 600; + --bui-font-size-1: .625rem; + --bui-font-size-2: .75rem; + --bui-font-size-3: .875rem; + --bui-font-size-4: 1rem; + --bui-font-size-5: 1.25rem; + --bui-font-size-6: 1.5rem; + --bui-font-size-7: 2rem; + --bui-font-size-8: 3rem; + --bui-font-size-9: 4rem; + --bui-font-size-10: 5.75rem; + --bui-space: .25rem; + --bui-space-0_5: calc(var(--bui-space) * .5); + --bui-space-1: var(--bui-space); + --bui-space-1_5: calc(var(--bui-space) * 1.5); + --bui-space-2: calc(var(--bui-space) * 2); + --bui-space-3: calc(var(--bui-space) * 3); + --bui-space-4: calc(var(--bui-space) * 4); + --bui-space-5: calc(var(--bui-space) * 5); + --bui-space-6: calc(var(--bui-space) * 6); + --bui-space-7: calc(var(--bui-space) * 7); + --bui-space-8: calc(var(--bui-space) * 8); + --bui-space-9: calc(var(--bui-space) * 9); + --bui-space-10: calc(var(--bui-space) * 10); + --bui-space-11: calc(var(--bui-space) * 11); + --bui-space-12: calc(var(--bui-space) * 12); + --bui-space-13: calc(var(--bui-space) * 13); + --bui-space-14: calc(var(--bui-space) * 14); + --bui-radius-1: calc(.125rem); + --bui-radius-2: calc(.25rem); + --bui-radius-3: calc(.5rem); + --bui-radius-4: calc(.75rem); + --bui-radius-5: calc(1rem); + --bui-radius-6: calc(1.25rem); + --bui-radius-full: 9999px; + --bui-black: #000; + --bui-white: #fff; + --bui-gray-1: #f8f8f8; + --bui-gray-2: #ececec; + --bui-gray-3: #d9d9d9; + --bui-gray-4: #c1c1c1; + --bui-gray-5: #9e9e9e; + --bui-gray-6: #8c8c8c; + --bui-gray-7: #757575; + --bui-gray-8: #595959; + --bui-bg: var(--bui-gray-1); + --bui-bg-surface-1: var(--bui-white); + --bui-bg-surface-2: var(--bui-gray-2); + --bui-bg-solid: #1f5493; + --bui-bg-solid-hover: #163a66; + --bui-bg-solid-pressed: #0f2b4e; + --bui-bg-solid-disabled: #ebebeb; + --bui-bg-tint: transparent; + --bui-bg-tint-hover: #1f549366; + --bui-bg-tint-pressed: #1f549399; + --bui-bg-tint-disabled: #ebebeb; + --bui-bg-danger: #feebe7; + --bui-bg-warning: #fff2b2; + --bui-bg-success: #e6f6eb; + --bui-fg-primary: var(--bui-black); + --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-link: #1f5493; + --bui-fg-link-hover: #1f2d5c; + --bui-fg-disabled: #9e9e9e; + --bui-fg-solid: var(--bui-white); + --bui-fg-solid-disabled: #9c9c9c; + --bui-fg-tint: #1f5493; + --bui-fg-tint-disabled: var(--bui-gray-5); + --bui-fg-danger: #e22b2b; + --bui-fg-warning: #e36d05; + --bui-fg-success: #1db954; + --bui-border: #0000001a; + --bui-border-hover: #0003; + --bui-border-pressed: #0006; + --bui-border-disabled: #0000001a; + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + --bui-ring: #1f5493; + --bui-scrollbar: #a0a0a03b; + --bui-scrollbar-thumb: #a0a0a0; + --bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; + } + + [data-theme-mode="dark"] { + --bui-gray-1: #191919; + --bui-gray-2: #242424; + --bui-gray-3: #373737; + --bui-gray-4: #464646; + --bui-gray-5: #575757; + --bui-gray-6: #7b7b7b; + --bui-gray-7: #9e9e9e; + --bui-gray-8: #b4b4b4; + --bui-bg: #333; + --bui-bg-surface-1: #424242; + --bui-bg-surface-2: var(--bui-gray-2); + --bui-bg-solid: #9cc9ff; + --bui-bg-solid-hover: #83b9fd; + --bui-bg-solid-pressed: #83b9fd; + --bui-bg-solid-disabled: #222; + --bui-bg-tint: transparent; + --bui-bg-tint-hover: #9cc9ff1f; + --bui-bg-tint-pressed: #9cc9ff29; + --bui-bg-tint-disabled: transparent; + --bui-bg-danger: #3b1219; + --bui-bg-warning: #302008; + --bui-bg-success: #132d21; + --bui-fg-primary: var(--bui-white); + --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-link: #9cc9ff; + --bui-fg-link-hover: #7eb5f7; + --bui-fg-disabled: var(--bui-gray-7); + --bui-fg-solid: #101821; + --bui-fg-solid-disabled: var(--bui-gray-5); + --bui-fg-tint: #9cc9ff; + --bui-fg-tint-disabled: var(--bui-gray-5); + --bui-fg-danger: #e22b2b; + --bui-fg-warning: #e36d05; + --bui-fg-success: #1db954; + --bui-border: #ffffff1f; + --bui-border-hover: #fff6; + --bui-border-pressed: #ffffff80; + --bui-border-disabled: #fff3; + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + --bui-ring: #1f5493; + --bui-scrollbar: #3636363a; + --bui-scrollbar-thumb: #575757; + } +} + @layer base { *, :before, :after { box-sizing: border-box; @@ -87,10986 +224,10857 @@ 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); + :where(a) { + color: inherit; + text-decoration: none; } - .lg\:bui-gap-0\.5 { - gap: var(--bui-space-0_5); - } - - .lg\:bui-gap-1 { - gap: var(--bui-space-1); - } - - .lg\:bui-gap-1\.5 { - gap: var(--bui-space-1_5); - } - - .lg\:bui-gap-2 { - gap: var(--bui-space-2); - } - - .lg\:bui-gap-3 { - gap: var(--bui-space-3); - } - - .lg\:bui-gap-4 { - gap: var(--bui-space-4); - } - - .lg\:bui-gap-5 { - gap: var(--bui-space-5); - } - - .lg\:bui-gap-6 { - gap: var(--bui-space-6); - } - - .lg\:bui-gap-7 { - gap: var(--bui-space-7); - } - - .lg\:bui-gap-8 { - gap: var(--bui-space-8); - } - - .lg\:bui-gap-9 { - gap: var(--bui-space-9); - } - - .lg\:bui-gap-10 { - gap: var(--bui-space-10); - } - - .lg\:bui-gap-11 { - gap: var(--bui-space-11); - } - - .lg\:bui-gap-12 { - gap: var(--bui-space-12); - } - - .lg\:bui-gap-13 { - gap: var(--bui-space-13); - } - - .lg\:bui-gap-14 { - gap: var(--bui-space-14); - } -} - -@media (width >= 1536px) { - .xl\:bui-gap { - gap: var(--gap-xl); - } - - .xl\:bui-gap-0\.5 { - gap: var(--bui-space-0_5); - } - - .xl\:bui-gap-1 { - gap: var(--bui-space-1); - } - - .xl\:bui-gap-1\.5 { - gap: var(--bui-space-1_5); - } - - .xl\:bui-gap-2 { - gap: var(--bui-space-2); - } - - .xl\:bui-gap-3 { - gap: var(--bui-space-3); - } - - .xl\:bui-gap-4 { - gap: var(--bui-space-4); - } - - .xl\:bui-gap-5 { - gap: var(--bui-space-5); - } - - .xl\:bui-gap-6 { - gap: var(--bui-space-6); - } - - .xl\:bui-gap-7 { - gap: var(--bui-space-7); - } - - .xl\:bui-gap-8 { - gap: var(--bui-space-8); - } - - .xl\:bui-gap-9 { - gap: var(--bui-space-9); - } - - .xl\:bui-gap-10 { - gap: var(--bui-space-10); - } - - .xl\:bui-gap-11 { - gap: var(--bui-space-11); - } - - .xl\:bui-gap-12 { - gap: var(--bui-space-12); - } - - .xl\:bui-gap-13 { - gap: var(--bui-space-13); - } - - .xl\:bui-gap-14 { - gap: var(--bui-space-14); - } -} - -.bui-align-start { - align-items: start; -} - -.bui-align-center { - align-items: center; -} - -.bui-align-end { - align-items: end; -} - -.bui-align-baseline { - align-items: baseline; -} - -.bui-align-stretch { - align-items: stretch; -} - -.bui-jc-start { - justify-content: start; -} - -.bui-jc-center { - justify-content: center; -} - -.bui-jc-end { - justify-content: end; -} - -.bui-jc-between { - justify-content: space-between; -} - -.bui-fd-row { - flex-direction: row; -} - -.bui-fd-column { - flex-direction: column; -} - -.bui-fd-row-reverse { - flex-direction: row-reverse; -} - -.bui-fd-column-reverse { - flex-direction: column-reverse; -} - -@media (width >= 640px) { - .xs\:bui-align-start { - align-items: start; - } - - .xs\:bui-align-center { - align-items: center; - } - - .xs\:bui-align-end { - align-items: end; - } - - .xs\:bui-align-stretch { - align-items: stretch; - } - - .xs\:bui-jc-start { - justify-content: start; - } - - .xs\:bui-jc-center { - justify-content: center; - } - - .xs\:bui-jc-end { - justify-content: end; - } - - .xs\:bui-jc-between { - justify-content: space-between; - } - - .xs\:bui-fd-row { - flex-direction: row; - } - - .xs\:bui-fd-column { - flex-direction: column; - } - - .xs\:bui-fd-row-reverse { - flex-direction: row-reverse; - } - - .xs\:bui-fd-column-reverse { - flex-direction: column-reverse; - } -} - -@media (width >= 768px) { - .sm\:bui-align-start { - align-items: start; - } - - .sm\:bui-align-center { - align-items: center; - } - - .sm\:bui-align-end { - align-items: end; - } - - .sm\:bui-align-stretch { - align-items: stretch; - } - - .sm\:bui-jc-start { - justify-content: start; - } - - .sm\:bui-jc-center { - justify-content: center; - } - - .sm\:bui-jc-end { - justify-content: end; - } - - .sm\:bui-jc-between { - justify-content: space-between; - } - - .sm\:bui-fd-row { - flex-direction: row; - } - - .sm\:bui-fd-column { - flex-direction: column; - } - - .sm\:bui-fd-row-reverse { - flex-direction: row-reverse; - } - - .sm\:bui-fd-column-reverse { - flex-direction: column-reverse; - } -} - -@media (width >= 1024px) { - .md\:bui-align-start { - align-items: start; - } - - .md\:bui-align-center { - align-items: center; - } - - .md\:bui-align-end { - align-items: end; - } - - .md\:bui-align-stretch { - align-items: stretch; - } - - .md\:bui-jc-start { - justify-content: start; - } - - .md\:bui-jc-center { - justify-content: center; - } - - .md\:bui-jc-end { - justify-content: end; - } - - .md\:bui-jc-between { - justify-content: space-between; - } - - .md\:bui-fd-row { - flex-direction: row; - } - - .md\:bui-fd-column { - flex-direction: column; - } - - .md\:bui-fd-row-reverse { - flex-direction: row-reverse; - } - - .md\:bui-fd-column-reverse { - flex-direction: column-reverse; - } -} - -@media (width >= 1280px) { - .lg\:bui-align-start { - align-items: start; - } - - .lg\:bui-align-center { - align-items: center; - } - - .lg\:bui-align-end { - align-items: end; - } - - .lg\:bui-align-stretch { - align-items: stretch; - } - - .lg\:bui-jc-start { - justify-content: start; - } - - .lg\:bui-jc-center { - justify-content: center; - } - - .lg\:bui-jc-end { - justify-content: end; - } - - .lg\:bui-jc-between { - justify-content: space-between; - } - - .lg\:bui-fd-row { - flex-direction: row; - } - - .lg\:bui-fd-column { - flex-direction: column; - } - - .lg\:bui-fd-row-reverse { - flex-direction: row-reverse; - } - - .lg\:bui-fd-column-reverse { - flex-direction: column-reverse; - } -} - -@media (width >= 1536px) { - .xl\:bui-align-start { - align-items: start; - } - - .xl\:bui-align-center { - align-items: center; - } - - .xl\:bui-align-end { - align-items: end; - } - - .xl\:bui-align-stretch { - align-items: stretch; - } - - .xl\:bui-jc-start { - justify-content: start; - } - - .xl\:bui-jc-center { - justify-content: center; - } - - .xl\:bui-jc-end { - justify-content: end; - } - - .xl\:bui-jc-between { - justify-content: space-between; - } - - .xl\:bui-fd-row { - flex-direction: row; - } - - .xl\:bui-fd-column { - flex-direction: column; - } - - .xl\:bui-fd-row-reverse { - flex-direction: row-reverse; - } - - .xl\:bui-fd-column-reverse { - flex-direction: column-reverse; - } -} - -:where(a) { - color: inherit; - text-decoration: none; -} - -@keyframes pulse { - 50% { - opacity: .5; - } -} - -body { - background-color: var(--bui-bg); -} - -: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); + @keyframes pulse { + 50% { + opacity: .5; } } -} -.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: ""; + body { 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; -} +@layer components { + .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-HeaderToolbarContent { - align-items: center; - gap: var(--bui-space-2); - flex-direction: row; - display: flex; -} + .bui-AvatarRoot[data-size="small"] { + width: 1.5rem; + height: 1.5rem; + } -.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-AvatarRoot[data-size="medium"] { + width: 2rem; + height: 2rem; + } -.bui-HeaderToolbarIcon { - width: 16px; - height: 16px; - color: var(--bui-fg-primary); + .bui-AvatarRoot[data-size="large"] { + width: 3rem; + height: 3rem; + } - & svg { + .bui-AvatarImage { + object-fit: cover; 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-MenuPopover { - border: 1px solid var(--bui-border); - border-radius: var(--bui-radius-2); - background: var(--bui-bg-surface-1); - color: var(--bui-fg-primary); - outline: none; - flex-direction: column; - min-height: 0; - transition: transform .2s, opacity .2s; - display: flex; - overflow: hidden; - - &[data-entering], &[data-exiting] { - transform: var(--origin); - opacity: 0; + .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; } - &[data-placement="top"] { - --origin: translateY(8px); - } - - &[data-placement="bottom"] { - --origin: translateY(-8px); - } - - &[data-placement="right"] { - --origin: translateX(-8px); - } - - &[data-placement="left"] { - --origin: translateX(8px); - } -} - -.bui-MenuContent { - max-height: inherit; - box-sizing: border-box; - padding: var(--bui-space-1); - outline: none; - min-width: 150px; - overflow: auto; -} - -.bui-MenuPopover .bui-ScrollAreaRoot { - flex-direction: column; - flex: 1; - height: 100%; - min-height: 0; - display: flex; -} - -.bui-MenuPopover .bui-ScrollAreaScrollbar { - margin-inline: var(--bui-space-1_5); -} - -.bui-MenuItem { - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - justify-content: space-between; - align-items: center; - gap: var(--bui-space-6); - outline: none; - display: flex; - - &[data-focused], &[data-open] { - background: var(--bui-bg-surface-2); + .bui-Box { + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); color: var(--bui-fg-primary); } - &[data-color="danger"] { + .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-MenuPopover { + border: 1px solid var(--bui-border); + border-radius: var(--bui-radius-2); + background: var(--bui-bg-surface-1); + color: var(--bui-fg-primary); + outline: none; + flex-direction: column; + min-height: 0; + transition: transform .2s, opacity .2s; + display: flex; + overflow: hidden; + + &[data-entering], &[data-exiting] { + transform: var(--origin); + opacity: 0; + } + + &[data-placement="top"] { + --origin: translateY(8px); + } + + &[data-placement="bottom"] { + --origin: translateY(-8px); + } + + &[data-placement="right"] { + --origin: translateX(-8px); + } + + &[data-placement="left"] { + --origin: translateX(8px); + } + } + + .bui-MenuContent { + max-height: inherit; + box-sizing: border-box; + padding: var(--bui-space-1); + outline: none; + min-width: 150px; + overflow: auto; + } + + .bui-MenuPopover .bui-ScrollAreaRoot { + flex-direction: column; + flex: 1; + height: 100%; + min-height: 0; + display: flex; + } + + .bui-MenuPopover .bui-ScrollAreaScrollbar { + margin-inline: var(--bui-space-1_5); + } + + .bui-MenuItem { + height: 2rem; + padding-inline: var(--bui-space-2); + border-radius: var(--bui-radius-2); + cursor: default; + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-3); + justify-content: space-between; + align-items: center; + gap: var(--bui-space-6); + outline: none; + display: flex; + + &[data-focused], &[data-open] { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-color="danger"] { + color: var(--bui-fg-danger); + } + + &[data-color="danger"][data-focused] { + background: var(--bui-bg-danger); + color: var(--bui-fg-danger); + } + + &[data-has-submenu] { + & > .bui-MenuItemArrow { + display: block; + } + } + } + + .bui-MenuItemListBox { + height: 2rem; + padding-inline: var(--bui-space-2); + border-radius: var(--bui-radius-2); + cursor: default; + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-3); + justify-content: space-between; + align-items: center; + gap: var(--bui-space-6); + outline: none; + display: flex; + + &:hover { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-selected] .bui-MenuItemListBoxCheck { + & > svg { + opacity: 1; + color: var(--bui-fg-primary); + } + } + } + + .bui-MenuItemListBoxCheck { + justify-content: center; + align-items: center; + width: 1rem; + height: 1rem; + display: flex; + + & > svg { + opacity: 0; + width: 1rem; + height: 1rem; + } + } + + .bui-MenuItemContent { + align-items: center; + gap: var(--bui-space-2); + display: flex; + + & > svg { + width: 1rem; + height: 1rem; + } + } + + .bui-MenuItemArrow { + width: 1rem; + height: 1rem; + display: none; + + & > svg { + width: 1rem; + height: 1rem; + } + } + + .bui-MenuSection { + &:first-child .bui-MenuSectionHeader { + padding-top: 0; + } + } + + .bui-MenuSectionHeader { + height: 2rem; + padding-top: var(--bui-space-3); + padding-left: var(--bui-space-2); + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-1); + letter-spacing: .05rem; + text-transform: uppercase; + align-items: center; + font-weight: bold; + display: flex; + } + + .bui-MenuSeparator { + background: var(--bui-border); + height: 1px; + margin-inline: var(--bui-space-1_5); + margin-block: var(--bui-space-1); + } + + .bui-MenuSearchField { + font-family: var(--bui-font-regular); + flex-shrink: 0; + width: 100%; + position: relative; + + &[data-empty] { + & .bui-MenuSearchFieldClear { + display: none; + } + } + } + + .bui-MenuSearchFieldInput { + padding: 0 var(--bui-space-3); + border: none; + border-bottom: 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: 2rem; + cursor: inherit; + outline: none; + align-items: center; + display: flex; + + &::-webkit-search-cancel-button, &::-webkit-search-decoration { + -webkit-appearance: none; + } + } + + .bui-MenuSearchFieldClear { + right: var(--bui-space-2); + 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; + + & > svg { + width: 1rem; + height: 1rem; + } + } + + .bui-MenuEmptyState { + padding: var(--bui-space-1); + color: var(--bui-fg-secondary); + font-size: var(--bui-font-size-3); + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); + } + + .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-TagList { + gap: var(--bui-space-2); + flex-wrap: wrap; + display: flex; + } + + .bui-Tag { + color: var(--bui-fg-primary); + background-color: var(--bui-gray-2); + border-radius: var(--bui-radius-2); + font-weight: var(--bui-font-weight-regular); + justify-content: center; + align-items: center; + gap: var(--bui-space-1); + box-sizing: border-box; + transition-property: background-color, box-shadow, color; + transition-duration: .2s; + transition-timing-function: ease-in-out; + display: flex; + } + + .bui-Tag[data-size="small"] { + height: 26px; + padding: 0 var(--bui-space-2); + font-size: var(--bui-font-size-1); + } + + .bui-Tag[data-size="medium"] { + height: 32px; + padding: 0 var(--bui-space-2); + font-size: var(--bui-font-size-2); + } + + .bui-Tag[data-hovered] { + background-color: var(--bui-gray-3); + cursor: pointer; + } + + .bui-Tag[data-focus-visible] { + outline: 2px solid var(--bui-ring); + outline-offset: 1px; + } + + .bui-Tag[data-selected] { + box-shadow: inset 0 0 0 1px var(--bui-gray-8); + } + + .bui-Tag[data-disabled] { + color: var(--bui-fg-disabled); + cursor: not-allowed; + } + + .bui-TagRemoveButton { + cursor: pointer; + color: var(--bui-fg-primary); + background-color: #0000; + border: none; + width: 1rem; + height: 1rem; + margin: 0; + padding: 0; + } + + .bui-TagIcon { + justify-content: center; + align-items: center; + transition: color .2s ease-in-out; + display: flex; + + & svg { + width: 1rem; + height: 1rem; + } + } + + .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); } - &[data-color="danger"][data-focused] { - background: var(--bui-bg-danger); - color: var(--bui-fg-danger); + .bui-Text[data-color="warning"] { + color: var(--bui-fg-warning); } - &[data-has-submenu] { - & > .bui-MenuItemArrow { + .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-PasswordField { + font-family: var(--bui-font-regular); + --bui-passwordmanager-icon-width: var(--bui-space-1); + flex-direction: column; + flex-shrink: 0; + width: 100%; + display: flex; + } + + .bui-InputVisibility { + right: var(--bui-passwordmanager-icon-width); + cursor: pointer; + color: var(--bui-fg-primary); + background-color: #0000; + border: none; + justify-content: center; + align-items: center; + margin: 0; + padding: 0; + display: flex; + position: absolute; + top: 0; + bottom: 0; + + &[data-size="small"] { + width: 2rem; + height: 2rem; + } + + &[data-size="small"] svg { + width: 1rem; + height: 1rem; + } + + &[data-size="medium"] { + width: 2.5rem; + height: 2.5rem; + } + + &[data-size="medium"] svg { + width: 1.25rem; + height: 1.25rem; + } + } + + .bui-PasswordField .bui-InputWrapper[data-size="small"] .bui-Input { + padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); + } + + .bui-PasswordField .bui-InputWrapper[data-size="medium"] .bui-Input { + padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); + } + + .bui-SearchField { + flex: 1 0; + + &[data-empty] { + & .bui-InputClear { + display: none; + } + } + + &[data-start-collapsed="true"] { + flex: 0 auto; + padding: 0; + transition: flex-basis .3s ease-in-out; + + &[data-collapsed="true"] { + flex-basis: 200px; + } + + &[data-collapsed="false"] { + cursor: pointer; + + &[data-size="medium"] { + flex-basis: 2.5rem; + height: 2.5rem; + } + + &[data-size="small"] { + flex-basis: 2rem; + height: 2rem; + } + + &[data-size="medium"] .bui-Input { + &::placeholder { + opacity: 0; + } + } + + &[data-size="small"] .bui-Input { + &::placeholder { + opacity: 0; + } + } + + & .bui-InputWrapper { + & .bui-Input[data-icon] { + padding-right: 0; + } + } + } + } + } + + .bui-SearchField .bui-Input { + transition: padding .3s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out; + + &[data-hovered] { + border-color: var(--bui-border-hover); + } + + &[data-focused] { + border-color: var(--bui-border-pressed); + outline-width: 0; + } + } + + .bui-SearchField .bui-InputWrapper { + & .bui-Input[data-icon] { + padding-right: var(--bui-space-6); + } + } + + .bui-SearchField .bui-InputIcon { + justify-content: center; + display: flex; + left: 0; + + &[data-size="small"] { + width: var(--bui-space-8); + } + + &[data-size="medium"] { + width: var(--bui-space-10); + } + } + + .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: translate3d(0, 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: translateX(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; } } } -.bui-MenuItemListBox { - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - justify-content: space-between; - align-items: center; - gap: var(--bui-space-6); - outline: none; - display: flex; - - &:hover { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); +@layer utilities { + .bui-p { + padding: var(--p); } - &[data-selected] .bui-MenuItemListBoxCheck { - & > svg { - opacity: 1; - color: var(--bui-fg-primary); - } - } -} - -.bui-MenuItemListBoxCheck { - justify-content: center; - align-items: center; - width: 1rem; - height: 1rem; - display: flex; - - & > svg { - opacity: 0; - width: 1rem; - height: 1rem; - } -} - -.bui-MenuItemContent { - align-items: center; - gap: var(--bui-space-2); - display: flex; - - & > svg { - width: 1rem; - height: 1rem; - } -} - -.bui-MenuItemArrow { - width: 1rem; - height: 1rem; - display: none; - - & > svg { - width: 1rem; - height: 1rem; - } -} - -.bui-MenuSection { - &:first-child .bui-MenuSectionHeader { - padding-top: 0; - } -} - -.bui-MenuSectionHeader { - height: 2rem; - padding-top: var(--bui-space-3); - padding-left: var(--bui-space-2); - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-1); - letter-spacing: .05rem; - text-transform: uppercase; - align-items: center; - font-weight: bold; - display: flex; -} - -.bui-MenuSeparator { - background: var(--bui-border); - height: 1px; - margin-inline: var(--bui-space-1_5); - margin-block: var(--bui-space-1); -} - -.bui-MenuSearchField { - font-family: var(--bui-font-regular); - flex-shrink: 0; - width: 100%; - position: relative; - - &[data-empty] { - & .bui-MenuSearchFieldClear { - display: none; - } - } -} - -.bui-MenuSearchFieldInput { - padding: 0 var(--bui-space-3); - border: none; - border-bottom: 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: 2rem; - cursor: inherit; - outline: none; - align-items: center; - display: flex; - - &::-webkit-search-cancel-button, &::-webkit-search-decoration { - -webkit-appearance: none; - } -} - -.bui-MenuSearchFieldClear { - right: var(--bui-space-2); - 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; - - & > svg { - width: 1rem; - height: 1rem; - } -} - -.bui-MenuEmptyState { - padding: var(--bui-space-1); - color: var(--bui-fg-secondary); - font-size: var(--bui-font-size-3); - font-family: var(--bui-font-regular); - font-weight: var(--bui-font-weight-regular); -} - -.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; + .bui-p-0\.5 { + padding: var(--bui-space-0_5); } - &[data-pressed]:before { - border-color: var(--bui-border); + .bui-p-1 { + padding: var(--bui-space-1); } - &[data-selected] { - &:before { - border-color: var(--bui-bg-solid); - border-width: .25rem; + .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); } - &[data-pressed]:before { - border-color: var(--bui-bg-solid); + .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); } } - &[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); + @media (width >= 768px) { + .sm\:bui-p { + padding: var(--p-sm); } - &[data-selected]:before { - border-color: var(--bui-border-disabled); + .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); } } - &[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); + @media (width >= 1024px) { + .md\:bui-p { + padding: var(--p-md); } - &[data-selected]:before { - border-color: var(--bui-border-disabled); + .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); } } -} -.bui-Table { - caption-side: bottom; - border-collapse: collapse; - width: 100%; -} + @media (width >= 1280px) { + .lg\:bui-p { + padding: var(--p-lg); + } -.bui-TableHeader { - border-bottom: 1px solid var(--bui-border); - transition: color .2s ease-in-out; -} + .lg\:bui-p-0\.5 { + padding: var(--bui-space-0_5); + } -.bui-TableHead { - text-align: left; - padding: var(--bui-space-3); - font-size: var(--bui-font-size-3); - color: var(--bui-fg-primary); -} + .lg\:bui-p-1 { + padding: var(--bui-space-1); + } -.bui-TableHeadSortButton { - cursor: pointer; - user-select: none; - align-items: center; - gap: var(--bui-space-1); - display: inline-flex; + .lg\:bui-p-1\.5 { + padding: var(--bui-space-1_5); + } - &:hover svg { - opacity: .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); + } } - & svg { - opacity: 0; - transition: opacity .1s ease-in-out, transform .1s ease-in-out; + @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); + } } - &[data-sort-order="asc"] svg { - opacity: 1; - transform: rotate(0); + .bui-pl { + padding-left: var(--pl); } - &[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-TagList { - gap: var(--bui-space-2); - flex-wrap: wrap; - display: flex; -} - -.bui-Tag { - color: var(--bui-fg-primary); - background-color: var(--bui-gray-2); - border-radius: var(--bui-radius-2); - font-weight: var(--bui-font-weight-regular); - justify-content: center; - align-items: center; - gap: var(--bui-space-1); - box-sizing: border-box; - transition-property: background-color, box-shadow, color; - transition-duration: .2s; - transition-timing-function: ease-in-out; - display: flex; -} - -.bui-Tag[data-size="small"] { - height: 26px; - padding: 0 var(--bui-space-2); - font-size: var(--bui-font-size-1); -} - -.bui-Tag[data-size="medium"] { - height: 32px; - padding: 0 var(--bui-space-2); - font-size: var(--bui-font-size-2); -} - -.bui-Tag[data-hovered] { - background-color: var(--bui-gray-3); - cursor: pointer; -} - -.bui-Tag[data-focus-visible] { - outline: 2px solid var(--bui-ring); - outline-offset: 1px; -} - -.bui-Tag[data-selected] { - box-shadow: inset 0 0 0 1px var(--bui-gray-8); -} - -.bui-Tag[data-disabled] { - color: var(--bui-fg-disabled); - cursor: not-allowed; -} - -.bui-TagRemoveButton { - cursor: pointer; - color: var(--bui-fg-primary); - background-color: #0000; - border: none; - width: 1rem; - height: 1rem; - margin: 0; - padding: 0; -} - -.bui-TagIcon { - justify-content: center; - align-items: center; - transition: color .2s ease-in-out; - display: flex; - - & svg { - width: 1rem; - height: 1rem; - } -} - -.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; + .bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); } - &[data-size="medium"] .bui-Input { - height: 2.5rem; + .bui-pl-1 { + padding-left: var(--bui-space-1); } - &[data-size="small"] .bui-Input[data-icon] { + .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); } - &[data-size="medium"] .bui-Input[data-icon] { + .bui-pl-9 { 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; + .bui-pl-10 { + padding-left: var(--bui-space-10); } - &[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; + .bui-pl-11 { + padding-left: var(--bui-space-11); } - &::placeholder { - color: var(--bui-fg-secondary); + .bui-pl-12 { + padding-left: var(--bui-space-12); } - &[data-focused] { - outline-color: var(--bui-border-pressed); - outline-width: 0; + .bui-pl-13 { + padding-left: var(--bui-space-13); } - &[data-hovered] { - border-color: var(--bui-border-hover); + .bui-pl-14 { + padding-left: var(--bui-space-14); } - &[data-focused] { - border-color: var(--bui-border-pressed); - outline-width: 0; - } + @media (width >= 640px) { + .xs\:bui-pl { + padding-left: var(--pl-xs); + } - &[data-invalid] { - border-color: var(--bui-fg-danger); - } + .xs\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } - &[data-disabled] { - opacity: .5; - cursor: not-allowed; - border: 1px solid var(--bui-border-disabled); - } -} + .xs\:bui-pl-1 { + padding-left: var(--bui-space-1); + } -.bui-PasswordField { - font-family: var(--bui-font-regular); - --bui-passwordmanager-icon-width: var(--bui-space-1); - flex-direction: column; - flex-shrink: 0; - width: 100%; - display: flex; -} + .xs\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } -.bui-InputVisibility { - right: var(--bui-passwordmanager-icon-width); - cursor: pointer; - color: var(--bui-fg-primary); - background-color: #0000; - border: none; - justify-content: center; - align-items: center; - margin: 0; - padding: 0; - display: flex; - position: absolute; - top: 0; - bottom: 0; + .xs\:bui-pl-2 { + padding-left: var(--bui-space-2); + } - &[data-size="small"] { - width: 2rem; - height: 2rem; - } + .xs\:bui-pl-3 { + padding-left: var(--bui-space-3); + } - &[data-size="small"] svg { - width: 1rem; - height: 1rem; - } + .xs\:bui-pl-4 { + padding-left: var(--bui-space-4); + } - &[data-size="medium"] { - width: 2.5rem; - height: 2.5rem; - } + .xs\:bui-pl-5 { + padding-left: var(--bui-space-5); + } - &[data-size="medium"] svg { - width: 1.25rem; - height: 1.25rem; - } -} + .xs\:bui-pl-6 { + padding-left: var(--bui-space-6); + } -.bui-PasswordField .bui-InputWrapper[data-size="small"] .bui-Input { - padding-right: calc(2rem + var(--bui-passwordmanager-icon-width)); -} + .xs\:bui-pl-7 { + padding-left: var(--bui-space-7); + } -.bui-PasswordField .bui-InputWrapper[data-size="medium"] .bui-Input { - padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width)); -} + .xs\:bui-pl-8 { + padding-left: var(--bui-space-8); + } -.bui-SearchField { - flex: 1 0; + .xs\:bui-pl-9 { + padding-left: var(--bui-space-9); + } - &[data-empty] { - & .bui-InputClear { - display: none; + .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); } } - &[data-start-collapsed="true"] { - flex: 0 auto; - padding: 0; - transition: flex-basis .3s ease-in-out; - - &[data-collapsed="true"] { - flex-basis: 200px; + @media (width >= 768px) { + .sm\:bui-pl { + padding-left: var(--pl-sm); } - &[data-collapsed="false"] { - cursor: pointer; + .sm\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } - &[data-size="medium"] { - flex-basis: 2.5rem; - height: 2.5rem; - } + .sm\:bui-pl-1 { + padding-left: var(--bui-space-1); + } - &[data-size="small"] { - flex-basis: 2rem; - height: 2rem; - } + .sm\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } - &[data-size="medium"] .bui-Input { - &::placeholder { - opacity: 0; - } - } + .sm\:bui-pl-2 { + padding-left: var(--bui-space-2); + } - &[data-size="small"] .bui-Input { - &::placeholder { - opacity: 0; - } - } + .sm\:bui-pl-3 { + padding-left: var(--bui-space-3); + } - & .bui-InputWrapper { - & .bui-Input[data-icon] { - padding-right: 0; - } - } + .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); } } -} -.bui-SearchField .bui-Input { - transition: padding .3s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out; + @media (width >= 1024px) { + .md\:bui-pl { + padding-left: var(--pl-md); + } - &[data-hovered] { - border-color: var(--bui-border-hover); + .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); + } } - &[data-focused] { - border-color: var(--bui-border-pressed); - outline-width: 0; - } -} + @media (width >= 1280px) { + .lg\:bui-pl { + padding-left: var(--pl-lg); + } -.bui-SearchField .bui-InputWrapper { - & .bui-Input[data-icon] { + .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-SearchField .bui-InputIcon { - justify-content: center; - display: flex; - left: 0; - - &[data-size="small"] { - width: var(--bui-space-8); + .bui-pr-7 { + padding-right: var(--bui-space-7); } - &[data-size="medium"] { - width: var(--bui-space-10); - } -} - -.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: translate3d(0, 0, 0); - box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; - - &[data-entering], &[data-exiting] { - transform: var(--origin); - opacity: 0; + .bui-pr-8 { + padding-right: var(--bui-space-8); } - --tooltip-offset: var(--bui-space-3); - - &[data-placement="top"] { - margin-bottom: var(--tooltip-offset); - --origin: translateY(4px); + .bui-pr-9 { + padding-right: var(--bui-space-9); } - &[data-placement="right"] { - margin-left: var(--tooltip-offset); - --origin: translateX(-4px); + .bui-pr-10 { + padding-right: var(--bui-space-10); } - &[data-placement="bottom"] { - margin-top: var(--tooltip-offset); - --origin: translateY(-4px); + .bui-pr-11 { + padding-right: var(--bui-space-11); } - &[data-placement="left"] { - margin-right: var(--tooltip-offset); - --origin: translateX(4px); + .bui-pr-12 { + padding-right: var(--bui-space-12); } -} -.bui-TooltipArrow { - & svg { - display: block; + .bui-pr-13 { + padding-right: var(--bui-space-13); + } - & path:first-child { - fill: var(--bui-bg-surface-1); + .bui-pr-14 { + padding-right: var(--bui-space-14); + } + + @media (width >= 640px) { + .xs\:bui-pr { + padding-right: var(--pr-xs); } - & path:nth-child(2) { - fill: var(--bui-gray-3); + .xs\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); } - --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); + .xs\:bui-pr-1 { + padding-right: var(--bui-space-1); } - & svg path:nth-child(2) { - fill: var(--bui-gray-4); + .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); } } -} -.bui-ScrollAreaRoot { - box-sizing: border-box; - width: 100%; -} + @media (width >= 768px) { + .sm\:bui-pr { + padding-right: var(--pr-sm); + } -.bui-ScrollAreaViewport { - overscroll-behavior: contain; - height: 100%; -} + .sm\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } -.bui-ScrollAreaContent { - padding-block: .75rem; - flex-direction: column; - gap: 1rem; - padding-left: 1rem; - padding-right: 1.5rem; - display: flex; -} + .sm\:bui-pr-1 { + padding-right: var(--bui-space-1); + } -.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; + .sm\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } - &[data-hovering], &[data-scrolling] { - opacity: 1; - transition-duration: 75ms; - transition-delay: 0s; + .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); + } } - &:before { - content: ""; - width: 1.25rem; - height: 100%; - position: absolute; - } -} + @media (width >= 1024px) { + .md\:bui-pr { + padding-right: var(--pr-md); + } -.bui-ScrollAreaThumb { - border-radius: inherit; - background-color: var(--bui-scrollbar-thumb); - width: 100%; -} + .md\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } -.bui-Select[data-invalid] { - & .bui-SelectTrigger { - border-color: var(--bui-fg-danger); - } -} + .md\:bui-pr-1 { + padding-right: var(--bui-space-1); + } -.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; + .md\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } - & svg { - color: var(--bui-fg-secondary); - flex-shrink: 0; + .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); + } } - &[data-size="small"] { - height: 2rem; - padding-inline: var(--bui-space-3); + @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); + } } - &[data-size="medium"] { - height: 3rem; - padding-inline: var(--bui-space-4); + @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); + } } - &[data-size="small"] svg { - width: 1rem; - height: 1rem; + .bui-pt { + padding-top: var(--pt); } - &[data-size="medium"] svg { - width: 1.25rem; - height: 1.25rem; + .bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); } - &::placeholder { - color: var(--bui-fg-secondary); + .bui-pt-1 { + padding-top: var(--bui-space-1); } - &:hover { - border-color: var(--bui-border-hover); - transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; + .bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); } - &:focus-visible { - border-color: var(--bui-border-pressed); - outline: 0; + .bui-pt-2 { + padding-top: var(--bui-space-2); } - &[data-invalid] { - border-color: var(--bui-fg-danger); + .bui-pt-3 { + padding-top: var(--bui-space-3); } - &[data-invalid]:hover, &[data-invalid]:focus-visible { - border-width: 2px; + .bui-pt-4 { + padding-top: var(--bui-space-4); } - &[disabled] { - cursor: not-allowed; - border-color: var(--bui-border-disabled); - color: var(--bui-fg-disabled); + .bui-pt-5 { + padding-top: var(--bui-space-5); } - &[disabled] .bui-SelectValue { - color: var(--bui-fg-disabled); + .bui-pt-6 { + padding-top: var(--bui-space-6); } - &[data-popup-open] .bui-SelectIcon { - transform: rotate(180deg); + .bui-pt-7 { + padding-top: var(--bui-space-7); } -} -.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-pt-8 { + padding-top: var(--bui-space-8); + } - & .bui-SelectItemIndicator { + .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; } - &[disabled] { - color: var(--bui-fg-disabled); + .bui-display-inline { + display: inline; } -} -.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; + .bui-display-inline-block { + display: inline-block; + } - &[data-focused] { - z-index: 0; - color: var(--bui-fg-primary); + .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; } - &[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; + .bui-position-static { + position: static; } - &[data-disabled] { - cursor: not-allowed; - color: var(--bui-fg-disabled); - } + @media (width >= 640px) { + .xs\:bui-position-absolute { + position: absolute; + } - &[data-selected] .bui-SelectItemIndicator { - opacity: 1; - } -} + .xs\:bui-position-fixed { + position: fixed; + } -.bui-SelectItemIndicator { - opacity: 0; - grid-area: icon; - justify-content: center; - align-items: center; - transition: opacity .2s ease-in-out; - display: flex; -} + .xs\:bui-position-sticky { + position: sticky; + } -.bui-SelectItemLabel { - flex: 1; - grid-area: text; -} + .xs\:bui-position-relative { + position: relative; + } -.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); + .xs\:bui-position-static { + position: static; } } - &[data-selected] { - & .bui-SwitchIndicator { - background: var(--bui-bg-solid); - - &:before { - background: var(--bui-fg-solid); - transform: translateX(100%); - } + @media (width >= 768px) { + .sm\:bui-position-absolute { + position: absolute; } - &[data-pressed] { - & .indicator { - background: var(--bui-gray-3); - } + .sm\:bui-position-fixed { + position: fixed; + } + + .sm\:bui-position-sticky { + position: sticky; + } + + .sm\:bui-position-relative { + position: relative; + } + + .sm\:bui-position-static { + position: static; } } - &[data-focus-visible] .bui-SwitchIndicator { - outline-offset: 2px; - outline: 2px solid; + @media (width >= 1024px) { + .md\:bui-position-absolute { + position: absolute; + } + + .md\:bui-position-fixed { + position: fixed; + } + + .md\:bui-position-sticky { + position: sticky; + } + + .md\:bui-position-relative { + position: relative; + } + + .md\:bui-position-static { + position: static; + } + } + + @media (width >= 1280px) { + .lg\:bui-position-absolute { + position: absolute; + } + + .lg\:bui-position-fixed { + position: fixed; + } + + .lg\:bui-position-sticky { + position: sticky; + } + + .lg\:bui-position-relative { + position: relative; + } + + .lg\:bui-position-static { + position: static; + } + } + + @media (width >= 1536px) { + .xl\:bui-position-absolute { + position: absolute; + } + + .xl\:bui-position-fixed { + position: fixed; + } + + .xl\:bui-position-sticky { + position: sticky; + } + + .xl\:bui-position-relative { + position: relative; + } + + .xl\:bui-position-static { + position: static; + } + } + + .bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .bui-col-span-1 { + grid-column: span 1 / span 1; + } + + .bui-col-span-2 { + grid-column: span 2 / span 2; + } + + .bui-col-span-3 { + grid-column: span 3 / span 3; + } + + .bui-col-span-4 { + grid-column: span 4 / span 4; + } + + .bui-col-span-5 { + grid-column: span 5 / span 5; + } + + .bui-col-span-6 { + grid-column: span 6 / span 6; + } + + .bui-col-span-7 { + grid-column: span 7 / span 7; + } + + .bui-col-span-8 { + grid-column: span 8 / span 8; + } + + .bui-col-span-9 { + grid-column: span 9 / span 9; + } + + .bui-col-span-10 { + grid-column: span 10 / span 10; + } + + .bui-col-span-11 { + grid-column: span 11 / span 11; + } + + .bui-col-span-12 { + grid-column: span 12 / span 12; + } + + .bui-col-span-auto { + grid-column: span auto / span auto; + } + + .bui-col-start-1 { + grid-column-start: 1; + } + + .bui-col-start-2 { + grid-column-start: 2; + } + + .bui-col-start-3 { + grid-column-start: 3; + } + + .bui-col-start-4 { + grid-column-start: 4; + } + + .bui-col-start-5 { + grid-column-start: 5; + } + + .bui-col-start-6 { + grid-column-start: 6; + } + + .bui-col-start-7 { + grid-column-start: 7; + } + + .bui-col-start-8 { + grid-column-start: 8; + } + + .bui-col-start-9 { + grid-column-start: 9; + } + + .bui-col-start-10 { + grid-column-start: 10; + } + + .bui-col-start-11 { + grid-column-start: 11; + } + + .bui-col-start-12 { + grid-column-start: 12; + } + + .bui-col-start-13 { + grid-column-start: 13; + } + + .bui-col-start-auto { + grid-column-start: auto; + } + + .bui-col-end-1 { + grid-column-end: 1; + } + + .bui-col-end-2 { + grid-column-end: 2; + } + + .bui-col-end-3 { + grid-column-end: 3; + } + + .bui-col-end-4 { + grid-column-end: 4; + } + + .bui-col-end-5 { + grid-column-end: 5; + } + + .bui-col-end-6 { + grid-column-end: 6; + } + + .bui-col-end-7 { + grid-column-end: 7; + } + + .bui-col-end-8 { + grid-column-end: 8; + } + + .bui-col-end-9 { + grid-column-end: 9; + } + + .bui-col-end-10 { + grid-column-end: 10; + } + + .bui-col-end-11 { + grid-column-end: 11; + } + + .bui-col-end-12 { + grid-column-end: 12; + } + + .bui-col-end-13 { + grid-column-end: 13; + } + + .bui-col-end-auto { + grid-column-end: auto; + } + + .bui-row-span-1 { + grid-row: span 1 / span 1; + } + + .bui-row-span-2 { + grid-row: span 2 / span 2; + } + + .bui-row-span-3 { + grid-row: span 3 / span 3; + } + + .bui-row-span-4 { + grid-row: span 4 / span 4; + } + + .bui-row-span-5 { + grid-row: span 5 / span 5; + } + + .bui-row-span-6 { + grid-row: span 6 / span 6; + } + + .bui-row-span-7 { + grid-row: span 7 / span 7; + } + + .bui-row-span-8 { + grid-row: span 8 / span 8; + } + + .bui-row-span-9 { + grid-row: span 9 / span 9; + } + + .bui-row-span-10 { + grid-row: span 10 / span 10; + } + + .bui-row-span-11 { + grid-row: span 11 / span 11; + } + + .bui-row-span-12 { + grid-row: span 12 / span 12; + } + + .bui-row-span-auto { + grid-row: span auto / span auto; + } + + @media (width >= 640px) { + .xs\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .xs\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .xs\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .xs\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .xs\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .xs\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .xs\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .xs\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .xs\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .xs\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .xs\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .xs\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .xs\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .xs\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + + .xs\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + + .xs\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + + .xs\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + + .xs\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + + .xs\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + + .xs\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + + .xs\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + + .xs\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + + .xs\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + + .xs\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + + .xs\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + + .xs\:bui-col-span-auto { + grid-column: span auto / span auto; + } + + .xs\:bui-col-start-1 { + grid-column-start: 1; + } + + .xs\:bui-col-start-2 { + grid-column-start: 2; + } + + .xs\:bui-col-start-3 { + grid-column-start: 3; + } + + .xs\:bui-col-start-4 { + grid-column-start: 4; + } + + .xs\:bui-col-start-5 { + grid-column-start: 5; + } + + .xs\:bui-col-start-6 { + grid-column-start: 6; + } + + .xs\:bui-col-start-7 { + grid-column-start: 7; + } + + .xs\:bui-col-start-8 { + grid-column-start: 8; + } + + .xs\:bui-col-start-9 { + grid-column-start: 9; + } + + .xs\:bui-col-start-10 { + grid-column-start: 10; + } + + .xs\:bui-col-start-11 { + grid-column-start: 11; + } + + .xs\:bui-col-start-12 { + grid-column-start: 12; + } + + .xs\:bui-col-start-13 { + grid-column-start: 13; + } + + .xs\:bui-col-start-auto { + grid-column-start: auto; + } + + .xs\:bui-col-end-1 { + grid-column-end: 1; + } + + .xs\:bui-col-end-2 { + grid-column-end: 2; + } + + .xs\:bui-col-end-3 { + grid-column-end: 3; + } + + .xs\:bui-col-end-4 { + grid-column-end: 4; + } + + .xs\:bui-col-end-5 { + grid-column-end: 5; + } + + .xs\:bui-col-end-6 { + grid-column-end: 6; + } + + .xs\:bui-col-end-7 { + grid-column-end: 7; + } + + .xs\:bui-col-end-8 { + grid-column-end: 8; + } + + .xs\:bui-col-end-9 { + grid-column-end: 9; + } + + .xs\:bui-col-end-10 { + grid-column-end: 10; + } + + .xs\:bui-col-end-11 { + grid-column-end: 11; + } + + .xs\:bui-col-end-12 { + grid-column-end: 12; + } + + .xs\:bui-col-end-13 { + grid-column-end: 13; + } + + .xs\:bui-col-end-auto { + grid-column-end: auto; + } + + .xs\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + + .xs\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + + .xs\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + + .xs\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + + .xs\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + + .xs\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + + .xs\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + + .xs\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + + .xs\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + + .xs\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + + .xs\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + + .xs\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + + .xs\:bui-row-span-auto { + grid-row: span auto / span auto; + } + } + + @media (width >= 768px) { + .sm\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .sm\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .sm\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .sm\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .sm\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .sm\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .sm\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .sm\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .sm\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .sm\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .sm\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .sm\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .sm\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + + .sm\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + + .sm\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + + .sm\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + + .sm\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + + .sm\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + + .sm\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + + .sm\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + + .sm\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + + .sm\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + + .sm\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + + .sm\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + + .sm\:bui-col-span-auto { + grid-column: span auto / span auto; + } + + .sm\:bui-col-start-1 { + grid-column-start: 1; + } + + .sm\:bui-col-start-2 { + grid-column-start: 2; + } + + .sm\:bui-col-start-3 { + grid-column-start: 3; + } + + .sm\:bui-col-start-4 { + grid-column-start: 4; + } + + .sm\:bui-col-start-5 { + grid-column-start: 5; + } + + .sm\:bui-col-start-6 { + grid-column-start: 6; + } + + .sm\:bui-col-start-7 { + grid-column-start: 7; + } + + .sm\:bui-col-start-8 { + grid-column-start: 8; + } + + .sm\:bui-col-start-9 { + grid-column-start: 9; + } + + .sm\:bui-col-start-10 { + grid-column-start: 10; + } + + .sm\:bui-col-start-11 { + grid-column-start: 11; + } + + .sm\:bui-col-start-12 { + grid-column-start: 12; + } + + .sm\:bui-col-start-13 { + grid-column-start: 13; + } + + .sm\:bui-col-start-auto { + grid-column-start: auto; + } + + .sm\:bui-col-end-1 { + grid-column-end: 1; + } + + .sm\:bui-col-end-2 { + grid-column-end: 2; + } + + .sm\:bui-col-end-3 { + grid-column-end: 3; + } + + .sm\:bui-col-end-4 { + grid-column-end: 4; + } + + .sm\:bui-col-end-5 { + grid-column-end: 5; + } + + .sm\:bui-col-end-6 { + grid-column-end: 6; + } + + .sm\:bui-col-end-7 { + grid-column-end: 7; + } + + .sm\:bui-col-end-8 { + grid-column-end: 8; + } + + .sm\:bui-col-end-9 { + grid-column-end: 9; + } + + .sm\:bui-col-end-10 { + grid-column-end: 10; + } + + .sm\:bui-col-end-11 { + grid-column-end: 11; + } + + .sm\:bui-col-end-12 { + grid-column-end: 12; + } + + .sm\:bui-col-end-13 { + grid-column-end: 13; + } + + .sm\:bui-col-end-auto { + grid-column-end: auto; + } + + .sm\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + + .sm\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + + .sm\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + + .sm\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + + .sm\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + + .sm\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + + .sm\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + + .sm\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + + .sm\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + + .sm\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + + .sm\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + + .sm\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + + .sm\:bui-row-span-auto { + grid-row: span auto / span auto; + } + } + + @media (width >= 1024px) { + .md\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .md\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .md\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .md\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .md\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .md\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .md\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .md\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .md\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .md\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .md\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .md\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .md\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .md\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + + .md\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + + .md\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + + .md\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + + .md\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + + .md\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + + .md\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + + .md\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + + .md\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + + .md\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + + .md\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + + .md\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + + .md\:bui-col-span-auto { + grid-column: span auto / span auto; + } + + .md\:bui-col-start-1 { + grid-column-start: 1; + } + + .md\:bui-col-start-2 { + grid-column-start: 2; + } + + .md\:bui-col-start-3 { + grid-column-start: 3; + } + + .md\:bui-col-start-4 { + grid-column-start: 4; + } + + .md\:bui-col-start-5 { + grid-column-start: 5; + } + + .md\:bui-col-start-6 { + grid-column-start: 6; + } + + .md\:bui-col-start-7 { + grid-column-start: 7; + } + + .md\:bui-col-start-8 { + grid-column-start: 8; + } + + .md\:bui-col-start-9 { + grid-column-start: 9; + } + + .md\:bui-col-start-10 { + grid-column-start: 10; + } + + .md\:bui-col-start-11 { + grid-column-start: 11; + } + + .md\:bui-col-start-12 { + grid-column-start: 12; + } + + .md\:bui-col-start-13 { + grid-column-start: 13; + } + + .md\:bui-col-start-auto { + grid-column-start: auto; + } + + .md\:bui-col-end-1 { + grid-column-end: 1; + } + + .md\:bui-col-end-2 { + grid-column-end: 2; + } + + .md\:bui-col-end-3 { + grid-column-end: 3; + } + + .md\:bui-col-end-4 { + grid-column-end: 4; + } + + .md\:bui-col-end-5 { + grid-column-end: 5; + } + + .md\:bui-col-end-6 { + grid-column-end: 6; + } + + .md\:bui-col-end-7 { + grid-column-end: 7; + } + + .md\:bui-col-end-8 { + grid-column-end: 8; + } + + .md\:bui-col-end-9 { + grid-column-end: 9; + } + + .md\:bui-col-end-10 { + grid-column-end: 10; + } + + .md\:bui-col-end-11 { + grid-column-end: 11; + } + + .md\:bui-col-end-12 { + grid-column-end: 12; + } + + .md\:bui-col-end-13 { + grid-column-end: 13; + } + + .md\:bui-col-end-auto { + grid-column-end: auto; + } + + .md\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + + .md\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + + .md\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + + .md\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + + .md\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + + .md\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + + .md\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + + .md\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + + .md\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + + .md\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + + .md\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + + .md\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + + .md\:bui-row-span-auto { + grid-row: span auto / span auto; + } + } + + @media (width >= 1280px) { + .lg\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .lg\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .lg\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .lg\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .lg\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .lg\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .lg\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .lg\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .lg\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .lg\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .lg\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .lg\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + + .lg\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + + .lg\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + + .lg\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + + .lg\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + + .lg\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + + .lg\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + + .lg\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + + .lg\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + + .lg\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + + .lg\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + + .lg\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + + .lg\:bui-col-span-auto { + grid-column: span auto / span auto; + } + + .lg\:bui-col-start-1 { + grid-column-start: 1; + } + + .lg\:bui-col-start-2 { + grid-column-start: 2; + } + + .lg\:bui-col-start-3 { + grid-column-start: 3; + } + + .lg\:bui-col-start-4 { + grid-column-start: 4; + } + + .lg\:bui-col-start-5 { + grid-column-start: 5; + } + + .lg\:bui-col-start-6 { + grid-column-start: 6; + } + + .lg\:bui-col-start-7 { + grid-column-start: 7; + } + + .lg\:bui-col-start-8 { + grid-column-start: 8; + } + + .lg\:bui-col-start-9 { + grid-column-start: 9; + } + + .lg\:bui-col-start-10 { + grid-column-start: 10; + } + + .lg\:bui-col-start-11 { + grid-column-start: 11; + } + + .lg\:bui-col-start-12 { + grid-column-start: 12; + } + + .lg\:bui-col-start-13 { + grid-column-start: 13; + } + + .lg\:bui-col-start-auto { + grid-column-start: auto; + } + + .lg\:bui-col-end-1 { + grid-column-end: 1; + } + + .lg\:bui-col-end-2 { + grid-column-end: 2; + } + + .lg\:bui-col-end-3 { + grid-column-end: 3; + } + + .lg\:bui-col-end-4 { + grid-column-end: 4; + } + + .lg\:bui-col-end-5 { + grid-column-end: 5; + } + + .lg\:bui-col-end-6 { + grid-column-end: 6; + } + + .lg\:bui-col-end-7 { + grid-column-end: 7; + } + + .lg\:bui-col-end-8 { + grid-column-end: 8; + } + + .lg\:bui-col-end-9 { + grid-column-end: 9; + } + + .lg\:bui-col-end-10 { + grid-column-end: 10; + } + + .lg\:bui-col-end-11 { + grid-column-end: 11; + } + + .lg\:bui-col-end-12 { + grid-column-end: 12; + } + + .lg\:bui-col-end-13 { + grid-column-end: 13; + } + + .lg\:bui-col-end-auto { + grid-column-end: auto; + } + + .lg\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + + .lg\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + + .lg\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + + .lg\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + + .lg\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + + .lg\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + + .lg\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + + .lg\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + + .lg\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + + .lg\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + + .lg\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + + .lg\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + + .lg\:bui-row-span-auto { + grid-row: span auto / span auto; + } + } + + @media (width >= 1536px) { + .xl\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .xl\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .xl\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .xl\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .xl\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .xl\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .xl\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .xl\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .xl\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .xl\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .xl\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .xl\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .xl\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .xl\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + + .xl\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + + .xl\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + + .xl\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + + .xl\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + + .xl\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + + .xl\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + + .xl\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + + .xl\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + + .xl\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + + .xl\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + + .xl\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + + .xl\:bui-col-span-auto { + grid-column: span auto / span auto; + } + + .xl\:bui-col-start-1 { + grid-column-start: 1; + } + + .xl\:bui-col-start-2 { + grid-column-start: 2; + } + + .xl\:bui-col-start-3 { + grid-column-start: 3; + } + + .xl\:bui-col-start-4 { + grid-column-start: 4; + } + + .xl\:bui-col-start-5 { + grid-column-start: 5; + } + + .xl\:bui-col-start-6 { + grid-column-start: 6; + } + + .xl\:bui-col-start-7 { + grid-column-start: 7; + } + + .xl\:bui-col-start-8 { + grid-column-start: 8; + } + + .xl\:bui-col-start-9 { + grid-column-start: 9; + } + + .xl\:bui-col-start-10 { + grid-column-start: 10; + } + + .xl\:bui-col-start-11 { + grid-column-start: 11; + } + + .xl\:bui-col-start-12 { + grid-column-start: 12; + } + + .xl\:bui-col-start-13 { + grid-column-start: 13; + } + + .xl\:bui-col-start-auto { + grid-column-start: auto; + } + + .xl\:bui-col-end-1 { + grid-column-end: 1; + } + + .xl\:bui-col-end-2 { + grid-column-end: 2; + } + + .xl\:bui-col-end-3 { + grid-column-end: 3; + } + + .xl\:bui-col-end-4 { + grid-column-end: 4; + } + + .xl\:bui-col-end-5 { + grid-column-end: 5; + } + + .xl\:bui-col-end-6 { + grid-column-end: 6; + } + + .xl\:bui-col-end-7 { + grid-column-end: 7; + } + + .xl\:bui-col-end-8 { + grid-column-end: 8; + } + + .xl\:bui-col-end-9 { + grid-column-end: 9; + } + + .xl\:bui-col-end-10 { + grid-column-end: 10; + } + + .xl\:bui-col-end-11 { + grid-column-end: 11; + } + + .xl\:bui-col-end-12 { + grid-column-end: 12; + } + + .xl\:bui-col-end-13 { + grid-column-end: 13; + } + + .xl\:bui-col-end-auto { + grid-column-end: auto; + } + + .xl\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + + .xl\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + + .xl\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + + .xl\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + + .xl\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + + .xl\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + + .xl\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + + .xl\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + + .xl\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + + .xl\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + + .xl\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + + .xl\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + + .xl\:bui-row-span-auto { + grid-row: span auto / span auto; + } + } + + .bui-gap { + gap: var(--gap); + } + + .bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + + .bui-gap-1 { + gap: var(--bui-space-1); + } + + .bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + + .bui-gap-2 { + gap: var(--bui-space-2); + } + + .bui-gap-3 { + gap: var(--bui-space-3); + } + + .bui-gap-4 { + gap: var(--bui-space-4); + } + + .bui-gap-5 { + gap: var(--bui-space-5); + } + + .bui-gap-6 { + gap: var(--bui-space-6); + } + + .bui-gap-7 { + gap: var(--bui-space-7); + } + + .bui-gap-8 { + gap: var(--bui-space-8); + } + + .bui-gap-9 { + gap: var(--bui-space-9); + } + + .bui-gap-10 { + gap: var(--bui-space-10); + } + + .bui-gap-11 { + gap: var(--bui-space-11); + } + + .bui-gap-12 { + gap: var(--bui-space-12); + } + + .bui-gap-13 { + gap: var(--bui-space-13); + } + + .bui-gap-14 { + gap: var(--bui-space-14); + } + + @media (width >= 640px) { + .xs\:bui-gap { + gap: var(--gap-xs); + } + + .xs\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + + .xs\:bui-gap-1 { + gap: var(--bui-space-1); + } + + .xs\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + + .xs\:bui-gap-2 { + gap: var(--bui-space-2); + } + + .xs\:bui-gap-3 { + gap: var(--bui-space-3); + } + + .xs\:bui-gap-4 { + gap: var(--bui-space-4); + } + + .xs\:bui-gap-5 { + gap: var(--bui-space-5); + } + + .xs\:bui-gap-6 { + gap: var(--bui-space-6); + } + + .xs\:bui-gap-7 { + gap: var(--bui-space-7); + } + + .xs\:bui-gap-8 { + gap: var(--bui-space-8); + } + + .xs\:bui-gap-9 { + gap: var(--bui-space-9); + } + + .xs\:bui-gap-10 { + gap: var(--bui-space-10); + } + + .xs\:bui-gap-11 { + gap: var(--bui-space-11); + } + + .xs\:bui-gap-12 { + gap: var(--bui-space-12); + } + + .xs\:bui-gap-13 { + gap: var(--bui-space-13); + } + + .xs\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + + @media (width >= 768px) { + .sm\:bui-gap { + gap: var(--gap-sm); + } + + .sm\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + + .sm\:bui-gap-1 { + gap: var(--bui-space-1); + } + + .sm\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + + .sm\:bui-gap-2 { + gap: var(--bui-space-2); + } + + .sm\:bui-gap-3 { + gap: var(--bui-space-3); + } + + .sm\:bui-gap-4 { + gap: var(--bui-space-4); + } + + .sm\:bui-gap-5 { + gap: var(--bui-space-5); + } + + .sm\:bui-gap-6 { + gap: var(--bui-space-6); + } + + .sm\:bui-gap-7 { + gap: var(--bui-space-7); + } + + .sm\:bui-gap-8 { + gap: var(--bui-space-8); + } + + .sm\:bui-gap-9 { + gap: var(--bui-space-9); + } + + .sm\:bui-gap-10 { + gap: var(--bui-space-10); + } + + .sm\:bui-gap-11 { + gap: var(--bui-space-11); + } + + .sm\:bui-gap-12 { + gap: var(--bui-space-12); + } + + .sm\:bui-gap-13 { + gap: var(--bui-space-13); + } + + .sm\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + + @media (width >= 1024px) { + .md\:bui-gap { + gap: var(--gap-md); + } + + .md\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + + .md\:bui-gap-1 { + gap: var(--bui-space-1); + } + + .md\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + + .md\:bui-gap-2 { + gap: var(--bui-space-2); + } + + .md\:bui-gap-3 { + gap: var(--bui-space-3); + } + + .md\:bui-gap-4 { + gap: var(--bui-space-4); + } + + .md\:bui-gap-5 { + gap: var(--bui-space-5); + } + + .md\:bui-gap-6 { + gap: var(--bui-space-6); + } + + .md\:bui-gap-7 { + gap: var(--bui-space-7); + } + + .md\:bui-gap-8 { + gap: var(--bui-space-8); + } + + .md\:bui-gap-9 { + gap: var(--bui-space-9); + } + + .md\:bui-gap-10 { + gap: var(--bui-space-10); + } + + .md\:bui-gap-11 { + gap: var(--bui-space-11); + } + + .md\:bui-gap-12 { + gap: var(--bui-space-12); + } + + .md\:bui-gap-13 { + gap: var(--bui-space-13); + } + + .md\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + + @media (width >= 1280px) { + .lg\:bui-gap { + gap: var(--gap-lg); + } + + .lg\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + + .lg\:bui-gap-1 { + gap: var(--bui-space-1); + } + + .lg\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + + .lg\:bui-gap-2 { + gap: var(--bui-space-2); + } + + .lg\:bui-gap-3 { + gap: var(--bui-space-3); + } + + .lg\:bui-gap-4 { + gap: var(--bui-space-4); + } + + .lg\:bui-gap-5 { + gap: var(--bui-space-5); + } + + .lg\:bui-gap-6 { + gap: var(--bui-space-6); + } + + .lg\:bui-gap-7 { + gap: var(--bui-space-7); + } + + .lg\:bui-gap-8 { + gap: var(--bui-space-8); + } + + .lg\:bui-gap-9 { + gap: var(--bui-space-9); + } + + .lg\:bui-gap-10 { + gap: var(--bui-space-10); + } + + .lg\:bui-gap-11 { + gap: var(--bui-space-11); + } + + .lg\:bui-gap-12 { + gap: var(--bui-space-12); + } + + .lg\:bui-gap-13 { + gap: var(--bui-space-13); + } + + .lg\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + + @media (width >= 1536px) { + .xl\:bui-gap { + gap: var(--gap-xl); + } + + .xl\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + + .xl\:bui-gap-1 { + gap: var(--bui-space-1); + } + + .xl\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + + .xl\:bui-gap-2 { + gap: var(--bui-space-2); + } + + .xl\:bui-gap-3 { + gap: var(--bui-space-3); + } + + .xl\:bui-gap-4 { + gap: var(--bui-space-4); + } + + .xl\:bui-gap-5 { + gap: var(--bui-space-5); + } + + .xl\:bui-gap-6 { + gap: var(--bui-space-6); + } + + .xl\:bui-gap-7 { + gap: var(--bui-space-7); + } + + .xl\:bui-gap-8 { + gap: var(--bui-space-8); + } + + .xl\:bui-gap-9 { + gap: var(--bui-space-9); + } + + .xl\:bui-gap-10 { + gap: var(--bui-space-10); + } + + .xl\:bui-gap-11 { + gap: var(--bui-space-11); + } + + .xl\:bui-gap-12 { + gap: var(--bui-space-12); + } + + .xl\:bui-gap-13 { + gap: var(--bui-space-13); + } + + .xl\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + + .bui-align-start { + align-items: start; + } + + .bui-align-center { + align-items: center; + } + + .bui-align-end { + align-items: end; + } + + .bui-align-baseline { + align-items: baseline; + } + + .bui-align-stretch { + align-items: stretch; + } + + .bui-jc-start { + justify-content: start; + } + + .bui-jc-center { + justify-content: center; + } + + .bui-jc-end { + justify-content: end; + } + + .bui-jc-between { + justify-content: space-between; + } + + .bui-fd-row { + flex-direction: row; + } + + .bui-fd-column { + flex-direction: column; + } + + .bui-fd-row-reverse { + flex-direction: row-reverse; + } + + .bui-fd-column-reverse { + flex-direction: column-reverse; + } + + @media (width >= 640px) { + .xs\:bui-align-start { + align-items: start; + } + + .xs\:bui-align-center { + align-items: center; + } + + .xs\:bui-align-end { + align-items: end; + } + + .xs\:bui-align-stretch { + align-items: stretch; + } + + .xs\:bui-jc-start { + justify-content: start; + } + + .xs\:bui-jc-center { + justify-content: center; + } + + .xs\:bui-jc-end { + justify-content: end; + } + + .xs\:bui-jc-between { + justify-content: space-between; + } + + .xs\:bui-fd-row { + flex-direction: row; + } + + .xs\:bui-fd-column { + flex-direction: column; + } + + .xs\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + + .xs\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + + @media (width >= 768px) { + .sm\:bui-align-start { + align-items: start; + } + + .sm\:bui-align-center { + align-items: center; + } + + .sm\:bui-align-end { + align-items: end; + } + + .sm\:bui-align-stretch { + align-items: stretch; + } + + .sm\:bui-jc-start { + justify-content: start; + } + + .sm\:bui-jc-center { + justify-content: center; + } + + .sm\:bui-jc-end { + justify-content: end; + } + + .sm\:bui-jc-between { + justify-content: space-between; + } + + .sm\:bui-fd-row { + flex-direction: row; + } + + .sm\:bui-fd-column { + flex-direction: column; + } + + .sm\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + + .sm\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + + @media (width >= 1024px) { + .md\:bui-align-start { + align-items: start; + } + + .md\:bui-align-center { + align-items: center; + } + + .md\:bui-align-end { + align-items: end; + } + + .md\:bui-align-stretch { + align-items: stretch; + } + + .md\:bui-jc-start { + justify-content: start; + } + + .md\:bui-jc-center { + justify-content: center; + } + + .md\:bui-jc-end { + justify-content: end; + } + + .md\:bui-jc-between { + justify-content: space-between; + } + + .md\:bui-fd-row { + flex-direction: row; + } + + .md\:bui-fd-column { + flex-direction: column; + } + + .md\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + + .md\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + + @media (width >= 1280px) { + .lg\:bui-align-start { + align-items: start; + } + + .lg\:bui-align-center { + align-items: center; + } + + .lg\:bui-align-end { + align-items: end; + } + + .lg\:bui-align-stretch { + align-items: stretch; + } + + .lg\:bui-jc-start { + justify-content: start; + } + + .lg\:bui-jc-center { + justify-content: center; + } + + .lg\:bui-jc-end { + justify-content: end; + } + + .lg\:bui-jc-between { + justify-content: space-between; + } + + .lg\:bui-fd-row { + flex-direction: row; + } + + .lg\:bui-fd-column { + flex-direction: column; + } + + .lg\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + + .lg\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + + @media (width >= 1536px) { + .xl\:bui-align-start { + align-items: start; + } + + .xl\:bui-align-center { + align-items: center; + } + + .xl\:bui-align-end { + align-items: end; + } + + .xl\:bui-align-stretch { + align-items: stretch; + } + + .xl\:bui-jc-start { + justify-content: start; + } + + .xl\:bui-jc-center { + justify-content: center; + } + + .xl\:bui-jc-end { + justify-content: end; + } + + .xl\:bui-jc-between { + justify-content: space-between; + } + + .xl\:bui-fd-row { + flex-direction: row; + } + + .xl\:bui-fd-column { + flex-direction: column; + } + + .xl\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + + .xl\:bui-fd-column-reverse { + flex-direction: column-reverse; + } } } -.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 +@layer legacy; diff --git a/packages/ui/src/css/core.css b/packages/ui/src/css/core.css index a8ab7cfc6b..b24e8bad73 100644 --- a/packages/ui/src/css/core.css +++ b/packages/ui/src/css/core.css @@ -14,191 +14,19 @@ * limitations under the License. */ -/* Normalize */ -@import './normalize.css'; -@import './utilities.css'; +@layer base { + :where(a) { + color: inherit; + text-decoration: none; + } -/* Global reset */ -:where(a) { - color: inherit; - text-decoration: none; -} + @keyframes pulse { + 50% { + opacity: 0.5; + } + } -@keyframes pulse { - 50% { - opacity: 0.5; + body { + background-color: var(--bui-bg); } } - -body { - background-color: var(--bui-bg); -} - -/* Light theme tokens */ -:root { - /* Font families */ - --bui-font-regular: system-ui; - --bui-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas', - 'Liberation Mono', 'Courier New', monospace; - - /* Font weights */ - --bui-font-weight-regular: 400; - --bui-font-weight-bold: 600; - - /* Font sizes */ - --bui-font-size-1: 0.625rem; /* 10px */ - --bui-font-size-2: 0.75rem; /* 12px */ - --bui-font-size-3: 0.875rem; /* 14px */ - --bui-font-size-4: 1rem; /* 16px */ - --bui-font-size-5: 1.25rem; /* 20px */ - --bui-font-size-6: 1.5rem; /* 24px */ - --bui-font-size-7: 2rem; /* 32px */ - --bui-font-size-8: 3rem; /* 48px */ - --bui-font-size-9: 4rem; /* 64px */ - --bui-font-size-10: 5.75rem; /* 92px */ - - /* Spacing */ - --bui-space: 0.25rem; /* This is the spacing multiplier */ - --bui-space-0_5: calc(var(--bui-space) * 0.5); /* 2px */ - --bui-space-1: var(--bui-space); /* 4px */ - --bui-space-1_5: calc(var(--bui-space) * 1.5); /* 6px */ - --bui-space-2: calc(var(--bui-space) * 2); /* 8px */ - --bui-space-3: calc(var(--bui-space) * 3); /* 12px */ - --bui-space-4: calc(var(--bui-space) * 4); /* 16px */ - --bui-space-5: calc(var(--bui-space) * 5); /* 20px */ - --bui-space-6: calc(var(--bui-space) * 6); /* 24px */ - --bui-space-7: calc(var(--bui-space) * 7); /* 28px */ - --bui-space-8: calc(var(--bui-space) * 8); /* 32px */ - --bui-space-9: calc(var(--bui-space) * 9); /* 36px */ - --bui-space-10: calc(var(--bui-space) * 10); /* 40px */ - --bui-space-11: calc(var(--bui-space) * 11); /* 44px */ - --bui-space-12: calc(var(--bui-space) * 12); /* 48px */ - --bui-space-13: calc(var(--bui-space) * 13); /* 52px */ - --bui-space-14: calc(var(--bui-space) * 14); /* 56px */ - - /* Radius */ - --bui-radius-1: calc(0.125rem); - --bui-radius-2: calc(0.25rem); - --bui-radius-3: calc(0.5rem); - --bui-radius-4: calc(0.75rem); - --bui-radius-5: calc(1rem); - --bui-radius-6: calc(1.25rem); - --bui-radius-full: 9999px; - - /* Base Colors */ - --bui-black: #000000; - --bui-white: #ffffff; - - /* Gray scale */ - --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; - - /* Background Colors */ - --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: rgba(31, 84, 147, 0.4); - --bui-bg-tint-pressed: rgba(31, 84, 147, 0.6); - --bui-bg-tint-disabled: #ebebeb; - --bui-bg-danger: #feebe7; - --bui-bg-warning: #fff2b2; - --bui-bg-success: #e6f6eb; - - /* Foreground Colors */ - --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; - - /* Border Colors */ - --bui-border: rgba(0, 0, 0, 0.1); - --bui-border-hover: rgba(0, 0, 0, 0.2); - --bui-border-pressed: rgba(0, 0, 0, 0.4); - --bui-border-disabled: rgba(0, 0, 0, 0.1); - --bui-border-danger: #f87a7a; - --bui-border-warning: #e36d05; - --bui-border-success: #53db83; - - /* Special Colors */ - --bui-ring: #1f5493; - --bui-scrollbar: #a0a0a03b; - --bui-scrollbar-thumb: #a0a0a0; - - --bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -/* Dark theme tokens */ -[data-theme-mode='dark'] { - /* Gray scale */ - --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; - - /* Background Colors */ - --bui-bg: #333333; - --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: #222222; - --bui-bg-tint: transparent; - --bui-bg-tint-hover: rgba(156, 201, 255, 0.12); - --bui-bg-tint-pressed: rgba(156, 201, 255, 0.16); - --bui-bg-tint-disabled: transparent; - --bui-bg-danger: #3b1219; - --bui-bg-warning: #302008; - --bui-bg-success: #132d21; - - /* Foreground Colors */ - --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; - - /* Border Colors */ - --bui-border: rgba(255, 255, 255, 0.12); - --bui-border-hover: rgba(255, 255, 255, 0.4); - --bui-border-pressed: rgba(255, 255, 255, 0.5); - --bui-border-disabled: rgba(255, 255, 255, 0.2); - --bui-border-danger: #f87a7a; - --bui-border-warning: #e36d05; - --bui-border-success: #53db83; - - /* Special Colors */ - --bui-ring: #1f5493; - --bui-scrollbar: #3636363a; - --bui-scrollbar-thumb: #575757; -} From f041c1fe10981ea554da91aa06548ed1d9a043a4 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Thu, 9 Oct 2025 15:50:53 +0200 Subject: [PATCH 57/67] ui: extract data-* attributes Signed-off-by: Vincenzo Scamporlino --- packages/ui/src/utils/extractProps.ts | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/utils/extractProps.ts b/packages/ui/src/utils/extractProps.ts index 1668117909..3914072ff4 100644 --- a/packages/ui/src/utils/extractProps.ts +++ b/packages/ui/src/utils/extractProps.ts @@ -86,16 +86,25 @@ export function extractProps( } // Ensure keys from props that are defined in propDefs are removed - const cleanedProps = Object.keys(props).reduce((acc, key) => { - if (!propDefs.hasOwnProperty(key)) { - acc[key] = props[key]; - } - return acc; - }, {} as { [key: string]: any }); + const { cleanedProps, dataProps } = Object.keys(props).reduce( + (acc, key) => { + if (key.startsWith('data-')) { + acc.dataProps[key] = props[key]; + } + if (!propDefs.hasOwnProperty(key)) { + acc.cleanedProps[key] = props[key]; + } + return acc; + }, + { dataProps: {}, cleanedProps: {} } as { + dataProps: { [key: string]: any }; + cleanedProps: { [key: string]: any }; + }, + ); const newClassNames = className .filter(name => name && name.trim() !== '') .join(' '); - return { ...cleanedProps, className: newClassNames, style }; + return { ...cleanedProps, className: newClassNames, style, dataProps }; } From 03050a6ad426e6ed6893ca179a3deb2cf899f194 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Thu, 9 Oct 2025 15:51:33 +0200 Subject: [PATCH 58/67] ui: make sure data attributes are passed down to the DOM Signed-off-by: Vincenzo Scamporlino --- packages/ui/src/components/Box/Box.tsx | 3 ++- packages/ui/src/components/Container/Container.tsx | 3 ++- packages/ui/src/components/Flex/Flex.tsx | 3 ++- packages/ui/src/components/Grid/Grid.tsx | 6 ++++-- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/Box/Box.tsx b/packages/ui/src/components/Box/Box.tsx index 4273ee86f9..06d7d1d434 100644 --- a/packages/ui/src/components/Box/Box.tsx +++ b/packages/ui/src/components/Box/Box.tsx @@ -40,11 +40,12 @@ export const Box = forwardRef((props, ref) => { }; const { classNames } = useStyles('Box'); - const { className, style } = extractProps(props, propDefs); + const { className, style, dataProps } = extractProps(props, propDefs); return createElement(props.as || 'div', { ref, className: clsx(classNames.root, className), + ...dataProps, style, children, }); diff --git a/packages/ui/src/components/Container/Container.tsx b/packages/ui/src/components/Container/Container.tsx index 7be4e5fdce..eef1e187c4 100644 --- a/packages/ui/src/components/Container/Container.tsx +++ b/packages/ui/src/components/Container/Container.tsx @@ -43,11 +43,12 @@ export const Container = forwardRef( ...displayPropDefs, ...containerSpacingProps, }; - const { className, style } = extractProps(props, propDefs); + const { className, style, dataProps } = extractProps(props, propDefs); return createElement('div', { ref, className: clsx(classNames.root, className), + ...dataProps, style, children, }); diff --git a/packages/ui/src/components/Flex/Flex.tsx b/packages/ui/src/components/Flex/Flex.tsx index ded4fffffa..021fe87820 100644 --- a/packages/ui/src/components/Flex/Flex.tsx +++ b/packages/ui/src/components/Flex/Flex.tsx @@ -32,11 +32,12 @@ export const Flex = forwardRef((props, ref) => { }; const { classNames } = useStyles('Flex'); - const { className, style } = extractProps(props, propDefs); + const { className, style, dataProps } = extractProps(props, propDefs); return createElement('div', { ref, className: clsx(classNames.root, className), + ...dataProps, style, children: props.children, }); diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx index 27257c8972..18ed40b87b 100644 --- a/packages/ui/src/components/Grid/Grid.tsx +++ b/packages/ui/src/components/Grid/Grid.tsx @@ -32,11 +32,12 @@ const GridRoot = forwardRef((props, ref) => { const { classNames } = useStyles('Grid'); - const { className, style } = extractProps(props, propDefs); + const { className, style, dataProps } = extractProps(props, propDefs); return createElement('div', { ref, className: clsx(classNames.root, className), + ...dataProps, style, children: props.children, }); @@ -48,11 +49,12 @@ const GridItem = forwardRef((props, ref) => { }; const { classNames } = useStyles('Grid'); - const { className, style } = extractProps(props, propDefs); + const { className, style, dataProps } = extractProps(props, propDefs); return createElement('div', { ref, className: clsx(classNames.item, className), + ...dataProps, style, children: props.children, }); From b94006200dbd4eb0aa363249d31b3b3f5775343a Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Thu, 9 Oct 2025 15:53:57 +0200 Subject: [PATCH 59/67] ui: data attributes changesets Signed-off-by: Vincenzo Scamporlino --- .changeset/open-symbols-find.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/open-symbols-find.md diff --git a/.changeset/open-symbols-find.md b/.changeset/open-symbols-find.md new file mode 100644 index 0000000000..a7d4908980 --- /dev/null +++ b/.changeset/open-symbols-find.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Added support for data attributes in ``, ``, ``, and `` components, ensuring they are correctly applied to the rendered elements. From 13592794e915bfda19220cba186b48050721c98e Mon Sep 17 00:00:00 2001 From: Ricardo Ferreira Date: Thu, 9 Oct 2025 16:23:40 +0100 Subject: [PATCH 60/67] repo-tools: Fix duplicate imports in OpenAPI client generation (#31297) * repo-tools: Fix duplicate imports in OpenAPI client generation Added automatic deduplication step to remove duplicate import/export statements from generated TypeScript clients while preserving code structure and different import syntaxes. Signed-off-by: Ricardo Ferreira * repo-tools: changeset added Signed-off-by: Ricardo Ferreira * repo-tools: changeset updated Signed-off-by: Ricardo Ferreira * repo-tools: deduplicate imports on server files Signed-off-by: Ricardo Ferreira * Update .changeset/forty-rooms-work.md Signed-off-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> --------- Signed-off-by: Ricardo Ferreira Signed-off-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> Co-authored-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> --- .changeset/forty-rooms-work.md | 5 ++ .../package/schema/openapi/generate/client.ts | 9 +++ .../package/schema/openapi/generate/server.ts | 19 +++-- .../src/lib/openapi/dedupe-imports.ts | 74 +++++++++++++++++++ .../repo-tools/src/lib/openapi/helpers.ts | 11 ++- 5 files changed, 107 insertions(+), 11 deletions(-) create mode 100644 .changeset/forty-rooms-work.md create mode 100644 packages/repo-tools/src/lib/openapi/dedupe-imports.ts diff --git a/.changeset/forty-rooms-work.md b/.changeset/forty-rooms-work.md new file mode 100644 index 0000000000..e67016ec44 --- /dev/null +++ b/.changeset/forty-rooms-work.md @@ -0,0 +1,5 @@ +--- +'@backstage/repo-tools': patch +--- + +Fixed an issue with the OpenAPI generated client and server where import/export statements were duplicated. diff --git a/packages/repo-tools/src/commands/package/schema/openapi/generate/client.ts b/packages/repo-tools/src/commands/package/schema/openapi/generate/client.ts index edcb49a9be..8a8817c721 100644 --- a/packages/repo-tools/src/commands/package/schema/openapi/generate/client.ts +++ b/packages/repo-tools/src/commands/package/schema/openapi/generate/client.ts @@ -28,6 +28,7 @@ import { getPathToCurrentOpenApiSpec, toGeneratorAdditionalProperties, } from '../../../../../lib/openapi/helpers'; +import { deduplicateImports } from '../../../../../lib/openapi/dedupe-imports'; async function generate( outputDirectory: string, @@ -101,6 +102,14 @@ async function generate( }); } + // Deduplicate imports in generated files + const generatedFiles = await fs.readdir(resolvedOutputDirectory); + for (const file of generatedFiles) { + if (file.endsWith('.ts')) { + deduplicateImports(resolve(resolvedOutputDirectory, file)); + } + } + fs.removeSync(resolve(resolvedOutputDirectory, '.openapi-generator-ignore')); fs.rmSync(resolve(resolvedOutputDirectory, '.openapi-generator'), { diff --git a/packages/repo-tools/src/commands/package/schema/openapi/generate/server.ts b/packages/repo-tools/src/commands/package/schema/openapi/generate/server.ts index c51b63cf54..130c93cf71 100644 --- a/packages/repo-tools/src/commands/package/schema/openapi/generate/server.ts +++ b/packages/repo-tools/src/commands/package/schema/openapi/generate/server.ts @@ -14,24 +14,25 @@ * limitations under the License. */ +import { resolvePackagePath } from '@backstage/backend-plugin-api'; import chalk from 'chalk'; -import { resolve, dirname, join } from 'path'; +import fs from 'fs-extra'; import YAML from 'js-yaml'; +import { dirname, join, resolve } from 'path'; +import { exec } from '../../../../../lib/exec'; import { OLD_SCHEMA_PATH, OPENAPI_IGNORE_FILES, OUTPUT_PATH, TS_SCHEMA_PATH, } from '../../../../../lib/openapi/constants'; -import { paths as cliPaths } from '../../../../../lib/paths'; -import fs from 'fs-extra'; -import { exec } from '../../../../../lib/exec'; -import { resolvePackagePath } from '@backstage/backend-plugin-api'; +import { deduplicateImports } from '../../../../../lib/openapi/dedupe-imports'; import { getPathToCurrentOpenApiSpec, getRelativePathToFile, toGeneratorAdditionalProperties, } from '../../../../../lib/openapi/helpers'; +import { paths as cliPaths } from '../../../../../lib/paths'; async function generateSpecFile() { const openapiPath = await getPathToCurrentOpenApiSpec(); @@ -133,6 +134,14 @@ async function generate( }, ); + // Deduplicate imports in generated files + const generatedFiles = await fs.readdir(resolvedOutputDirectory); + for (const file of generatedFiles) { + if (file.endsWith('.ts')) { + deduplicateImports(resolve(resolvedOutputDirectory, file)); + } + } + await exec( `yarn backstage-cli package lint --fix ${resolvedOutputDirectory}`, [], diff --git a/packages/repo-tools/src/lib/openapi/dedupe-imports.ts b/packages/repo-tools/src/lib/openapi/dedupe-imports.ts new file mode 100644 index 0000000000..c398a43e82 --- /dev/null +++ b/packages/repo-tools/src/lib/openapi/dedupe-imports.ts @@ -0,0 +1,74 @@ +/* + * Copyright 2025 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 fs from 'fs'; + +/** + * Removes duplicate import and export statements from TypeScript/JavaScript files. + * Preserves different import syntaxes, multi-line imports, and code structure. + * + * @param filePath - Absolute path to the file to deduplicate + */ +export function deduplicateImports(filePath: string): void { + const content = fs.readFileSync(filePath, 'utf8'); + const lines = content.split('\n'); + const seen = new Set(); + const result: string[] = []; + let i = 0; + + while (i < lines.length) { + const line = lines[i]; + const trimmed = line.trim(); + + // Handle import/export statements + if (trimmed.startsWith('import ') || trimmed.startsWith('export ')) { + let fullStatement = line; + let endIndex = i; + + // Check if multi-line (has { but no }) + if (trimmed.includes('{') && !trimmed.includes('}')) { + // Collect full multi-line statement + while (endIndex < lines.length && !lines[endIndex].includes('}')) { + endIndex++; + } + if (endIndex < lines.length) { + fullStatement = lines.slice(i, endIndex + 1).join('\n'); + } + } + + // Normalize for comparison (remove comments, extra spaces) + const normalized = fullStatement + .replace(/\/\/.*$/gm, '') + .replace(/\s+/g, ' ') + .trim(); + + if (!seen.has(normalized)) { + seen.add(normalized); + // Add all lines of the statement + for (let j = i; j <= endIndex; j++) { + result.push(lines[j]); + } + } + + i = endIndex + 1; + } else { + result.push(line); + i++; + } + } + + fs.writeFileSync(filePath, result.join('\n')); +} diff --git a/packages/repo-tools/src/lib/openapi/helpers.ts b/packages/repo-tools/src/lib/openapi/helpers.ts index 868623b874..0eaa090ac4 100644 --- a/packages/repo-tools/src/lib/openapi/helpers.ts +++ b/packages/repo-tools/src/lib/openapi/helpers.ts @@ -14,14 +14,13 @@ * limitations under the License. */ -import { pathExists } from 'fs-extra'; -import { paths } from '../paths'; -import { YAML_SCHEMA_PATH } from './constants'; -import { resolve } from 'path'; +import Parser from '@apidevtools/swagger-parser'; +import fs, { pathExists } from 'fs-extra'; import YAML from 'js-yaml'; import { cloneDeep } from 'lodash'; -import Parser from '@apidevtools/swagger-parser'; -import fs from 'fs-extra'; +import { resolve } from 'path'; +import { paths } from '../paths'; +import { YAML_SCHEMA_PATH } from './constants'; export const getPathToFile = async (directory: string, filename: string) => { return resolve(directory, filename); From 93cb99dabaa46cca27cb6c29fa163258c38a4a26 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 16:40:47 +0100 Subject: [PATCH 61/67] Add virtualizer to MenuAutocomplete Signed-off-by: Charles de Dreuille --- .../ui/src/components/Menu/Menu.stories.tsx | 290 +---------- .../ui/src/components/Menu/Menu.styles.css | 492 +++++++++--------- packages/ui/src/components/Menu/Menu.tsx | 92 ++-- .../Menu/MenuAutocomplete.stories.tsx | 200 +++++++ .../Menu/MenuAutocompleteListBox.stories.tsx | 185 +++++++ .../components/Menu/MenuListBox.stories.tsx | 89 ++++ packages/ui/src/components/Menu/types.ts | 3 + packages/ui/src/utils/componentDefinitions.ts | 1 + 8 files changed, 784 insertions(+), 568 deletions(-) create mode 100644 packages/ui/src/components/Menu/MenuAutocomplete.stories.tsx create mode 100644 packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx create mode 100644 packages/ui/src/components/Menu/MenuListBox.stories.tsx diff --git a/packages/ui/src/components/Menu/Menu.stories.tsx b/packages/ui/src/components/Menu/Menu.stories.tsx index 272d2c5342..8e6671db3d 100644 --- a/packages/ui/src/components/Menu/Menu.stories.tsx +++ b/packages/ui/src/components/Menu/Menu.stories.tsx @@ -19,15 +19,11 @@ import { MenuTrigger, SubmenuTrigger, Menu, - MenuListBox, - MenuAutocomplete, - MenuAutocompleteListbox, MenuItem, - MenuListBoxItem, MenuSection, MenuSeparator, } from './index'; -import { Button, Flex, Text } from '../..'; +import { Button } from '../..'; import { RiChat1Line, RiEdit2Line, @@ -39,10 +35,7 @@ import { RiDeleteBinLine, RiShareBoxLine, } from '@remixicon/react'; -import { useState } from 'react'; -import { Selection } from 'react-aria-components'; import { MemoryRouter } from 'react-router-dom'; -import { MenuItem as AriaMenuItem } from 'react-aria-components'; const meta = { title: 'Backstage UI/Menu', @@ -206,88 +199,6 @@ export const PreviewLinks: Story = { ), }; -export const PreviewAutocompleteMenu: Story = { - args: { - ...Preview.args, - }, - render: () => ( - - - - Create new file... - Create new folder... - Assign to... - Assign to me - Change status... - Change priority... - Add label... - Remove label... - - - ), -}; - -export const PreviewAutocompleteListbox: Story = { - args: { - ...Preview.args, - }, - render: () => { - const [selected, setSelected] = useState( - new Set([options[2].value]), - ); - - return ( - - Selected: {Array.from(selected).join(', ')} - - - - {options.map(option => ( - - {option.label} - - ))} - - - - ); - }, -}; - -export const PreviewAutocompleteListboxMultiple: Story = { - args: { - ...Preview.args, - }, - render: () => { - const [selected, setSelected] = useState( - new Set([options[2].value, options[3].value]), - ); - - return ( - - Selected: {Array.from(selected).join(', ')} - - - - {options.map(option => ( - - {option.label} - - ))} - - - - ); - }, -}; - export const Opened: Story = { args: { ...Preview.args, @@ -320,24 +231,6 @@ export const WithIcons: Story = { ), }; -export const WithScrolling: Story = { - args: { - ...Preview.args, - }, - render: () => ( - - - - {Array.from({ length: 50 }, (_, i) => ( - - Item {i + 1} - This is a long menu item to demonstrate scrolling - - ))} - - - ), -}; - export const WithSections: Story = { args: { ...Preview.args, @@ -421,125 +314,6 @@ export const WithLinks: Story = { ), }; -export const WithLinksTest: Story = { - args: { - ...Preview.args, - }, - render: () => ( - - - - Internal link - External link - Email link - - - ), -}; - -export const WithListBox: Story = { - args: { - ...Preview.args, - }, - render: () => ( - - - - Item 1 - Item 2 - Item 3 - - - ), -}; - -export const WithListBoxControlled: Story = { - args: { - ...Preview.args, - }, - render: () => { - const [selected, setSelected] = useState(new Set(['paul'])); - - return ( - - Selected: {Array.from(selected).join(', ')} - - - - - John Lennon - - - Paul McCartney - - - George Harrison - - - Ringo Starr - - - - - ); - }, -}; - -export const WithAutocompleteMenu: Story = { - args: { - ...Preview.args, - }, - render: () => ( - - - - Create new file... - Create new folder... - Assign to... - Assign to me - Change status... - Change priority... - Add label... - Remove label... - - - ), -}; - -export const WithAutocompleteListbox: Story = { - args: { - ...Preview.args, - }, - render: () => { - const [selected, setSelected] = useState( - new Set([options[2].value]), - ); - - return ( - - Selected: {Array.from(selected).join(', ')} - - - - {options.map(option => ( - - {option.label} - - ))} - - - - ); - }, -}; - export const Submenu: Story = { args: { ...Preview.args, @@ -552,7 +326,7 @@ export const Submenu: Story = { Duplicate Submenu - + Edit Duplicate Rename @@ -567,63 +341,3 @@ export const Submenu: Story = { ), }; - -export const SubmenuAutocompleteMenu: Story = { - args: { - ...Preview.args, - }, - render: () => ( - - - - Edit - - Submenu - - {options.map(option => ( - - {option.label} - - ))} - - - - - ), -}; - -export const SubmenuAutocompleteListbox: Story = { - args: { - ...Preview.args, - }, - render: () => { - const [selected, setSelected] = useState( - new Set([options[2].value]), - ); - - return ( - - Selected: {Array.from(selected).join(', ')} - - - - Edit - - Submenu - - {options.map(option => ( - - {option.label} - - ))} - - - - - - ); - }, -}; diff --git a/packages/ui/src/components/Menu/Menu.styles.css b/packages/ui/src/components/Menu/Menu.styles.css index 507c772d71..be475a6cfa 100644 --- a/packages/ui/src/components/Menu/Menu.styles.css +++ b/packages/ui/src/components/Menu/Menu.styles.css @@ -14,258 +14,262 @@ * limitations under the License. */ -@layer components { - .bui-MenuPopover { - display: flex; - flex-direction: column; - border: 1px solid var(--bui-border); - border-radius: var(--bui-radius-2); - background: var(--bui-bg-surface-1); - color: var(--bui-fg-primary); - outline: none; - transition: transform 200ms, opacity 200ms; - /* Let React Aria handle height constraints naturally */ - min-height: 0; - /* Remove overflow from popover since ScrollArea will handle it */ - overflow: hidden; +.bui-MenuPopover { + display: flex; + flex-direction: column; + border: 1px solid var(--bui-border); + border-radius: var(--bui-radius-2); + background: var(--bui-bg-surface-1); + color: var(--bui-fg-primary); + outline: none; + transition: transform 200ms, opacity 200ms; + /* Let React Aria handle height constraints naturally */ + min-height: 0; + /* Remove overflow from popover since ScrollArea will handle it */ + overflow: hidden; - &[data-entering], - &[data-exiting] { - transform: var(--origin); - opacity: 0; - } - - &[data-placement='top'] { - --origin: translateY(8px); - } - - &[data-placement='bottom'] { - --origin: translateY(-8px); - } - - &[data-placement='right'] { - --origin: translateX(-8px); - } - - &[data-placement='left'] { - --origin: translateX(8px); - } + &[data-entering], + &[data-exiting] { + transform: var(--origin); + opacity: 0; } - .bui-MenuContent { - max-height: inherit; - box-sizing: border-box; - overflow: auto; - padding: var(--bui-space-1); - min-width: 150px; - box-sizing: border-box; - outline: none; + &[data-placement='top'] { + --origin: translateY(8px); } - /* Ensure ScrollArea works properly within MenuRA popover */ - .bui-MenuPopover .bui-ScrollAreaRoot { - /* Take full height of popover */ - height: 100%; - min-height: 0; - flex: 1; - /* Ensure the root container has proper height constraints */ - display: flex; - flex-direction: column; + &[data-placement='bottom'] { + --origin: translateY(-8px); } - .bui-MenuPopover .bui-ScrollAreaScrollbar { - margin-inline: var(--bui-space-1_5); + &[data-placement='right'] { + --origin: translateX(-8px); } - .bui-MenuItem { - display: flex; - align-items: center; - justify-content: space-between; - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - outline: none; - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - gap: var(--bui-space-6); - - &[data-focused] { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); - } - - &[data-open] { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); - } - - &[data-color='danger'] { - color: var(--bui-fg-danger); - } - - &[data-color='danger'][data-focused] { - background: var(--bui-bg-danger); - color: var(--bui-fg-danger); - } - - &[data-has-submenu] { - & > .bui-MenuItemArrow { - display: block; - } - } - } - - .bui-MenuItemListBox { - display: flex; - align-items: center; - justify-content: space-between; - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - outline: none; - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - gap: var(--bui-space-6); - - &:hover { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); - } - - &[data-selected] .bui-MenuItemListBoxCheck { - & > svg { - opacity: 1; - color: var(--bui-fg-primary); - } - } - } - - .bui-MenuItemListBoxCheck { - display: flex; - align-items: center; - justify-content: center; - width: 1rem; - height: 1rem; - - & > svg { - opacity: 0; - width: 1rem; - height: 1rem; - } - } - - .bui-MenuItemContent { - display: flex; - align-items: center; - gap: var(--bui-space-2); - - & > svg { - width: 1rem; - height: 1rem; - } - } - - .bui-MenuItemArrow { - display: none; - width: 1rem; - height: 1rem; - - & > svg { - width: 1rem; - height: 1rem; - } - } - - .bui-MenuSection { - &:first-child .bui-MenuSectionHeader { - padding-top: 0; - } - } - - .bui-MenuSectionHeader { - height: 2rem; - display: flex; - align-items: center; - padding-top: var(--bui-space-3); - padding-left: var(--bui-space-2); - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-1); - font-weight: bold; - letter-spacing: 0.05rem; - text-transform: uppercase; - } - - .bui-MenuSeparator { - height: 1px; - background: var(--bui-border); - margin-inline: var(--bui-space-1_5); - margin-block: var(--bui-space-1); - } - - .bui-MenuSearchField { - position: relative; - font-family: var(--bui-font-regular); - width: 100%; - flex-shrink: 0; - - &[data-empty] { - .bui-MenuSearchFieldClear { - display: none; - } - } - } - - .bui-MenuSearchFieldInput { - display: flex; - align-items: center; - padding: 0 var(--bui-space-3); - border: none; - border-bottom: 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: 2rem; - cursor: inherit; - outline: none; - - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { - -webkit-appearance: none; - } - } - - .bui-MenuSearchFieldClear { - position: absolute; - right: var(--bui-space-2); - top: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - border: none; - padding: 0; - margin: 0; - cursor: pointer; - color: var(--bui-fg-secondary); - transition: color 0.2s ease-in-out; - - & > svg { - width: 1rem; - height: 1rem; - } - } - - .bui-MenuEmptyState { - padding: var(--bui-space-1); - color: var(--bui-fg-secondary); - font-size: var(--bui-font-size-3); - font-family: var(--bui-font-regular); - font-weight: var(--bui-font-weight-regular); + &[data-placement='left'] { + --origin: translateX(8px); } } + +.bui-MenuContent { + max-height: inherit; + box-sizing: border-box; + overflow: auto; + min-width: 150px; + box-sizing: border-box; + outline: none; + padding-block: var(--bui-space-1); +} + +/* Ensure ScrollArea works properly within MenuRA popover */ +.bui-MenuPopover .bui-ScrollAreaRoot { + /* Take full height of popover */ + height: 100%; + min-height: 0; + flex: 1; + /* Ensure the root container has proper height constraints */ + display: flex; + flex-direction: column; +} + +.bui-MenuPopover .bui-ScrollAreaScrollbar { + margin-inline: var(--bui-space-1_5); +} + +.bui-MenuItem { + padding-inline: var(--bui-space-1); + display: block; + + &[data-focused] .bui-MenuItemWrapper { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-open] .bui-MenuItemWrapper { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-color='danger'] .bui-MenuItemWrapper { + color: var(--bui-fg-danger); + } + + &[data-color='danger'][data-focused] .bui-MenuItemWrapper { + background: var(--bui-bg-danger); + color: var(--bui-fg-danger); + } + + &[data-has-submenu] { + & > .bui-MenuItemWrapper > .bui-MenuItemArrow { + display: block; + } + } +} + +.bui-MenuItemWrapper { + display: flex; + align-items: center; + justify-content: space-between; + height: 2rem; + padding-inline: var(--bui-space-2); + border-radius: var(--bui-radius-2); + outline: none; + cursor: default; + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-3); + gap: var(--bui-space-6); +} + +.bui-MenuItemListBox { + display: flex; + align-items: center; + justify-content: space-between; + height: 2rem; + padding-inline: var(--bui-space-2); + border-radius: var(--bui-radius-2); + outline: none; + cursor: default; + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-3); + gap: var(--bui-space-6); + + &:hover { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-selected] .bui-MenuItemListBoxCheck { + & > svg { + opacity: 1; + color: var(--bui-fg-primary); + } + } +} + +.bui-MenuItemListBoxCheck { + display: flex; + align-items: center; + justify-content: center; + width: 1rem; + height: 1rem; + + & > svg { + opacity: 0; + width: 1rem; + height: 1rem; + } +} + +.bui-MenuItemContent { + display: flex; + align-items: center; + gap: var(--bui-space-2); + + & > svg { + width: 1rem; + height: 1rem; + } +} + +.bui-MenuItemArrow { + display: none; + width: 1rem; + height: 1rem; + + & > svg { + width: 1rem; + height: 1rem; + } +} + +.bui-MenuSection { + &:first-child .bui-MenuSectionHeader { + padding-top: 0; + } +} + +.bui-MenuSectionHeader { + height: 2rem; + display: flex; + align-items: center; + padding-top: var(--bui-space-3); + padding-left: var(--bui-space-2); + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-1); + font-weight: bold; + letter-spacing: 0.05rem; + text-transform: uppercase; +} + +.bui-MenuSeparator { + height: 1px; + background: var(--bui-border); + margin-inline: var(--bui-space-1_5); + margin-block: var(--bui-space-1); +} + +.bui-MenuSearchField { + position: relative; + font-family: var(--bui-font-regular); + width: 100%; + flex-shrink: 0; + + &[data-empty] { + .bui-MenuSearchFieldClear { + display: none; + } + } +} + +.bui-MenuSearchFieldInput { + display: flex; + align-items: center; + padding: 0 var(--bui-space-3); + border: none; + border-bottom: 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: 2rem; + cursor: inherit; + outline: none; + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; + } +} + +.bui-MenuSearchFieldClear { + position: absolute; + right: var(--bui-space-2); + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + color: var(--bui-fg-secondary); + transition: color 0.2s ease-in-out; + + & > svg { + width: 1rem; + height: 1rem; + } +} + +.bui-MenuEmptyState { + padding-inline: var(--bui-space-3); + padding-block: var(--bui-space-2); + color: var(--bui-fg-secondary); + font-size: var(--bui-font-size-3); + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); +} diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index cea8aa2cb8..3ced5a6d37 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -31,6 +31,8 @@ import { ListBoxItem as RAListBoxItem, useFilter, RouterProvider, + Virtualizer, + ListLayout, } from 'react-aria-components'; import { ScrollArea } from '../ScrollArea'; import { useStyles } from '../../hooks/useStyles'; @@ -123,9 +125,25 @@ export const MenuListBox = (props: MenuListBoxProps) => { /** @public */ export const MenuAutocomplete = (props: MenuAutocompleteProps) => { - const { placement = 'bottom start', ...rest } = props; + const { + placement = 'bottom start', + virtualized = false, + maxWidth, + maxHeight, + ...rest + } = props; const { classNames } = useStyles('Menu'); const { contains } = useFilter({ sensitivity: 'base' }); + let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined'); + + const menuContent = ( + } + style={{ width: newMaxWidth, maxHeight }} + {...rest} + /> + ); return ( @@ -140,18 +158,18 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps) => { - - - } - {...rest} - /> - - - - - + {virtualized ? ( + + {menuContent} + + ) : ( + menuContent + )} ); @@ -208,24 +226,6 @@ export const MenuItem = (props: MenuItemProps) => { const isLink = href !== undefined; const isExternal = isExternalLink(href); - const content = ( - -
- {iconStart} - {children} -
-
- -
- - ); - if (isLink && isExternal) { return ( { onAction={() => window.open(href, '_blank', 'noopener,noreferrer')} {...rest} > +
+
+ {iconStart} + {children} +
+
+ +
+
+ + ); + } + + return ( + +
{iconStart} {children} @@ -242,11 +264,9 @@ export const MenuItem = (props: MenuItemProps) => {
- - ); - } - - return content; +
+ + ); }; /** @public */ diff --git a/packages/ui/src/components/Menu/MenuAutocomplete.stories.tsx b/packages/ui/src/components/Menu/MenuAutocomplete.stories.tsx new file mode 100644 index 0000000000..c0e1aca932 --- /dev/null +++ b/packages/ui/src/components/Menu/MenuAutocomplete.stories.tsx @@ -0,0 +1,200 @@ +/* + * Copyright 2025 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 type { Meta, StoryObj } from '@storybook/react-vite'; +import { + MenuTrigger, + SubmenuTrigger, + Menu, + MenuAutocomplete, + MenuItem, +} from './index'; +import { Button } from '../..'; +import { useState, useEffect } from 'react'; +import { MemoryRouter } from 'react-router-dom'; + +const meta = { + title: 'Backstage UI/MenuAutocomplete', + component: MenuTrigger, + decorators: [ + Story => ( + + + + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const options = [ + { label: 'Apple', value: 'apple' }, + { label: 'Banana', value: 'banana' }, + { label: 'Blueberry', value: 'blueberry' }, + { label: 'Cherry', value: 'cherry' }, + { label: 'Durian', value: 'durian' }, + { label: 'Elderberry', value: 'elderberry' }, + { label: 'Fig', value: 'fig' }, + { label: 'Grape', value: 'grape' }, + { label: 'Honeydew', value: 'honeydew' }, +]; + +export const Default: Story = { + args: { + children: null, + }, + render: () => ( + + + + Create new file... + Create new folder... + Assign to... + Assign to me + Change status... + Change priority... + Add label... + Remove label... + + + ), +}; + +export const PreviewAutocompleteMenu: Story = { + args: { + ...Default.args, + }, + render: () => ( + + + + Create new file... + Create new folder... + Assign to... + Assign to me + Change status... + Change priority... + Add label... + Remove label... + + + ), +}; + +export const Virtualized: Story = { + args: { + ...Default.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; + +export const VirtualizedMaxHeight: Story = { + args: { + ...Default.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; + +export const Submenu: Story = { + args: { + ...Default.args, + }, + render: () => ( + + + + Edit + Duplicate + + Submenu + + {options.map(option => ( + + {option.label} + + ))} + + + + + ), +}; diff --git a/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx b/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx new file mode 100644 index 0000000000..733d813773 --- /dev/null +++ b/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx @@ -0,0 +1,185 @@ +/* + * Copyright 2025 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 type { Meta, StoryObj } from '@storybook/react-vite'; +import { + MenuTrigger, + MenuAutocompleteListbox, + MenuListBoxItem, + Menu, + MenuItem, + SubmenuTrigger, +} from './index'; +import { Button, Flex, Text } from '../..'; +import { useState } from 'react'; +import { Selection } from 'react-aria-components'; +import { MemoryRouter } from 'react-router-dom'; + +const meta = { + title: 'Backstage UI/MenuAutocompleteListBox', + component: MenuTrigger, + decorators: [ + Story => ( + + + + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const options = [ + { label: 'Apple', value: 'apple' }, + { label: 'Banana', value: 'banana' }, + { label: 'Blueberry', value: 'blueberry' }, + { label: 'Cherry', value: 'cherry' }, + { label: 'Durian', value: 'durian' }, + { label: 'Elderberry', value: 'elderberry' }, + { label: 'Fig', value: 'fig' }, + { label: 'Grape', value: 'grape' }, + { label: 'Honeydew', value: 'honeydew' }, +]; + +export const Default: Story = { + args: { + children: null, + }, + render: () => { + const [selected, setSelected] = useState( + new Set([options[2].value]), + ); + + return ( + + Selected: {Array.from(selected).join(', ')} + + + + {options.map(option => ( + + {option.label} + + ))} + + + + ); + }, +}; + +export const PreviewListbox: Story = { + args: { + ...Default.args, + }, + render: () => { + const [selected, setSelected] = useState( + new Set([options[2].value]), + ); + + return ( + + Selected: {Array.from(selected).join(', ')} + + + + {options.map(option => ( + + {option.label} + + ))} + + + + ); + }, +}; + +export const PreviewListboxMultiple: Story = { + args: { + ...Default.args, + }, + render: () => { + const [selected, setSelected] = useState( + new Set([options[2].value, options[3].value]), + ); + + return ( + + Selected: {Array.from(selected).join(', ')} + + + + {options.map(option => ( + + {option.label} + + ))} + + + + ); + }, +}; + +export const Submenu: Story = { + args: { + ...Default.args, + }, + render: () => { + const [selected, setSelected] = useState( + new Set([options[2].value]), + ); + + return ( + + Selected: {Array.from(selected).join(', ')} + + + + Edit + Duplicate + + Submenu + + {options.map(option => ( + + {option.label} + + ))} + + + + + + ); + }, +}; diff --git a/packages/ui/src/components/Menu/MenuListBox.stories.tsx b/packages/ui/src/components/Menu/MenuListBox.stories.tsx new file mode 100644 index 0000000000..68aa071faf --- /dev/null +++ b/packages/ui/src/components/Menu/MenuListBox.stories.tsx @@ -0,0 +1,89 @@ +/* + * Copyright 2025 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 type { Meta, StoryObj } from '@storybook/react-vite'; +import { MenuTrigger, MenuListBox, MenuListBoxItem } from './index'; +import { Button, Flex, Text } from '../..'; +import { useState } from 'react'; +import { Selection } from 'react-aria-components'; +import { MemoryRouter } from 'react-router-dom'; + +const meta = { + title: 'Backstage UI/MenuListBox', + component: MenuTrigger, + decorators: [ + Story => ( + + + + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: null, + }, + render: () => ( + + + + Item 1 + Item 2 + Item 3 + + + ), +}; + +export const Controlled: Story = { + args: { + ...Default.args, + }, + render: () => { + const [selected, setSelected] = useState(new Set(['paul'])); + + return ( + + Selected: {Array.from(selected).join(', ')} + + + + + John Lennon + + + Paul McCartney + + + George Harrison + + + Ringo Starr + + + + + ); + }, +}; diff --git a/packages/ui/src/components/Menu/types.ts b/packages/ui/src/components/Menu/types.ts index 683d0055b7..caf90742a8 100644 --- a/packages/ui/src/components/Menu/types.ts +++ b/packages/ui/src/components/Menu/types.ts @@ -52,6 +52,9 @@ export interface MenuAutocompleteProps Omit, 'children'> { placeholder?: string; placement?: RAPopoverProps['placement']; + virtualized?: boolean; + maxWidth?: string; + maxHeight?: string; } /** @public */ diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts index 931bfacca7..fe040d09b1 100644 --- a/packages/ui/src/utils/componentDefinitions.ts +++ b/packages/ui/src/utils/componentDefinitions.ts @@ -165,6 +165,7 @@ export const componentDefinitions = { item: 'bui-MenuItem', itemListBox: 'bui-MenuItemListBox', itemListBoxCheck: 'bui-MenuItemListBoxCheck', + itemWrapper: 'bui-MenuItemWrapper', itemContent: 'bui-MenuItemContent', itemArrow: 'bui-MenuItemArrow', separator: 'bui-MenuSeparator', From 023f6ad7c6c200be5745771713868d2c0f91111d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 17:08:07 +0100 Subject: [PATCH 62/67] Add virtualizer on all other menus Signed-off-by: Charles de Dreuille --- .../ui/src/components/Menu/Menu.stories.tsx | 71 +++++++ .../ui/src/components/Menu/Menu.styles.css | 15 +- packages/ui/src/components/Menu/Menu.tsx | 194 +++++++++++------- .../Menu/MenuAutocompleteListBox.stories.tsx | 81 +++++++- .../components/Menu/MenuListBox.stories.tsx | 72 ++++++- packages/ui/src/components/Menu/types.ts | 9 + 6 files changed, 355 insertions(+), 87 deletions(-) diff --git a/packages/ui/src/components/Menu/Menu.stories.tsx b/packages/ui/src/components/Menu/Menu.stories.tsx index 8e6671db3d..a9a45402d1 100644 --- a/packages/ui/src/components/Menu/Menu.stories.tsx +++ b/packages/ui/src/components/Menu/Menu.stories.tsx @@ -36,6 +36,7 @@ import { RiShareBoxLine, } from '@remixicon/react'; import { MemoryRouter } from 'react-router-dom'; +import { useEffect, useState } from 'react'; const meta = { title: 'Backstage UI/Menu', @@ -341,3 +342,73 @@ export const Submenu: Story = { ), }; + +export const Virtualized: Story = { + args: { + ...Preview.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; + +export const VirtualizedMaxHeight: Story = { + args: { + ...Preview.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; diff --git a/packages/ui/src/components/Menu/Menu.styles.css b/packages/ui/src/components/Menu/Menu.styles.css index be475a6cfa..cd57e170b2 100644 --- a/packages/ui/src/components/Menu/Menu.styles.css +++ b/packages/ui/src/components/Menu/Menu.styles.css @@ -121,19 +121,10 @@ } .bui-MenuItemListBox { - display: flex; - align-items: center; - justify-content: space-between; - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - outline: none; - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - gap: var(--bui-space-6); + padding-inline: var(--bui-space-1); + display: block; - &:hover { + &:hover .bui-MenuItemWrapper { background: var(--bui-bg-surface-2); color: var(--bui-fg-primary); } diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index 3ced5a6d37..f202de985c 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -34,7 +34,6 @@ import { Virtualizer, ListLayout, } from 'react-aria-components'; -import { ScrollArea } from '../ScrollArea'; import { useStyles } from '../../hooks/useStyles'; import type { MenuTriggerProps, @@ -74,23 +73,41 @@ export const SubmenuTrigger = (props: SubmenuTriggerProps) => { /** @public */ export const Menu = (props: MenuProps) => { - const { placement = 'bottom start', ...rest } = props; + const { + placement = 'bottom start', + virtualized = false, + maxWidth, + maxHeight, + ...rest + } = props; const { classNames } = useStyles('Menu'); const navigate = useNavigate(); + let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined'); + + const menuContent = ( + } + style={{ width: newMaxWidth, maxHeight }} + {...rest} + /> + ); return ( - - - - {props.children} - - - - - - + {virtualized ? ( + + {menuContent} + + ) : ( + menuContent + )} ); @@ -101,24 +118,37 @@ export const MenuListBox = (props: MenuListBoxProps) => { const { selectionMode = 'single', placement = 'bottom start', + virtualized = false, + maxWidth, + maxHeight, ...rest } = props; const { classNames } = useStyles('Menu'); + let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined'); + + const listBoxContent = ( + + ); return ( - - - - - - - - + {virtualized ? ( + + {listBoxContent} + + ) : ( + listBoxContent + )} ); }; @@ -135,6 +165,7 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps) => { const { classNames } = useStyles('Menu'); const { contains } = useFilter({ sensitivity: 'base' }); let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined'); + const navigate = useNavigate(); const menuContent = ( ) => { /> ); + return ( + + + + + + + + + + {virtualized ? ( + + {menuContent} + + ) : ( + menuContent + )} + + + + ); +}; + +/** @public */ +export const MenuAutocompleteListbox = ( + props: MenuAutocompleteListBoxProps, +) => { + const { + selectionMode = 'single', + placement = 'bottom start', + virtualized = false, + maxWidth, + maxHeight, + ...rest + } = props; + const { classNames } = useStyles('Menu'); + const { contains } = useFilter({ sensitivity: 'base' }); + let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined'); + + const listBoxContent = ( + } + selectionMode={selectionMode} + style={{ width: newMaxWidth, maxHeight }} + {...rest} + /> + ); + return ( @@ -165,59 +254,16 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps) => { rowHeight: 32, }} > - {menuContent} + {listBoxContent} ) : ( - menuContent + listBoxContent )} ); }; -/** @public */ -export const MenuAutocompleteListbox = ( - props: MenuAutocompleteListBoxProps, -) => { - const { - selectionMode = 'single', - placement = 'bottom start', - ...rest - } = props; - const { classNames } = useStyles('Menu'); - const { contains } = useFilter({ sensitivity: 'base' }); - - return ( - - - - - - - - - - - } - selectionMode={selectionMode} - {...rest} - /> - - - - - - - - ); -}; - /** @public */ export const MenuItem = (props: MenuItemProps) => { const { iconStart, color = 'primary', children, href, ...rest } = props; @@ -282,11 +328,13 @@ export const MenuListBoxItem = (props: MenuListBoxItemProps) => { className={classNames.itemListBox} {...rest} > -
-
- +
+
+
+ +
+ {children}
- {children}
); diff --git a/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx b/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx index 733d813773..bf66f5f8fd 100644 --- a/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx +++ b/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx @@ -24,7 +24,7 @@ import { SubmenuTrigger, } from './index'; import { Button, Flex, Text } from '../..'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Selection } from 'react-aria-components'; import { MemoryRouter } from 'react-router-dom'; @@ -183,3 +183,82 @@ export const Submenu: Story = { ); }, }; + +export const Virtualized: Story = { + args: { + ...Default.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; + +export const VirtualizedMaxHeight: Story = { + args: { + ...Default.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; diff --git a/packages/ui/src/components/Menu/MenuListBox.stories.tsx b/packages/ui/src/components/Menu/MenuListBox.stories.tsx index 68aa071faf..72284fb6b9 100644 --- a/packages/ui/src/components/Menu/MenuListBox.stories.tsx +++ b/packages/ui/src/components/Menu/MenuListBox.stories.tsx @@ -17,7 +17,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import { MenuTrigger, MenuListBox, MenuListBoxItem } from './index'; import { Button, Flex, Text } from '../..'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Selection } from 'react-aria-components'; import { MemoryRouter } from 'react-router-dom'; @@ -87,3 +87,73 @@ export const Controlled: Story = { ); }, }; + +export const Virtualized: Story = { + args: { + ...Default.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; + +export const VirtualizedMaxHeight: Story = { + args: { + ...Default.args, + }, + render: () => { + const [pokemon, setPokemon] = useState< + Array<{ name: string; url: string }> + >([]); + + useEffect(() => { + fetch('https://pokeapi.co/api/v2/pokemon?limit=1000') + .then(response => response.json()) + .then(data => { + setPokemon(data.results); + }) + .catch(error => { + console.error('Error fetching Pokemon:', error); + }); + }, []); + + return ( + + + + {pokemon.map((p, index) => ( + + {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)} + + ))} + + + ); + }, +}; diff --git a/packages/ui/src/components/Menu/types.ts b/packages/ui/src/components/Menu/types.ts index caf90742a8..6d4852a4b3 100644 --- a/packages/ui/src/components/Menu/types.ts +++ b/packages/ui/src/components/Menu/types.ts @@ -37,6 +37,9 @@ export interface MenuProps extends RAMenuProps, Omit, 'children'> { placement?: RAPopoverProps['placement']; + virtualized?: boolean; + maxWidth?: string; + maxHeight?: string; } /** @public */ @@ -44,6 +47,9 @@ export interface MenuListBoxProps extends RAListBoxProps, Omit, 'children'> { placement?: RAPopoverProps['placement']; + virtualized?: boolean; + maxWidth?: string; + maxHeight?: string; } /** @public */ @@ -63,6 +69,9 @@ export interface MenuAutocompleteListBoxProps Omit, 'children'> { placeholder?: string; placement?: RAPopoverProps['placement']; + virtualized?: boolean; + maxWidth?: string; + maxHeight?: string; } /** @public */ From 8b7c3c93b8c8b5555ffe64369da5ca3a6c0e67a6 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 17:21:24 +0100 Subject: [PATCH 63/67] Improve report Signed-off-by: Charles de Dreuille --- .changeset/old-tips-juggle.md | 5 +++++ packages/ui/report.api.md | 25 +++++++++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 .changeset/old-tips-juggle.md diff --git a/.changeset/old-tips-juggle.md b/.changeset/old-tips-juggle.md new file mode 100644 index 0000000000..59a96102e9 --- /dev/null +++ b/.changeset/old-tips-juggle.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Add new `virtualized`, `maxWidth` and `maxHeight` props to `Menu`, `MenuListBox`, `MenuAutocomplete` and `MenuAutocompleteListBox` to allow for virtalization of long lists inside menus. diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 1f1664b9e9..3d8518bad7 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -516,6 +516,7 @@ export const componentDefinitions: { readonly item: 'bui-MenuItem'; readonly itemListBox: 'bui-MenuItemListBox'; readonly itemListBoxCheck: 'bui-MenuItemListBoxCheck'; + readonly itemWrapper: 'bui-MenuItemWrapper'; readonly itemContent: 'bui-MenuItemContent'; readonly itemArrow: 'bui-MenuItemArrow'; readonly separator: 'bui-MenuSeparator'; @@ -1277,9 +1278,15 @@ export interface MenuAutocompleteListBoxProps extends ListBoxProps, Omit, 'children'> { // (undocumented) + maxHeight?: string; + // (undocumented) + maxWidth?: string; + // (undocumented) placeholder?: string; // (undocumented) placement?: PopoverProps['placement']; + // (undocumented) + virtualized?: boolean; } // @public (undocumented) @@ -1287,9 +1294,15 @@ export interface MenuAutocompleteProps extends MenuProps_2, Omit, 'children'> { // (undocumented) + maxHeight?: string; + // (undocumented) + maxWidth?: string; + // (undocumented) placeholder?: string; // (undocumented) placement?: PopoverProps['placement']; + // (undocumented) + virtualized?: boolean; } // @public (undocumented) @@ -1326,7 +1339,13 @@ export interface MenuListBoxProps extends ListBoxProps, Omit, 'children'> { // (undocumented) + maxHeight?: string; + // (undocumented) + maxWidth?: string; + // (undocumented) placement?: PopoverProps['placement']; + // (undocumented) + virtualized?: boolean; } // @public (undocumented) @@ -1334,7 +1353,13 @@ export interface MenuProps extends MenuProps_2, Omit, 'children'> { // (undocumented) + maxHeight?: string; + // (undocumented) + maxWidth?: string; + // (undocumented) placement?: PopoverProps['placement']; + // (undocumented) + virtualized?: boolean; } // @public (undocumented) From 61ec1f612a4ac4c0716b191584297d5760f8e5ec Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 17:25:56 +0100 Subject: [PATCH 64/67] Update styles.css Signed-off-by: Charles de Dreuille --- packages/ui/css/styles.css | 479 ++++++++++++++++++------------------- 1 file changed, 238 insertions(+), 241 deletions(-) diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 65fe585e39..4ded2a5b57 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -701,247 +701,6 @@ } } - .bui-MenuPopover { - border: 1px solid var(--bui-border); - border-radius: var(--bui-radius-2); - background: var(--bui-bg-surface-1); - color: var(--bui-fg-primary); - outline: none; - flex-direction: column; - min-height: 0; - transition: transform .2s, opacity .2s; - display: flex; - overflow: hidden; - - &[data-entering], &[data-exiting] { - transform: var(--origin); - opacity: 0; - } - - &[data-placement="top"] { - --origin: translateY(8px); - } - - &[data-placement="bottom"] { - --origin: translateY(-8px); - } - - &[data-placement="right"] { - --origin: translateX(-8px); - } - - &[data-placement="left"] { - --origin: translateX(8px); - } - } - - .bui-MenuContent { - max-height: inherit; - box-sizing: border-box; - padding: var(--bui-space-1); - outline: none; - min-width: 150px; - overflow: auto; - } - - .bui-MenuPopover .bui-ScrollAreaRoot { - flex-direction: column; - flex: 1; - height: 100%; - min-height: 0; - display: flex; - } - - .bui-MenuPopover .bui-ScrollAreaScrollbar { - margin-inline: var(--bui-space-1_5); - } - - .bui-MenuItem { - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - justify-content: space-between; - align-items: center; - gap: var(--bui-space-6); - outline: none; - display: flex; - - &[data-focused], &[data-open] { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); - } - - &[data-color="danger"] { - color: var(--bui-fg-danger); - } - - &[data-color="danger"][data-focused] { - background: var(--bui-bg-danger); - color: var(--bui-fg-danger); - } - - &[data-has-submenu] { - & > .bui-MenuItemArrow { - display: block; - } - } - } - - .bui-MenuItemListBox { - height: 2rem; - padding-inline: var(--bui-space-2); - border-radius: var(--bui-radius-2); - cursor: default; - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-3); - justify-content: space-between; - align-items: center; - gap: var(--bui-space-6); - outline: none; - display: flex; - - &:hover { - background: var(--bui-bg-surface-2); - color: var(--bui-fg-primary); - } - - &[data-selected] .bui-MenuItemListBoxCheck { - & > svg { - opacity: 1; - color: var(--bui-fg-primary); - } - } - } - - .bui-MenuItemListBoxCheck { - justify-content: center; - align-items: center; - width: 1rem; - height: 1rem; - display: flex; - - & > svg { - opacity: 0; - width: 1rem; - height: 1rem; - } - } - - .bui-MenuItemContent { - align-items: center; - gap: var(--bui-space-2); - display: flex; - - & > svg { - width: 1rem; - height: 1rem; - } - } - - .bui-MenuItemArrow { - width: 1rem; - height: 1rem; - display: none; - - & > svg { - width: 1rem; - height: 1rem; - } - } - - .bui-MenuSection { - &:first-child .bui-MenuSectionHeader { - padding-top: 0; - } - } - - .bui-MenuSectionHeader { - height: 2rem; - padding-top: var(--bui-space-3); - padding-left: var(--bui-space-2); - color: var(--bui-fg-primary); - font-size: var(--bui-font-size-1); - letter-spacing: .05rem; - text-transform: uppercase; - align-items: center; - font-weight: bold; - display: flex; - } - - .bui-MenuSeparator { - background: var(--bui-border); - height: 1px; - margin-inline: var(--bui-space-1_5); - margin-block: var(--bui-space-1); - } - - .bui-MenuSearchField { - font-family: var(--bui-font-regular); - flex-shrink: 0; - width: 100%; - position: relative; - - &[data-empty] { - & .bui-MenuSearchFieldClear { - display: none; - } - } - } - - .bui-MenuSearchFieldInput { - padding: 0 var(--bui-space-3); - border: none; - border-bottom: 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: 2rem; - cursor: inherit; - outline: none; - align-items: center; - display: flex; - - &::-webkit-search-cancel-button, &::-webkit-search-decoration { - -webkit-appearance: none; - } - } - - .bui-MenuSearchFieldClear { - right: var(--bui-space-2); - 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; - - & > svg { - width: 1rem; - height: 1rem; - } - } - - .bui-MenuEmptyState { - padding: var(--bui-space-1); - color: var(--bui-fg-secondary); - font-size: var(--bui-font-size-3); - font-family: var(--bui-font-regular); - font-weight: var(--bui-font-weight-regular); - } - .bui-Popover { background-color: var(--bui-bg-surface-1); border: 1px solid var(--bui-border); @@ -11078,3 +10837,241 @@ } @layer legacy; + +.bui-MenuPopover { + border: 1px solid var(--bui-border); + border-radius: var(--bui-radius-2); + background: var(--bui-bg-surface-1); + color: var(--bui-fg-primary); + outline: none; + flex-direction: column; + min-height: 0; + transition: transform .2s, opacity .2s; + display: flex; + overflow: hidden; + + &[data-entering], &[data-exiting] { + transform: var(--origin); + opacity: 0; + } + + &[data-placement="top"] { + --origin: translateY(8px); + } + + &[data-placement="bottom"] { + --origin: translateY(-8px); + } + + &[data-placement="right"] { + --origin: translateX(-8px); + } + + &[data-placement="left"] { + --origin: translateX(8px); + } +} + +.bui-MenuContent { + max-height: inherit; + box-sizing: border-box; + min-width: 150px; + padding-block: var(--bui-space-1); + outline: none; + overflow: auto; +} + +.bui-MenuPopover .bui-ScrollAreaRoot { + flex-direction: column; + flex: 1; + height: 100%; + min-height: 0; + display: flex; +} + +.bui-MenuPopover .bui-ScrollAreaScrollbar { + margin-inline: var(--bui-space-1_5); +} + +.bui-MenuItem { + padding-inline: var(--bui-space-1); + display: block; + + &[data-focused] .bui-MenuItemWrapper, &[data-open] .bui-MenuItemWrapper { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-color="danger"] .bui-MenuItemWrapper { + color: var(--bui-fg-danger); + } + + &[data-color="danger"][data-focused] .bui-MenuItemWrapper { + background: var(--bui-bg-danger); + color: var(--bui-fg-danger); + } + + &[data-has-submenu] { + & > .bui-MenuItemWrapper > .bui-MenuItemArrow { + display: block; + } + } +} + +.bui-MenuItemWrapper { + height: 2rem; + padding-inline: var(--bui-space-2); + border-radius: var(--bui-radius-2); + cursor: default; + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-3); + justify-content: space-between; + align-items: center; + gap: var(--bui-space-6); + outline: none; + display: flex; +} + +.bui-MenuItemListBox { + padding-inline: var(--bui-space-1); + display: block; + + &:hover .bui-MenuItemWrapper { + background: var(--bui-bg-surface-2); + color: var(--bui-fg-primary); + } + + &[data-selected] .bui-MenuItemListBoxCheck { + & > svg { + opacity: 1; + color: var(--bui-fg-primary); + } + } +} + +.bui-MenuItemListBoxCheck { + justify-content: center; + align-items: center; + width: 1rem; + height: 1rem; + display: flex; + + & > svg { + opacity: 0; + width: 1rem; + height: 1rem; + } +} + +.bui-MenuItemContent { + align-items: center; + gap: var(--bui-space-2); + display: flex; + + & > svg { + width: 1rem; + height: 1rem; + } +} + +.bui-MenuItemArrow { + width: 1rem; + height: 1rem; + display: none; + + & > svg { + width: 1rem; + height: 1rem; + } +} + +.bui-MenuSection { + &:first-child .bui-MenuSectionHeader { + padding-top: 0; + } +} + +.bui-MenuSectionHeader { + height: 2rem; + padding-top: var(--bui-space-3); + padding-left: var(--bui-space-2); + color: var(--bui-fg-primary); + font-size: var(--bui-font-size-1); + letter-spacing: .05rem; + text-transform: uppercase; + align-items: center; + font-weight: bold; + display: flex; +} + +.bui-MenuSeparator { + background: var(--bui-border); + height: 1px; + margin-inline: var(--bui-space-1_5); + margin-block: var(--bui-space-1); +} + +.bui-MenuSearchField { + font-family: var(--bui-font-regular); + flex-shrink: 0; + width: 100%; + position: relative; + + &[data-empty] { + & .bui-MenuSearchFieldClear { + display: none; + } + } +} + +.bui-MenuSearchFieldInput { + padding: 0 var(--bui-space-3); + border: none; + border-bottom: 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: 2rem; + cursor: inherit; + outline: none; + align-items: center; + display: flex; + + &::-webkit-search-cancel-button, &::-webkit-search-decoration { + -webkit-appearance: none; + } +} + +.bui-MenuSearchFieldClear { + right: var(--bui-space-2); + 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; + + & > svg { + width: 1rem; + height: 1rem; + } +} + +.bui-MenuEmptyState { + padding-inline: var(--bui-space-3); + padding-block: var(--bui-space-2); + color: var(--bui-fg-secondary); + font-size: var(--bui-font-size-3); + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); +} From 498832d6aadee4b658a169a60feac5742b2ee092 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 17:35:12 +0100 Subject: [PATCH 65/67] Fix sections Signed-off-by: Charles de Dreuille --- packages/ui/css/styles.css | 2 +- packages/ui/src/components/Menu/Menu.styles.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index 4ded2a5b57..a7cde3e2f6 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -10994,7 +10994,7 @@ .bui-MenuSectionHeader { height: 2rem; padding-top: var(--bui-space-3); - padding-left: var(--bui-space-2); + padding-left: var(--bui-space-3); color: var(--bui-fg-primary); font-size: var(--bui-font-size-1); letter-spacing: .05rem; diff --git a/packages/ui/src/components/Menu/Menu.styles.css b/packages/ui/src/components/Menu/Menu.styles.css index cd57e170b2..1e930e95b6 100644 --- a/packages/ui/src/components/Menu/Menu.styles.css +++ b/packages/ui/src/components/Menu/Menu.styles.css @@ -184,7 +184,7 @@ display: flex; align-items: center; padding-top: var(--bui-space-3); - padding-left: var(--bui-space-2); + padding-left: var(--bui-space-3); color: var(--bui-fg-primary); font-size: var(--bui-font-size-1); font-weight: bold; From 2522b7d0c8bb16cd2a52bcf6c478c2a7b60841c4 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 17:45:25 +0100 Subject: [PATCH 66/67] Update Menu.tsx Signed-off-by: Charles de Dreuille --- packages/ui/src/components/Menu/Menu.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index f202de985c..574a26393c 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -55,6 +55,9 @@ import { import { useNavigate, useHref } from 'react-router-dom'; import { isExternalLink } from '../../utils/isExternalLink'; +// The height will be used for virtualized menus. It should match the size set in CSS for each menu item. +const rowHeight = 32; + const MenuEmptyState = () => { const { classNames } = useStyles('Menu'); @@ -100,7 +103,7 @@ export const Menu = (props: MenuProps) => { {menuContent} @@ -141,7 +144,7 @@ export const MenuListBox = (props: MenuListBoxProps) => { {listBoxContent} @@ -194,7 +197,7 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps) => { {menuContent} @@ -251,7 +254,7 @@ export const MenuAutocompleteListbox = ( {listBoxContent} From b9897d8437bac486812fa1f7bf3174237f983cf2 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 17:51:21 +0100 Subject: [PATCH 67/67] Improve docs Signed-off-by: Charles de Dreuille --- docs-ui/public/theme-backstage.css | 2 +- docs-ui/src/content/components/menu.props.ts | 40 ++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/docs-ui/public/theme-backstage.css b/docs-ui/public/theme-backstage.css index 9d9c282f5c..2baeadddbd 100644 --- a/docs-ui/public/theme-backstage.css +++ b/docs-ui/public/theme-backstage.css @@ -1,2 +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-baseline{align-items:baseline}.bui-align-stretch{align-items:stretch}.bui-jc-start{justify-content:start}.bui-jc-center{justify-content:center}.bui-jc-end{justify-content:end}.bui-jc-between{justify-content:space-between}.bui-fd-row{flex-direction:row}.bui-fd-column{flex-direction:column}.bui-fd-row-reverse{flex-direction:row-reverse}.bui-fd-column-reverse{flex-direction:column-reverse}@media (width>=640px){.xs\:bui-align-start{align-items:start}.xs\:bui-align-center{align-items:center}.xs\:bui-align-end{align-items:end}.xs\:bui-align-stretch{align-items:stretch}.xs\:bui-jc-start{justify-content:start}.xs\:bui-jc-center{justify-content:center}.xs\:bui-jc-end{justify-content:end}.xs\:bui-jc-between{justify-content:space-between}.xs\:bui-fd-row{flex-direction:row}.xs\:bui-fd-column{flex-direction:column}.xs\:bui-fd-row-reverse{flex-direction:row-reverse}.xs\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=768px){.sm\:bui-align-start{align-items:start}.sm\:bui-align-center{align-items:center}.sm\:bui-align-end{align-items:end}.sm\:bui-align-stretch{align-items:stretch}.sm\:bui-jc-start{justify-content:start}.sm\:bui-jc-center{justify-content:center}.sm\:bui-jc-end{justify-content:end}.sm\:bui-jc-between{justify-content:space-between}.sm\:bui-fd-row{flex-direction:row}.sm\:bui-fd-column{flex-direction:column}.sm\:bui-fd-row-reverse{flex-direction:row-reverse}.sm\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1024px){.md\:bui-align-start{align-items:start}.md\:bui-align-center{align-items:center}.md\:bui-align-end{align-items:end}.md\:bui-align-stretch{align-items:stretch}.md\:bui-jc-start{justify-content:start}.md\:bui-jc-center{justify-content:center}.md\:bui-jc-end{justify-content:end}.md\:bui-jc-between{justify-content:space-between}.md\:bui-fd-row{flex-direction:row}.md\:bui-fd-column{flex-direction:column}.md\:bui-fd-row-reverse{flex-direction:row-reverse}.md\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1280px){.lg\:bui-align-start{align-items:start}.lg\:bui-align-center{align-items:center}.lg\:bui-align-end{align-items:end}.lg\:bui-align-stretch{align-items:stretch}.lg\:bui-jc-start{justify-content:start}.lg\:bui-jc-center{justify-content:center}.lg\:bui-jc-end{justify-content:end}.lg\:bui-jc-between{justify-content:space-between}.lg\:bui-fd-row{flex-direction:row}.lg\:bui-fd-column{flex-direction:column}.lg\:bui-fd-row-reverse{flex-direction:row-reverse}.lg\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1536px){.xl\:bui-align-start{align-items:start}.xl\:bui-align-center{align-items:center}.xl\:bui-align-end{align-items:end}.xl\:bui-align-stretch{align-items:stretch}.xl\:bui-jc-start{justify-content:start}.xl\:bui-jc-center{justify-content:center}.xl\:bui-jc-end{justify-content:end}.xl\:bui-jc-between{justify-content:space-between}.xl\:bui-fd-row{flex-direction:row}.xl\:bui-fd-column{flex-direction:column}.xl\:bui-fd-row-reverse{flex-direction:row-reverse}.xl\:bui-fd-column-reverse{flex-direction:column-reverse}}: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-MenuPopover{border:1px solid var(--bui-border);border-radius:var(--bui-radius-2);background:var(--bui-bg-surface-1);color:var(--bui-fg-primary);outline:none;flex-direction:column;min-height:0;transition:transform .2s,opacity .2s;display:flex;overflow:hidden;&[data-entering],&[data-exiting]{transform:var(--origin);opacity:0}&[data-placement=top]{--origin:translateY(8px)}&[data-placement=bottom]{--origin:translateY(-8px)}&[data-placement=right]{--origin:translateX(-8px)}&[data-placement=left]{--origin:translateX(8px)}}.bui-MenuContent{max-height:inherit;box-sizing:border-box;padding:var(--bui-space-1);outline:none;min-width:150px;overflow:auto}.bui-MenuPopover .bui-ScrollAreaRoot{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.bui-MenuPopover .bui-ScrollAreaScrollbar{margin-inline:var(--bui-space-1_5)}.bui-MenuItem{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&[data-focused],&[data-open]{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-color=danger]{color:var(--bui-fg-danger)}&[data-color=danger][data-focused]{background:var(--bui-bg-danger);color:var(--bui-fg-danger)}&[data-has-submenu]{&>.bui-MenuItemArrow{display:block}}}.bui-MenuItemListBox{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex;&:hover{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-selected] .bui-MenuItemListBoxCheck{&>svg{opacity:1;color:var(--bui-fg-primary)}}}.bui-MenuItemListBoxCheck{justify-content:center;align-items:center;width:1rem;height:1rem;display:flex;&>svg{opacity:0;width:1rem;height:1rem}}.bui-MenuItemContent{align-items:center;gap:var(--bui-space-2);display:flex;&>svg{width:1rem;height:1rem}}.bui-MenuItemArrow{width:1rem;height:1rem;display:none;&>svg{width:1rem;height:1rem}}.bui-MenuSection{&:first-child .bui-MenuSectionHeader{padding-top:0}}.bui-MenuSectionHeader{height:2rem;padding-top:var(--bui-space-3);padding-left:var(--bui-space-2);color:var(--bui-fg-primary);font-size:var(--bui-font-size-1);letter-spacing:.05rem;text-transform:uppercase;align-items:center;font-weight:700;display:flex}.bui-MenuSeparator{background:var(--bui-border);height:1px;margin-inline:var(--bui-space-1_5);margin-block:var(--bui-space-1)}.bui-MenuSearchField{font-family:var(--bui-font-regular);flex-shrink:0;width:100%;position:relative;&[data-empty]{& .bui-MenuSearchFieldClear{display:none}}}.bui-MenuSearchFieldInput{padding:0 var(--bui-space-3);border:none;border-bottom: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:2rem;cursor:inherit;outline:none;align-items:center;display:flex;&::-webkit-search-cancel-button,&::-webkit-search-decoration{-webkit-appearance:none}}.bui-MenuSearchFieldClear{right:var(--bui-space-2);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;&>svg{width:1rem;height:1rem}}.bui-MenuEmptyState{padding:var(--bui-space-1);color:var(--bui-fg-secondary);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular)}.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-TagList{gap:var(--bui-space-2);flex-wrap:wrap;display:flex}.bui-Tag{color:var(--bui-fg-primary);background-color:var(--bui-gray-2);border-radius:var(--bui-radius-2);font-weight:var(--bui-font-weight-regular);justify-content:center;align-items:center;gap:var(--bui-space-1);box-sizing:border-box;transition-property:background-color,box-shadow,color;transition-duration:.2s;transition-timing-function:ease-in-out;display:flex}.bui-Tag[data-size=small]{height:26px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-1)}.bui-Tag[data-size=medium]{height:32px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-2)}.bui-Tag[data-hovered]{background-color:var(--bui-gray-3);cursor:pointer}.bui-Tag[data-focus-visible]{outline:2px solid var(--bui-ring);outline-offset:1px}.bui-Tag[data-selected]{box-shadow:inset 0 0 0 1px var(--bui-gray-8)}.bui-Tag[data-disabled]{color:var(--bui-fg-disabled);cursor:not-allowed}.bui-TagRemoveButton{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;width:1rem;height:1rem;margin:0;padding:0}.bui-TagIcon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:flex;& svg{width:1rem;height:1rem}}.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-PasswordField{font-family:var(--bui-font-regular);--bui-passwordmanager-icon-width:var(--bui-space-1);flex-direction:column;flex-shrink:0;width:100%;display:flex}.bui-InputVisibility{right:var(--bui-passwordmanager-icon-width);cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:absolute;top:0;bottom:0;&[data-size=small]{width:2rem;height:2rem}&[data-size=small] svg{width:1rem;height:1rem}&[data-size=medium]{width:2.5rem;height:2.5rem}&[data-size=medium] svg{width:1.25rem;height:1.25rem}}.bui-PasswordField .bui-InputWrapper[data-size=small] .bui-Input{padding-right:calc(2rem + var(--bui-passwordmanager-icon-width))}.bui-PasswordField .bui-InputWrapper[data-size=medium] .bui-Input{padding-right:calc(2.5rem + var(--bui-passwordmanager-icon-width))}.bui-SearchField{flex:1 0;&[data-empty]{& .bui-InputClear{display:none}}&[data-start-collapsed=true]{flex:0 auto;padding:0;transition:flex-basis .3s ease-in-out;&[data-collapsed=true]{flex-basis:200px}&[data-collapsed=false]{cursor:pointer;&[data-size=medium]{flex-basis:2.5rem;height:2.5rem}&[data-size=small]{flex-basis:2rem;height:2rem}&[data-size=medium] .bui-Input{&::placeholder{opacity:0}}&[data-size=small] .bui-Input{&::placeholder{opacity:0}}& .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:0}}}}}.bui-SearchField .bui-Input{transition:padding .3s ease-in-out,border-color .2s ease-in-out,outline-color .2s ease-in-out;&[data-hovered]{border-color:var(--bui-border-hover)}&[data-focused]{border-color:var(--bui-border-pressed);outline-width:0}}.bui-SearchField .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:var(--bui-space-6)}}.bui-SearchField .bui-InputIcon{justify-content:center;display:flex;left:0;&[data-size=small]{width:var(--bui-space-8)}&[data-size=medium]{width:var(--bui-space-10)}}.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 +@layer tokens{:root{--bui-font-regular:system-ui;--bui-font-monospace:ui-monospace,"Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;--bui-font-weight-regular:400;--bui-font-weight-bold:600;--bui-font-size-1:.625rem;--bui-font-size-2:.75rem;--bui-font-size-3:.875rem;--bui-font-size-4:1rem;--bui-font-size-5:1.25rem;--bui-font-size-6:1.5rem;--bui-font-size-7:2rem;--bui-font-size-8:3rem;--bui-font-size-9:4rem;--bui-font-size-10:5.75rem;--bui-space:.25rem;--bui-space-0_5:calc(var(--bui-space)*.5);--bui-space-1:var(--bui-space);--bui-space-1_5:calc(var(--bui-space)*1.5);--bui-space-2:calc(var(--bui-space)*2);--bui-space-3:calc(var(--bui-space)*3);--bui-space-4:calc(var(--bui-space)*4);--bui-space-5:calc(var(--bui-space)*5);--bui-space-6:calc(var(--bui-space)*6);--bui-space-7:calc(var(--bui-space)*7);--bui-space-8:calc(var(--bui-space)*8);--bui-space-9:calc(var(--bui-space)*9);--bui-space-10:calc(var(--bui-space)*10);--bui-space-11:calc(var(--bui-space)*11);--bui-space-12:calc(var(--bui-space)*12);--bui-space-13:calc(var(--bui-space)*13);--bui-space-14:calc(var(--bui-space)*14);--bui-radius-1:calc(.125rem);--bui-radius-2:calc(.25rem);--bui-radius-3:calc(.5rem);--bui-radius-4:calc(.75rem);--bui-radius-5:calc(1rem);--bui-radius-6:calc(1.25rem);--bui-radius-full:9999px;--bui-black:#000;--bui-white:#fff;--bui-gray-1:#f8f8f8;--bui-gray-2:#ececec;--bui-gray-3:#d9d9d9;--bui-gray-4:#c1c1c1;--bui-gray-5:#9e9e9e;--bui-gray-6:#8c8c8c;--bui-gray-7:#757575;--bui-gray-8:#595959;--bui-bg:var(--bui-gray-1);--bui-bg-surface-1:var(--bui-white);--bui-bg-surface-2:var(--bui-gray-2);--bui-bg-solid:#1f5493;--bui-bg-solid-hover:#163a66;--bui-bg-solid-pressed:#0f2b4e;--bui-bg-solid-disabled:#ebebeb;--bui-bg-tint:transparent;--bui-bg-tint-hover:#1f549366;--bui-bg-tint-pressed:#1f549399;--bui-bg-tint-disabled:#ebebeb;--bui-bg-danger:#feebe7;--bui-bg-warning:#fff2b2;--bui-bg-success:#e6f6eb;--bui-fg-primary:var(--bui-black);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:#1f5493;--bui-fg-link-hover:#1f2d5c;--bui-fg-disabled:#9e9e9e;--bui-fg-solid:var(--bui-white);--bui-fg-solid-disabled:#9c9c9c;--bui-fg-tint:#1f5493;--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#e22b2b;--bui-fg-warning:#e36d05;--bui-fg-success:#1db954;--bui-border:#0000001a;--bui-border-hover:#0003;--bui-border-pressed:#0006;--bui-border-disabled:#0000001a;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#1f5493;--bui-scrollbar:#a0a0a03b;--bui-scrollbar-thumb:#a0a0a0;--bui-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite}[data-theme-mode=dark]{--bui-gray-1:#191919;--bui-gray-2:#242424;--bui-gray-3:#373737;--bui-gray-4:#464646;--bui-gray-5:#575757;--bui-gray-6:#7b7b7b;--bui-gray-7:#9e9e9e;--bui-gray-8:#b4b4b4;--bui-bg:#333;--bui-bg-surface-1:#424242;--bui-bg-surface-2:var(--bui-gray-2);--bui-bg-solid:#9cc9ff;--bui-bg-solid-hover:#83b9fd;--bui-bg-solid-pressed:#83b9fd;--bui-bg-solid-disabled:#222;--bui-bg-tint:transparent;--bui-bg-tint-hover:#9cc9ff1f;--bui-bg-tint-pressed:#9cc9ff29;--bui-bg-tint-disabled:transparent;--bui-bg-danger:#3b1219;--bui-bg-warning:#302008;--bui-bg-success:#132d21;--bui-fg-primary:var(--bui-white);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:#9cc9ff;--bui-fg-link-hover:#7eb5f7;--bui-fg-disabled:var(--bui-gray-7);--bui-fg-solid:#101821;--bui-fg-solid-disabled:var(--bui-gray-5);--bui-fg-tint:#9cc9ff;--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#e22b2b;--bui-fg-warning:#e36d05;--bui-fg-success:#1db954;--bui-border:#ffffff1f;--bui-border-hover:#fff6;--bui-border-pressed:#ffffff80;--bui-border-disabled:#fff3;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#1f5493;--bui-scrollbar:#3636363a;--bui-scrollbar-thumb:#575757}}@layer base{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:where(a){color:inherit;text-decoration:none}@keyframes pulse{50%{opacity:.5}}body{background-color:var(--bui-bg)}}@layer components{.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-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-TagList{gap:var(--bui-space-2);flex-wrap:wrap;display:flex}.bui-Tag{color:var(--bui-fg-primary);background-color:var(--bui-gray-2);border-radius:var(--bui-radius-2);font-weight:var(--bui-font-weight-regular);justify-content:center;align-items:center;gap:var(--bui-space-1);box-sizing:border-box;transition-property:background-color,box-shadow,color;transition-duration:.2s;transition-timing-function:ease-in-out;display:flex}.bui-Tag[data-size=small]{height:26px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-1)}.bui-Tag[data-size=medium]{height:32px;padding:0 var(--bui-space-2);font-size:var(--bui-font-size-2)}.bui-Tag[data-hovered]{background-color:var(--bui-gray-3);cursor:pointer}.bui-Tag[data-focus-visible]{outline:2px solid var(--bui-ring);outline-offset:1px}.bui-Tag[data-selected]{box-shadow:inset 0 0 0 1px var(--bui-gray-8)}.bui-Tag[data-disabled]{color:var(--bui-fg-disabled);cursor:not-allowed}.bui-TagRemoveButton{cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;width:1rem;height:1rem;margin:0;padding:0}.bui-TagIcon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:flex;& svg{width:1rem;height:1rem}}.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-PasswordField{font-family:var(--bui-font-regular);--bui-passwordmanager-icon-width:var(--bui-space-1);flex-direction:column;flex-shrink:0;width:100%;display:flex}.bui-InputVisibility{right:var(--bui-passwordmanager-icon-width);cursor:pointer;color:var(--bui-fg-primary);background-color:#0000;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:absolute;top:0;bottom:0;&[data-size=small]{width:2rem;height:2rem}&[data-size=small] svg{width:1rem;height:1rem}&[data-size=medium]{width:2.5rem;height:2.5rem}&[data-size=medium] svg{width:1.25rem;height:1.25rem}}.bui-PasswordField .bui-InputWrapper[data-size=small] .bui-Input{padding-right:calc(2rem + var(--bui-passwordmanager-icon-width))}.bui-PasswordField .bui-InputWrapper[data-size=medium] .bui-Input{padding-right:calc(2.5rem + var(--bui-passwordmanager-icon-width))}.bui-SearchField{flex:1 0;&[data-empty]{& .bui-InputClear{display:none}}&[data-start-collapsed=true]{flex:0 auto;padding:0;transition:flex-basis .3s ease-in-out;&[data-collapsed=true]{flex-basis:200px}&[data-collapsed=false]{cursor:pointer;&[data-size=medium]{flex-basis:2.5rem;height:2.5rem}&[data-size=small]{flex-basis:2rem;height:2rem}&[data-size=medium] .bui-Input{&::placeholder{opacity:0}}&[data-size=small] .bui-Input{&::placeholder{opacity:0}}& .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:0}}}}}.bui-SearchField .bui-Input{transition:padding .3s ease-in-out,border-color .2s ease-in-out,outline-color .2s ease-in-out;&[data-hovered]{border-color:var(--bui-border-hover)}&[data-focused]{border-color:var(--bui-border-pressed);outline-width:0}}.bui-SearchField .bui-InputWrapper{& .bui-Input[data-icon]{padding-right:var(--bui-space-6)}}.bui-SearchField .bui-InputIcon{justify-content:center;display:flex;left:0;&[data-size=small]{width:var(--bui-space-8)}&[data-size=medium]{width:var(--bui-space-10)}}.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}}}@layer utilities{.bui-p{padding:var(--p)}.bui-p-0\.5{padding:var(--bui-space-0_5)}.bui-p-1{padding:var(--bui-space-1)}.bui-p-1\.5{padding:var(--bui-space-1_5)}.bui-p-2{padding:var(--bui-space-2)}.bui-p-3{padding:var(--bui-space-3)}.bui-p-4{padding:var(--bui-space-4)}.bui-p-5{padding:var(--bui-space-5)}.bui-p-6{padding:var(--bui-space-6)}.bui-p-7{padding:var(--bui-space-7)}.bui-p-8{padding:var(--bui-space-8)}.bui-p-9{padding:var(--bui-space-9)}.bui-p-10{padding:var(--bui-space-10)}.bui-p-11{padding:var(--bui-space-11)}.bui-p-12{padding:var(--bui-space-12)}.bui-p-13{padding:var(--bui-space-13)}.bui-p-14{padding:var(--bui-space-14)}@media (width>=640px){.xs\:bui-p{padding:var(--p-xs)}.xs\:bui-p-0\.5{padding:var(--bui-space-0_5)}.xs\:bui-p-1{padding:var(--bui-space-1)}.xs\:bui-p-1\.5{padding:var(--bui-space-1_5)}.xs\:bui-p-2{padding:var(--bui-space-2)}.xs\:bui-p-3{padding:var(--bui-space-3)}.xs\:bui-p-4{padding:var(--bui-space-4)}.xs\:bui-p-5{padding:var(--bui-space-5)}.xs\:bui-p-6{padding:var(--bui-space-6)}.xs\:bui-p-7{padding:var(--bui-space-7)}.xs\:bui-p-8{padding:var(--bui-space-8)}.xs\:bui-p-9{padding:var(--bui-space-9)}.xs\:bui-p-10{padding:var(--bui-space-10)}.xs\:bui-p-11{padding:var(--bui-space-11)}.xs\:bui-p-12{padding:var(--bui-space-12)}.xs\:bui-p-13{padding:var(--bui-space-13)}.xs\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-p{padding:var(--p-sm)}.sm\:bui-p-0\.5{padding:var(--bui-space-0_5)}.sm\:bui-p-1{padding:var(--bui-space-1)}.sm\:bui-p-1\.5{padding:var(--bui-space-1_5)}.sm\:bui-p-2{padding:var(--bui-space-2)}.sm\:bui-p-3{padding:var(--bui-space-3)}.sm\:bui-p-4{padding:var(--bui-space-4)}.sm\:bui-p-5{padding:var(--bui-space-5)}.sm\:bui-p-6{padding:var(--bui-space-6)}.sm\:bui-p-7{padding:var(--bui-space-7)}.sm\:bui-p-8{padding:var(--bui-space-8)}.sm\:bui-p-9{padding:var(--bui-space-9)}.sm\:bui-p-10{padding:var(--bui-space-10)}.sm\:bui-p-11{padding:var(--bui-space-11)}.sm\:bui-p-12{padding:var(--bui-space-12)}.sm\:bui-p-13{padding:var(--bui-space-13)}.sm\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-p{padding:var(--p-md)}.md\:bui-p-0\.5{padding:var(--bui-space-0_5)}.md\:bui-p-1{padding:var(--bui-space-1)}.md\:bui-p-1\.5{padding:var(--bui-space-1_5)}.md\:bui-p-2{padding:var(--bui-space-2)}.md\:bui-p-3{padding:var(--bui-space-3)}.md\:bui-p-4{padding:var(--bui-space-4)}.md\:bui-p-5{padding:var(--bui-space-5)}.md\:bui-p-6{padding:var(--bui-space-6)}.md\:bui-p-7{padding:var(--bui-space-7)}.md\:bui-p-8{padding:var(--bui-space-8)}.md\:bui-p-9{padding:var(--bui-space-9)}.md\:bui-p-10{padding:var(--bui-space-10)}.md\:bui-p-11{padding:var(--bui-space-11)}.md\:bui-p-12{padding:var(--bui-space-12)}.md\:bui-p-13{padding:var(--bui-space-13)}.md\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-p{padding:var(--p-lg)}.lg\:bui-p-0\.5{padding:var(--bui-space-0_5)}.lg\:bui-p-1{padding:var(--bui-space-1)}.lg\:bui-p-1\.5{padding:var(--bui-space-1_5)}.lg\:bui-p-2{padding:var(--bui-space-2)}.lg\:bui-p-3{padding:var(--bui-space-3)}.lg\:bui-p-4{padding:var(--bui-space-4)}.lg\:bui-p-5{padding:var(--bui-space-5)}.lg\:bui-p-6{padding:var(--bui-space-6)}.lg\:bui-p-7{padding:var(--bui-space-7)}.lg\:bui-p-8{padding:var(--bui-space-8)}.lg\:bui-p-9{padding:var(--bui-space-9)}.lg\:bui-p-10{padding:var(--bui-space-10)}.lg\:bui-p-11{padding:var(--bui-space-11)}.lg\:bui-p-12{padding:var(--bui-space-12)}.lg\:bui-p-13{padding:var(--bui-space-13)}.lg\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-p{padding:var(--p-xl)}.xl\:bui-p-0\.5{padding:var(--bui-space-0_5)}.xl\:bui-p-1{padding:var(--bui-space-1)}.xl\:bui-p-1\.5{padding:var(--bui-space-1_5)}.xl\:bui-p-2{padding:var(--bui-space-2)}.xl\:bui-p-3{padding:var(--bui-space-3)}.xl\:bui-p-4{padding:var(--bui-space-4)}.xl\:bui-p-5{padding:var(--bui-space-5)}.xl\:bui-p-6{padding:var(--bui-space-6)}.xl\:bui-p-7{padding:var(--bui-space-7)}.xl\:bui-p-8{padding:var(--bui-space-8)}.xl\:bui-p-9{padding:var(--bui-space-9)}.xl\:bui-p-10{padding:var(--bui-space-10)}.xl\:bui-p-11{padding:var(--bui-space-11)}.xl\:bui-p-12{padding:var(--bui-space-12)}.xl\:bui-p-13{padding:var(--bui-space-13)}.xl\:bui-p-14{padding:var(--bui-space-14)}}.bui-pl{padding-left:var(--pl)}.bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.bui-pl-1{padding-left:var(--bui-space-1)}.bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.bui-pl-2{padding-left:var(--bui-space-2)}.bui-pl-3{padding-left:var(--bui-space-3)}.bui-pl-4{padding-left:var(--bui-space-4)}.bui-pl-5{padding-left:var(--bui-space-5)}.bui-pl-6{padding-left:var(--bui-space-6)}.bui-pl-7{padding-left:var(--bui-space-7)}.bui-pl-8{padding-left:var(--bui-space-8)}.bui-pl-9{padding-left:var(--bui-space-9)}.bui-pl-10{padding-left:var(--bui-space-10)}.bui-pl-11{padding-left:var(--bui-space-11)}.bui-pl-12{padding-left:var(--bui-space-12)}.bui-pl-13{padding-left:var(--bui-space-13)}.bui-pl-14{padding-left:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pl{padding-left:var(--pl-xs)}.xs\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.xs\:bui-pl-1{padding-left:var(--bui-space-1)}.xs\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.xs\:bui-pl-2{padding-left:var(--bui-space-2)}.xs\:bui-pl-3{padding-left:var(--bui-space-3)}.xs\:bui-pl-4{padding-left:var(--bui-space-4)}.xs\:bui-pl-5{padding-left:var(--bui-space-5)}.xs\:bui-pl-6{padding-left:var(--bui-space-6)}.xs\:bui-pl-7{padding-left:var(--bui-space-7)}.xs\:bui-pl-8{padding-left:var(--bui-space-8)}.xs\:bui-pl-9{padding-left:var(--bui-space-9)}.xs\:bui-pl-10{padding-left:var(--bui-space-10)}.xs\:bui-pl-11{padding-left:var(--bui-space-11)}.xs\:bui-pl-12{padding-left:var(--bui-space-12)}.xs\:bui-pl-13{padding-left:var(--bui-space-13)}.xs\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pl{padding-left:var(--pl-sm)}.sm\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.sm\:bui-pl-1{padding-left:var(--bui-space-1)}.sm\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.sm\:bui-pl-2{padding-left:var(--bui-space-2)}.sm\:bui-pl-3{padding-left:var(--bui-space-3)}.sm\:bui-pl-4{padding-left:var(--bui-space-4)}.sm\:bui-pl-5{padding-left:var(--bui-space-5)}.sm\:bui-pl-6{padding-left:var(--bui-space-6)}.sm\:bui-pl-7{padding-left:var(--bui-space-7)}.sm\:bui-pl-8{padding-left:var(--bui-space-8)}.sm\:bui-pl-9{padding-left:var(--bui-space-9)}.sm\:bui-pl-10{padding-left:var(--bui-space-10)}.sm\:bui-pl-11{padding-left:var(--bui-space-11)}.sm\:bui-pl-12{padding-left:var(--bui-space-12)}.sm\:bui-pl-13{padding-left:var(--bui-space-13)}.sm\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pl{padding-left:var(--pl-md)}.md\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.md\:bui-pl-1{padding-left:var(--bui-space-1)}.md\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.md\:bui-pl-2{padding-left:var(--bui-space-2)}.md\:bui-pl-3{padding-left:var(--bui-space-3)}.md\:bui-pl-4{padding-left:var(--bui-space-4)}.md\:bui-pl-5{padding-left:var(--bui-space-5)}.md\:bui-pl-6{padding-left:var(--bui-space-6)}.md\:bui-pl-7{padding-left:var(--bui-space-7)}.md\:bui-pl-8{padding-left:var(--bui-space-8)}.md\:bui-pl-9{padding-left:var(--bui-space-9)}.md\:bui-pl-10{padding-left:var(--bui-space-10)}.md\:bui-pl-11{padding-left:var(--bui-space-11)}.md\:bui-pl-12{padding-left:var(--bui-space-12)}.md\:bui-pl-13{padding-left:var(--bui-space-13)}.md\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pl{padding-left:var(--pl-lg)}.lg\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.lg\:bui-pl-1{padding-left:var(--bui-space-1)}.lg\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.lg\:bui-pl-2{padding-left:var(--bui-space-2)}.lg\:bui-pl-3{padding-left:var(--bui-space-3)}.lg\:bui-pl-4{padding-left:var(--bui-space-4)}.lg\:bui-pl-5{padding-left:var(--bui-space-5)}.lg\:bui-pl-6{padding-left:var(--bui-space-6)}.lg\:bui-pl-7{padding-left:var(--bui-space-7)}.lg\:bui-pl-8{padding-left:var(--bui-space-8)}.lg\:bui-pl-9{padding-left:var(--bui-space-9)}.lg\:bui-pl-10{padding-left:var(--bui-space-10)}.lg\:bui-pl-11{padding-left:var(--bui-space-11)}.lg\:bui-pl-12{padding-left:var(--bui-space-12)}.lg\:bui-pl-13{padding-left:var(--bui-space-13)}.lg\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pl{padding-left:var(--pl-xl)}.xl\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.xl\:bui-pl-1{padding-left:var(--bui-space-1)}.xl\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.xl\:bui-pl-2{padding-left:var(--bui-space-2)}.xl\:bui-pl-3{padding-left:var(--bui-space-3)}.xl\:bui-pl-4{padding-left:var(--bui-space-4)}.xl\:bui-pl-5{padding-left:var(--bui-space-5)}.xl\:bui-pl-6{padding-left:var(--bui-space-6)}.xl\:bui-pl-7{padding-left:var(--bui-space-7)}.xl\:bui-pl-8{padding-left:var(--bui-space-8)}.xl\:bui-pl-9{padding-left:var(--bui-space-9)}.xl\:bui-pl-10{padding-left:var(--bui-space-10)}.xl\:bui-pl-11{padding-left:var(--bui-space-11)}.xl\:bui-pl-12{padding-left:var(--bui-space-12)}.xl\:bui-pl-13{padding-left:var(--bui-space-13)}.xl\:bui-pl-14{padding-left:var(--bui-space-14)}}.bui-pr{padding-right:var(--pr)}.bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.bui-pr-1{padding-right:var(--bui-space-1)}.bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.bui-pr-2{padding-right:var(--bui-space-2)}.bui-pr-3{padding-right:var(--bui-space-3)}.bui-pr-4{padding-right:var(--bui-space-4)}.bui-pr-5{padding-right:var(--bui-space-5)}.bui-pr-6{padding-right:var(--bui-space-6)}.bui-pr-7{padding-right:var(--bui-space-7)}.bui-pr-8{padding-right:var(--bui-space-8)}.bui-pr-9{padding-right:var(--bui-space-9)}.bui-pr-10{padding-right:var(--bui-space-10)}.bui-pr-11{padding-right:var(--bui-space-11)}.bui-pr-12{padding-right:var(--bui-space-12)}.bui-pr-13{padding-right:var(--bui-space-13)}.bui-pr-14{padding-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pr{padding-right:var(--pr-xs)}.xs\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.xs\:bui-pr-1{padding-right:var(--bui-space-1)}.xs\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.xs\:bui-pr-2{padding-right:var(--bui-space-2)}.xs\:bui-pr-3{padding-right:var(--bui-space-3)}.xs\:bui-pr-4{padding-right:var(--bui-space-4)}.xs\:bui-pr-5{padding-right:var(--bui-space-5)}.xs\:bui-pr-6{padding-right:var(--bui-space-6)}.xs\:bui-pr-7{padding-right:var(--bui-space-7)}.xs\:bui-pr-8{padding-right:var(--bui-space-8)}.xs\:bui-pr-9{padding-right:var(--bui-space-9)}.xs\:bui-pr-10{padding-right:var(--bui-space-10)}.xs\:bui-pr-11{padding-right:var(--bui-space-11)}.xs\:bui-pr-12{padding-right:var(--bui-space-12)}.xs\:bui-pr-13{padding-right:var(--bui-space-13)}.xs\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pr{padding-right:var(--pr-sm)}.sm\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.sm\:bui-pr-1{padding-right:var(--bui-space-1)}.sm\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.sm\:bui-pr-2{padding-right:var(--bui-space-2)}.sm\:bui-pr-3{padding-right:var(--bui-space-3)}.sm\:bui-pr-4{padding-right:var(--bui-space-4)}.sm\:bui-pr-5{padding-right:var(--bui-space-5)}.sm\:bui-pr-6{padding-right:var(--bui-space-6)}.sm\:bui-pr-7{padding-right:var(--bui-space-7)}.sm\:bui-pr-8{padding-right:var(--bui-space-8)}.sm\:bui-pr-9{padding-right:var(--bui-space-9)}.sm\:bui-pr-10{padding-right:var(--bui-space-10)}.sm\:bui-pr-11{padding-right:var(--bui-space-11)}.sm\:bui-pr-12{padding-right:var(--bui-space-12)}.sm\:bui-pr-13{padding-right:var(--bui-space-13)}.sm\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pr{padding-right:var(--pr-md)}.md\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.md\:bui-pr-1{padding-right:var(--bui-space-1)}.md\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.md\:bui-pr-2{padding-right:var(--bui-space-2)}.md\:bui-pr-3{padding-right:var(--bui-space-3)}.md\:bui-pr-4{padding-right:var(--bui-space-4)}.md\:bui-pr-5{padding-right:var(--bui-space-5)}.md\:bui-pr-6{padding-right:var(--bui-space-6)}.md\:bui-pr-7{padding-right:var(--bui-space-7)}.md\:bui-pr-8{padding-right:var(--bui-space-8)}.md\:bui-pr-9{padding-right:var(--bui-space-9)}.md\:bui-pr-10{padding-right:var(--bui-space-10)}.md\:bui-pr-11{padding-right:var(--bui-space-11)}.md\:bui-pr-12{padding-right:var(--bui-space-12)}.md\:bui-pr-13{padding-right:var(--bui-space-13)}.md\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pr{padding-right:var(--pr-lg)}.lg\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.lg\:bui-pr-1{padding-right:var(--bui-space-1)}.lg\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.lg\:bui-pr-2{padding-right:var(--bui-space-2)}.lg\:bui-pr-3{padding-right:var(--bui-space-3)}.lg\:bui-pr-4{padding-right:var(--bui-space-4)}.lg\:bui-pr-5{padding-right:var(--bui-space-5)}.lg\:bui-pr-6{padding-right:var(--bui-space-6)}.lg\:bui-pr-7{padding-right:var(--bui-space-7)}.lg\:bui-pr-8{padding-right:var(--bui-space-8)}.lg\:bui-pr-9{padding-right:var(--bui-space-9)}.lg\:bui-pr-10{padding-right:var(--bui-space-10)}.lg\:bui-pr-11{padding-right:var(--bui-space-11)}.lg\:bui-pr-12{padding-right:var(--bui-space-12)}.lg\:bui-pr-13{padding-right:var(--bui-space-13)}.lg\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pr{padding-right:var(--pr-xl)}.xl\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.xl\:bui-pr-1{padding-right:var(--bui-space-1)}.xl\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.xl\:bui-pr-2{padding-right:var(--bui-space-2)}.xl\:bui-pr-3{padding-right:var(--bui-space-3)}.xl\:bui-pr-4{padding-right:var(--bui-space-4)}.xl\:bui-pr-5{padding-right:var(--bui-space-5)}.xl\:bui-pr-6{padding-right:var(--bui-space-6)}.xl\:bui-pr-7{padding-right:var(--bui-space-7)}.xl\:bui-pr-8{padding-right:var(--bui-space-8)}.xl\:bui-pr-9{padding-right:var(--bui-space-9)}.xl\:bui-pr-10{padding-right:var(--bui-space-10)}.xl\:bui-pr-11{padding-right:var(--bui-space-11)}.xl\:bui-pr-12{padding-right:var(--bui-space-12)}.xl\:bui-pr-13{padding-right:var(--bui-space-13)}.xl\:bui-pr-14{padding-right:var(--bui-space-14)}}.bui-pt{padding-top:var(--pt)}.bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.bui-pt-1{padding-top:var(--bui-space-1)}.bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.bui-pt-2{padding-top:var(--bui-space-2)}.bui-pt-3{padding-top:var(--bui-space-3)}.bui-pt-4{padding-top:var(--bui-space-4)}.bui-pt-5{padding-top:var(--bui-space-5)}.bui-pt-6{padding-top:var(--bui-space-6)}.bui-pt-7{padding-top:var(--bui-space-7)}.bui-pt-8{padding-top:var(--bui-space-8)}.bui-pt-9{padding-top:var(--bui-space-9)}.bui-pt-10{padding-top:var(--bui-space-10)}.bui-pt-11{padding-top:var(--bui-space-11)}.bui-pt-12{padding-top:var(--bui-space-12)}.bui-pt-13{padding-top:var(--bui-space-13)}.bui-pt-14{padding-top:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pt{padding-top:var(--pt-xs)}.xs\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.xs\:bui-pt-1{padding-top:var(--bui-space-1)}.xs\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.xs\:bui-pt-2{padding-top:var(--bui-space-2)}.xs\:bui-pt-3{padding-top:var(--bui-space-3)}.xs\:bui-pt-4{padding-top:var(--bui-space-4)}.xs\:bui-pt-5{padding-top:var(--bui-space-5)}.xs\:bui-pt-6{padding-top:var(--bui-space-6)}.xs\:bui-pt-7{padding-top:var(--bui-space-7)}.xs\:bui-pt-8{padding-top:var(--bui-space-8)}.xs\:bui-pt-9{padding-top:var(--bui-space-9)}.xs\:bui-pt-10{padding-top:var(--bui-space-10)}.xs\:bui-pt-11{padding-top:var(--bui-space-11)}.xs\:bui-pt-12{padding-top:var(--bui-space-12)}.xs\:bui-pt-13{padding-top:var(--bui-space-13)}.xs\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pt{padding-top:var(--pt-sm)}.sm\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.sm\:bui-pt-1{padding-top:var(--bui-space-1)}.sm\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.sm\:bui-pt-2{padding-top:var(--bui-space-2)}.sm\:bui-pt-3{padding-top:var(--bui-space-3)}.sm\:bui-pt-4{padding-top:var(--bui-space-4)}.sm\:bui-pt-5{padding-top:var(--bui-space-5)}.sm\:bui-pt-6{padding-top:var(--bui-space-6)}.sm\:bui-pt-7{padding-top:var(--bui-space-7)}.sm\:bui-pt-8{padding-top:var(--bui-space-8)}.sm\:bui-pt-9{padding-top:var(--bui-space-9)}.sm\:bui-pt-10{padding-top:var(--bui-space-10)}.sm\:bui-pt-11{padding-top:var(--bui-space-11)}.sm\:bui-pt-12{padding-top:var(--bui-space-12)}.sm\:bui-pt-13{padding-top:var(--bui-space-13)}.sm\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pt{padding-top:var(--pt-md)}.md\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.md\:bui-pt-1{padding-top:var(--bui-space-1)}.md\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.md\:bui-pt-2{padding-top:var(--bui-space-2)}.md\:bui-pt-3{padding-top:var(--bui-space-3)}.md\:bui-pt-4{padding-top:var(--bui-space-4)}.md\:bui-pt-5{padding-top:var(--bui-space-5)}.md\:bui-pt-6{padding-top:var(--bui-space-6)}.md\:bui-pt-7{padding-top:var(--bui-space-7)}.md\:bui-pt-8{padding-top:var(--bui-space-8)}.md\:bui-pt-9{padding-top:var(--bui-space-9)}.md\:bui-pt-10{padding-top:var(--bui-space-10)}.md\:bui-pt-11{padding-top:var(--bui-space-11)}.md\:bui-pt-12{padding-top:var(--bui-space-12)}.md\:bui-pt-13{padding-top:var(--bui-space-13)}.md\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pt{padding-top:var(--pt-lg)}.lg\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.lg\:bui-pt-1{padding-top:var(--bui-space-1)}.lg\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.lg\:bui-pt-2{padding-top:var(--bui-space-2)}.lg\:bui-pt-3{padding-top:var(--bui-space-3)}.lg\:bui-pt-4{padding-top:var(--bui-space-4)}.lg\:bui-pt-5{padding-top:var(--bui-space-5)}.lg\:bui-pt-6{padding-top:var(--bui-space-6)}.lg\:bui-pt-7{padding-top:var(--bui-space-7)}.lg\:bui-pt-8{padding-top:var(--bui-space-8)}.lg\:bui-pt-9{padding-top:var(--bui-space-9)}.lg\:bui-pt-10{padding-top:var(--bui-space-10)}.lg\:bui-pt-11{padding-top:var(--bui-space-11)}.lg\:bui-pt-12{padding-top:var(--bui-space-12)}.lg\:bui-pt-13{padding-top:var(--bui-space-13)}.lg\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pt{padding-top:var(--pt-xl)}.xl\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.xl\:bui-pt-1{padding-top:var(--bui-space-1)}.xl\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.xl\:bui-pt-2{padding-top:var(--bui-space-2)}.xl\:bui-pt-3{padding-top:var(--bui-space-3)}.xl\:bui-pt-4{padding-top:var(--bui-space-4)}.xl\:bui-pt-5{padding-top:var(--bui-space-5)}.xl\:bui-pt-6{padding-top:var(--bui-space-6)}.xl\:bui-pt-7{padding-top:var(--bui-space-7)}.xl\:bui-pt-8{padding-top:var(--bui-space-8)}.xl\:bui-pt-9{padding-top:var(--bui-space-9)}.xl\:bui-pt-10{padding-top:var(--bui-space-10)}.xl\:bui-pt-11{padding-top:var(--bui-space-11)}.xl\:bui-pt-12{padding-top:var(--bui-space-12)}.xl\:bui-pt-13{padding-top:var(--bui-space-13)}.xl\:bui-pt-14{padding-top:var(--bui-space-14)}}.bui-pb{padding-bottom:var(--pb)}.bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.bui-pb-1{padding-bottom:var(--bui-space-1)}.bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.bui-pb-2{padding-bottom:var(--bui-space-2)}.bui-pb-3{padding-bottom:var(--bui-space-3)}.bui-pb-4{padding-bottom:var(--bui-space-4)}.bui-pb-5{padding-bottom:var(--bui-space-5)}.bui-pb-6{padding-bottom:var(--bui-space-6)}.bui-pb-7{padding-bottom:var(--bui-space-7)}.bui-pb-8{padding-bottom:var(--bui-space-8)}.bui-pb-9{padding-bottom:var(--bui-space-9)}.bui-pb-10{padding-bottom:var(--bui-space-10)}.bui-pb-11{padding-bottom:var(--bui-space-11)}.bui-pb-12{padding-bottom:var(--bui-space-12)}.bui-pb-13{padding-bottom:var(--bui-space-13)}.bui-pb-14{padding-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pb{padding-bottom:var(--pb-xs)}.xs\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.xs\:bui-pb-1{padding-bottom:var(--bui-space-1)}.xs\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.xs\:bui-pb-2{padding-bottom:var(--bui-space-2)}.xs\:bui-pb-3{padding-bottom:var(--bui-space-3)}.xs\:bui-pb-4{padding-bottom:var(--bui-space-4)}.xs\:bui-pb-5{padding-bottom:var(--bui-space-5)}.xs\:bui-pb-6{padding-bottom:var(--bui-space-6)}.xs\:bui-pb-7{padding-bottom:var(--bui-space-7)}.xs\:bui-pb-8{padding-bottom:var(--bui-space-8)}.xs\:bui-pb-9{padding-bottom:var(--bui-space-9)}.xs\:bui-pb-10{padding-bottom:var(--bui-space-10)}.xs\:bui-pb-11{padding-bottom:var(--bui-space-11)}.xs\:bui-pb-12{padding-bottom:var(--bui-space-12)}.xs\:bui-pb-13{padding-bottom:var(--bui-space-13)}.xs\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pb{padding-bottom:var(--pb-sm)}.sm\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.sm\:bui-pb-1{padding-bottom:var(--bui-space-1)}.sm\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.sm\:bui-pb-2{padding-bottom:var(--bui-space-2)}.sm\:bui-pb-3{padding-bottom:var(--bui-space-3)}.sm\:bui-pb-4{padding-bottom:var(--bui-space-4)}.sm\:bui-pb-5{padding-bottom:var(--bui-space-5)}.sm\:bui-pb-6{padding-bottom:var(--bui-space-6)}.sm\:bui-pb-7{padding-bottom:var(--bui-space-7)}.sm\:bui-pb-8{padding-bottom:var(--bui-space-8)}.sm\:bui-pb-9{padding-bottom:var(--bui-space-9)}.sm\:bui-pb-10{padding-bottom:var(--bui-space-10)}.sm\:bui-pb-11{padding-bottom:var(--bui-space-11)}.sm\:bui-pb-12{padding-bottom:var(--bui-space-12)}.sm\:bui-pb-13{padding-bottom:var(--bui-space-13)}.sm\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pb{padding-bottom:var(--pb-md)}.md\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.md\:bui-pb-1{padding-bottom:var(--bui-space-1)}.md\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.md\:bui-pb-2{padding-bottom:var(--bui-space-2)}.md\:bui-pb-3{padding-bottom:var(--bui-space-3)}.md\:bui-pb-4{padding-bottom:var(--bui-space-4)}.md\:bui-pb-5{padding-bottom:var(--bui-space-5)}.md\:bui-pb-6{padding-bottom:var(--bui-space-6)}.md\:bui-pb-7{padding-bottom:var(--bui-space-7)}.md\:bui-pb-8{padding-bottom:var(--bui-space-8)}.md\:bui-pb-9{padding-bottom:var(--bui-space-9)}.md\:bui-pb-10{padding-bottom:var(--bui-space-10)}.md\:bui-pb-11{padding-bottom:var(--bui-space-11)}.md\:bui-pb-12{padding-bottom:var(--bui-space-12)}.md\:bui-pb-13{padding-bottom:var(--bui-space-13)}.md\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pb{padding-bottom:var(--pb-lg)}.lg\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.lg\:bui-pb-1{padding-bottom:var(--bui-space-1)}.lg\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.lg\:bui-pb-2{padding-bottom:var(--bui-space-2)}.lg\:bui-pb-3{padding-bottom:var(--bui-space-3)}.lg\:bui-pb-4{padding-bottom:var(--bui-space-4)}.lg\:bui-pb-5{padding-bottom:var(--bui-space-5)}.lg\:bui-pb-6{padding-bottom:var(--bui-space-6)}.lg\:bui-pb-7{padding-bottom:var(--bui-space-7)}.lg\:bui-pb-8{padding-bottom:var(--bui-space-8)}.lg\:bui-pb-9{padding-bottom:var(--bui-space-9)}.lg\:bui-pb-10{padding-bottom:var(--bui-space-10)}.lg\:bui-pb-11{padding-bottom:var(--bui-space-11)}.lg\:bui-pb-12{padding-bottom:var(--bui-space-12)}.lg\:bui-pb-13{padding-bottom:var(--bui-space-13)}.lg\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pb{padding-bottom:var(--pb-xl)}.xl\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.xl\:bui-pb-1{padding-bottom:var(--bui-space-1)}.xl\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.xl\:bui-pb-2{padding-bottom:var(--bui-space-2)}.xl\:bui-pb-3{padding-bottom:var(--bui-space-3)}.xl\:bui-pb-4{padding-bottom:var(--bui-space-4)}.xl\:bui-pb-5{padding-bottom:var(--bui-space-5)}.xl\:bui-pb-6{padding-bottom:var(--bui-space-6)}.xl\:bui-pb-7{padding-bottom:var(--bui-space-7)}.xl\:bui-pb-8{padding-bottom:var(--bui-space-8)}.xl\:bui-pb-9{padding-bottom:var(--bui-space-9)}.xl\:bui-pb-10{padding-bottom:var(--bui-space-10)}.xl\:bui-pb-11{padding-bottom:var(--bui-space-11)}.xl\:bui-pb-12{padding-bottom:var(--bui-space-12)}.xl\:bui-pb-13{padding-bottom:var(--bui-space-13)}.xl\:bui-pb-14{padding-bottom:var(--bui-space-14)}}.bui-py{padding-top:var(--py);padding-bottom:var(--py)}.bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-py{padding-top:var(--py-xs);padding-bottom:var(--py-xs)}.xs\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.xs\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.xs\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.xs\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.xs\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.xs\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.xs\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.xs\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.xs\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.xs\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.xs\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.xs\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.xs\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.xs\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.xs\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.xs\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-py{padding-top:var(--py-sm);padding-bottom:var(--py-sm)}.sm\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.sm\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.sm\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.sm\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.sm\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.sm\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.sm\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.sm\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.sm\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.sm\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.sm\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.sm\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.sm\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.sm\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.sm\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.sm\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-py{padding-top:var(--py-md);padding-bottom:var(--py-md)}.md\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.md\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.md\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.md\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.md\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.md\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.md\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.md\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.md\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.md\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.md\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.md\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.md\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.md\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.md\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.md\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-py{padding-top:var(--py-lg);padding-bottom:var(--py-lg)}.lg\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.lg\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.lg\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.lg\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.lg\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.lg\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.lg\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.lg\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.lg\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.lg\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.lg\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.lg\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.lg\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.lg\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.lg\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.lg\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-py{padding-top:var(--py-xl);padding-bottom:var(--py-xl)}.xl\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.xl\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.xl\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.xl\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.xl\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.xl\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.xl\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.xl\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.xl\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.xl\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.xl\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.xl\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.xl\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.xl\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.xl\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.xl\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}.bui-px{padding-left:var(--px);padding-right:var(--px)}.bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-px{padding-left:var(--px-xs);padding-right:var(--px-xs)}.xs\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.xs\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.xs\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.xs\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.xs\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.xs\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.xs\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.xs\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.xs\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.xs\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.xs\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.xs\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.xs\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.xs\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.xs\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.xs\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-px{padding-left:var(--px-sm);padding-right:var(--px-sm)}.sm\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.sm\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.sm\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.sm\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.sm\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.sm\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.sm\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.sm\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.sm\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.sm\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.sm\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.sm\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.sm\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.sm\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.sm\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.sm\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-px{padding-left:var(--px-md);padding-right:var(--px-md)}.md\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.md\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.md\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.md\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.md\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.md\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.md\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.md\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.md\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.md\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.md\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.md\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.md\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.md\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.md\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.md\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-px{padding-left:var(--px-lg);padding-right:var(--px-lg)}.lg\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.lg\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.lg\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.lg\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.lg\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.lg\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.lg\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.lg\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.lg\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.lg\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.lg\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.lg\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.lg\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.lg\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.lg\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.lg\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-px{padding-left:var(--px-xl);padding-right:var(--px-xl)}.xl\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.xl\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.xl\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.xl\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.xl\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.xl\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.xl\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.xl\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.xl\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.xl\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.xl\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.xl\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.xl\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.xl\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.xl\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.xl\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}.bui-m{margin:var(--m)}.bui-m-0\.5{margin:var(--bui-space-0_5)}.bui-m-1{margin:var(--bui-space-1)}.bui-m-1\.5{margin:var(--bui-space-1_5)}.bui-m-2{margin:var(--bui-space-2)}.bui-m-3{margin:var(--bui-space-3)}.bui-m-4{margin:var(--bui-space-4)}.bui-m-5{margin:var(--bui-space-5)}.bui-m-6{margin:var(--bui-space-6)}.bui-m-7{margin:var(--bui-space-7)}.bui-m-8{margin:var(--bui-space-8)}.bui-m-9{margin:var(--bui-space-9)}.bui-m-10{margin:var(--bui-space-10)}.bui-m-11{margin:var(--bui-space-11)}.bui-m-12{margin:var(--bui-space-12)}.bui-m-13{margin:var(--bui-space-13)}.bui-m-14{margin:var(--bui-space-14)}@media (width>=640px){.xs\:bui-m{margin:var(--p-xs)}.xs\:bui-m-0\.5{margin:var(--bui-space-0_5)}.xs\:bui-m-1{margin:var(--bui-space-1)}.xs\:bui-m-1\.5{margin:var(--bui-space-1_5)}.xs\:bui-m-2{margin:var(--bui-space-2)}.xs\:bui-m-3{margin:var(--bui-space-3)}.xs\:bui-m-4{margin:var(--bui-space-4)}.xs\:bui-m-5{margin:var(--bui-space-5)}.xs\:bui-m-6{margin:var(--bui-space-6)}.xs\:bui-m-7{margin:var(--bui-space-7)}.xs\:bui-m-8{margin:var(--bui-space-8)}.xs\:bui-m-9{margin:var(--bui-space-9)}.xs\:bui-m-10{margin:var(--bui-space-10)}.xs\:bui-m-11{margin:var(--bui-space-11)}.xs\:bui-m-12{margin:var(--bui-space-12)}.xs\:bui-m-13{margin:var(--bui-space-13)}.xs\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-m{margin:var(--p-sm)}.sm\:bui-m-0\.5{margin:var(--bui-space-0_5)}.sm\:bui-m-1{margin:var(--bui-space-1)}.sm\:bui-m-1\.5{margin:var(--bui-space-1_5)}.sm\:bui-m-2{margin:var(--bui-space-2)}.sm\:bui-m-3{margin:var(--bui-space-3)}.sm\:bui-m-4{margin:var(--bui-space-4)}.sm\:bui-m-5{margin:var(--bui-space-5)}.sm\:bui-m-6{margin:var(--bui-space-6)}.sm\:bui-m-7{margin:var(--bui-space-7)}.sm\:bui-m-8{margin:var(--bui-space-8)}.sm\:bui-m-9{margin:var(--bui-space-9)}.sm\:bui-m-10{margin:var(--bui-space-10)}.sm\:bui-m-11{margin:var(--bui-space-11)}.sm\:bui-m-12{margin:var(--bui-space-12)}.sm\:bui-m-13{margin:var(--bui-space-13)}.sm\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-m{margin:var(--p-md)}.md\:bui-m-0\.5{margin:var(--bui-space-0_5)}.md\:bui-m-1{margin:var(--bui-space-1)}.md\:bui-m-1\.5{margin:var(--bui-space-1_5)}.md\:bui-m-2{margin:var(--bui-space-2)}.md\:bui-m-3{margin:var(--bui-space-3)}.md\:bui-m-4{margin:var(--bui-space-4)}.md\:bui-m-5{margin:var(--bui-space-5)}.md\:bui-m-6{margin:var(--bui-space-6)}.md\:bui-m-7{margin:var(--bui-space-7)}.md\:bui-m-8{margin:var(--bui-space-8)}.md\:bui-m-9{margin:var(--bui-space-9)}.md\:bui-m-10{margin:var(--bui-space-10)}.md\:bui-m-11{margin:var(--bui-space-11)}.md\:bui-m-12{margin:var(--bui-space-12)}.md\:bui-m-13{margin:var(--bui-space-13)}.md\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-m{margin:var(--p-lg)}.lg\:bui-m-0\.5{margin:var(--bui-space-0_5)}.lg\:bui-m-1{margin:var(--bui-space-1)}.lg\:bui-m-1\.5{margin:var(--bui-space-1_5)}.lg\:bui-m-2{margin:var(--bui-space-2)}.lg\:bui-m-3{margin:var(--bui-space-3)}.lg\:bui-m-4{margin:var(--bui-space-4)}.lg\:bui-m-5{margin:var(--bui-space-5)}.lg\:bui-m-6{margin:var(--bui-space-6)}.lg\:bui-m-7{margin:var(--bui-space-7)}.lg\:bui-m-8{margin:var(--bui-space-8)}.lg\:bui-m-9{margin:var(--bui-space-9)}.lg\:bui-m-10{margin:var(--bui-space-10)}.lg\:bui-m-11{margin:var(--bui-space-11)}.lg\:bui-m-12{margin:var(--bui-space-12)}.lg\:bui-m-13{margin:var(--bui-space-13)}.lg\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-m{margin:var(--p-xl)}.xl\:bui-m-0\.5{margin:var(--bui-space-0_5)}.xl\:bui-m-1{margin:var(--bui-space-1)}.xl\:bui-m-1\.5{margin:var(--bui-space-1_5)}.xl\:bui-m-2{margin:var(--bui-space-2)}.xl\:bui-m-3{margin:var(--bui-space-3)}.xl\:bui-m-4{margin:var(--bui-space-4)}.xl\:bui-m-5{margin:var(--bui-space-5)}.xl\:bui-m-6{margin:var(--bui-space-6)}.xl\:bui-m-7{margin:var(--bui-space-7)}.xl\:bui-m-8{margin:var(--bui-space-8)}.xl\:bui-m-9{margin:var(--bui-space-9)}.xl\:bui-m-10{margin:var(--bui-space-10)}.xl\:bui-m-11{margin:var(--bui-space-11)}.xl\:bui-m-12{margin:var(--bui-space-12)}.xl\:bui-m-13{margin:var(--bui-space-13)}.xl\:bui-m-14{margin:var(--bui-space-14)}}.bui-ml{margin-left:var(--ml)}.bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.bui-ml-1{margin-left:var(--bui-space-1)}.bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.bui-ml-2{margin-left:var(--bui-space-2)}.bui-ml-3{margin-left:var(--bui-space-3)}.bui-ml-4{margin-left:var(--bui-space-4)}.bui-ml-5{margin-left:var(--bui-space-5)}.bui-ml-6{margin-left:var(--bui-space-6)}.bui-ml-7{margin-left:var(--bui-space-7)}.bui-ml-8{margin-left:var(--bui-space-8)}.bui-ml-9{margin-left:var(--bui-space-9)}.bui-ml-10{margin-left:var(--bui-space-10)}.bui-ml-11{margin-left:var(--bui-space-11)}.bui-ml-12{margin-left:var(--bui-space-12)}.bui-ml-13{margin-left:var(--bui-space-13)}.bui-ml-14{margin-left:var(--bui-space-14)}@media (width>=640px){.xs\:bui-ml{margin-left:var(--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-baseline{align-items:baseline}.bui-align-stretch{align-items:stretch}.bui-jc-start{justify-content:start}.bui-jc-center{justify-content:center}.bui-jc-end{justify-content:end}.bui-jc-between{justify-content:space-between}.bui-fd-row{flex-direction:row}.bui-fd-column{flex-direction:column}.bui-fd-row-reverse{flex-direction:row-reverse}.bui-fd-column-reverse{flex-direction:column-reverse}@media (width>=640px){.xs\:bui-align-start{align-items:start}.xs\:bui-align-center{align-items:center}.xs\:bui-align-end{align-items:end}.xs\:bui-align-stretch{align-items:stretch}.xs\:bui-jc-start{justify-content:start}.xs\:bui-jc-center{justify-content:center}.xs\:bui-jc-end{justify-content:end}.xs\:bui-jc-between{justify-content:space-between}.xs\:bui-fd-row{flex-direction:row}.xs\:bui-fd-column{flex-direction:column}.xs\:bui-fd-row-reverse{flex-direction:row-reverse}.xs\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=768px){.sm\:bui-align-start{align-items:start}.sm\:bui-align-center{align-items:center}.sm\:bui-align-end{align-items:end}.sm\:bui-align-stretch{align-items:stretch}.sm\:bui-jc-start{justify-content:start}.sm\:bui-jc-center{justify-content:center}.sm\:bui-jc-end{justify-content:end}.sm\:bui-jc-between{justify-content:space-between}.sm\:bui-fd-row{flex-direction:row}.sm\:bui-fd-column{flex-direction:column}.sm\:bui-fd-row-reverse{flex-direction:row-reverse}.sm\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1024px){.md\:bui-align-start{align-items:start}.md\:bui-align-center{align-items:center}.md\:bui-align-end{align-items:end}.md\:bui-align-stretch{align-items:stretch}.md\:bui-jc-start{justify-content:start}.md\:bui-jc-center{justify-content:center}.md\:bui-jc-end{justify-content:end}.md\:bui-jc-between{justify-content:space-between}.md\:bui-fd-row{flex-direction:row}.md\:bui-fd-column{flex-direction:column}.md\:bui-fd-row-reverse{flex-direction:row-reverse}.md\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1280px){.lg\:bui-align-start{align-items:start}.lg\:bui-align-center{align-items:center}.lg\:bui-align-end{align-items:end}.lg\:bui-align-stretch{align-items:stretch}.lg\:bui-jc-start{justify-content:start}.lg\:bui-jc-center{justify-content:center}.lg\:bui-jc-end{justify-content:end}.lg\:bui-jc-between{justify-content:space-between}.lg\:bui-fd-row{flex-direction:row}.lg\:bui-fd-column{flex-direction:column}.lg\:bui-fd-row-reverse{flex-direction:row-reverse}.lg\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1536px){.xl\:bui-align-start{align-items:start}.xl\:bui-align-center{align-items:center}.xl\:bui-align-end{align-items:end}.xl\:bui-align-stretch{align-items:stretch}.xl\:bui-jc-start{justify-content:start}.xl\:bui-jc-center{justify-content:center}.xl\:bui-jc-end{justify-content:end}.xl\:bui-jc-between{justify-content:space-between}.xl\:bui-fd-row{flex-direction:row}.xl\:bui-fd-column{flex-direction:column}.xl\:bui-fd-row-reverse{flex-direction:row-reverse}.xl\:bui-fd-column-reverse{flex-direction:column-reverse}}}@layer legacy;.bui-MenuPopover{border:1px solid var(--bui-border);border-radius:var(--bui-radius-2);background:var(--bui-bg-surface-1);color:var(--bui-fg-primary);outline:none;flex-direction:column;min-height:0;transition:transform .2s,opacity .2s;display:flex;overflow:hidden;&[data-entering],&[data-exiting]{transform:var(--origin);opacity:0}&[data-placement=top]{--origin:translateY(8px)}&[data-placement=bottom]{--origin:translateY(-8px)}&[data-placement=right]{--origin:translateX(-8px)}&[data-placement=left]{--origin:translateX(8px)}}.bui-MenuContent{max-height:inherit;box-sizing:border-box;min-width:150px;padding-block:var(--bui-space-1);outline:none;overflow:auto}.bui-MenuPopover .bui-ScrollAreaRoot{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.bui-MenuPopover .bui-ScrollAreaScrollbar{margin-inline:var(--bui-space-1_5)}.bui-MenuItem{padding-inline:var(--bui-space-1);display:block;&[data-focused] .bui-MenuItemWrapper,&[data-open] .bui-MenuItemWrapper{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-color=danger] .bui-MenuItemWrapper{color:var(--bui-fg-danger)}&[data-color=danger][data-focused] .bui-MenuItemWrapper{background:var(--bui-bg-danger);color:var(--bui-fg-danger)}&[data-has-submenu]{&>.bui-MenuItemWrapper>.bui-MenuItemArrow{display:block}}}.bui-MenuItemWrapper{height:2rem;padding-inline:var(--bui-space-2);border-radius:var(--bui-radius-2);cursor:default;color:var(--bui-fg-primary);font-size:var(--bui-font-size-3);justify-content:space-between;align-items:center;gap:var(--bui-space-6);outline:none;display:flex}.bui-MenuItemListBox{padding-inline:var(--bui-space-1);display:block;&:hover .bui-MenuItemWrapper{background:var(--bui-bg-surface-2);color:var(--bui-fg-primary)}&[data-selected] .bui-MenuItemListBoxCheck{&>svg{opacity:1;color:var(--bui-fg-primary)}}}.bui-MenuItemListBoxCheck{justify-content:center;align-items:center;width:1rem;height:1rem;display:flex;&>svg{opacity:0;width:1rem;height:1rem}}.bui-MenuItemContent{align-items:center;gap:var(--bui-space-2);display:flex;&>svg{width:1rem;height:1rem}}.bui-MenuItemArrow{width:1rem;height:1rem;display:none;&>svg{width:1rem;height:1rem}}.bui-MenuSection{&:first-child .bui-MenuSectionHeader{padding-top:0}}.bui-MenuSectionHeader{height:2rem;padding-top:var(--bui-space-3);padding-left:var(--bui-space-3);color:var(--bui-fg-primary);font-size:var(--bui-font-size-1);letter-spacing:.05rem;text-transform:uppercase;align-items:center;font-weight:700;display:flex}.bui-MenuSeparator{background:var(--bui-border);height:1px;margin-inline:var(--bui-space-1_5);margin-block:var(--bui-space-1)}.bui-MenuSearchField{font-family:var(--bui-font-regular);flex-shrink:0;width:100%;position:relative;&[data-empty]{& .bui-MenuSearchFieldClear{display:none}}}.bui-MenuSearchFieldInput{padding:0 var(--bui-space-3);border:none;border-bottom: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:2rem;cursor:inherit;outline:none;align-items:center;display:flex;&::-webkit-search-cancel-button,&::-webkit-search-decoration{-webkit-appearance:none}}.bui-MenuSearchFieldClear{right:var(--bui-space-2);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;&>svg{width:1rem;height:1rem}}.bui-MenuEmptyState{padding-inline:var(--bui-space-3);padding-block:var(--bui-space-2);color:var(--bui-fg-secondary);font-size:var(--bui-font-size-3);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular)} \ No newline at end of file diff --git a/docs-ui/src/content/components/menu.props.ts b/docs-ui/src/content/components/menu.props.ts index 46b0c11c39..2c7d76dd5d 100644 --- a/docs-ui/src/content/components/menu.props.ts +++ b/docs-ui/src/content/components/menu.props.ts @@ -70,6 +70,16 @@ export const menuPropDefs: Record = { type: 'enum', values: placementValues, }, + virtualized: { + type: 'boolean', + default: 'false', + }, + maxWidth: { + type: 'number', + }, + maxHeight: { + type: 'number', + }, ...classNamePropDefs, ...stylePropDefs, }; @@ -95,6 +105,16 @@ export const menuListBoxPropDefs: Record = { type: 'enum', values: placementValues, }, + virtualized: { + type: 'boolean', + default: 'false', + }, + maxWidth: { + type: 'number', + }, + maxHeight: { + type: 'number', + }, ...classNamePropDefs, ...stylePropDefs, }; @@ -104,6 +124,16 @@ export const menuAutocompletePropDefs: Record = { type: 'enum', values: placementValues, }, + virtualized: { + type: 'boolean', + default: 'false', + }, + maxWidth: { + type: 'number', + }, + maxHeight: { + type: 'number', + }, ...classNamePropDefs, ...stylePropDefs, }; @@ -113,6 +143,16 @@ export const menuAutocompleteListboxPropDefs: Record = { type: 'enum', values: placementValues, }, + virtualized: { + type: 'boolean', + default: 'false', + }, + maxWidth: { + type: 'number', + }, + maxHeight: { + type: 'number', + }, ...classNamePropDefs, ...stylePropDefs, };