@antimatter-audio/antimatter-ui 7.8.5 → 7.10.0

package/README.md

@@ -1,113 +1,45 @@
 # Antimatter UI
 
-A small library of UI components for Animatter Audio.
-
-[NPM](https://www.npmjs.com/package/@antimatter-audio/antimatter-ui?activeTab=readme)
+A small library of UI components and styles for Animatter Audio.
 
 [Github](http://github.com/antimatter-audio/antimatter-ui)
 
-## Getting started
-
-1. Clone this repo: `git clone git@github.com:antimatter-audio/antimatter-ui.git`.
-
-2. Open this project in VS Code, and hit command-j to bring up the terminal.
-
-3. Run `npm install`.
-
-## Development
-
-This library is intended to be used as a dependency in [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-plugin-template).
-
-**antimatter-plugin-template** is made to bootstrap Juce plugins, but the front end application in the `js` folder can also be viewed in a web browser. That way, you do not need to worry about running Juce while working on UI components.
-
-To view the most recent _published_ version of antimatter-ui:
+## File structure
 
-1. Clone the [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-plugin-template) repo: `git clone git@github.com:antimatter-audio/antimatter-plugin-template.git`
-
-2. Go to the **antimatter-plugin-template** folder, and open the `js` folder in VS Code. Hit command-j to bring up the terminal.
-
-3. Run `npm install`.
-
-4. Run `npm run start` to start your development server.
-
-5. Go go [http://localhost:3000](http://localhost:3000) in your browser.
-
-The default **antimatter-plugin-template** layout should now be viewable. This layout is a demo of all of the **antimatter-ui** components, and includes the latest _published_ version of this library.
-
-NOTE: You will not see any _local_ changes you have made to this library yet. To preview your changes locally before publishing, you will need to [npm link](https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557) this project with the **antimatter-plugin-template** front end application.
-
-1. In **this project**, run: `npm run link-template`.
-
-2. In the `js` folder in **antimatter-plugin-template**, run: `npm run link-ui`.
-
-3. If your local development server is running in **antimatter-plugin-template**, hit option-c to shut it down.
+```
+antimatter-plugin-template/
+├── Assets // Shared assets between the js and Juce apps.
+├── js // The React front end.
+├───── src/antimatter-ui // The UI component library, installed as a git submodule <-- You are here.
+├── juce // The Juce plugin application.
+```
 
-4. Run `npm run start` in **antimatter-plugin-template** to start (or restart) your development server.
+## Getting started
 
-5. Run `npm run start` in **this project** to build your local changes.
+This project is intended to be used as a [Git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) in the [antimatter-plugin-template](https://github.com/antimatter-audio/antimatter-plugin-template) repository.
 
-6. If you don't see your changes, try running:
+It can be built and published as an [npm package](https://www.npmjs.com/package/antimatter-ui) on its own, but as a submodule it can easily share pre-compiled [vanilla-extract](https://vanilla-extract.style/) theme files with the plugin template.
 
-```
-rm -rf node_modules
-npm cache clean --force
-npm install
-npm run link-template
-```
+To use antimatter-ui within the context of **antimatter-plugin-template**, follow the setup instructions [here](https://github.com/antimatter-audio/antimatter-plugin-template?tab=readme-ov-file#creating-a-new-plugin).
 
-In **antimatter-plugin-template**, run:
+## Development
 
-```
-rm -rf node_modules
-npm cache clean --force
-npm install
-npm run link-ui
-```
+**antimatter-plugin-template** contains a demo of all antimatter-ui components.
 
-in **antimatter-plugin-template**.
+**antimatter-plugin-template** is made to bootstrap Juce plugins. The front end application in the `js` folder can also be viewed in a web browser, so you do not need to worry about running Juce while working on UI components.
 
-You should now see your local changes to these components at [http://localhost:3000](http://localhost:3000).
+To view a demo of these components, follow the instructions for setting up `antimatter-plugin-template` [here](../../README.md/#getting-started)
 
 ### Adding new components
 
-If you add a new component to this library, make sure to also add the component to the demo in **antimatter-plugin-template**.
+If you build a new component for this library, add the component to the demo in **antimatter-plugin-template**.
 
 If your new component controls an `AudioProcessorValueTreeState` paramater in Juce, you will need to handle getting and setting that state in your React component, and you will also need to set up a parameter for that state in the demo Juce app in [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-ui).
 
 See `core/Buttons/Button.tsx`, `core/Input/Dropdown.tsx`, and `core/Input/Slider.tsx` for examples of how to get and set Juce's `ToggleState`, `ComboBoxState`, and `SliderState`.
 
-See the README file in the `/juce` directory in the [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-ui) repo for more information on setting up an `AudioProcessorValueTreeState` parameter in the demo app.
-
-## Publish
-
-After making updates in this repo, you will want to publish your changes to npm. This will allow all projects that use the Antimatter UI library to upgrade to the latest version.
-
-First, commit all changes in this repo to git:
-
-`git add -A`
-
-`git commit -m "your update message here"`
-
-`git push`
-
-If you are working on your `main` branch, that's all you need to do.
-
-If you are working on a feature branch, go to [github](http://github.com/antimatter-audio/antimatter-ui), open a new pull request, and then merge the pull request.
-
-Then, you can switch back to your `main` branch:
-`git checkout main`
-
-And update your local `main` branch with the changes from github:
-`git pull`
-
-When you have gotten everything merged to git, you are ready to publish this project to the npm registry!
-
-First, run:
-
-`npm run build`
+See [the main project README file](../../README.md/#getting-started) for more information.
 
-Then, depending on whether your update is a [major change, minor change, or a patch](https://docs.npmjs.com/about-semantic-versioning#incrementing-semantic-versions-in-published-packages), run one of the following:
-`npm version major` || `npm version minor` || `npm version patch`
+### Theming
 
-Finally, run:
-`npm publish`
+See [the main project README file](../../README.md/#theming) for more information.

package/dist/assets/src/common/styles/base.css.ts.vanilla-C7bf3bit.css

@@ -0,0 +1,21 @@
+.globalValues {
+  --spacing-none__1rgzsg00: 0px;
+  --spacing-xSmall__1rgzsg01: 2px;
+  --spacing-small__1rgzsg02: 4px;
+  --spacing-mediumSmall__1rgzsg03: 8px;
+  --spacing-medium__1rgzsg04: 12px;
+  --spacing-mediumLarge__1rgzsg05: 16px;
+  --spacing-large__1rgzsg06: 20px;
+  --spacing-xLarge__1rgzsg07: 24px;
+  --fontSizes-xSmall__1rgzsg08: .75rem;
+  --fontSizes-small__1rgzsg09: .875rem;
+  --fontSizes-medium__1rgzsg0a: 1rem;
+  --fontSizes-large__1rgzsg0b: 1.25rem;
+  --fontSizes-xLarge__1rgzsg0c: 1.5rem;
+  --borderRadius__1rgzsg0d: 3px;
+}
+body, html {
+  font-size: 16px;
+  color: #eee;
+  font-family: arial, sans-serif;
+}

package/dist/assets/src/components/ModuleHeader/ModuleHeader.css.ts.vanilla-CkaF2pN_.css

@@ -0,0 +1,4 @@
+.ModuleHeader_ModuleHeaderStyle__1in8y4q0 {
+  background-color: var(--colors-background-header__1rgzsg0h);
+  color: var(--colors-text-primary__1rgzsg0v);
+}

package/dist/assets/src/core/Button/Button.css.ts.vanilla-C0OMVBhT.css

@@ -0,0 +1,39 @@
+.Button_ButtonStyle__1m3jauc0 {
+  font-size: var(--fontSizes-small__1rgzsg09);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--colors-background-button-default__1rgzsg0l);
+  color: var(--colors-text-primary__1rgzsg0v);
+  padding-right: var(--spacing-mediumSmall__1rgzsg03);
+  padding-left: var(--spacing-mediumSmall__1rgzsg03);
+  cursor: pointer;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-decoration: none;
+  text-align: center;
+  border: 0;
+  border-radius: var(--borderRadius__1rgzsg0d);
+  appearance: none;
+  user-select: none;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+.Button_ButtonStyle__1m3jauc0:hover {
+  outline: none;
+  background-color: var(--colors-background-button-hover__1rgzsg0m);
+}
+.Button_ButtonStyle__1m3jauc0:disabled {
+  cursor: not-allowed;
+  background-color: var(--colors-background-button-disabled__1rgzsg0n);
+}
+.Button_ButtonStyle__1m3jauc0[data-selected] {
+  background-color: var(--colors-background-button-selected__1rgzsg0o);
+}
+.Button_variants_small__1m3jauc1 {
+  height: var(--spacing-large__1rgzsg06);
+  font-size: var(--fontSizes-xSmall__1rgzsg08);
+}
+.Button_variants_large__1m3jauc2 {
+  height: var(--spacing-xLarge__1rgzsg07);
+}

package/dist/assets/src/core/Dropdown/{Dropdown.css.ts.vanilla-BOab6cqW.css → Dropdown.css.ts.vanilla-BsucR6vn.css}

@@ -3,25 +3,25 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-right: var(--spacing-medium__1gden72v);
-  padding-left: var(--spacing-medium__1gden72v);
+  padding-right: var(--spacing-medium__1rgzsg04);
+  padding-left: var(--spacing-medium__1rgzsg04);
   cursor: pointer;
   vertical-align: middle;
   white-space: nowrap;
   text-decoration: none;
   text-transform: uppercase;
   text-align: center;
-  color: var(--colors-text-primary__1gden72h);
-  background-color: var(--colors-background-button-default__1gden727);
+  color: var(--colors-text-primary__1rgzsg0v);
+  background-color: var(--colors-background-button-default__1rgzsg0l);
   border: 0;
-  border-radius: var(--borderRadius__1gden7214);
+  border-radius: var(--borderRadius__1rgzsg0d);
   appearance: none;
   user-select: none;
-  height: var(--spacing-xLarge__1gden72y);
+  height: var(--spacing-xLarge__1rgzsg07);
 }
 .Dropdown_DropdownButtonStyle__1wi5mwi0:hover {
   outline: none;
-  background-color: var(--colors-background-button-hover__1gden728);
+  background-color: var(--colors-background-button-hover__1rgzsg0m);
 }
 .Dropdown_DropdownButtonStyle__1wi5mwi0:focus {
   outline: none;
@@ -31,24 +31,24 @@
 }
 .Dropdown_DropdownButtonStyle__1wi5mwi0:disabled {
   cursor: not-allowed;
-  background-color: var(--colors-background-button-disabled__1gden729);
+  background-color: var(--colors-background-button-disabled__1rgzsg0n);
 }
 .Dropdown_DropdownButtonStyle__1wi5mwi0[data-selected] {
-  background-color: var(--colors-background-button-selected__1gden72a);
+  background-color: var(--colors-background-button-selected__1rgzsg0o);
 }
 .Dropdown_DropdownMenuStyle__1wi5mwi1 {
   z-index: 10;
 }
 .Dropdown_DropdownMenuItemStyle__1wi5mwi2 {
-  background-color: var(--colors-background-popover__1gden726);
-  font-family: var(--font-body__1gden72m);
-  color: var(--colors-text-primary__1gden72h);
-  padding: var(--spacing-large__1gden72x);
+  background-color: var(--colors-background-popover__1rgzsg0k);
+  font-family: var(--font-body__1rgzsg010);
+  color: var(--colors-text-primary__1rgzsg0v);
+  padding: var(--spacing-large__1rgzsg06);
   cursor: pointer;
 }
 .Dropdown_DropdownMenuItemStyle__1wi5mwi2:hover {
-  background-color: var(--colors-background-button-hover__1gden728);
+  background-color: var(--colors-background-button-hover__1rgzsg0m);
 }
 .Dropdown_DropdownMenuItemStyle__1wi5mwi2[data-selected] {
-  background-color: var(--colors-background-button-selected__1gden72a);
+  background-color: var(--colors-background-button-selected__1rgzsg0o);
 }

package/dist/assets/src/core/Indicators/{IndicatorLight.css.ts.vanilla-Dhld62S9.css → IndicatorLight.css.ts.vanilla-3kI3cdYx.css}

@@ -1,7 +1,8 @@
 .IndicatorLight_IndicatorLightStyle__16whmu90 {
   border-radius: 50%;
+  border-color: var(--colors-background-sliderIndicator__1rgzsg0t);
   border-style: solid;
-  background-color: darken(var(--colors-background-alert__1gden72u), 0.5);
+  background-color: darken(var(--colors-background-alert__1rgzsg0u), 0.5);
 }
 .IndicatorLight_variants_small__16whmu91 {
   width: 12px;
@@ -14,5 +15,5 @@
   border-width: 4px;
 }
 .IndicatorLight_variants_isActive__16whmu93 {
-  background-color: var(--colors-background-alert__1gden72u);
+  background-color: var(--colors-background-alert__1rgzsg0u);
 }

package/dist/assets/src/core/Label/Label.css.ts.vanilla-KS1xcRSz.css

@@ -0,0 +1,116 @@
+.Label_LabelStyle__gunjni0 {
+  font-family: var(--font-label__1rgzsg011);
+  font-size: var(--fontSize-label__1rgzsg014);
+  color: var(--colors-text-primary__1rgzsg0v);
+}
+.Label_fontSize_xSmall__gunjni1 {
+  font-size: var(--fontSizes-xSmall__1rgzsg08);
+}
+.Label_fontSize_small__gunjni2 {
+  font-size: var(--fontSizes-small__1rgzsg09);
+}
+.Label_fontSize_medium__gunjni3 {
+  font-size: var(--fontSizes-medium__1rgzsg0a);
+}
+.Label_fontSize_large__gunjni4 {
+  font-size: var(--fontSizes-large__1rgzsg0b);
+}
+.Label_fontSize_xLarge__gunjni5 {
+  font-size: var(--fontSizes-xLarge__1rgzsg0c);
+}
+.Label_paddingTop_none__gunjni6 {
+  padding-top: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingTop_xSmall__gunjni7 {
+  padding-top: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingTop_small__gunjni8 {
+  padding-top: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingTop_mediumSmall__gunjni9 {
+  padding-top: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingTop_medium__gunjnia {
+  padding-top: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingTop_mediumLarge__gunjnib {
+  padding-top: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingTop_large__gunjnic {
+  padding-top: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingTop_xLarge__gunjnid {
+  padding-top: var(--spacing-xLarge__1rgzsg07);
+}
+.Label_paddingRight_none__gunjnie {
+  padding-right: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingRight_xSmall__gunjnif {
+  padding-right: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingRight_small__gunjnig {
+  padding-right: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingRight_mediumSmall__gunjnih {
+  padding-right: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingRight_medium__gunjnii {
+  padding-right: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingRight_mediumLarge__gunjnij {
+  padding-right: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingRight_large__gunjnik {
+  padding-right: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingRight_xLarge__gunjnil {
+  padding-right: var(--spacing-xLarge__1rgzsg07);
+}
+.Label_paddingBottom_none__gunjnim {
+  padding-bottom: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingBottom_xSmall__gunjnin {
+  padding-bottom: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingBottom_small__gunjnio {
+  padding-bottom: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingBottom_mediumSmall__gunjnip {
+  padding-bottom: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingBottom_medium__gunjniq {
+  padding-bottom: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingBottom_mediumLarge__gunjnir {
+  padding-bottom: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingBottom_large__gunjnis {
+  padding-bottom: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingBottom_xLarge__gunjnit {
+  padding-bottom: var(--spacing-xLarge__1rgzsg07);
+}
+.Label_paddingLeft_none__gunjniu {
+  padding-left: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingLeft_xSmall__gunjniv {
+  padding-left: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingLeft_small__gunjniw {
+  padding-left: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingLeft_mediumSmall__gunjnix {
+  padding-left: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingLeft_medium__gunjniy {
+  padding-left: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingLeft_mediumLarge__gunjniz {
+  padding-left: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingLeft_large__gunjni10 {
+  padding-left: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingLeft_xLarge__gunjni11 {
+  padding-left: var(--spacing-xLarge__1rgzsg07);
+}

package/dist/assets/src/core/Label/Label.css.ts.vanilla-kh0Eq4U3.css

@@ -0,0 +1,101 @@
+.Label_LabelStyle__gunjni0 {
+  font-family: var(--font-label__1rgzsg011);
+  font-size: var(--fontSize-label__1rgzsg014);
+  color: var(--colors-text-primary__1rgzsg0v);
+}
+.Label_paddingTop_none__gunjni1 {
+  padding-top: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingTop_xSmall__gunjni2 {
+  padding-top: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingTop_small__gunjni3 {
+  padding-top: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingTop_mediumSmall__gunjni4 {
+  padding-top: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingTop_medium__gunjni5 {
+  padding-top: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingTop_mediumLarge__gunjni6 {
+  padding-top: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingTop_large__gunjni7 {
+  padding-top: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingTop_xLarge__gunjni8 {
+  padding-top: var(--spacing-xLarge__1rgzsg07);
+}
+.Label_paddingRight_none__gunjni9 {
+  padding-right: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingRight_xSmall__gunjnia {
+  padding-right: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingRight_small__gunjnib {
+  padding-right: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingRight_mediumSmall__gunjnic {
+  padding-right: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingRight_medium__gunjnid {
+  padding-right: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingRight_mediumLarge__gunjnie {
+  padding-right: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingRight_large__gunjnif {
+  padding-right: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingRight_xLarge__gunjnig {
+  padding-right: var(--spacing-xLarge__1rgzsg07);
+}
+.Label_paddingBottom_none__gunjnih {
+  padding-bottom: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingBottom_xSmall__gunjnii {
+  padding-bottom: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingBottom_small__gunjnij {
+  padding-bottom: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingBottom_mediumSmall__gunjnik {
+  padding-bottom: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingBottom_medium__gunjnil {
+  padding-bottom: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingBottom_mediumLarge__gunjnim {
+  padding-bottom: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingBottom_large__gunjnin {
+  padding-bottom: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingBottom_xLarge__gunjnio {
+  padding-bottom: var(--spacing-xLarge__1rgzsg07);
+}
+.Label_paddingLeft_none__gunjnip {
+  padding-left: var(--spacing-none__1rgzsg00);
+}
+.Label_paddingLeft_xSmall__gunjniq {
+  padding-left: var(--spacing-xSmall__1rgzsg01);
+}
+.Label_paddingLeft_small__gunjnir {
+  padding-left: var(--spacing-small__1rgzsg02);
+}
+.Label_paddingLeft_mediumSmall__gunjnis {
+  padding-left: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Label_paddingLeft_medium__gunjnit {
+  padding-left: var(--spacing-medium__1rgzsg04);
+}
+.Label_paddingLeft_mediumLarge__gunjniu {
+  padding-left: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Label_paddingLeft_large__gunjniv {
+  padding-left: var(--spacing-large__1rgzsg06);
+}
+.Label_paddingLeft_xLarge__gunjniw {
+  padding-left: var(--spacing-xLarge__1rgzsg07);
+}

package/dist/assets/src/core/Layout/Layout.css.ts.vanilla-Dd3Z1xO2.css

@@ -0,0 +1,124 @@
+.Layout_LayoutStyle__1sxxtfe0 {
+  display: flex;
+  width: 100%;
+}
+.Layout_gapVariant_none__1sxxtfe1 {
+  gap: var(--spacing-none__1rgzsg00);
+}
+.Layout_gapVariant_xSmall__1sxxtfe2 {
+  gap: var(--spacing-xSmall__1rgzsg01);
+}
+.Layout_gapVariant_small__1sxxtfe3 {
+  gap: var(--spacing-small__1rgzsg02);
+}
+.Layout_gapVariant_mediumSmall__1sxxtfe4 {
+  gap: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Layout_gapVariant_medium__1sxxtfe5 {
+  gap: var(--spacing-medium__1rgzsg04);
+}
+.Layout_gapVariant_mediumLarge__1sxxtfe6 {
+  gap: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Layout_gapVariant_large__1sxxtfe7 {
+  gap: var(--spacing-large__1rgzsg06);
+}
+.Layout_gapVariant_xLarge__1sxxtfe8 {
+  gap: var(--spacing-xLarge__1rgzsg07);
+}
+.Layout_paddingTop_none__1sxxtfe9 {
+  padding-top: var(--spacing-none__1rgzsg00);
+}
+.Layout_paddingTop_xSmall__1sxxtfea {
+  padding-top: var(--spacing-xSmall__1rgzsg01);
+}
+.Layout_paddingTop_small__1sxxtfeb {
+  padding-top: var(--spacing-small__1rgzsg02);
+}
+.Layout_paddingTop_mediumSmall__1sxxtfec {
+  padding-top: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Layout_paddingTop_medium__1sxxtfed {
+  padding-top: var(--spacing-medium__1rgzsg04);
+}
+.Layout_paddingTop_mediumLarge__1sxxtfee {
+  padding-top: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Layout_paddingTop_large__1sxxtfef {
+  padding-top: var(--spacing-large__1rgzsg06);
+}
+.Layout_paddingTop_xLarge__1sxxtfeg {
+  padding-top: var(--spacing-xLarge__1rgzsg07);
+}
+.Layout_paddingRight_none__1sxxtfeh {
+  padding-right: var(--spacing-none__1rgzsg00);
+}
+.Layout_paddingRight_xSmall__1sxxtfei {
+  padding-right: var(--spacing-xSmall__1rgzsg01);
+}
+.Layout_paddingRight_small__1sxxtfej {
+  padding-right: var(--spacing-small__1rgzsg02);
+}
+.Layout_paddingRight_mediumSmall__1sxxtfek {
+  padding-right: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Layout_paddingRight_medium__1sxxtfel {
+  padding-right: var(--spacing-medium__1rgzsg04);
+}
+.Layout_paddingRight_mediumLarge__1sxxtfem {
+  padding-right: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Layout_paddingRight_large__1sxxtfen {
+  padding-right: var(--spacing-large__1rgzsg06);
+}
+.Layout_paddingRight_xLarge__1sxxtfeo {
+  padding-right: var(--spacing-xLarge__1rgzsg07);
+}
+.Layout_paddingBottom_none__1sxxtfep {
+  padding-bottom: var(--spacing-none__1rgzsg00);
+}
+.Layout_paddingBottom_xSmall__1sxxtfeq {
+  padding-bottom: var(--spacing-xSmall__1rgzsg01);
+}
+.Layout_paddingBottom_small__1sxxtfer {
+  padding-bottom: var(--spacing-small__1rgzsg02);
+}
+.Layout_paddingBottom_mediumSmall__1sxxtfes {
+  padding-bottom: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Layout_paddingBottom_medium__1sxxtfet {
+  padding-bottom: var(--spacing-medium__1rgzsg04);
+}
+.Layout_paddingBottom_mediumLarge__1sxxtfeu {
+  padding-bottom: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Layout_paddingBottom_large__1sxxtfev {
+  padding-bottom: var(--spacing-large__1rgzsg06);
+}
+.Layout_paddingBottom_xLarge__1sxxtfew {
+  padding-bottom: var(--spacing-xLarge__1rgzsg07);
+}
+.Layout_paddingLeft_none__1sxxtfex {
+  padding-left: var(--spacing-none__1rgzsg00);
+}
+.Layout_paddingLeft_xSmall__1sxxtfey {
+  padding-left: var(--spacing-xSmall__1rgzsg01);
+}
+.Layout_paddingLeft_small__1sxxtfez {
+  padding-left: var(--spacing-small__1rgzsg02);
+}
+.Layout_paddingLeft_mediumSmall__1sxxtfe10 {
+  padding-left: var(--spacing-mediumSmall__1rgzsg03);
+}
+.Layout_paddingLeft_medium__1sxxtfe11 {
+  padding-left: var(--spacing-medium__1rgzsg04);
+}
+.Layout_paddingLeft_mediumLarge__1sxxtfe12 {
+  padding-left: var(--spacing-mediumLarge__1rgzsg05);
+}
+.Layout_paddingLeft_large__1sxxtfe13 {
+  padding-left: var(--spacing-large__1rgzsg06);
+}
+.Layout_paddingLeft_xLarge__1sxxtfe14 {
+  padding-left: var(--spacing-xLarge__1rgzsg07);
+}