From a74ce1cbdf24278e73ecd1f2f6f9ef6f1efe20ff Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 11 Feb 2022 13:34:45 -0500 Subject: [PATCH 01/19] =?UTF-8?q?[EuiPageTemplate=20Feature]=20[Docs]=20Cr?= =?UTF-8?q?eate=20new=20section=20for=20=E2=80=9CTemplates=E2=80=9D=20(#56?= =?UTF-8?q?25)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [Docs] Create new section for “Templates” - Moves Page Template, SuperDatePicker, and Searchable Sitewide Template - Stubs in placeholder page for in lower level page components - Fixes routes --- scripts/a11y-testing.js | 4 +- src-docs/src/routes.js | 15 +- .../auto_refresh/auto_refresh_example.js | 2 +- .../views/bottom_bar/bottom_bar_example.js | 2 +- .../views/datagrid/row_auto_height_data.json | 4 +- .../empty_prompt/empty_prompt_example.js | 11 +- src-docs/src/views/page/page_example.js | 728 +---------------- .../src/views/page/page_template_example.js | 759 ++++++++++++++++++ .../views/page_header/page_header_example.js | 2 +- src-docs/src/views/panel/panel_example.js | 4 +- .../views/selectable/selectable_example.js | 152 ---- .../selectable_sitewide_template_example.js | 182 +++++ src-docs/src/views/tabs/tabs_example.js | 2 +- 13 files changed, 981 insertions(+), 886 deletions(-) create mode 100644 src-docs/src/views/page/page_template_example.js create mode 100644 src-docs/src/views/selectable/selectable_sitewide_template_example.js diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js index f21ac10ab80..4a70c31b894 100644 --- a/scripts/a11y-testing.js +++ b/scripts/a11y-testing.js @@ -4,13 +4,13 @@ const { AxePuppeteer } = require('@axe-core/puppeteer'); const docsPages = async (root, page) => { const pagesToSkip = [ - `${root}#/layout/page`, // Has duplicate `
` element + `${root}#/templates/page-template`, // Has duplicate `
` element `${root}#/layout/page-header`, // Has duplicate `
` element `${root}#/display/aspect-ratio`, `${root}#/forms/combo-box`, `${root}#/forms/color-selection`, `${root}#/forms/date-picker`, - `${root}#/forms/super-date-picker`, + `${root}#/templates/super-date-picker`, `${root}#/tabular-content/data-grid-styling-and-control`, `${root}#/tabular-content/data-grid-virtualization`, `${root}#/tabular-content/data-grid-row-heights-options`, diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 23c7d8366e5..667061c2124 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -26,6 +26,12 @@ import { writingExamplesSections, } from './views/guidelines/writing_examples'; +// Templates + +import { PageTemplateExample } from './views/page/page_template_example'; + +import { SitewideSearchExample } from './views/selectable/selectable_sitewide_template_example'; + // Services import { ColorPaletteExample } from './views/color_palette/color_palette_example'; @@ -442,6 +448,14 @@ const navigation = [ }, ], }, + { + name: 'Templates', + items: [ + PageTemplateExample, + SitewideSearchExample, + SuperDatePickerExample, + ].map((example) => createExample(example)), + }, { name: 'Layout', items: [ @@ -539,7 +553,6 @@ const navigation = [ SearchBarExample, SelectableExample, SuggestExample, - SuperDatePickerExample, SuperSelectExample, ].map((example) => createExample(example)), }, diff --git a/src-docs/src/views/auto_refresh/auto_refresh_example.js b/src-docs/src/views/auto_refresh/auto_refresh_example.js index 53eead3917c..80574692937 100644 --- a/src-docs/src/views/auto_refresh/auto_refresh_example.js +++ b/src-docs/src/views/auto_refresh/auto_refresh_example.js @@ -37,7 +37,7 @@ export const AutoRefreshExample = { text: (

This is a component that is used by the{' '} - + EuiSuperDatePicker {' '} component to create an automatic refresh configuration. It merely diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index 8dad801f5c6..73756c91328 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -23,7 +23,7 @@ export const BottomBarExample = {

EuiPageTemplate offers a quick way to{' '} - + apply a bottom bar to your page layouts . diff --git a/src-docs/src/views/datagrid/row_auto_height_data.json b/src-docs/src/views/datagrid/row_auto_height_data.json index c905eb01e22..54d1bef9229 100644 --- a/src-docs/src/views/datagrid/row_auto_height_data.json +++ b/src-docs/src/views/datagrid/row_auto_height_data.json @@ -2391,7 +2391,7 @@ "comments": 4, "created_at": "2021-05-04T12:44:31Z", "author_association": "NONE", - "body": "## Summary\r\n\r\nUsing the super time picker in Kibana can lead to UI crashing for edge case values (see https://github.com/elastic/kibana/issues/91138).\r\n\r\n## How to reproduce\r\n\r\n1. Navigate here https://eui.elastic.co/#/forms/super-date-picker#configurations\r\n2. Select “days ago” and entering a value of 9 9s\r\n3. See error\r\n\r\nIs there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?\r\n\r\n## Gif\r\n\r\n![supertimepickerbug](https://user-images.githubusercontent.com/8155004/117005090-21d59380-ace7-11eb-87ec-af7897b879f9.gif)\r\n" + "body": "## Summary\r\n\r\nUsing the super time picker in Kibana can lead to UI crashing for edge case values (see https://github.com/elastic/kibana/issues/91138).\r\n\r\n## How to reproduce\r\n\r\n1. Navigate here https://eui.elastic.co/#/templates/super-date-picker#configurations\r\n2. Select “days ago” and entering a value of 9 9s\r\n3. See error\r\n\r\nIs there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?\r\n\r\n## Gif\r\n\r\n![supertimepickerbug](https://user-images.githubusercontent.com/8155004/117005090-21d59380-ace7-11eb-87ec-af7897b879f9.gif)\r\n" }, { "html_url": "https://github.com/elastic/eui/issues/4774", @@ -6879,7 +6879,7 @@ "comments": 0, "created_at": "2020-09-10T20:23:33Z", "author_association": "NONE", - "body": "SuperDatePicker does not properly restore relative dates\r\n\r\nSteps to reproduce:\r\n1. Go to https://elastic.github.io/eui/#/forms/super-date-picker and to the first time picker on that page\r\n2. Click start date to edit the start date and enter `15` `months ago`\r\n![image](https://user-images.githubusercontent.com/8397647/92798784-ddbd0980-f378-11ea-975b-874cdea6a1e4.png)\r\n3. Observe SuperDatePicker puts human friendly desc in start date of `~ 1 year ago` which is handy.\r\n4. Click `Update`\r\n5. Observe the time picker reflects `15 months ago` just fine.\r\n![image](https://user-images.githubusercontent.com/8397647/92799079-21177800-f379-11ea-9c5c-b68a0b70272f.png)\r\n6. Click to edit the start date again\r\n7. Observe that `1` `year ago` is populate in the time picker GUI instead of `15 months ago`. Note the underlying date is still correct (verify this by looking at the absolute date at the bottom of the picker).\r\n![image](https://user-images.githubusercontent.com/8397647/92799418-6340b980-f379-11ea-99c0-7e470bf54bd5.png)\r\n8. As a user I would expect it to restore `15 months ago` and if I manually fix it myself it causes the dialog to get stuck in \"update mode\" (see https://github.com/elastic/eui/issues/4025)\r\n" + "body": "SuperDatePicker does not properly restore relative dates\r\n\r\nSteps to reproduce:\r\n1. Go to https://elastic.github.io/eui/#/templates/super-date-picker and to the first time picker on that page\r\n2. Click start date to edit the start date and enter `15` `months ago`\r\n![image](https://user-images.githubusercontent.com/8397647/92798784-ddbd0980-f378-11ea-975b-874cdea6a1e4.png)\r\n3. Observe SuperDatePicker puts human friendly desc in start date of `~ 1 year ago` which is handy.\r\n4. Click `Update`\r\n5. Observe the time picker reflects `15 months ago` just fine.\r\n![image](https://user-images.githubusercontent.com/8397647/92799079-21177800-f379-11ea-9c5c-b68a0b70272f.png)\r\n6. Click to edit the start date again\r\n7. Observe that `1` `year ago` is populate in the time picker GUI instead of `15 months ago`. Note the underlying date is still correct (verify this by looking at the absolute date at the bottom of the picker).\r\n![image](https://user-images.githubusercontent.com/8397647/92799418-6340b980-f379-11ea-99c0-7e470bf54bd5.png)\r\n8. As a user I would expect it to restore `15 months ago` and if I manually fix it myself it causes the dialog to get stuck in \"update mode\" (see https://github.com/elastic/eui/issues/4025)\r\n" }, { "html_url": "https://github.com/elastic/eui/issues/4024", diff --git a/src-docs/src/views/empty_prompt/empty_prompt_example.js b/src-docs/src/views/empty_prompt/empty_prompt_example.js index e4745fa0277..b8e449be4b2 100644 --- a/src-docs/src/views/empty_prompt/empty_prompt_example.js +++ b/src-docs/src/views/empty_prompt/empty_prompt_example.js @@ -317,10 +317,11 @@ export const EmptyPromptExample = { <>

When using a EuiEmptyPrompt in a{' '} - EuiPageTemplate, pay attention to the - template you’re passing. The template will determine which{' '} - color and hasBorder prop you - should use to ensure consistency across our Elastic products. + EuiPageTemplate, pay + attention to the template you’re passing. The template will + determine which color and{' '} + hasBorder prop you should use to ensure + consistency across our Elastic products.

@@ -348,7 +349,7 @@ export const EmptyPromptExample = { You can then tie multiple types of empty states together to create a seamless loading to empty or loading to error experience. The following example shows how to encorprate these states with{' '} - + EuiPageTemplate {' '} using {'template="centeredContent"'}. diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js index 3271025bba2..07e2d0c20dd 100644 --- a/src-docs/src/views/page/page_example.js +++ b/src-docs/src/views/page/page_example.js @@ -1,746 +1,38 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { GuideSectionTypes } from '../../components'; -import { pageTemplateConfig } from './playground'; -import { PageDemo } from './_page_demo'; - -import { - EuiCode, - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageHeader, - EuiPageSideBar, - EuiText, - EuiEmptyPrompt, - EuiPageTemplate, - EuiCallOut, - EuiSpacer, - EuiBottomBar, -} from '../../../../src/components'; - -import PageNew from './page_new'; -const pageNewSource = require('!!raw-loader!./page_new'); -import PageTemplate from './page_template'; -const PageTemplateSource = require('!!raw-loader!./page_template'); - -import PageBottomBar from './page_bottom_bar'; -const pageBottomBarSource = require('!!raw-loader!./page_bottom_bar'); -import PageBottomBarTemplate from './page_bottom_bar_template'; -const PageBottomBarTemplateSource = require('!!raw-loader!./page_bottom_bar_template'); - -import PageRestrictingWidth from './page_restricting_width'; -const PageRestrictingWidthSource = require('!!raw-loader!./page_restricting_width'); -import PageRestrictingWidthTemplate from './page_restricting_width_template'; -const PageRestrictingWidthTemplateSource = require('!!raw-loader!./page_restricting_width_template'); - -import PageCenteredBody from './page_centered_body'; -const PageCenteredBodySource = require('!!raw-loader!./page_centered_body'); -import PageCenteredBodyTemplate from './page_centered_body_template'; -const PageCenteredBodyTemplateSource = require('!!raw-loader!./page_centered_body_template'); - -import PageCenteredContent from './page_centered_content'; -const PageCenteredContentSource = require('!!raw-loader!./page_centered_content'); -import PageCenteredContentTemplate from './page_centered_content_template'; -const PageCenteredContentTemplateSource = require('!!raw-loader!./page_centered_content_template'); - -import PageSimple from './page_simple'; -const PageSimpleSource = require('!!raw-loader!./page_simple'); -import PageSimpleTemplate from './page_simple_template'; -const PageSimpleTemplateSource = require('!!raw-loader!./page_simple_template'); - -import PageFullHeight from './page_full_height'; -const PageFullHeightSource = require('!!raw-loader!./page_full_height'); -import PageFullHeightTemplate from './page_full_height_template'; -const PageFullHeightTemplateSource = require('!!raw-loader!./page_full_height_template'); - -import PageSimpleCenteredBody from './page_simple_content_body'; -const PageSimpleCenteredBodySource = require('!!raw-loader!./page_simple_content_body'); -import PageSimpleCenteredBodyTemplate from './page_simple_content_body_template'; -const PageSimpleCenteredBodyTemplateSource = require('!!raw-loader!./page_simple_content_body_template'); - -import PageSimpleEmptyContent from './page_simple_empty_content'; -const PageSimpleEmptyContentSource = require('!!raw-loader!./page_simple_empty_content'); -import PageSimpleEmptyContentTemplate from './page_simple_empty_content_template'; -const PageSimpleEmptyContentTemplateSource = require('!!raw-loader!./page_simple_empty_content_template'); - -import PageCustomContent from './page_custom_content'; -const PageCustomContentSource = require('!!raw-loader!./page_custom_content'); -import PageCustomContentTemplate from './page_custom_content_template'; -const PageCustomContentTemplateSource = require('!!raw-loader!./page_custom_content_template'); - -import PageLegacy from './page'; -const PageLegacySource = require('!!raw-loader!./page'); +import { EuiText, EuiSpacer, EuiCallOut } from '../../../../src/components'; export const PageExample = { - title: 'Page', + title: 'Page components', intro: ( <>

Page layouts are modular and fit together in a precise manner, though certain parts can also be added or removed as needed. EUI provides - both the indivdual page components and an over-arching template for + both the individual page components and an{' '} + over-arching template for easily creating some pre-defined layouts.

- You'll find the code for each in their own tab and if you go to - full screen, you can see how they would behave in a typical - application layout. + If you're looking for full page layout examples, we recommend + using the EuiPageTemplate{' '} + and use this page to modify the props of each part of the template.

), sections: [ { - title: 'A full page with everything', - source: [ - { - type: GuideSectionTypes.JS, - code: PageTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: pageNewSource, - displayName: 'Components JS', - }, - ], - text: ( -
-

- EUI provides a family of components using the{' '} - EuiPage prefix that work together to build - consistent page layouts that work responsively. -

-
    -
  • - EuiPage and EuiPageBody provide - the overall wrapper with a column flex display. -
    • -
  • - EuiPageSideBar provides a way to add side - navigation that can be made sticky to scroll - independent of the page content. See{' '} - - EuiSideNav - {' '} - for contents. -
    • -
  • - - EuiPageHeader - {' '} - provides a title, description, section for actions and possible - tabs. -
    • -
  • - EuiPageContent provides the main content - container and extends{' '} - - EuiPanel - - . -
    • -
  • - EuiPageContentBody wraps the content that comes - after the page header. -
    • -
-

- Or you can use the provided EuiPageTemplate, which - is simply a shortcut for creating the different types of page layout - patterns described in these docs. It is somewhat opinionated, but - still has the ability to customize most of the inner components with - props like pageSideBarProps and{' '} - pageContentProps. -

-
- ), - props: { - EuiPageTemplate, - EuiPage, - EuiPageBody, - EuiPageSideBar, - EuiPageHeader, - EuiPageContent, - EuiPageContentBody, - EuiBottomBar, - }, - playground: pageTemplateConfig, - demo: ( - - ), - fullScreen: { - slug: 'full-page', - demo: ( - - ), - }, - }, - { - title: 'Restricting page width', - source: [ - { - type: GuideSectionTypes.JS, - code: PageRestrictingWidthTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageRestrictingWidthSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Most content does not scale well to the full width of the window. - You can restrict this to a typical width and center the page by - setting the restrictWidth prop to{' '} - true on EuiPageHeader and{' '} - EuiPageContent. You can also pass an integer to - this property to max out the width at a custom pixel value or a - string with a custom measurement. -

- - The EuiPageTemplate allows setting this - property at the top level and defaults to{' '} - true. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'restricting-page-width', - demo: ( - - ), - }, - }, - { - title: 'Showing a bottom bar', - source: [ - { - type: GuideSectionTypes.JS, - code: PageBottomBarTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: pageBottomBarSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Adding an{' '} - - EuiBottomBar - {' '} - can be tricky to use and account for any side bars.{' '} - EuiPageTemplate handles this nicely by supplying a{' '} - bottomBar prop for passing the contents of your - bottom bar, and bottomBarProps that extends{' '} - EuiBottomBar. -

-

- It uses the sticky position so that it sticks to - the bottom of and remains within the bounds of{' '} - EuiPageBody. This way it will never overlap the{' '} - EuiPageSideBar, no matter the screen size. It also - means not needing to accommodate for the height of the bar in the - body element. -

- - EuiPageTemplate only supports bottom bars in - the default template. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'bottom-bar', - demo: ( - - ), - }, - }, - { - title: 'Centered body', - source: [ - { - type: GuideSectionTypes.JS, - code: PageCenteredBodyTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageCenteredBodySource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- When the content for the page is minimal or in an empty/pre-setup - state, the page content can be centered vertically and horizontally. - We recommend then using the{' '} - - EuiEmptyPrompt - {' '} - for the content. -

- - This layout can be achieved in EuiPageTemplate{' '} - by setting {'template="centeredBody"'}. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'centered-body', - demo: ( - - ), - }, - props: { EuiPageTemplate, EuiEmptyPrompt }, - }, - { - title: 'Centered content', - source: [ - { - type: GuideSectionTypes.JS, - code: PageCenteredContentTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageCenteredContentSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Similar to the previous example, you can create a centered panel to - emphasize incompleteness even with a page header. For this setup, we - recommend using setting EuiPageContent to use the{' '} - subdued color as to not have nested shadows. -

- - This layout can be achieved in EuiPageTemplate{' '} - by setting {'template="centeredContent"'}. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'centered-content', - demo: ( - - ), - }, - }, - { - title: 'A simple page with tabs', - source: [ - { - type: GuideSectionTypes.JS, - code: PageSimpleTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageSimpleSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- When leaving off the EuiPageSideBar, we recommend a - slightly different configuration by pulling the page header out of - the EuiPageContent and removing the shadow from{' '} - EuiPageContent. -

- - This layout will automatically be achieved through{' '} - EuiPageTemplate by leaving{' '} - pageSideBar as undefined. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'tabs', - demo: ( - - ), - }, - }, - { - title: 'Full height layout', - source: [ - { - type: GuideSectionTypes.JS, - code: PageFullHeightTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageFullHeightSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Though it is not recomended for most layouts, some require the - control of scrolling to be handled through child components. You can - achieve this through nested flex groups and overflow properties; - adding certain combinations of{' '} - - CSS overflow utility classes - {' '} - to these children. There are a few caveats to - understand when trying to achieve full height layouts with{' '} - EuiPageTemplate. -

-
    -
  1. - Using the {'fullHeight'} prop adds an extra - layer of{' '} - - EuiFlexGroup and EuiFlexItem - {' '} - around the template children to negate the negative margins. -
    2. -
  2. - Using {'fullHeight=true'} will automatically - add scrolling behavior to the EuiFlexItem that - wraps the children. -
    3. -
  3. - Using {'fullHeight="noscroll"'} removes all - scrolling behavior and your layouts will break if you do not - manually add them. -
    4. -
  4. - When using either values for {'fullHeight'}, - there will always be a minimum height of 460px{' '} - to the page contents. -
    5. -
  5. - Full height layouts are restricted to{' '} - medium breakpoints and above. We recommend - retaining any responsive behavior and allowing normal page scroll - on smaller screens. -
    6. -
- - When applying the .eui-yScroll class, it is - recommended to also apply tabindex=0 to - ensure keyboard users can scroll these containers. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'full-height', - demo: ( - - ), - }, - }, - { - title: 'Simple layout with centered body', - source: [ - { - type: GuideSectionTypes.JS, - code: PageSimpleCenteredBodyTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageSimpleCenteredBodySource, - displayName: 'Components JS', - }, - ], - text: ( -

- Similar to the version with a side bar, when the content for the page - is minimal or in an empty/pre-setup state, the page content can be - centered vertically and horizontally. We recommend then using the{' '} - - EuiEmptyPrompt - {' '} - for the content. -

- ), - demo: ( - - ), - fullScreen: { - slug: 'simple-centered-body', - demo: ( - - ), - }, - }, - { - title: 'Simple layout with centered content', - source: [ - { - type: GuideSectionTypes.JS, - code: PageSimpleEmptyContentTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageSimpleEmptyContentSource, - displayName: 'Components JS', - }, - ], - text: ( -

- Also similar to the previous examples, you can create a centered panel - to emphasis incompleteness even with a page header. For this setup, - You will need to use nested EuiPageContent components - in order for the centering to work. -

- ), - demo: ( - - ), - fullScreen: { - slug: 'simple-centered-content', - demo: ( - - ), - }, - }, - { - title: 'A simple page layout with custom content', - source: [ - { - type: GuideSectionTypes.JS, - code: PageCustomContentTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageCustomContentSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- You can replace the inner parts of EuiPageBody with - your own content, with or without a page header. This allows you to - create dashboard style layouts with lots of panels. It is not - recommended, however, to use this setup when you also have side bar. -

- - This layout can be achieved in EuiPageTemplate{' '} - by setting {'template="empty"'}. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'simple-custom-content', - demo: ( - - ), - }, - }, - { - title: 'Legacy layout', - source: [ - { - type: GuideSectionTypes.JS, - code: PageLegacySource, - }, - ], - text: ( -

- In previous versions of EUI, we emulated page layouts where the{' '} - EuiPageContent had margins all around created by - padding on EuiPage. This layout is still achievable - but not through EuiPageTemplate. You must use the{' '} - EuiPage components manually as seen in this example. -

- ), - demo: ( -
- -
- ), - props: { - EuiPage, - EuiPageBody, - EuiPageSideBar, - EuiPageHeader, - EuiPageContent, - EuiPageContentBody, - }, + title: 'To do', + text:

TO DO

, }, ], }; diff --git a/src-docs/src/views/page/page_template_example.js b/src-docs/src/views/page/page_template_example.js new file mode 100644 index 00000000000..32c14415bc5 --- /dev/null +++ b/src-docs/src/views/page/page_template_example.js @@ -0,0 +1,759 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { GuideSectionTypes } from '../../components'; +import { pageTemplateConfig } from './playground'; +import { PageDemo } from './_page_demo'; + +import { + EuiCode, + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageHeader, + EuiPageSideBar, + EuiText, + EuiEmptyPrompt, + EuiPageTemplate, + EuiCallOut, + EuiSpacer, + EuiBottomBar, +} from '../../../../src/components'; + +import PageNew from './page_new'; +const pageNewSource = require('!!raw-loader!./page_new'); +import PageTemplate from './page_template'; +const PageTemplateSource = require('!!raw-loader!./page_template'); + +import PageBottomBar from './page_bottom_bar'; +const pageBottomBarSource = require('!!raw-loader!./page_bottom_bar'); +import PageBottomBarTemplate from './page_bottom_bar_template'; +const PageBottomBarTemplateSource = require('!!raw-loader!./page_bottom_bar_template'); + +import PageRestrictingWidth from './page_restricting_width'; +const PageRestrictingWidthSource = require('!!raw-loader!./page_restricting_width'); +import PageRestrictingWidthTemplate from './page_restricting_width_template'; +const PageRestrictingWidthTemplateSource = require('!!raw-loader!./page_restricting_width_template'); + +import PageCenteredBody from './page_centered_body'; +const PageCenteredBodySource = require('!!raw-loader!./page_centered_body'); +import PageCenteredBodyTemplate from './page_centered_body_template'; +const PageCenteredBodyTemplateSource = require('!!raw-loader!./page_centered_body_template'); + +import PageCenteredContent from './page_centered_content'; +const PageCenteredContentSource = require('!!raw-loader!./page_centered_content'); +import PageCenteredContentTemplate from './page_centered_content_template'; +const PageCenteredContentTemplateSource = require('!!raw-loader!./page_centered_content_template'); + +import PageSimple from './page_simple'; +const PageSimpleSource = require('!!raw-loader!./page_simple'); +import PageSimpleTemplate from './page_simple_template'; +const PageSimpleTemplateSource = require('!!raw-loader!./page_simple_template'); + +import PageFullHeight from './page_full_height'; +const PageFullHeightSource = require('!!raw-loader!./page_full_height'); +import PageFullHeightTemplate from './page_full_height_template'; +const PageFullHeightTemplateSource = require('!!raw-loader!./page_full_height_template'); + +import PageSimpleCenteredBody from './page_simple_content_body'; +const PageSimpleCenteredBodySource = require('!!raw-loader!./page_simple_content_body'); +import PageSimpleCenteredBodyTemplate from './page_simple_content_body_template'; +const PageSimpleCenteredBodyTemplateSource = require('!!raw-loader!./page_simple_content_body_template'); + +import PageSimpleEmptyContent from './page_simple_empty_content'; +const PageSimpleEmptyContentSource = require('!!raw-loader!./page_simple_empty_content'); +import PageSimpleEmptyContentTemplate from './page_simple_empty_content_template'; +const PageSimpleEmptyContentTemplateSource = require('!!raw-loader!./page_simple_empty_content_template'); + +import PageCustomContent from './page_custom_content'; +const PageCustomContentSource = require('!!raw-loader!./page_custom_content'); +import PageCustomContentTemplate from './page_custom_content_template'; +const PageCustomContentTemplateSource = require('!!raw-loader!./page_custom_content_template'); + +import PageLegacy from './page'; +const PageLegacySource = require('!!raw-loader!./page'); + +export const PageTemplateExample = { + title: 'Page template', + intro: ( + <> + +

+ Page layouts are modular and fit together in a precise manner, though + certain parts can also be added or removed as needed. EUI provides + both the{' '} + individual page components{' '} + and an over-arching template for easily creating some + pre-defined layouts. +

+ + + +

+ You'll find the code for each in their own tab and if you go to + full screen, you can see how they would behave in a typical + application layout. +

+ + + +

+ The template is a very fragile component that will cause unexpected + results if nested. +

+ + + ), + sections: [ + { + title: 'A full page with everything', + source: [ + { + type: GuideSectionTypes.JS, + code: PageTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: pageNewSource, + displayName: 'Components JS', + }, + ], + text: ( +
+

+ EUI provides a family of components using the{' '} + EuiPage prefix that work together to build + consistent page layouts that work responsively. +

+
    +
  • + EuiPage and EuiPageBody provide + the overall wrapper with a column flex display. +
    • +
  • + EuiPageSideBar provides a way to add side + navigation that can be made sticky to scroll + independent of the page content. See{' '} + + EuiSideNav + {' '} + for contents. +
    • +
  • + + EuiPageHeader + {' '} + provides a title, description, section for actions and possible + tabs. +
    • +
  • + EuiPageContent provides the main content + container and extends{' '} + + EuiPanel + + . +
    • +
  • + EuiPageContentBody wraps the content that comes + after the page header. +
    • +
+

+ Or you can use the provided EuiPageTemplate, which + is simply a shortcut for creating the different types of page layout + patterns described in these docs. It is somewhat opinionated, but + still has the ability to customize most of the inner components with + props like pageSideBarProps and{' '} + pageContentProps. +

+
+ ), + props: { + EuiPageTemplate, + EuiPage, + EuiPageBody, + EuiPageSideBar, + EuiPageHeader, + EuiPageContent, + EuiPageContentBody, + EuiBottomBar, + }, + playground: pageTemplateConfig, + demo: ( + + ), + fullScreen: { + slug: 'full-page', + demo: ( + + ), + }, + }, + { + title: 'Restricting page width', + source: [ + { + type: GuideSectionTypes.JS, + code: PageRestrictingWidthTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageRestrictingWidthSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Most content does not scale well to the full width of the window. + You can restrict this to a typical width and center the page by + setting the restrictWidth prop to{' '} + true on EuiPageHeader and{' '} + EuiPageContent. You can also pass an integer to + this property to max out the width at a custom pixel value or a + string with a custom measurement. +

+ + The EuiPageTemplate allows setting this + property at the top level and defaults to{' '} + true. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'restricting-page-width', + demo: ( + + ), + }, + }, + { + title: 'Showing a bottom bar', + source: [ + { + type: GuideSectionTypes.JS, + code: PageBottomBarTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: pageBottomBarSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Adding an{' '} + + EuiBottomBar + {' '} + can be tricky to use and account for any side bars.{' '} + EuiPageTemplate handles this nicely by supplying a{' '} + bottomBar prop for passing the contents of your + bottom bar, and bottomBarProps that extends{' '} + EuiBottomBar. +

+

+ It uses the sticky position so that it sticks to + the bottom of and remains within the bounds of{' '} + EuiPageBody. This way it will never overlap the{' '} + EuiPageSideBar, no matter the screen size. It also + means not needing to accommodate for the height of the bar in the + body element. +

+ + EuiPageTemplate only supports bottom bars in + the default template. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'bottom-bar', + demo: ( + + ), + }, + }, + { + title: 'Centered body', + source: [ + { + type: GuideSectionTypes.JS, + code: PageCenteredBodyTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageCenteredBodySource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ When the content for the page is minimal or in an empty/pre-setup + state, the page content can be centered vertically and horizontally. + We recommend then using the{' '} + + EuiEmptyPrompt + {' '} + for the content. +

+ + This layout can be achieved in EuiPageTemplate{' '} + by setting {'template="centeredBody"'}. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'centered-body', + demo: ( + + ), + }, + props: { EuiPageTemplate, EuiEmptyPrompt }, + }, + { + title: 'Centered content', + source: [ + { + type: GuideSectionTypes.JS, + code: PageCenteredContentTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageCenteredContentSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Similar to the previous example, you can create a centered panel to + emphasize incompleteness even with a page header. For this setup, we + recommend setting EuiPageContent to use the{' '} + subdued color as to not have nested shadows. +

+ + This layout can be achieved in EuiPageTemplate{' '} + by setting {'template="centeredContent"'}. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'centered-content', + demo: ( + + ), + }, + }, + { + title: 'A simple page with tabs', + source: [ + { + type: GuideSectionTypes.JS, + code: PageSimpleTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageSimpleSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ When leaving off the EuiPageSideBar, we recommend a + slightly different configuration by pulling the page header out of + the EuiPageContent and removing the shadow from{' '} + EuiPageContent. +

+ + This layout will automatically be achieved through{' '} + EuiPageTemplate by leaving{' '} + pageSideBar as undefined. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'tabs', + demo: ( + + ), + }, + }, + { + title: 'Full height layout', + source: [ + { + type: GuideSectionTypes.JS, + code: PageFullHeightTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageFullHeightSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Though it is not recommended for most layouts, some require the + control of scrolling to be handled through child components. You can + achieve this through nested flex groups and overflow properties; + adding certain combinations of{' '} + + CSS overflow utility classes + {' '} + to these children. There are a few caveats to + understand when trying to achieve full height layouts with{' '} + EuiPageTemplate. +

+
    +
  1. + Using the {'fullHeight'} prop adds an extra + layer of{' '} + + EuiFlexGroup and EuiFlexItem + {' '} + around the template children to negate the negative margins. +
    2. +
  2. + Using {'fullHeight=true'} will automatically + add scrolling behavior to the EuiFlexItem that + wraps the children. +
    3. +
  3. + Using {'fullHeight="noscroll"'} removes all + scrolling behavior and your layouts will break if you do not + manually add them. +
    4. +
  4. + When using either values for {'fullHeight'}, + there will always be a minimum height of 460px{' '} + to the page contents. +
    5. +
  5. + Full height layouts are restricted to{' '} + medium breakpoints and above. We recommend + retaining any responsive behavior and allowing normal page scroll + on smaller screens. +
    6. +
+ + When applying the .eui-yScroll class, it is + recommended to also apply tabindex=0 to + ensure keyboard users can scroll these containers. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'full-height', + demo: ( + + ), + }, + }, + { + title: 'Simple layout with centered body', + source: [ + { + type: GuideSectionTypes.JS, + code: PageSimpleCenteredBodyTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageSimpleCenteredBodySource, + displayName: 'Components JS', + }, + ], + text: ( +

+ Similar to the version with a side bar, when the content for the page + is minimal or in an empty/pre-setup state, the page content can be + centered vertically and horizontally. We recommend then using the{' '} + + EuiEmptyPrompt + {' '} + for the content. +

+ ), + demo: ( + + ), + fullScreen: { + slug: 'simple-centered-body', + demo: ( + + ), + }, + }, + { + title: 'Simple layout with centered content', + source: [ + { + type: GuideSectionTypes.JS, + code: PageSimpleEmptyContentTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageSimpleEmptyContentSource, + displayName: 'Components JS', + }, + ], + text: ( +

+ Also similar to the previous examples, you can create a centered panel + to emphasize incompleteness even with a page header. For this setup, + You will need to use nested EuiPageContent components + in order for the centering to work. +

+ ), + demo: ( + + ), + fullScreen: { + slug: 'simple-centered-content', + demo: ( + + ), + }, + }, + { + title: 'A simple page layout with custom content', + source: [ + { + type: GuideSectionTypes.JS, + code: PageCustomContentTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageCustomContentSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ You can replace the inner parts of EuiPageBody with + your own content, with or without a page header. This allows you to + create dashboard style layouts with lots of panels. It is not + recommended, however, to use this setup when you also have side bar. +

+ + This layout can be achieved in EuiPageTemplate{' '} + by setting {'template="empty"'}. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'simple-custom-content', + demo: ( + + ), + }, + }, + { + title: 'Legacy layout', + source: [ + { + type: GuideSectionTypes.JS, + code: PageLegacySource, + }, + ], + text: ( +

+ In previous versions of EUI, we emulated page layouts where the{' '} + EuiPageContent had margins all around created by + padding on EuiPage. This layout is still achievable + but not through EuiPageTemplate. You must use the{' '} + EuiPage components manually as seen in this example. +

+ ), + demo: ( +
+ +
+ ), + props: { + EuiPage, + EuiPageBody, + EuiPageSideBar, + EuiPageHeader, + EuiPageContent, + EuiPageContentBody, + }, + }, + ], +}; diff --git a/src-docs/src/views/page_header/page_header_example.js b/src-docs/src/views/page_header/page_header_example.js index bdd87823076..a7dc623f22a 100644 --- a/src-docs/src/views/page_header/page_header_example.js +++ b/src-docs/src/views/page_header/page_header_example.js @@ -30,7 +30,7 @@ export const PageHeaderExample = {

While the EuiPageHeader component can be placed anywhere within your page layout, we recommend using it within the{' '} - + EuiPageTemplate {' '} component by passing the configuration props as its{' '} diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js index 44a0b4be20a..1d4b2b5ec1c 100644 --- a/src-docs/src/views/panel/panel_example.js +++ b/src-docs/src/views/panel/panel_example.js @@ -88,13 +88,13 @@ export const PanelExample = { EuiPanel is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like{' '} - + EuiPage ,{' '} EuiPopover - + {' '} and{' '} EuiCard diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index b1301294ed1..48dda387863 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -8,18 +8,12 @@ import { EuiSelectable, EuiSelectableMessage, EuiText, - EuiSpacer, - EuiSelectableTemplateSitewide, - EuiCodeBlock, - EuiAccordion, } from '../../../../src/components'; import { EuiSelectableOptionProps, EuiSelectableOptionsList, EuiSelectableSearchProps, - Options, - MetaData, } from './props'; import Selectable from './selectable'; @@ -43,10 +37,7 @@ const selectableMessagesSource = require('!!raw-loader!./selectable_messages'); import SelectableCustomRender from './selectable_custom_render'; const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_render'); -import SearchOption from './sitewide_option'; -import Search from './search'; import { EuiCallOut } from '../../../../src/components/call_out'; -const searchSource = require('!!raw-loader!./search'); export const SelectableExample = { title: 'Selectable', @@ -407,148 +398,5 @@ export const SelectableExample = { )} `, }, - { - title: 'Sitewide search template', - source: [ - { - type: GuideSectionTypes.JS, - code: searchSource, - }, - ], - text: ( - -

- EuiSelectableTemplateSitewide is an opinionated - wrapper around EuiSelectable to provide a reusable - template across the Elastic products that will share the same global - search capabilities. It creates the search input that triggers a - popover containing the list of options. -

-

Search input

-

- The search ability of EuiSelectable is still hooked up to the - options provided. It will highlight the portion of the label that - matches the search string. -

- -

Popover

-

- The popover itself allows you to display a{' '} - popoverTitle node,{' '} - popoverFooter node, or pass any of the{' '} - popoverProps to the{' '} - - EuiPopover - {' '} - component. -

-

Options

-

- The options are the most opinionated portion of - the template. Their display is determined by the props passed in and - extends the normal EuiSelectable.option type. All - parts are optional with the exception of the label (B). -

- - - - Code snippet} - > - - - {`const options: EuiSelectableTemplateSitewideOption[] = [ - { - label: 'Label', - icon: { - type: 'logoKibana' - } - avatar: { - name: 'Default', - }, - meta: [ - { - text: 'Meta', - type: 'application', - }, - { - text: 'Deployment', - type: 'deployment', - }, - { - text: 'Default display', - }, - ], - } -]`} - - - -
    -
  • - label (required): The name of the item itself. - By default, the search box will only use this to match the search - term against, but you can supply a separate{' '} - searchableLabel that combines the label and - meta data to search on. -
    • -
  • - icon: Only display the solution or - application's logo when the option links to the application - itself (Dashboard app) and not lower-level items such as - individual dashboards. Size and color are predetermined but can be - overridden. -
    • -
  • - avatar: Represents the Kibana Space that the - item is located in, if multiple spaces are - present. Type and size are predetermined but can be overridden. -
    • -
  • - meta: This bottom line should only contain - items if the option is a lower-level item (individual dashboard). - The display of which defaults to simple text, but if you pass one - of the predetermined types, they will be styled - according to the design pattern. -
    • -
- -

Selection

-

- The options themselves are simply rendered as list items with no - interactive behavior like buttons or links. You must handle the - interaction when the component passes back the altered array of - options with the selected option having{' '} - {"checked: 'on'"}. -

-

Popover toggle and responsiveness

-

- The default display is to render the search input inline which - triggers a popover with the results. Or you can decide to trigger - the whole selectable component from a single button. By passing your - own button to popoverButton, the component will - use this to trigger the popover, putting the search inside. -

-

- This is a great way to handle reducing the size of the component for - smaller screens. The component offers a helper prop called{' '} - popoverButtonBreakpoints which will only render - the popoverButton if the window size matches - named breakpoint(s). -

- - ), - props: { EuiSelectableTemplateSitewide, Options, MetaData }, - demo: , - }, ], }; diff --git a/src-docs/src/views/selectable/selectable_sitewide_template_example.js b/src-docs/src/views/selectable/selectable_sitewide_template_example.js new file mode 100644 index 00000000000..b1d12406dc6 --- /dev/null +++ b/src-docs/src/views/selectable/selectable_sitewide_template_example.js @@ -0,0 +1,182 @@ +import React, { Fragment } from 'react'; +import { Link } from 'react-router-dom'; + +import { GuideSectionTypes } from '../../components'; + +import { + EuiCode, + EuiSpacer, + EuiSelectableTemplateSitewide, + EuiCodeBlock, + EuiAccordion, + EuiCallOut, +} from '../../../../src/components'; + +import { Options, MetaData } from './props'; + +import SearchOption from './sitewide_option'; +import Search from './search'; +const searchSource = require('!!raw-loader!./search'); + +export const SitewideSearchExample = { + title: 'Sitewide search', + description: ( +

+ EuiSelectableTemplateSitewide is an opinionated wrapper + around{' '} + + EuiSelectable + {' '} + to provide a reusable template across the Elastic products that will share + the same global search capabilities. It creates the search input that + triggers a popover containing the list of options. +

+ ), + sections: [ + { + title: 'Basic setup', + source: [ + { + type: GuideSectionTypes.JS, + code: searchSource, + }, + ], + text: ( + +

Search input

+

+ The search ability of{' '} + + EuiSelectable + {' '} + is still hooked up to the options provided. It will highlight the + portion of the label that matches the search string. +

+ +

Popover

+

+ The popover itself allows you to display a{' '} + popoverTitle node,{' '} + popoverFooter node, or pass any of the{' '} + popoverProps to the{' '} + + EuiPopover + {' '} + component. +

+

Selection

+

+ The options themselves are simply rendered as list items with no + interactive behavior like buttons or links. You must handle the + interaction when the component passes back the altered array of + options with the selected option having{' '} + {"checked: 'on'"}. +

+

Popover toggle and responsiveness

+

+ The default display is to render the search input inline which + triggers a popover with the results. Or you can decide to trigger + the whole selectable component from a single button. By passing your + own button to popoverButton, the component will + use this to trigger the popover, putting the search inside. +

+

+ This is a great way to handle reducing the size of the component for + smaller screens. The component offers a helper prop called{' '} + popoverButtonBreakpoints which will only render + the popoverButton if the window size matches + named breakpoint(s). +

+ + ), + props: { EuiSelectableTemplateSitewide, Options, MetaData }, + demo: , + }, + { + title: 'Options', + text: ( + <> +

+ The options are the most opinionated portion of + the template. Their display is determined by the props passed in and + extends the normal EuiSelectable.option type. All + parts are optional with the exception of the label (A). +

+ + + + Code snippet} + > + + + {`const options: EuiSelectableTemplateSitewideOption[] = [ + { + label: 'Label', + icon: { + type: 'logoKibana' + } + avatar: { + name: 'Default', + }, + meta: [ + { + text: 'Meta', + type: 'application', + }, + { + text: 'Deployment', + type: 'deployment', + }, + { + text: 'Default display', + }, + ], + } +]`} + + + +
    +
  • + label (required): The name of the item itself. + By default, the search box will only use this to match the search + term against, but you can supply a separate{' '} + searchableLabel that combines the label and + meta data to search on. +
    • +
  • + icon: Only display the solution or + application's logo when the option links to the application + itself (Dashboard app) and not lower-level items such as + individual dashboards. Size and color are predetermined but can be + overridden. +
    • +
  • + avatar: Represents the Kibana Space that the + item is located in, if multiple spaces are + present. Type and size are predetermined but can be overridden. +
    • +
  • + meta: This bottom line should only contain + items if the option is a lower-level item (individual dashboard). + The display of which defaults to simple text, but if you pass one + of the predetermined types, they will be styled + according to the design pattern. +
    • +
+ + + ), + }, + ], +}; diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js index 567cb907608..4bc6d0ff39e 100644 --- a/src-docs/src/views/tabs/tabs_example.js +++ b/src-docs/src/views/tabs/tabs_example.js @@ -96,7 +96,7 @@ export const TabsExample = { size is best for when placing inside popovers or other small containers. Reserve using the large size for when using as primary page navigation, like inside of{' '} - + EuiPageHeader . From 7d50eb0d9fb7a5607de420abf208d97a243e242d Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 29 Mar 2022 15:52:43 -0400 Subject: [PATCH 02/19] Clean up --- src-docs/src/routes.js | 3 -- src-docs/src/views/page/page_example.js | 38 ------------------- .../src/views/page/page_template_example.js | 5 +-- src-docs/src/views/panel/panel_example.js | 2 +- 4 files changed, 3 insertions(+), 45 deletions(-) delete mode 100644 src-docs/src/views/page/page_example.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 8b2757fe280..15838c1ae02 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -169,8 +169,6 @@ import { OutsideClickDetectorExample } from './views/outside_click_detector/outs import { OverlayMaskExample } from './views/overlay_mask/overlay_mask_example'; -import { PageExample } from './views/page/page_example'; - import { PageHeaderExample } from './views/page_header/page_header_example'; import { PaginationExample } from './views/pagination/pagination_example'; @@ -463,7 +461,6 @@ const navigation = [ HeaderExample, HorizontalRuleExample, ModalExample, - PageExample, PageHeaderExample, PanelExample, PopoverExample, diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js deleted file mode 100644 index 07e2d0c20dd..00000000000 --- a/src-docs/src/views/page/page_example.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import { EuiText, EuiSpacer, EuiCallOut } from '../../../../src/components'; - -export const PageExample = { - title: 'Page components', - intro: ( - <> - -

- Page layouts are modular and fit together in a precise manner, though - certain parts can also be added or removed as needed. EUI provides - both the individual page components and an{' '} - over-arching template for - easily creating some pre-defined layouts. -

- - - -

- If you're looking for full page layout examples, we recommend - using the EuiPageTemplate{' '} - and use this page to modify the props of each part of the template. -

- - - ), - sections: [ - { - title: 'To do', - text:

TO DO

, - }, - ], -}; diff --git a/src-docs/src/views/page/page_template_example.js b/src-docs/src/views/page/page_template_example.js index 32c14415bc5..4233f1ec098 100644 --- a/src-docs/src/views/page/page_template_example.js +++ b/src-docs/src/views/page/page_template_example.js @@ -82,9 +82,8 @@ export const PageTemplateExample = {

Page layouts are modular and fit together in a precise manner, though certain parts can also be added or removed as needed. EUI provides - both the{' '} - individual page components{' '} - and an over-arching template for easily creating some + both the individual page components and an + over-arching template for easily creating some pre-defined layouts.

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js index 9fcf6a82099..aa8724cb5bd 100644 --- a/src-docs/src/views/panel/panel_example.js +++ b/src-docs/src/views/panel/panel_example.js @@ -88,7 +88,7 @@ export const PanelExample = { EuiPanel is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like{' '} - + EuiPage ,{' '} From ab78a2a14fcb6ce3d531f5b80c9dee6aa125f299 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 29 Mar 2022 15:57:09 -0400 Subject: [PATCH 03/19] `fullscreen` --- src-docs/src/views/page/page_template_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/page/page_template_example.js b/src-docs/src/views/page/page_template_example.js index 4233f1ec098..dab6311210e 100644 --- a/src-docs/src/views/page/page_template_example.js +++ b/src-docs/src/views/page/page_template_example.js @@ -94,8 +94,8 @@ export const PageTemplateExample = { >

You'll find the code for each in their own tab and if you go to - full screen, you can see how they would behave in a typical - application layout. + fullscreen, you can see how they would behave in a typical application + layout.

From 356df991134aca2eff7bc2a48df5e81170a8b898 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 29 Mar 2022 15:58:10 -0400 Subject: [PATCH 04/19] one last link --- src-docs/src/views/home/home_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index b2eaaf86826..b4018422aac 100644 --- a/src-docs/src/views/home/home_view.js +++ b/src-docs/src/views/home/home_view.js @@ -186,7 +186,7 @@ export const HomeView = () => ( Date: Wed, 6 Apr 2022 17:32:57 -0400 Subject: [PATCH 05/19] [Page Templates Feature] EuiPage docs & toggles (#5662) * Added `exampleToggles` to GuideSectionExample for easily passing through custom controls --- .../guide_section/guide_section.tsx | 11 +- .../guide_section_example.tsx | 13 +++ src-docs/src/routes.js | 3 + src-docs/src/views/page/_page.scss | 7 +- src-docs/src/views/page/components/page.tsx | 27 +++++ .../src/views/page/components/page_demo.tsx | 100 ++++++++++++++++++ .../src/views/page/components/playground.js | 43 ++++++++ src-docs/src/views/page/page_example.js | 56 ++++++++++ 8 files changed, 256 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/page/components/page.tsx create mode 100644 src-docs/src/views/page/components/page_demo.tsx create mode 100644 src-docs/src/views/page/components/playground.js create mode 100644 src-docs/src/views/page/page_example.js diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx index 9e405b42fb5..1a9ad04f9f4 100644 --- a/src-docs/src/components/guide_section/guide_section.tsx +++ b/src-docs/src/components/guide_section/guide_section.tsx @@ -21,7 +21,11 @@ import { GuideSectionExampleTabsProps, } from './guide_section_parts/guide_section_tabs'; -export interface GuideSection { +export interface GuideSection + extends Pick< + GuideSectionExample, + 'exampleToggles' | 'demoPanelProps' | 'ghostBackground' + > { id?: string; title?: string; text?: ReactNode; @@ -31,10 +35,8 @@ export interface GuideSection { slug: string; demo: ReactNode; }; - demoPanelProps?: GuideSectionExample['demoPanelProps']; props?: object; playground?: any; - ghostBackground?: boolean; wrapText?: boolean; snippet?: string | string[]; } @@ -78,6 +80,7 @@ export const GuideSection: FunctionComponent = ({ ghostBackground, wrapText = true, demoPanelProps, + exampleToggles, snippet, }) => { const { path } = useRouteMatch(); @@ -191,6 +194,7 @@ export const GuideSection: FunctionComponent = ({ {renderPlayground()} )} + {(demo || fullScreen) && ( <> @@ -216,6 +220,7 @@ export const GuideSection: FunctionComponent = ({ tabs={renderTabs()} ghostBackground={ghostBackground} demoPanelProps={demoPanelProps} + exampleToggles={exampleToggles} /> )} diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx index 1a1497e8433..a61b8847c2b 100644 --- a/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx +++ b/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx @@ -2,6 +2,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; import { EuiSplitPanel } from '../../../../../src/components/panel'; import { _EuiSplitPanelInnerProps } from '../../../../../src/components/panel/split_panel/'; +import { EuiHorizontalRule } from '../../../../../src'; export interface GuideSectionExample { example: ReactNode; @@ -10,6 +11,8 @@ export interface GuideSectionExample { tabContent?: ReactNode; ghostBackground?: boolean; demoPanelProps?: _EuiSplitPanelInnerProps; + /** Creates another inner split panel containing an array of custom controls */ + exampleToggles?: any; } export const GuideSectionExample: FunctionComponent = ({ @@ -18,6 +21,7 @@ export const GuideSectionExample: FunctionComponent = ({ ghostBackground = false, tabContent, demoPanelProps, + exampleToggles, }) => { const classes = classNames(demoPanelProps?.className, { guideDemo__ghostBackground: ghostBackground, @@ -32,6 +36,15 @@ export const GuideSectionExample: FunctionComponent = ({ > {example} + {exampleToggles && ( + <> + + + {exampleToggles} + + + )} + {exampleToggles && tabs && } {(tabs || tabContent) && ( {tabs} diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 15838c1ae02..8b2757fe280 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -169,6 +169,8 @@ import { OutsideClickDetectorExample } from './views/outside_click_detector/outs import { OverlayMaskExample } from './views/overlay_mask/overlay_mask_example'; +import { PageExample } from './views/page/page_example'; + import { PageHeaderExample } from './views/page_header/page_header_example'; import { PaginationExample } from './views/pagination/pagination_example'; @@ -461,6 +463,7 @@ const navigation = [ HeaderExample, HorizontalRuleExample, ModalExample, + PageExample, PageHeaderExample, PanelExample, PopoverExample, diff --git a/src-docs/src/views/page/_page.scss b/src-docs/src/views/page/_page.scss index 0cfd0a0cdb6..9be3acdfe60 100644 --- a/src-docs/src/views/page/_page.scss +++ b/src-docs/src/views/page/_page.scss @@ -2,16 +2,21 @@ .guideDemo__highlightLayout, .guideDemo__highlightLayout--playground, .guideDemo__highlightLayout--legacy { - border: 1px solid $guideDemoHighlightColor; overflow: hidden; height: 460px; display: flex; + flex-direction: column; .euiPageSideBar--sticky { top: 0; } } +.guideDemo__highlightLayout--playground, +.guideDemo__highlightLayout--legacy { + border: 1px solid $guideDemoHighlightColor; +} + .guideDemo__highlightLayout--legacy { > div, > div > div { diff --git a/src-docs/src/views/page/components/page.tsx b/src-docs/src/views/page/components/page.tsx new file mode 100644 index 00000000000..85c2eda72ba --- /dev/null +++ b/src-docs/src/views/page/components/page.tsx @@ -0,0 +1,27 @@ +import React, { ReactElement } from 'react'; + +import { + EuiPage, + EuiPageProps, + EuiPageContent, + EuiPageSideBar, + EuiPageBody, +} from '../../../../../src'; + +export default ({ + content = <>, + sideBar = <>, + ...rest +}: EuiPageProps & { + content: ReactElement; + sideBar: ReactElement; +}) => ( + + {sideBar} + + + {content} + + + +); diff --git a/src-docs/src/views/page/components/page_demo.tsx b/src-docs/src/views/page/components/page_demo.tsx new file mode 100644 index 00000000000..539c5ee442d --- /dev/null +++ b/src-docs/src/views/page/components/page_demo.tsx @@ -0,0 +1,100 @@ +import React, { useState, FunctionComponent } from 'react'; +import classNames from 'classnames'; + +import { + EuiImage, + EuiSwitch, + EuiFlexGroup, + EuiFlexItem, + EuiPageProps, + EuiPage, +} from '../../../../../src'; + +import contentSvg from '../../../images/content.svg'; +import sideNavSvg from '../../../images/side_nav.svg'; + +import Page from './page'; +import { GuideSection } from '../../../components/guide_section/guide_section'; +import { GuideSectionTypes } from '../../../components/guide_section/guide_section_types'; + +const PageSource = require('!!raw-loader!./page'); +// @ts-ignore Importing from JS +import { pageConfig } from './playground'; + +export const PageComponentDemo: FunctionComponent = () => { + const [horizontal, setHorizontal] = useState(true); + const [restrictWidth, setRestrictWidth] = useState< + EuiPageProps['restrictWidth'] + >(false); + const [grow, setGrow] = useState(true); + + const content = ( + + ); + + const sideBar = ( + + ); + + return ( + <> + + + + } + source={[ + { + type: GuideSectionTypes.JS, + code: PageSource, + }, + ]} + props={{ + EuiPage, + }} + playground={pageConfig} + exampleToggles={ + + + setGrow((g) => !g)} + compressed + /> + + + setHorizontal((s) => !s)} + compressed + /> + + + + setRestrictWidth(e.target.checked ? '75%' : false) + } + compressed + /> + + + } + /> + + ); +}; diff --git a/src-docs/src/views/page/components/playground.js b/src-docs/src/views/page/components/playground.js new file mode 100644 index 00000000000..041ff044238 --- /dev/null +++ b/src-docs/src/views/page/components/playground.js @@ -0,0 +1,43 @@ +import { PropTypes } from 'react-view'; +import { EuiPage } from '../../../../../src'; +import { propUtilityForPlayground } from '../../../services/playground'; + +export const pageConfig = () => { + const docgenInfo = Array.isArray(EuiPage.__docgenInfo) + ? EuiPage.__docgenInfo[0] + : EuiPage.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.children = { + ...propsToUse.children, + value: 'Children', + type: PropTypes.ReactNode, + hidden: false, + }; + + propsToUse.direction = { + ...propsToUse.direction, + value: 'row', + }; + + propsToUse.restrictWidth = { + ...propsToUse.restrictWidth, + type: PropTypes.String, + }; + + return { + config: { + componentName: 'EuiPage', + props: propsToUse, + scope: { + EuiPage, + }, + imports: { + '@elastic/eui': { + named: ['EuiPage'], + }, + }, + }, + playgroundClassName: 'guideDemo__highlightLayout--playground', + }; +}; diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js new file mode 100644 index 00000000000..440c91e977f --- /dev/null +++ b/src-docs/src/views/page/page_example.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { EuiText, EuiSpacer, EuiCallOut, EuiCode } from '../../../../src'; + +import { PageComponentDemo } from './components/page_demo'; + +export const PageExample = { + title: 'Page components', + intro: ( + <> + +

+ Page layouts are modular and fit together in a precise manner, though + certain parts can also be added or removed as needed. EUI provides + both the individual page components and an{' '} + over-arching template for + easily creating some pre-defined layouts. +

+ + + +

+ If you're looking for full page layout examples, we recommend + using the EuiPageTemplate{' '} + and use this page to modify the props of each part of the template. +

+ + + ), + sections: [ + { + title: 'Page', + wrapText: false, + text: ( + <> + +

+ EuiPage is simply a flex wrapper that will + automatically grow to fill the height of a flex + container. You can also control the flex{' '} + direction and the maximum width using + restrictWidth which centers the page when it + reaches the provided value (or 1200px if set to{' '} + true). +

+ + + + ), + }, + ], +}; From 229fc993b50d7eb02d07968dbf3313097a383fcb Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Wed, 20 Apr 2022 00:46:58 -0400 Subject: [PATCH 06/19] [Page Templates Feature] Added EuiPageSection and updated EuiPage & EuiPageBody padding defaults (#5769) * Removed nested page header styles when within EuiPageBody (improved way of doing this coming later) * [NEW] EuiPageSection to replace EuiPageContent & EuiPageContentBody * Added `exampleToggles` to GuideSectionExample for easily passing through custom controls * Added `euiPaddingStyles` and `euiBackgroundColorStyles` global styling functions * Added deprecation comments to EuiPageContent and EuiPageContentBody --- .../src/components/guide_page/guide_page.js | 72 +++--- .../guide_tabbed_page/guide_tabbed_page.tsx | 43 ++-- src-docs/src/views/app_view.js | 4 +- src-docs/src/views/home/home_view.js | 116 +++++----- src-docs/src/views/page/components/page.tsx | 14 +- .../page/components/page_configurations.tsx | 59 +++++ .../components/page_configurations_demo.tsx | 97 ++++++++ .../src/views/page/components/page_demo.tsx | 133 ++++++----- .../views/page/components/page_section.tsx | 44 ++++ .../page/components/page_section_demo.tsx | 95 ++++++++ .../src/views/page/components/playground.js | 43 +++- src-docs/src/views/page/page_example.js | 208 +++++++++++++++++- .../page/__snapshots__/page.test.tsx.snap | 12 +- src/components/page/_bottom_border.ts | 15 ++ src/components/page/_restrict_width.ts | 3 + src/components/page/index.ts | 3 + src/components/page/page.tsx | 2 +- src/components/page/page_body/_page_body.scss | 27 --- .../page/page_content/page_content.tsx | 4 + .../page/page_content/page_content_body.tsx | 4 + .../__snapshots__/page_section.test.tsx.snap | 205 +++++++++++++++++ src/components/page/page_section/index.ts | 10 + .../page/page_section/page_section.styles.ts | 61 +++++ .../page/page_section/page_section.test.tsx | 89 ++++++++ .../page/page_section/page_section.tsx | 102 +++++++++ src/global_styling/mixins/_color.ts | 58 +++++ src/global_styling/mixins/_padding.ts | 28 +++ src/global_styling/mixins/index.ts | 2 + upcoming_changelogs/5769.md | 11 + 29 files changed, 1331 insertions(+), 233 deletions(-) create mode 100644 src-docs/src/views/page/components/page_configurations.tsx create mode 100644 src-docs/src/views/page/components/page_configurations_demo.tsx create mode 100644 src-docs/src/views/page/components/page_section.tsx create mode 100644 src-docs/src/views/page/components/page_section_demo.tsx create mode 100644 src/components/page/_bottom_border.ts create mode 100644 src/components/page/page_section/__snapshots__/page_section.test.tsx.snap create mode 100644 src/components/page/page_section/index.ts create mode 100644 src/components/page/page_section/page_section.styles.ts create mode 100644 src/components/page/page_section/page_section.test.tsx create mode 100644 src/components/page/page_section/page_section.tsx create mode 100644 src/global_styling/mixins/_color.ts create mode 100644 src/global_styling/mixins/_padding.ts create mode 100644 upcoming_changelogs/5769.md diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js index e4733b6c43e..9f8a5759585 100644 --- a/src-docs/src/components/guide_page/guide_page.js +++ b/src-docs/src/components/guide_page/guide_page.js @@ -4,8 +4,7 @@ import { Switch, Route, withRouter } from 'react-router-dom'; import { EuiBetaBadge, EuiPageHeader, - EuiPageContent, - EuiPageContentBody, + EuiPageSection, EuiSpacer, } from '../../../../src/components'; @@ -90,9 +89,14 @@ const GuidePageComponent = ({ if (notice) { return ( <> - + {notice} - + ); @@ -107,40 +111,34 @@ const GuidePageComponent = ({ return ( <> {renderNotice()} - - {title} {betaBadge} - - } - tabs={renderTabs() || _tabs} - description={description} - rightSideItems={rightSideItems} - > - {intro} - + + + {title} {betaBadge} + + } + tabs={renderTabs() || _tabs} + description={description} + rightSideItems={rightSideItems} + role="none" + > + {intro} + + - - - - {playground && ( - {playground} - )} - {guidelines && ( - {guidelines} - )} - {children} - - - + + + {playground && ( + {playground} + )} + {guidelines && ( + {guidelines} + )} + {children} + + ); }; diff --git a/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx b/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx index 409424b0fe2..68c0ab1fa1c 100644 --- a/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx +++ b/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx @@ -3,10 +3,10 @@ import { Switch, Route, withRouter, Redirect } from 'react-router-dom'; import { slugify } from '../../../../src/services/string/slugify'; import { EuiPageHeader, - EuiPageContent, EuiPageContentBody, EuiSpacer, EuiBetaBadge, + EuiPageSection, } from '../../../../src/components'; import { LanguageSelector, ThemeContext } from '../with_theme'; @@ -125,30 +125,23 @@ const GuideTabbedPageComponent: FunctionComponent = ({ return ( <> {renderNotice()} - - {title} {betaBadge} - - } - tabs={renderTabs()} - description={description} - rightSideItems={rightSideItems} - /> - - - - {pagesRoutes} - - + + + {title} {betaBadge} + + } + tabs={renderTabs()} + description={description} + rightSideItems={rightSideItems} + role="none" + /> + + + + {pagesRoutes} + ); }; diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 07c08091325..7fa7daccccb 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -79,7 +79,9 @@ export const AppView = ({ children, currentRoute }) => { /> - {children({ theme })} + + {children({ theme })} + ); diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index b4018422aac..4fb4bbcf8e4 100644 --- a/src-docs/src/views/home/home_view.js +++ b/src-docs/src/views/home/home_view.js @@ -18,71 +18,63 @@ import { EuiSpacer, EuiText, EuiTitle, - EuiPanel, EuiIcon, EuiFlexGrid, - EuiPageContent, - EuiPageContentBody, -} from '../../../../src/components'; + EuiPageSection, +} from '../../../../src'; import { HomeFooterElasticLogo } from './home_footer_elastic_logo'; export const HomeView = () => ( - - - - - - -

Elastic UI

- - - - -

The framework powering the Elastic Stack

- - - -

- The Elastic UI framework (EUI) is a design library in use at - Elastic to build internal products that need to share our - aesthetics. It distributes UI React components and static assets - for use in building web layouts. -

- - - - Getting started - - - - - What's new - - - - - Contributing - - - - - - - - - - - + <> + + + + +

Elastic UI

+ + + + +

The framework powering the Elastic Stack

+ + + +

+ The Elastic UI framework (EUI) is a design library in use at + Elastic to build internal products that need to share our + aesthetics. It distributes UI React components and static assets + for use in building web layouts. +

+ + + + Getting started + + + + + What's new + + + + + Contributing + + + + + + + + + + + + (

- - + + ); diff --git a/src-docs/src/views/page/components/page.tsx b/src-docs/src/views/page/components/page.tsx index 85c2eda72ba..909c082bb84 100644 --- a/src-docs/src/views/page/components/page.tsx +++ b/src-docs/src/views/page/components/page.tsx @@ -3,25 +3,23 @@ import React, { ReactElement } from 'react'; import { EuiPage, EuiPageProps, - EuiPageContent, + EuiPageSection, EuiPageSideBar, EuiPageBody, } from '../../../../../src'; export default ({ content = <>, - sideBar = <>, + sideBar, ...rest }: EuiPageProps & { content: ReactElement; - sideBar: ReactElement; + sideBar?: ReactElement; }) => ( - {sideBar} - - - {content} - + {sideBar && {sideBar}} + + {content} ); diff --git a/src-docs/src/views/page/components/page_configurations.tsx b/src-docs/src/views/page/components/page_configurations.tsx new file mode 100644 index 00000000000..226b3fb0a98 --- /dev/null +++ b/src-docs/src/views/page/components/page_configurations.tsx @@ -0,0 +1,59 @@ +import React, { ReactElement } from 'react'; +import { _EuiPageRestrictWidth } from '../../../../../src/components/page/_restrict_width'; + +import { + EuiPage, + EuiPageSideBar, + EuiPageBody, + EuiEmptyPrompt, + EuiPageHeader, + EuiPageSection, +} from '../../../../../src'; + +export default ({ + content = <>, + sideBar, + pageHeader, + emptyPrompt, +}: _EuiPageRestrictWidth & { + content: ReactElement; + sideBar?: ReactElement; + pageHeader?: boolean; + emptyPrompt?: boolean; +}) => { + return ( + + {sideBar && ( + + {sideBar} + + )} + + + {pageHeader && ( + + + + )} + + {emptyPrompt ? ( + + No spice} + body={content} + color={pageHeader || sideBar ? 'subdued' : 'plain'} + /> + + ) : ( + + {content} + + )} + + + ); +}; diff --git a/src-docs/src/views/page/components/page_configurations_demo.tsx b/src-docs/src/views/page/components/page_configurations_demo.tsx new file mode 100644 index 00000000000..605a95c7bd7 --- /dev/null +++ b/src-docs/src/views/page/components/page_configurations_demo.tsx @@ -0,0 +1,97 @@ +import React, { useState, FunctionComponent } from 'react'; +import classNames from 'classnames'; + +import { + EuiImage, + EuiSwitch, + EuiFlexGroup, + EuiFlexItem, + EuiPageSideBar, +} from '../../../../../src'; + +import contentSvg from '../../../images/content.svg'; +import sideNavSvg from '../../../images/side_nav.svg'; +import contentCenterSvg from '../../../images/content_center.svg'; + +import PageConfigurations from './page_configurations'; +import { GuideSection } from '../../../components/guide_section/guide_section'; +import { GuideSectionTypes } from '../../../components/guide_section/guide_section_types'; + +const PageConfigurationsSource = require('!!raw-loader!./page_configurations'); +// @ts-ignore Importing from JS +// import { pageConfig } from './playground'; + +export const PageConfigurationsDemo: FunctionComponent = () => { + const [showSideBar, setShowSideBar] = useState(true); + const [showPageHeader, setShowPageHeader] = useState(true); + const [centeredContent, setCenteredContent] = useState(false); + + const content = ( + + ); + + const sideBar = showSideBar ? ( + + ) : undefined; + + return ( + + + + } + source={[ + { + type: GuideSectionTypes.JS, + code: PageConfigurationsSource, + }, + ]} + props={{ + EuiPageSideBar, + }} + // playground={pageConfig} + exampleToggles={ + + + setShowSideBar((s) => !s)} + compressed + /> + + + setShowPageHeader((c) => !c)} + compressed + /> + + + setCenteredContent((c) => !c)} + compressed + /> + + + } + /> + ); +}; diff --git a/src-docs/src/views/page/components/page_demo.tsx b/src-docs/src/views/page/components/page_demo.tsx index 539c5ee442d..9d3826c06c3 100644 --- a/src-docs/src/views/page/components/page_demo.tsx +++ b/src-docs/src/views/page/components/page_demo.tsx @@ -8,6 +8,8 @@ import { EuiFlexItem, EuiPageProps, EuiPage, + EuiPageBody, + EuiPageSideBar, } from '../../../../../src'; import contentSvg from '../../../images/content.svg'; @@ -22,6 +24,7 @@ const PageSource = require('!!raw-loader!./page'); import { pageConfig } from './playground'; export const PageComponentDemo: FunctionComponent = () => { + const [showSideBar, setShowSideBar] = useState(true); const [horizontal, setHorizontal] = useState(true); const [restrictWidth, setRestrictWidth] = useState< EuiPageProps['restrictWidth'] @@ -32,69 +35,77 @@ export const PageComponentDemo: FunctionComponent = () => { ); - const sideBar = ( - - ); + const sideBar = showSideBar ? ( + + ) : undefined; return ( - <> - - + + + } + source={[ + { + type: GuideSectionTypes.JS, + code: PageSource, + }, + ]} + props={{ + EuiPage, + EuiPageBody, + EuiPageSideBar, + }} + playground={pageConfig} + exampleToggles={ + + + setShowSideBar((s) => !s)} + compressed + /> + + + setGrow((g) => !g)} + compressed + /> + + + setHorizontal((s) => !s)} + compressed + /> + + + + setRestrictWidth(e.target.checked ? '75%' : false) + } + compressed /> - - } - source={[ - { - type: GuideSectionTypes.JS, - code: PageSource, - }, - ]} - props={{ - EuiPage, - }} - playground={pageConfig} - exampleToggles={ - - - setGrow((g) => !g)} - compressed - /> - - - setHorizontal((s) => !s)} - compressed - /> - - - - setRestrictWidth(e.target.checked ? '75%' : false) - } - compressed - /> - - - } - /> - + + + } + /> ); }; diff --git a/src-docs/src/views/page/components/page_section.tsx b/src-docs/src/views/page/components/page_section.tsx new file mode 100644 index 00000000000..768cd6cd24f --- /dev/null +++ b/src-docs/src/views/page/components/page_section.tsx @@ -0,0 +1,44 @@ +import React, { ReactElement } from 'react'; + +import { EuiPageHeader, EuiPageSection } from '../../../../../src/components'; + +export default ({ + content = <>, + extendedBorder, + restrictWidth, + centeredContent, +}: { + content: ReactElement; + extendedBorder?: boolean; + restrictWidth?: boolean; + centeredContent?: boolean; +}) => { + const width = restrictWidth ? '75%' : false; + const bottomBorder = extendedBorder ? 'extended' : true; + + return ( + <> + + + + + Secondary content + + + {content} + + + ); +}; diff --git a/src-docs/src/views/page/components/page_section_demo.tsx b/src-docs/src/views/page/components/page_section_demo.tsx new file mode 100644 index 00000000000..189bdc2bfec --- /dev/null +++ b/src-docs/src/views/page/components/page_section_demo.tsx @@ -0,0 +1,95 @@ +import React, { useState, FunctionComponent } from 'react'; +import classNames from 'classnames'; + +import { + EuiImage, + EuiSwitch, + EuiFlexGroup, + EuiFlexItem, + EuiPageSection, +} from '../../../../../src'; + +import contentSvg from '../../../images/content.svg'; +import contentCenterSvg from '../../../images/content_center.svg'; + +import { GuideSection } from '../../../components/guide_section/guide_section'; +import { GuideSectionTypes } from '../../../components/guide_section/guide_section_types'; + +import PageSection from './page_section'; +const PageSectionSource = require('!!raw-loader!./page_section'); +// @ts-ignore Importing from JS +import { pageSectionConfig } from './playground'; + +export const PageSectionDemo: FunctionComponent = () => { + const [restrictWidth, setRestrictWidth] = useState(false); + const [centeredContent, setCenteredContent] = useState(false); + const [extendedBorder, setExtendedBorder] = useState(true); + + const content = ( + + ); + + return ( + <> + + + + } + source={[ + { + type: GuideSectionTypes.JS, + code: PageSectionSource, + }, + ]} + props={{ + EuiPageSection, + }} + playground={pageSectionConfig} + exampleToggles={ + + + setExtendedBorder((e) => !e)} + compressed + /> + + + setCenteredContent((e) => !e)} + compressed + /> + + + setRestrictWidth((r) => !r)} + compressed + /> + + + } + /> + + ); +}; diff --git a/src-docs/src/views/page/components/playground.js b/src-docs/src/views/page/components/playground.js index 041ff044238..3fdf1ff5cc1 100644 --- a/src-docs/src/views/page/components/playground.js +++ b/src-docs/src/views/page/components/playground.js @@ -1,5 +1,5 @@ import { PropTypes } from 'react-view'; -import { EuiPage } from '../../../../../src'; +import { EuiPage, EuiPageSection } from '../../../../../src'; import { propUtilityForPlayground } from '../../../services/playground'; export const pageConfig = () => { @@ -41,3 +41,44 @@ export const pageConfig = () => { playgroundClassName: 'guideDemo__highlightLayout--playground', }; }; + +export const pageSectionConfig = () => { + const docgenInfo = Array.isArray(EuiPageSection.__docgenInfo) + ? EuiPageSection.__docgenInfo[0] + : EuiPageSection.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.children = { + ...propsToUse.children, + value: 'Children', + type: PropTypes.ReactNode, + hidden: false, + }; + + propsToUse.restrictWidth = { + ...propsToUse.restrictWidth, + type: PropTypes.String, + }; + + // TODO Can we create a cust enum that can also evaluate true/false values as booleans? + propsToUse.bottomBorder = { + ...propsToUse.bottomBorder, + type: PropTypes.String, + }; + + return { + config: { + componentName: 'EuiPageSection', + props: propsToUse, + scope: { + EuiPageSection, + }, + imports: { + '@elastic/eui': { + named: ['EuiPageSection'], + }, + }, + }, + playgroundClassName: 'guideDemo__highlightLayout--playground', + }; +}; diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js index 440c91e977f..5b3b1d7d821 100644 --- a/src-docs/src/views/page/page_example.js +++ b/src-docs/src/views/page/page_example.js @@ -1,9 +1,23 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { EuiText, EuiSpacer, EuiCallOut, EuiCode } from '../../../../src'; +import { + EuiText, + EuiSpacer, + EuiCallOut, + EuiCode, + EuiTable, + EuiTableHeader, + EuiTableHeaderCell, + EuiTableBody, + EuiTableRow, + EuiTableRowCell, + EuiIcon, +} from '../../../../src'; import { PageComponentDemo } from './components/page_demo'; +import { PageSectionDemo } from './components/page_section_demo'; +import { PageConfigurationsDemo } from './components/page_configurations_demo'; export const PageExample = { title: 'Page components', @@ -33,10 +47,10 @@ export const PageExample = { ), sections: [ { - title: 'Page', + title: 'Page, body, and sidebar', wrapText: false, text: ( - <> +

EuiPage is simply a flex wrapper that will @@ -47,9 +61,195 @@ export const PageExample = { reaches the provided value (or 1200px if set to{' '} true).

+

+ EuiPageSidebar doesn't contain many + configurations itself, but it does dictate how the rest of the + page contents should be displayed. Typically you'll want to + wrap all your page contents in EuiPageBody and + set {'panelled={true}'} when you have a side + bar. +

- +
+ ), + }, + { + title: 'Page sections', + wrapText: false, + text: ( +
+ +

+ EuiPageSection is a stackable component that is + essentially an{' '} + + EuiPanel + {' '} + with props for quickly creating common usages. It is meant to be a + direct descendent of EuiPageBody You'll need + to set {'grow={false}'} to any content that you + don't want to stretch within the page. +

+

+ To create dividers between contents, use the{' '} + bottomBorder prop. The{' '} + {"'extended'"} version ensures the border + touches the sides of the parent. It also supports{' '} + restrictWidth and alignment{' '} + to align with common usages. +

+ + +
+ ), + }, + { + title: 'Page configurations', + wrapText: false, + text: ( +
+ +

+ When piecing all of the different page components together, the + state of your application will dictate how best to configure each + component. Ideally, your main content should always live within a{' '} + {"'plain'"} colored body or section. +

+

+ When using{' '} + + EuiEmptyPrompt + {' '} + to replace the main contents of your page you will want to use a + panel color opposite that of the section color. For example: +

+ + + + + + + + EuiPageSidebar + + EuiPageHeader + EuiPageBody + EuiPageSection + EuiEmptyPrompt settings + + + + + + + + + + + + + {'color="plain"'} + + + + {'color="plain"'} +
+ {'bottomBorder={true}'} + + + + {'color="subdued"'} + + + + + + + + + + + + + {'color="transparent"'} + + + + {'color="plain"'} +
+ {'bottomBorder="extended"'} + + + + {'color="subdued"'} + + + + + + + + + + + + + {'color="transparent"'} + + + + {'color="transparent"'} +
+ {'bottomBorder="extended"'} + + + + {'color="plain"'} + + + + + + + + Reminder:{' '} + + EuiPageTemplate + {' '} + can handle all these configurations for you. + + } + /> + + +
), }, ], diff --git a/src/components/page/__snapshots__/page.test.tsx.snap b/src/components/page/__snapshots__/page.test.tsx.snap index 5e16efeea29..fa340385267 100644 --- a/src/components/page/__snapshots__/page.test.tsx.snap +++ b/src/components/page/__snapshots__/page.test.tsx.snap @@ -2,20 +2,20 @@ exports[`EuiPage direction can be row 1`] = `
`; exports[`EuiPage grow can be false 1`] = `
`; exports[`EuiPage is rendered 1`] = `
`; @@ -46,20 +46,20 @@ exports[`EuiPage paddingSize s is rendered 1`] = ` exports[`EuiPage restrict width can be set to a custom number 1`] = `
`; exports[`EuiPage restrict width can be set to a custom value and does not override custom style 1`] = `
`; exports[`EuiPage restrict width can be set to a default 1`] = `
`; diff --git a/src/components/page/_bottom_border.ts b/src/components/page/_bottom_border.ts new file mode 100644 index 00000000000..72f86f3d835 --- /dev/null +++ b/src/components/page/_bottom_border.ts @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export type _EuiPageBottomBorder = { + /** + * Adds a bottom border to separate it from the content after; + * Passing `extended` will ensure the border touches the sides of the parent container. + */ + bottomBorder?: boolean | 'extended'; +}; diff --git a/src/components/page/_restrict_width.ts b/src/components/page/_restrict_width.ts index 809477fbe98..c267229eea1 100644 --- a/src/components/page/_restrict_width.ts +++ b/src/components/page/_restrict_width.ts @@ -19,6 +19,9 @@ import { CSSProperties } from 'react'; +// TODO: Decide how to make this a global value but still isolated to the page component +export const PAGE_MAX_WIDTH: CSSProperties['maxWidth'] = '1200px'; + export type _EuiPageRestrictWidth = { /** * Sets the max-width of the page, diff --git a/src/components/page/index.ts b/src/components/page/index.ts index ff790e3af55..6370587ca7b 100644 --- a/src/components/page/index.ts +++ b/src/components/page/index.ts @@ -36,6 +36,9 @@ export { EuiPageHeaderSection, } from './page_header'; +export type { EuiPageSectionProps } from './page_section'; +export { EuiPageSection } from './page_section'; + export type { EuiPageSideBarProps } from './page_side_bar'; export { EuiPageSideBar } from './page_side_bar'; diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx index 59b02ee54ad..0cc43cb6be1 100644 --- a/src/components/page/page.tsx +++ b/src/components/page/page.tsx @@ -55,7 +55,7 @@ export const EuiPage: FunctionComponent = ({ restrictWidth = false, style, className, - paddingSize = 'm', + paddingSize = 'none', grow = true, direction = 'row', ...rest diff --git a/src/components/page/page_body/_page_body.scss b/src/components/page/page_body/_page_body.scss index 43e798be497..20e433e52d4 100644 --- a/src/components/page/page_body/_page_body.scss +++ b/src/components/page/page_body/_page_body.scss @@ -7,39 +7,12 @@ // Make sure that inner flex layouts don't get larger than this container max-width: 100%; min-width: 0; - // Commenting out for posterity - // Adding z-index disallows fullscreens like EuiDataGrid to get above the headers - // z-index: 1; // Ensures any side nav emphasis gets rendered under shadow - - // Assumes that in the default theme, the borders are touching the edge of the EuiPage so remove them. - &.euiPageBody--borderRadiusNone { // Nested for specificity - border-top-width: 0; - border-right-width: 0; - border-bottom-width: 0; - } } // Uses the same values as EuiPanel @each $modifier, $amount in $euiPanelPaddingModifiers { .euiPageBody--#{$modifier} { padding: $amount; - - & > .euiPageHeader:not([class*='--padding']) { - // Match the body's padding for spacing if it doesn't have it's own - margin-bottom: $amount; - // When the page header is actually inside of a panelled page body, - // We want to add some extra separation between it and the content body - border-bottom: $euiBorderThin; - - &:not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) { - padding-bottom: $amount; - } - } - - // When only tabs, remove all padding - & > .euiPageHeader.euiPageHeader--onlyTabs { - padding-top: 0; - } } } diff --git a/src/components/page/page_content/page_content.tsx b/src/components/page/page_content/page_content.tsx index 22effaccf2f..dc919765acb 100644 --- a/src/components/page/page_content/page_content.tsx +++ b/src/components/page/page_content/page_content.tsx @@ -41,6 +41,10 @@ export type EuiPageContentProps = CommonProps & role?: HTMLAttributes['role'] | null; }; +/** + * **DEPRECATED** + * Use EuiPageSection instead + */ export const EuiPageContent: FunctionComponent = ({ verticalPosition, horizontalPosition, diff --git a/src/components/page/page_content/page_content_body.tsx b/src/components/page/page_content/page_content_body.tsx index 8cc3d40a877..9d7d6475ac5 100644 --- a/src/components/page/page_content/page_content_body.tsx +++ b/src/components/page/page_content/page_content_body.tsx @@ -34,6 +34,10 @@ export interface EuiPageContentBodyProps paddingSize?: typeof PADDING_SIZES[number]; } +/** + * **DEPRECATED** + * Use EuiPageSection instead + */ export const EuiPageContentBody: FunctionComponent = ({ children, restrictWidth = false, diff --git a/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap new file mode 100644 index 00000000000..2c0686a6140 --- /dev/null +++ b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap @@ -0,0 +1,205 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiPageSection is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props alignment center is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props alignment horizontalCenter is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props alignment top is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props bottomBorder can be true 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color accent is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color danger is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color plain is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color primary is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color subdued is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color success is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color transparent is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props color warning is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props contentProps are passed down 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props grow can be true 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props paddingSize l is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props paddingSize m is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props paddingSize none is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props paddingSize s is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props restrictWidth can be true 1`] = ` +
+
+
+`; diff --git a/src/components/page/page_section/index.ts b/src/components/page/page_section/index.ts new file mode 100644 index 00000000000..4b2bd2db319 --- /dev/null +++ b/src/components/page/page_section/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export type { EuiPageSectionProps } from './page_section'; +export { EuiPageSection } from './page_section'; diff --git a/src/components/page/page_section/page_section.styles.ts b/src/components/page/page_section/page_section.styles.ts new file mode 100644 index 00000000000..59ff12d6599 --- /dev/null +++ b/src/components/page/page_section/page_section.styles.ts @@ -0,0 +1,61 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../../services'; +import { PAGE_MAX_WIDTH, _EuiPageRestrictWidth } from '../_restrict_width'; + +export const ALIGNMENTS = ['top', 'center', 'horizontalCenter'] as const; +export const euiPageSectionStyles = ({ euiTheme }: UseEuiTheme) => { + return { + euiPageSection: css` + width: 100%; + min-width: 0; // Make sure that inner flex layouts don't get larger than this container + display: flex; + flex-direction: column; + `, + grow: css` + flex-grow: 1; + `, + border: css` + border-bottom: ${euiTheme.border.thin}; + `, + // Alignments + top: css``, + center: css` + align-items: center; + justify-content: center; + `, + horizontalCenter: css` + align-items: center; + `, + }; +}; + +export const euiPageSectionWidth = ( + restrictWidth: _EuiPageRestrictWidth, + alignment: typeof ALIGNMENTS[number] +) => { + const width = alignment?.toLowerCase().includes('center') ? 'auto' : '100%'; + + if (restrictWidth === true) { + return css` + margin-left: auto; + margin-right: auto; + width: ${width}; + max-width: ${PAGE_MAX_WIDTH}; + `; + } else if (restrictWidth !== undefined) { + return css` + margin-left: auto; + margin-right: auto; + width: ${width}; + max-width: ${restrictWidth}; + `; + } +}; diff --git a/src/components/page/page_section/page_section.test.tsx b/src/components/page/page_section/page_section.test.tsx new file mode 100644 index 00000000000..7de285d4ba9 --- /dev/null +++ b/src/components/page/page_section/page_section.test.tsx @@ -0,0 +1,89 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test/required_props'; + +import { EuiPageSection } from './page_section'; +import { ALIGNMENTS } from './page_section.styles'; +import { PADDING_SIZES, BACKGROUND_COLORS } from '../../../global_styling'; + +describe('EuiPageSection', () => { + test('is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + describe('restrictWidth', () => { + test('can be true', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('bottomBorder', () => { + test('can be true', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('grow', () => { + test('can be true', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('alignment', () => { + ALIGNMENTS.forEach((alignment) => { + test(`${alignment} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('color', () => { + BACKGROUND_COLORS.forEach((color) => { + test(`${color} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('paddingSize', () => { + PADDING_SIZES.forEach((padding) => { + test(`${padding} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + describe('contentProps', () => { + test('are passed down', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); +}); diff --git a/src/components/page/page_section/page_section.tsx b/src/components/page/page_section/page_section.tsx new file mode 100644 index 00000000000..6e45c2f0da9 --- /dev/null +++ b/src/components/page/page_section/page_section.tsx @@ -0,0 +1,102 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { FunctionComponent, HTMLAttributes } from 'react'; +import { CommonProps } from '../../common'; + +import { _EuiPageRestrictWidth } from '../_restrict_width'; +import { _EuiPageBottomBorder } from '../_bottom_border'; + +import { useEuiTheme } from '../../../services'; +import { + ALIGNMENTS, + euiPageSectionStyles, + euiPageSectionWidth, +} from './page_section.styles'; + +import { + euiPaddingStyles, + PADDING_SIZES, + BACKGROUND_COLORS, + euiBackgroundColorStyles, +} from '../../../global_styling'; + +export type EuiPageSectionProps = CommonProps & + _EuiPageRestrictWidth & + _EuiPageBottomBorder & { + /** + * Background color of the section; + * Usually a lightened form of the brand colors + */ + color?: typeof BACKGROUND_COLORS[number]; + /** + * Padding for all four sides + */ + paddingSize?: typeof PADDING_SIZES[number]; + /** + * Horizontal and/or vertical alignment of the section contents + */ + alignment?: typeof ALIGNMENTS[number]; + /** + * When true the panel will grow in height to fill container if parent is a flex group + */ + grow?: boolean; + /** + * Passed down to the div wrapper of the section contents + */ + contentProps?: HTMLAttributes; + } & Omit, 'color'>; + +export const EuiPageSection: FunctionComponent = ({ + children, + className, + alignment = 'top', + restrictWidth = false, + bottomBorder, + paddingSize = 'l', + color = 'transparent', + grow = false, + contentProps, + ...rest +}) => { + const useTheme = useEuiTheme(); + const styles = euiPageSectionStyles(useTheme); + const inlinePadding = euiPaddingStyles(useTheme, 'inline'); + const blockPadding = euiPaddingStyles(useTheme, 'block'); + const colors = euiBackgroundColorStyles(useTheme); + const width = euiPageSectionWidth( + restrictWidth as _EuiPageRestrictWidth, + alignment + ); + + return ( +
+
+ {children} +
+
+ ); +}; diff --git a/src/global_styling/mixins/_color.ts b/src/global_styling/mixins/_color.ts new file mode 100644 index 00000000000..2d69245516b --- /dev/null +++ b/src/global_styling/mixins/_color.ts @@ -0,0 +1,58 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { shade, tint, UseEuiTheme } from '../../services'; + +// TODO Make into a hook +export const BACKGROUND_COLORS = [ + 'transparent', + 'plain', + 'subdued', + 'accent', + 'primary', + 'success', + 'warning', + 'danger', +] as const; + +export const euiBackgroundColorStyles = ({ + euiTheme, + colorMode, +}: UseEuiTheme) => { + function tintOrShade(color: string) { + return colorMode === 'DARK' ? shade(color, 0.7) : tint(color, 0.9); + } + + return { + transparent: css` + background-color: transparent; + `, + plain: css` + background-color: ${euiTheme.colors.emptyShade}; + `, + subdued: css` + background-color: ${euiTheme.colors.body}; + `, + accent: css` + background-color: ${tintOrShade(euiTheme.colors.accent)}; + `, + primary: css` + background-color: ${tintOrShade(euiTheme.colors.primary)}; + `, + success: css` + background-color: ${tintOrShade(euiTheme.colors.success)}; + `, + warning: css` + background-color: ${tintOrShade(euiTheme.colors.warning)}; + `, + danger: css` + background-color: ${tintOrShade(euiTheme.colors.danger)}; + `, + }; +}; diff --git a/src/global_styling/mixins/_padding.ts b/src/global_styling/mixins/_padding.ts new file mode 100644 index 00000000000..e6ec87fb36b --- /dev/null +++ b/src/global_styling/mixins/_padding.ts @@ -0,0 +1,28 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services/theme'; + +// TODO: Make into a hook +export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const; + +export const euiPaddingStyles = ({ euiTheme }: UseEuiTheme, side: string) => { + return { + none: null, + s: css` + padding-${side}: ${euiTheme.size.s}; + `, + m: css` + padding-${side}: ${euiTheme.size.m}; + `, + l: css` + padding-${side}: ${euiTheme.size.l}; + `, + }; +}; diff --git a/src/global_styling/mixins/index.ts b/src/global_styling/mixins/index.ts index 52417fe3bf2..64391510824 100644 --- a/src/global_styling/mixins/index.ts +++ b/src/global_styling/mixins/index.ts @@ -6,4 +6,6 @@ * Side Public License, v 1. */ +export * from './_padding'; +export * from './_color'; export * from './_helpers'; diff --git a/upcoming_changelogs/5769.md b/upcoming_changelogs/5769.md new file mode 100644 index 00000000000..1c40a952287 --- /dev/null +++ b/upcoming_changelogs/5769.md @@ -0,0 +1,11 @@ +- Added `EuiPageSection` component for easier section stacking +- Added `euiPaddingStyles` and `euiBackgroundColorStyles` global styling functions + +**Deprecations** + +- Deprecated `EuiPageContent` and `EuiPageContentBody` in favor of new `EuiPageSection` + +**Breaking changes** + +- Removed nested `EuiPageHeader` styles when a child of `EuiPageBody` +- Changed default `padding` of `EuiPage` from `m` to `none` From 5301cc391641c2837e58b916202faf8baa3594ab Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 9 May 2022 10:30:40 -0400 Subject: [PATCH 07/19] Change `usEuiPaddingCSS` to return css instead of string This gets the className output to render the key name. Same with `useEuiBackgroundColorCSS`. Also fixed usage in `EuiPageSection`. Also fixed docs `exampleToggles` pass through from GuideSection to example --- .../guide_section/guide_section.tsx | 10 +- .../__snapshots__/page_section.test.tsx.snap | 48 ++- .../page/page_section/page_section.tsx | 10 +- .../mixins/__snapshots__/_color.test.ts.snap | 80 +++-- .../__snapshots__/_padding.test.ts.snap | 300 ++++++++++++------ src/global_styling/mixins/_color.ts | 17 +- src/global_styling/mixins/_padding.ts | 11 +- 7 files changed, 327 insertions(+), 149 deletions(-) diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx index 9419f300534..55b60322b0d 100644 --- a/src-docs/src/components/guide_section/guide_section.tsx +++ b/src-docs/src/components/guide_section/guide_section.tsx @@ -24,7 +24,11 @@ import { GuideSectionExampleTabsProps, } from './guide_section_parts/guide_section_tabs'; -export interface GuideSection { +export interface GuideSection + extends Pick< + GuideSectionExample, + 'exampleToggles' | 'demoPanelProps' | 'ghostBackground' + > { id?: string; title?: string; text?: ReactNode; @@ -34,10 +38,8 @@ export interface GuideSection { slug: string; demo: ReactNode; }; - demoPanelProps?: GuideSectionExample['demoPanelProps']; props?: object; playground?: any; - ghostBackground?: boolean; wrapText?: boolean; snippet?: string | string[]; color?: EuiPanelProps['color']; @@ -83,6 +85,7 @@ export const GuideSection: FunctionComponent = ({ ghostBackground, wrapText = true, demoPanelProps, + exampleToggles, snippet, color, children, @@ -231,6 +234,7 @@ export const GuideSection: FunctionComponent = ({ tabs={renderTabs()} ghostBackground={ghostBackground} demoPanelProps={demoPanelProps} + exampleToggles={exampleToggles} /> )} diff --git a/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap index 2c0686a6140..5912e03db66 100644 --- a/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap +++ b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiPageSection is rendered 1`] = `
`; exports[`EuiPageSection props paddingSize none is rendered 1`] = `
`; +exports[`EuiPageSection props paddingSize xl is rendered 1`] = ` +
+
+
+`; + +exports[`EuiPageSection props paddingSize xs is rendered 1`] = ` +
+
+
+`; + exports[`EuiPageSection props restrictWidth can be true 1`] = `
= ({ }) => { const useTheme = useEuiTheme(); const styles = euiPageSectionStyles(useTheme); - const inlinePadding = euiPaddingStyles(useTheme, 'inline'); - const blockPadding = euiPaddingStyles(useTheme, 'block'); - const colors = euiBackgroundColorStyles(useTheme); + const inlinePadding = useEuiPaddingCSS('horizontal'); + const blockPadding = useEuiPaddingCSS('vertical'); + const colors = useEuiBackgroundColorCSS(); const width = euiPageSectionWidth( restrictWidth as _EuiPageRestrictWidth, alignment diff --git a/src/global_styling/mixins/__snapshots__/_color.test.ts.snap b/src/global_styling/mixins/__snapshots__/_color.test.ts.snap index bfc9f0d8047..11d30b85226 100644 --- a/src/global_styling/mixins/__snapshots__/_color.test.ts.snap +++ b/src/global_styling/mixins/__snapshots__/_color.test.ts.snap @@ -18,29 +18,61 @@ exports[`useEuiBackgroundColor mixin returns a calculated background version for exports[`useEuiBackgroundColorCSS hook returns the object of static background-color properties for each color 1`] = ` Object { - "accent": " - background-color: #feedf5; - ", - "danger": " - background-color: #f8e9e9; - ", - "plain": " - background-color: #FFF; - ", - "primary": " - background-color: #e6f1fa; - ", - "subdued": " - background-color: #f8fafd; - ", - "success": " - background-color: #e6f9f7; - ", - "transparent": " - background-color: transparent; - ", - "warning": " - background-color: #fff9e8; - ", + "accent": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0RGUiLCJmaWxlIjoiX2NvbG9yLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCBFbGFzdGljc2VhcmNoIEIuVi4gYW5kL29yIGxpY2Vuc2VkIHRvIEVsYXN0aWNzZWFyY2ggQi5WLiB1bmRlciBvbmVcbiAqIG9yIG1vcmUgY29udHJpYnV0b3IgbGljZW5zZSBhZ3JlZW1lbnRzLiBMaWNlbnNlZCB1bmRlciB0aGUgRWxhc3RpYyBMaWNlbnNlXG4gKiAyLjAgYW5kIHRoZSBTZXJ2ZXIgU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxOyB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdFxuICogaW4gY29tcGxpYW5jZSB3aXRoLCBhdCB5b3VyIGVsZWN0aW9uLCB0aGUgRWxhc3RpYyBMaWNlbnNlIDIuMCBvciB0aGUgU2VydmVyXG4gKiBTaWRlIFB1YmxpYyBMaWNlbnNlLCB2IDEuXG4gKi9cblxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgc2hhZGUsIHRpbnQsIHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzJztcblxuZXhwb3J0IGNvbnN0IEJBQ0tHUk9VTkRfQ09MT1JTID0gW1xuICAndHJhbnNwYXJlbnQnLFxuICAncGxhaW4nLFxuICAnc3ViZHVlZCcsXG4gICdhY2NlbnQnLFxuICAncHJpbWFyeScsXG4gICdzdWNjZXNzJyxcbiAgJ3dhcm5pbmcnLFxuICAnZGFuZ2VyJyxcbl0gYXMgY29uc3Q7XG5cbmV4cG9ydCB0eXBlIEV1aUJhY2tncm91bmRDb2xvciA9IHR5cGVvZiBCQUNLR1JPVU5EX0NPTE9SU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpQmFja2dyb3VuZENvbG9yID0gKFxuICBjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yLFxuICB7IGV1aVRoZW1lLCBjb2xvck1vZGUgfTogVXNlRXVpVGhlbWVcbikgPT4ge1xuICBmdW5jdGlvbiB0aW50T3JTaGFkZShjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIGNvbG9yTW9kZSA9PT0gJ0RBUksnID8gc2hhZGUoY29sb3IsIDAuNykgOiB0aW50KGNvbG9yLCAwLjkpO1xuICB9XG5cbiAgc3dpdGNoIChjb2xvcikge1xuICAgIGNhc2UgJ3RyYW5zcGFyZW50JzpcbiAgICAgIHJldHVybiAndHJhbnNwYXJlbnQnO1xuICAgIGNhc2UgJ3BsYWluJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5jb2xvcnMuZW1wdHlTaGFkZTtcbiAgICBjYXNlICdzdWJkdWVkJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5jb2xvcnMuYm9keTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHRpbnRPclNoYWRlKGV1aVRoZW1lLmNvbG9yc1tjb2xvcl0pO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpQmFja2dyb3VuZENvbG9yID0gKGNvbG9yOiBFdWlCYWNrZ3JvdW5kQ29sb3IpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpQmFja2dyb3VuZENvbG9yKGNvbG9yLCBldWlUaGVtZSk7XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpQmFja2dyb3VuZENvbG9yQ1NTID0gKCkgPT4ge1xuICByZXR1cm4ge1xuICAgIHRyYW5zcGFyZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcigndHJhbnNwYXJlbnQnKX07XG4gICAgYCxcbiAgICBwbGFpbjogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3BsYWluJyl9O1xuICAgIGAsXG4gICAgc3ViZHVlZDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3N1YmR1ZWQnKX07XG4gICAgYCxcbiAgICBhY2NlbnQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdhY2NlbnQnKX07XG4gICAgYCxcbiAgICBwcmltYXJ5OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcigncHJpbWFyeScpfTtcbiAgICBgLFxuICAgIHN1Y2Nlc3M6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWNjZXNzJyl9O1xuICAgIGAsXG4gICAgd2FybmluZzogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3dhcm5pbmcnKX07XG4gICAgYCxcbiAgICBkYW5nZXI6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdkYW5nZXInKX07XG4gICAgYCxcbiAgfTtcbn07XG4iXX0= */", + "name": "1ueq1c1-accent", + "next": undefined, + "styles": "background-color:#feedf5;;label:accent;", + "toString": [Function], + }, + "danger": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3RWUiLCJmaWxlIjoiX2NvbG9yLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCBFbGFzdGljc2VhcmNoIEIuVi4gYW5kL29yIGxpY2Vuc2VkIHRvIEVsYXN0aWNzZWFyY2ggQi5WLiB1bmRlciBvbmVcbiAqIG9yIG1vcmUgY29udHJpYnV0b3IgbGljZW5zZSBhZ3JlZW1lbnRzLiBMaWNlbnNlZCB1bmRlciB0aGUgRWxhc3RpYyBMaWNlbnNlXG4gKiAyLjAgYW5kIHRoZSBTZXJ2ZXIgU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxOyB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdFxuICogaW4gY29tcGxpYW5jZSB3aXRoLCBhdCB5b3VyIGVsZWN0aW9uLCB0aGUgRWxhc3RpYyBMaWNlbnNlIDIuMCBvciB0aGUgU2VydmVyXG4gKiBTaWRlIFB1YmxpYyBMaWNlbnNlLCB2IDEuXG4gKi9cblxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgc2hhZGUsIHRpbnQsIHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzJztcblxuZXhwb3J0IGNvbnN0IEJBQ0tHUk9VTkRfQ09MT1JTID0gW1xuICAndHJhbnNwYXJlbnQnLFxuICAncGxhaW4nLFxuICAnc3ViZHVlZCcsXG4gICdhY2NlbnQnLFxuICAncHJpbWFyeScsXG4gICdzdWNjZXNzJyxcbiAgJ3dhcm5pbmcnLFxuICAnZGFuZ2VyJyxcbl0gYXMgY29uc3Q7XG5cbmV4cG9ydCB0eXBlIEV1aUJhY2tncm91bmRDb2xvciA9IHR5cGVvZiBCQUNLR1JPVU5EX0NPTE9SU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpQmFja2dyb3VuZENvbG9yID0gKFxuICBjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yLFxuICB7IGV1aVRoZW1lLCBjb2xvck1vZGUgfTogVXNlRXVpVGhlbWVcbikgPT4ge1xuICBmdW5jdGlvbiB0aW50T3JTaGFkZShjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIGNvbG9yTW9kZSA9PT0gJ0RBUksnID8gc2hhZGUoY29sb3IsIDAuNykgOiB0aW50KGNvbG9yLCAwLjkpO1xuICB9XG5cbiAgc3dpdGNoIChjb2xvcikge1xuICAgIGNhc2UgJ3RyYW5zcGFyZW50JzpcbiAgICAgIHJldHVybiAndHJhbnNwYXJlbnQnO1xuICAgIGNhc2UgJ3BsYWluJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5jb2xvcnMuZW1wdHlTaGFkZTtcbiAgICBjYXNlICdzdWJkdWVkJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5jb2xvcnMuYm9keTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHRpbnRPclNoYWRlKGV1aVRoZW1lLmNvbG9yc1tjb2xvcl0pO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpQmFja2dyb3VuZENvbG9yID0gKGNvbG9yOiBFdWlCYWNrZ3JvdW5kQ29sb3IpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpQmFja2dyb3VuZENvbG9yKGNvbG9yLCBldWlUaGVtZSk7XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpQmFja2dyb3VuZENvbG9yQ1NTID0gKCkgPT4ge1xuICByZXR1cm4ge1xuICAgIHRyYW5zcGFyZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcigndHJhbnNwYXJlbnQnKX07XG4gICAgYCxcbiAgICBwbGFpbjogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3BsYWluJyl9O1xuICAgIGAsXG4gICAgc3ViZHVlZDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3N1YmR1ZWQnKX07XG4gICAgYCxcbiAgICBhY2NlbnQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdhY2NlbnQnKX07XG4gICAgYCxcbiAgICBwcmltYXJ5OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcigncHJpbWFyeScpfTtcbiAgICBgLFxuICAgIHN1Y2Nlc3M6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWNjZXNzJyl9O1xuICAgIGAsXG4gICAgd2FybmluZzogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3dhcm5pbmcnKX07XG4gICAgYCxcbiAgICBkYW5nZXI6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdkYW5nZXInKX07XG4gICAgYCxcbiAgfTtcbn07XG4iXX0= */", + "name": "5ji1sk-danger", + "next": undefined, + "styles": "background-color:#f8e9e9;;label:danger;", + "toString": [Function], + }, + "plain": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRGMiLCJmaWxlIjoiX2NvbG9yLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCBFbGFzdGljc2VhcmNoIEIuVi4gYW5kL29yIGxpY2Vuc2VkIHRvIEVsYXN0aWNzZWFyY2ggQi5WLiB1bmRlciBvbmVcbiAqIG9yIG1vcmUgY29udHJpYnV0b3IgbGljZW5zZSBhZ3JlZW1lbnRzLiBMaWNlbnNlZCB1bmRlciB0aGUgRWxhc3RpYyBMaWNlbnNlXG4gKiAyLjAgYW5kIHRoZSBTZXJ2ZXIgU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxOyB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdFxuICogaW4gY29tcGxpYW5jZSB3aXRoLCBhdCB5b3VyIGVsZWN0aW9uLCB0aGUgRWxhc3RpYyBMaWNlbnNlIDIuMCBvciB0aGUgU2VydmVyXG4gKiBTaWRlIFB1YmxpYyBMaWNlbnNlLCB2IDEuXG4gKi9cblxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgc2hhZGUsIHRpbnQsIHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzJztcblxuZXhwb3J0IGNvbnN0IEJBQ0tHUk9VTkRfQ09MT1JTID0gW1xuICAndHJhbnNwYXJlbnQnLFxuICAncGxhaW4nLFxuICAnc3ViZHVlZCcsXG4gICdhY2NlbnQnLFxuICAncHJpbWFyeScsXG4gICdzdWNjZXNzJyxcbiAgJ3dhcm5pbmcnLFxuICAnZGFuZ2VyJyxcbl0gYXMgY29uc3Q7XG5cbmV4cG9ydCB0eXBlIEV1aUJhY2tncm91bmRDb2xvciA9IHR5cGVvZiBCQUNLR1JPVU5EX0NPTE9SU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpQmFja2dyb3VuZENvbG9yID0gKFxuICBjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yLFxuICB7IGV1aVRoZW1lLCBjb2xvck1vZGUgfTogVXNlRXVpVGhlbWVcbikgPT4ge1xuICBmdW5jdGlvbiB0aW50T3JTaGFkZShjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIGNvbG9yTW9kZSA9PT0gJ0RBUksnID8gc2hhZGUoY29sb3IsIDAuNykgOiB0aW50KGNvbG9yLCAwLjkpO1xuICB9XG5cbiAgc3dpdGNoIChjb2xvcikge1xuICAgIGNhc2UgJ3RyYW5zcGFyZW50JzpcbiAgICAgIHJldHVybiAndHJhbnNwYXJlbnQnO1xuICAgIGNhc2UgJ3BsYWluJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5jb2xvcnMuZW1wdHlTaGFkZTtcbiAgICBjYXNlICdzdWJkdWVkJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5jb2xvcnMuYm9keTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHRpbnRPclNoYWRlKGV1aVRoZW1lLmNvbG9yc1tjb2xvcl0pO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpQmFja2dyb3VuZENvbG9yID0gKGNvbG9yOiBFdWlCYWNrZ3JvdW5kQ29sb3IpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpQmFja2dyb3VuZENvbG9yKGNvbG9yLCBldWlUaGVtZSk7XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpQmFja2dyb3VuZENvbG9yQ1NTID0gKCkgPT4ge1xuICByZXR1cm4ge1xuICAgIHRyYW5zcGFyZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcigndHJhbnNwYXJlbnQnKX07XG4gICAgYCxcbiAgICBwbGFpbjogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3BsYWluJyl9O1xuICAgIGAsXG4gICAgc3ViZHVlZDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3N1YmR1ZWQnKX07XG4gICAgYCxcbiAgICBhY2NlbnQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdhY2NlbnQnKX07XG4gICAgYCxcbiAgICBwcmltYXJ5OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcigncHJpbWFyeScpfTtcbiAgICBgLFxuICAgIHN1Y2Nlc3M6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWNjZXNzJyl9O1xuICAgIGAsXG4gICAgd2FybmluZzogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3dhcm5pbmcnKX07XG4gICAgYCxcbiAgICBkYW5nZXI6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdkYW5nZXInKX07XG4gICAgYCxcbiAgfTtcbn07XG4iXX0= */", + "name": "1640e4a-plain", + "next": undefined, + "styles": "background-color:#FFF;;label:plain;", + "toString": [Function], + }, + "primary": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErRGdCIiwiZmlsZSI6Il9jb2xvci50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHNoYWRlLCB0aW50LCB1c2VFdWlUaGVtZSwgVXNlRXVpVGhlbWUgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcyc7XG5cbmV4cG9ydCBjb25zdCBCQUNLR1JPVU5EX0NPTE9SUyA9IFtcbiAgJ3RyYW5zcGFyZW50JyxcbiAgJ3BsYWluJyxcbiAgJ3N1YmR1ZWQnLFxuICAnYWNjZW50JyxcbiAgJ3ByaW1hcnknLFxuICAnc3VjY2VzcycsXG4gICd3YXJuaW5nJyxcbiAgJ2RhbmdlcicsXG5dIGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBFdWlCYWNrZ3JvdW5kQ29sb3IgPSB0eXBlb2YgQkFDS0dST1VORF9DT0xPUlNbbnVtYmVyXTtcblxuZXhwb3J0IGNvbnN0IGV1aUJhY2tncm91bmRDb2xvciA9IChcbiAgY29sb3I6IEV1aUJhY2tncm91bmRDb2xvcixcbiAgeyBldWlUaGVtZSwgY29sb3JNb2RlIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgZnVuY3Rpb24gdGludE9yU2hhZGUoY29sb3I6IHN0cmluZykge1xuICAgIHJldHVybiBjb2xvck1vZGUgPT09ICdEQVJLJyA/IHNoYWRlKGNvbG9yLCAwLjcpIDogdGludChjb2xvciwgMC45KTtcbiAgfVxuXG4gIHN3aXRjaCAoY29sb3IpIHtcbiAgICBjYXNlICd0cmFuc3BhcmVudCc6XG4gICAgICByZXR1cm4gJ3RyYW5zcGFyZW50JztcbiAgICBjYXNlICdwbGFpbic6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmVtcHR5U2hhZGU7XG4gICAgY2FzZSAnc3ViZHVlZCc6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmJvZHk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiB0aW50T3JTaGFkZShldWlUaGVtZS5jb2xvcnNbY29sb3JdKTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvciA9IChjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yKSA9PiB7XG4gIGNvbnN0IGV1aVRoZW1lID0gdXNlRXVpVGhlbWUoKTtcbiAgcmV0dXJuIGV1aUJhY2tncm91bmRDb2xvcihjb2xvciwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvckNTUyA9ICgpID0+IHtcbiAgcmV0dXJuIHtcbiAgICB0cmFuc3BhcmVudDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3RyYW5zcGFyZW50Jyl9O1xuICAgIGAsXG4gICAgcGxhaW46IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdwbGFpbicpfTtcbiAgICBgLFxuICAgIHN1YmR1ZWQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWJkdWVkJyl9O1xuICAgIGAsXG4gICAgYWNjZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignYWNjZW50Jyl9O1xuICAgIGAsXG4gICAgcHJpbWFyeTogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3ByaW1hcnknKX07XG4gICAgYCxcbiAgICBzdWNjZXNzOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignc3VjY2VzcycpfTtcbiAgICBgLFxuICAgIHdhcm5pbmc6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCd3YXJuaW5nJyl9O1xuICAgIGAsXG4gICAgZGFuZ2VyOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignZGFuZ2VyJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "15y8sa4-primary", + "next": undefined, + "styles": "background-color:#e6f1fa;;label:primary;", + "toString": [Function], + }, + "subdued": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RGdCIiwiZmlsZSI6Il9jb2xvci50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHNoYWRlLCB0aW50LCB1c2VFdWlUaGVtZSwgVXNlRXVpVGhlbWUgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcyc7XG5cbmV4cG9ydCBjb25zdCBCQUNLR1JPVU5EX0NPTE9SUyA9IFtcbiAgJ3RyYW5zcGFyZW50JyxcbiAgJ3BsYWluJyxcbiAgJ3N1YmR1ZWQnLFxuICAnYWNjZW50JyxcbiAgJ3ByaW1hcnknLFxuICAnc3VjY2VzcycsXG4gICd3YXJuaW5nJyxcbiAgJ2RhbmdlcicsXG5dIGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBFdWlCYWNrZ3JvdW5kQ29sb3IgPSB0eXBlb2YgQkFDS0dST1VORF9DT0xPUlNbbnVtYmVyXTtcblxuZXhwb3J0IGNvbnN0IGV1aUJhY2tncm91bmRDb2xvciA9IChcbiAgY29sb3I6IEV1aUJhY2tncm91bmRDb2xvcixcbiAgeyBldWlUaGVtZSwgY29sb3JNb2RlIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgZnVuY3Rpb24gdGludE9yU2hhZGUoY29sb3I6IHN0cmluZykge1xuICAgIHJldHVybiBjb2xvck1vZGUgPT09ICdEQVJLJyA/IHNoYWRlKGNvbG9yLCAwLjcpIDogdGludChjb2xvciwgMC45KTtcbiAgfVxuXG4gIHN3aXRjaCAoY29sb3IpIHtcbiAgICBjYXNlICd0cmFuc3BhcmVudCc6XG4gICAgICByZXR1cm4gJ3RyYW5zcGFyZW50JztcbiAgICBjYXNlICdwbGFpbic6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmVtcHR5U2hhZGU7XG4gICAgY2FzZSAnc3ViZHVlZCc6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmJvZHk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiB0aW50T3JTaGFkZShldWlUaGVtZS5jb2xvcnNbY29sb3JdKTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvciA9IChjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yKSA9PiB7XG4gIGNvbnN0IGV1aVRoZW1lID0gdXNlRXVpVGhlbWUoKTtcbiAgcmV0dXJuIGV1aUJhY2tncm91bmRDb2xvcihjb2xvciwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvckNTUyA9ICgpID0+IHtcbiAgcmV0dXJuIHtcbiAgICB0cmFuc3BhcmVudDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3RyYW5zcGFyZW50Jyl9O1xuICAgIGAsXG4gICAgcGxhaW46IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdwbGFpbicpfTtcbiAgICBgLFxuICAgIHN1YmR1ZWQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWJkdWVkJyl9O1xuICAgIGAsXG4gICAgYWNjZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignYWNjZW50Jyl9O1xuICAgIGAsXG4gICAgcHJpbWFyeTogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3ByaW1hcnknKX07XG4gICAgYCxcbiAgICBzdWNjZXNzOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignc3VjY2VzcycpfTtcbiAgICBgLFxuICAgIHdhcm5pbmc6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCd3YXJuaW5nJyl9O1xuICAgIGAsXG4gICAgZGFuZ2VyOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignZGFuZ2VyJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "xb6cqs-subdued", + "next": undefined, + "styles": "background-color:#f8fafd;;label:subdued;", + "toString": [Function], + }, + "success": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRWdCIiwiZmlsZSI6Il9jb2xvci50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHNoYWRlLCB0aW50LCB1c2VFdWlUaGVtZSwgVXNlRXVpVGhlbWUgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcyc7XG5cbmV4cG9ydCBjb25zdCBCQUNLR1JPVU5EX0NPTE9SUyA9IFtcbiAgJ3RyYW5zcGFyZW50JyxcbiAgJ3BsYWluJyxcbiAgJ3N1YmR1ZWQnLFxuICAnYWNjZW50JyxcbiAgJ3ByaW1hcnknLFxuICAnc3VjY2VzcycsXG4gICd3YXJuaW5nJyxcbiAgJ2RhbmdlcicsXG5dIGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBFdWlCYWNrZ3JvdW5kQ29sb3IgPSB0eXBlb2YgQkFDS0dST1VORF9DT0xPUlNbbnVtYmVyXTtcblxuZXhwb3J0IGNvbnN0IGV1aUJhY2tncm91bmRDb2xvciA9IChcbiAgY29sb3I6IEV1aUJhY2tncm91bmRDb2xvcixcbiAgeyBldWlUaGVtZSwgY29sb3JNb2RlIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgZnVuY3Rpb24gdGludE9yU2hhZGUoY29sb3I6IHN0cmluZykge1xuICAgIHJldHVybiBjb2xvck1vZGUgPT09ICdEQVJLJyA/IHNoYWRlKGNvbG9yLCAwLjcpIDogdGludChjb2xvciwgMC45KTtcbiAgfVxuXG4gIHN3aXRjaCAoY29sb3IpIHtcbiAgICBjYXNlICd0cmFuc3BhcmVudCc6XG4gICAgICByZXR1cm4gJ3RyYW5zcGFyZW50JztcbiAgICBjYXNlICdwbGFpbic6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmVtcHR5U2hhZGU7XG4gICAgY2FzZSAnc3ViZHVlZCc6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmJvZHk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiB0aW50T3JTaGFkZShldWlUaGVtZS5jb2xvcnNbY29sb3JdKTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvciA9IChjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yKSA9PiB7XG4gIGNvbnN0IGV1aVRoZW1lID0gdXNlRXVpVGhlbWUoKTtcbiAgcmV0dXJuIGV1aUJhY2tncm91bmRDb2xvcihjb2xvciwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvckNTUyA9ICgpID0+IHtcbiAgcmV0dXJuIHtcbiAgICB0cmFuc3BhcmVudDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3RyYW5zcGFyZW50Jyl9O1xuICAgIGAsXG4gICAgcGxhaW46IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdwbGFpbicpfTtcbiAgICBgLFxuICAgIHN1YmR1ZWQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWJkdWVkJyl9O1xuICAgIGAsXG4gICAgYWNjZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignYWNjZW50Jyl9O1xuICAgIGAsXG4gICAgcHJpbWFyeTogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3ByaW1hcnknKX07XG4gICAgYCxcbiAgICBzdWNjZXNzOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignc3VjY2VzcycpfTtcbiAgICBgLFxuICAgIHdhcm5pbmc6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCd3YXJuaW5nJyl9O1xuICAgIGAsXG4gICAgZGFuZ2VyOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignZGFuZ2VyJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "qg8no2-success", + "next": undefined, + "styles": "background-color:#e6f9f7;;label:success;", + "toString": [Function], + }, + "transparent": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRG9CIiwiZmlsZSI6Il9jb2xvci50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHNoYWRlLCB0aW50LCB1c2VFdWlUaGVtZSwgVXNlRXVpVGhlbWUgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcyc7XG5cbmV4cG9ydCBjb25zdCBCQUNLR1JPVU5EX0NPTE9SUyA9IFtcbiAgJ3RyYW5zcGFyZW50JyxcbiAgJ3BsYWluJyxcbiAgJ3N1YmR1ZWQnLFxuICAnYWNjZW50JyxcbiAgJ3ByaW1hcnknLFxuICAnc3VjY2VzcycsXG4gICd3YXJuaW5nJyxcbiAgJ2RhbmdlcicsXG5dIGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBFdWlCYWNrZ3JvdW5kQ29sb3IgPSB0eXBlb2YgQkFDS0dST1VORF9DT0xPUlNbbnVtYmVyXTtcblxuZXhwb3J0IGNvbnN0IGV1aUJhY2tncm91bmRDb2xvciA9IChcbiAgY29sb3I6IEV1aUJhY2tncm91bmRDb2xvcixcbiAgeyBldWlUaGVtZSwgY29sb3JNb2RlIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgZnVuY3Rpb24gdGludE9yU2hhZGUoY29sb3I6IHN0cmluZykge1xuICAgIHJldHVybiBjb2xvck1vZGUgPT09ICdEQVJLJyA/IHNoYWRlKGNvbG9yLCAwLjcpIDogdGludChjb2xvciwgMC45KTtcbiAgfVxuXG4gIHN3aXRjaCAoY29sb3IpIHtcbiAgICBjYXNlICd0cmFuc3BhcmVudCc6XG4gICAgICByZXR1cm4gJ3RyYW5zcGFyZW50JztcbiAgICBjYXNlICdwbGFpbic6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmVtcHR5U2hhZGU7XG4gICAgY2FzZSAnc3ViZHVlZCc6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmJvZHk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiB0aW50T3JTaGFkZShldWlUaGVtZS5jb2xvcnNbY29sb3JdKTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvciA9IChjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yKSA9PiB7XG4gIGNvbnN0IGV1aVRoZW1lID0gdXNlRXVpVGhlbWUoKTtcbiAgcmV0dXJuIGV1aUJhY2tncm91bmRDb2xvcihjb2xvciwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvckNTUyA9ICgpID0+IHtcbiAgcmV0dXJuIHtcbiAgICB0cmFuc3BhcmVudDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3RyYW5zcGFyZW50Jyl9O1xuICAgIGAsXG4gICAgcGxhaW46IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdwbGFpbicpfTtcbiAgICBgLFxuICAgIHN1YmR1ZWQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWJkdWVkJyl9O1xuICAgIGAsXG4gICAgYWNjZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignYWNjZW50Jyl9O1xuICAgIGAsXG4gICAgcHJpbWFyeTogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3ByaW1hcnknKX07XG4gICAgYCxcbiAgICBzdWNjZXNzOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignc3VjY2VzcycpfTtcbiAgICBgLFxuICAgIHdhcm5pbmc6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCd3YXJuaW5nJyl9O1xuICAgIGAsXG4gICAgZGFuZ2VyOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignZGFuZ2VyJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "au3u3u-transparent", + "next": undefined, + "styles": "background-color:transparent;;label:transparent;", + "toString": [Function], + }, + "warning": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9jb2xvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRWdCIiwiZmlsZSI6Il9jb2xvci50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHNoYWRlLCB0aW50LCB1c2VFdWlUaGVtZSwgVXNlRXVpVGhlbWUgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcyc7XG5cbmV4cG9ydCBjb25zdCBCQUNLR1JPVU5EX0NPTE9SUyA9IFtcbiAgJ3RyYW5zcGFyZW50JyxcbiAgJ3BsYWluJyxcbiAgJ3N1YmR1ZWQnLFxuICAnYWNjZW50JyxcbiAgJ3ByaW1hcnknLFxuICAnc3VjY2VzcycsXG4gICd3YXJuaW5nJyxcbiAgJ2RhbmdlcicsXG5dIGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBFdWlCYWNrZ3JvdW5kQ29sb3IgPSB0eXBlb2YgQkFDS0dST1VORF9DT0xPUlNbbnVtYmVyXTtcblxuZXhwb3J0IGNvbnN0IGV1aUJhY2tncm91bmRDb2xvciA9IChcbiAgY29sb3I6IEV1aUJhY2tncm91bmRDb2xvcixcbiAgeyBldWlUaGVtZSwgY29sb3JNb2RlIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgZnVuY3Rpb24gdGludE9yU2hhZGUoY29sb3I6IHN0cmluZykge1xuICAgIHJldHVybiBjb2xvck1vZGUgPT09ICdEQVJLJyA/IHNoYWRlKGNvbG9yLCAwLjcpIDogdGludChjb2xvciwgMC45KTtcbiAgfVxuXG4gIHN3aXRjaCAoY29sb3IpIHtcbiAgICBjYXNlICd0cmFuc3BhcmVudCc6XG4gICAgICByZXR1cm4gJ3RyYW5zcGFyZW50JztcbiAgICBjYXNlICdwbGFpbic6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmVtcHR5U2hhZGU7XG4gICAgY2FzZSAnc3ViZHVlZCc6XG4gICAgICByZXR1cm4gZXVpVGhlbWUuY29sb3JzLmJvZHk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiB0aW50T3JTaGFkZShldWlUaGVtZS5jb2xvcnNbY29sb3JdKTtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvciA9IChjb2xvcjogRXVpQmFja2dyb3VuZENvbG9yKSA9PiB7XG4gIGNvbnN0IGV1aVRoZW1lID0gdXNlRXVpVGhlbWUoKTtcbiAgcmV0dXJuIGV1aUJhY2tncm91bmRDb2xvcihjb2xvciwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aUJhY2tncm91bmRDb2xvckNTUyA9ICgpID0+IHtcbiAgcmV0dXJuIHtcbiAgICB0cmFuc3BhcmVudDogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3RyYW5zcGFyZW50Jyl9O1xuICAgIGAsXG4gICAgcGxhaW46IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdwbGFpbicpfTtcbiAgICBgLFxuICAgIHN1YmR1ZWQ6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCdzdWJkdWVkJyl9O1xuICAgIGAsXG4gICAgYWNjZW50OiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignYWNjZW50Jyl9O1xuICAgIGAsXG4gICAgcHJpbWFyeTogY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt1c2VFdWlCYWNrZ3JvdW5kQ29sb3IoJ3ByaW1hcnknKX07XG4gICAgYCxcbiAgICBzdWNjZXNzOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignc3VjY2VzcycpfTtcbiAgICBgLFxuICAgIHdhcm5pbmc6IGNzc2BcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dXNlRXVpQmFja2dyb3VuZENvbG9yKCd3YXJuaW5nJyl9O1xuICAgIGAsXG4gICAgZGFuZ2VyOiBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3VzZUV1aUJhY2tncm91bmRDb2xvcignZGFuZ2VyJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "yaax5t-warning", + "next": undefined, + "styles": "background-color:#fff9e8;;label:warning;", + "toString": [Function], + }, } `; diff --git a/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap b/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap index bbc2635e8e7..d0ffaa3f6a9 100644 --- a/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap +++ b/src/global_styling/mixins/__snapshots__/_padding.test.ts.snap @@ -2,127 +2,247 @@ exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side bottom 1`] = ` Object { - "l": " - padding-block-end: 24px; - ", - "m": " - padding-block-end: 16px; - ", + "l": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "66lmv7-l", + "next": undefined, + "styles": "padding-block-end:24px;;label:l;", + "toString": [Function], + }, + "m": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "eewpcm-m", + "next": undefined, + "styles": "padding-block-end:16px;;label:m;", + "toString": [Function], + }, "none": null, - "s": " - padding-block-end: 8px; - ", - "xl": " - padding-block-end: 32px; - ", - "xs": " - padding-block-end: 4px; - ", + "s": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "mp3qza-s", + "next": undefined, + "styles": "padding-block-end:8px;;label:s;", + "toString": [Function], + }, + "xl": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1EVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "s5jen3-xl", + "next": undefined, + "styles": "padding-block-end:32px;;label:xl;", + "toString": [Function], + }, + "xs": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "p5w0w9-xs", + "next": undefined, + "styles": "padding-block-end:4px;;label:xs;", + "toString": [Function], + }, } `; exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side horizontal 1`] = ` Object { - "l": " - padding-inline: 24px; - ", - "m": " - padding-inline: 16px; - ", + "l": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "zncuiy-l", + "next": undefined, + "styles": "padding-inline:24px;;label:l;", + "toString": [Function], + }, + "m": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "5jq3pd-m", + "next": undefined, + "styles": "padding-inline:16px;;label:m;", + "toString": [Function], + }, "none": null, - "s": " - padding-inline: 8px; - ", - "xl": " - padding-inline: 32px; - ", - "xs": " - padding-inline: 4px; - ", + "s": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1md7mm4-s", + "next": undefined, + "styles": "padding-inline:8px;;label:s;", + "toString": [Function], + }, + "xl": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1EVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "3mutbq-xl", + "next": undefined, + "styles": "padding-inline:32px;;label:xl;", + "toString": [Function], + }, + "xs": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "uvdwfd-xs", + "next": undefined, + "styles": "padding-inline:4px;;label:xs;", + "toString": [Function], + }, } `; exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side left 1`] = ` Object { - "l": " - padding-inline-start: 24px; - ", - "m": " - padding-inline-start: 16px; - ", + "l": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "17dlk88-l", + "next": undefined, + "styles": "padding-inline-start:24px;;label:l;", + "toString": [Function], + }, + "m": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "jj1oz9-m", + "next": undefined, + "styles": "padding-inline-start:16px;;label:m;", + "toString": [Function], + }, "none": null, - "s": " - padding-inline-start: 8px; - ", - "xl": " - padding-inline-start: 32px; - ", - "xs": " - padding-inline-start: 4px; - ", + "s": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "yvvcs7-s", + "next": undefined, + "styles": "padding-inline-start:8px;;label:s;", + "toString": [Function], + }, + "xl": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1EVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1t7oknk-xl", + "next": undefined, + "styles": "padding-inline-start:32px;;label:xl;", + "toString": [Function], + }, + "xs": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "j8j9a8-xs", + "next": undefined, + "styles": "padding-inline-start:4px;;label:xs;", + "toString": [Function], + }, } `; exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side right 1`] = ` Object { - "l": " - padding-inline-end: 24px; - ", - "m": " - padding-inline-end: 16px; - ", + "l": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "knnzi8-l", + "next": undefined, + "styles": "padding-inline-end:24px;;label:l;", + "toString": [Function], + }, + "m": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "qqwc7y-m", + "next": undefined, + "styles": "padding-inline-end:16px;;label:m;", + "toString": [Function], + }, "none": null, - "s": " - padding-inline-end: 8px; - ", - "xl": " - padding-inline-end: 32px; - ", - "xs": " - padding-inline-end: 4px; - ", + "s": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "k08c03-s", + "next": undefined, + "styles": "padding-inline-end:8px;;label:s;", + "toString": [Function], + }, + "xl": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1EVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "pj7v81-xl", + "next": undefined, + "styles": "padding-inline-end:32px;;label:xl;", + "toString": [Function], + }, + "xs": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1hcb6mg-xs", + "next": undefined, + "styles": "padding-inline-end:4px;;label:xs;", + "toString": [Function], + }, } `; exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side top 1`] = ` Object { - "l": " - padding-block-start: 24px; - ", - "m": " - padding-block-start: 16px; - ", + "l": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "y0i2bp-l", + "next": undefined, + "styles": "padding-block-start:24px;;label:l;", + "toString": [Function], + }, + "m": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "rnj43r-m", + "next": undefined, + "styles": "padding-block-start:16px;;label:m;", + "toString": [Function], + }, "none": null, - "s": " - padding-block-start: 8px; - ", - "xl": " - padding-block-start: 32px; - ", - "xs": " - padding-block-start: 4px; - ", + "s": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "122zvfz-s", + "next": undefined, + "styles": "padding-block-start:8px;;label:s;", + "toString": [Function], + }, + "xl": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1EVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "rc04eg-xl", + "next": undefined, + "styles": "padding-block-start:32px;;label:xl;", + "toString": [Function], + }, + "xs": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1b53zwr-xs", + "next": undefined, + "styles": "padding-block-start:4px;;label:xs;", + "toString": [Function], + }, } `; exports[`useEuiPaddingCSS hook returns the object of static background-color properties and each logical side vertical 1`] = ` Object { - "l": " - padding-block: 24px; - ", - "m": " - padding-block: 16px; - ", + "l": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1llitkm-l", + "next": undefined, + "styles": "padding-block:24px;;label:l;", + "toString": [Function], + }, + "m": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "13zxojc-m", + "next": undefined, + "styles": "padding-block:16px;;label:m;", + "toString": [Function], + }, "none": null, - "s": " - padding-block: 8px; - ", - "xl": " - padding-block: 32px; - ", - "xs": " - padding-block: 4px; - ", + "s": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDVSIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1uwa0dc-s", + "next": undefined, + "styles": "padding-block:8px;;label:s;", + "toString": [Function], + }, + "xl": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1EVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1xr7c1g-xl", + "next": undefined, + "styles": "padding-block:32px;;label:xl;", + "toString": [Function], + }, + "xs": Object { + "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9wYWRkaW5nLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDVyIsImZpbGUiOiJfcGFkZGluZy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgRWxhc3RpY3NlYXJjaCBCLlYuIGFuZC9vciBsaWNlbnNlZCB0byBFbGFzdGljc2VhcmNoIEIuVi4gdW5kZXIgb25lXG4gKiBvciBtb3JlIGNvbnRyaWJ1dG9yIGxpY2Vuc2UgYWdyZWVtZW50cy4gTGljZW5zZWQgdW5kZXIgdGhlIEVsYXN0aWMgTGljZW5zZVxuICogMi4wIGFuZCB0aGUgU2VydmVyIFNpZGUgUHVibGljIExpY2Vuc2UsIHYgMTsgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHRcbiAqIGluIGNvbXBsaWFuY2Ugd2l0aCwgYXQgeW91ciBlbGVjdGlvbiwgdGhlIEVsYXN0aWMgTGljZW5zZSAyLjAgb3IgdGhlIFNlcnZlclxuICogU2lkZSBQdWJsaWMgTGljZW5zZSwgdiAxLlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUV1aVRoZW1lLCBVc2VFdWlUaGVtZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RoZW1lJztcbmltcG9ydCB7IGxvZ2ljYWxTaWRlLCBMb2dpY2FsU2lkZXMgfSBmcm9tICcuLi9mdW5jdGlvbnMnO1xuXG5leHBvcnQgY29uc3QgUEFERElOR19TSVpFUyA9IFsnbm9uZScsICd4cycsICdzJywgJ20nLCAnbCcsICd4bCddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgRXVpUGFkZGluZ1NpemUgPSB0eXBlb2YgUEFERElOR19TSVpFU1tudW1iZXJdO1xuXG5leHBvcnQgY29uc3QgZXVpUGFkZGluZ1NpemUgPSAoXG4gIHNpemU6IEV1aVBhZGRpbmdTaXplLFxuICB7IGV1aVRoZW1lIH06IFVzZUV1aVRoZW1lXG4pID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnbm9uZSc6XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplLmJhc2U7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBldWlUaGVtZS5zaXplW3NpemVdO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRXVpUGFkZGluZ1NpemUgPSAoc2l6ZTogRXVpUGFkZGluZ1NpemUpID0+IHtcbiAgY29uc3QgZXVpVGhlbWUgPSB1c2VFdWlUaGVtZSgpO1xuICByZXR1cm4gZXVpUGFkZGluZ1NpemUoc2l6ZSwgZXVpVGhlbWUpO1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUV1aVBhZGRpbmdDU1MgPSAoc2lkZT86IExvZ2ljYWxTaWRlcykgPT4ge1xuICBjb25zdCBwcm9wZXJ0eSA9IHNpZGUgPyBgcGFkZGluZy0ke2xvZ2ljYWxTaWRlW3NpZGVdfWAgOiAncGFkZGluZyc7XG5cbiAgcmV0dXJuIHtcbiAgICBub25lOiBudWxsLFxuICAgIHhzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgneHMnKX07XG4gICAgYCxcbiAgICBzOiBjc3NgXG4gICAgICAke3Byb3BlcnR5fTogJHt1c2VFdWlQYWRkaW5nU2l6ZSgncycpfTtcbiAgICBgLFxuICAgIG06IGNzc2BcbiAgICAgICR7cHJvcGVydHl9OiAke3VzZUV1aVBhZGRpbmdTaXplKCdtJyl9O1xuICAgIGAsXG4gICAgbDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ2wnKX07XG4gICAgYCxcbiAgICB4bDogY3NzYFxuICAgICAgJHtwcm9wZXJ0eX06ICR7dXNlRXVpUGFkZGluZ1NpemUoJ3hsJyl9O1xuICAgIGAsXG4gIH07XG59O1xuIl19 */", + "name": "1nnb98s-xs", + "next": undefined, + "styles": "padding-block:4px;;label:xs;", + "toString": [Function], + }, } `; diff --git a/src/global_styling/mixins/_color.ts b/src/global_styling/mixins/_color.ts index 48757ca9da3..5fd12430614 100644 --- a/src/global_styling/mixins/_color.ts +++ b/src/global_styling/mixins/_color.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { css } from '@emotion/react'; import { shade, tint, useEuiTheme, UseEuiTheme } from '../../services'; export const BACKGROUND_COLORS = [ @@ -48,28 +49,28 @@ export const useEuiBackgroundColor = (color: EuiBackgroundColor) => { export const useEuiBackgroundColorCSS = () => { return { - transparent: ` + transparent: css` background-color: ${useEuiBackgroundColor('transparent')}; `, - plain: ` + plain: css` background-color: ${useEuiBackgroundColor('plain')}; `, - subdued: ` + subdued: css` background-color: ${useEuiBackgroundColor('subdued')}; `, - accent: ` + accent: css` background-color: ${useEuiBackgroundColor('accent')}; `, - primary: ` + primary: css` background-color: ${useEuiBackgroundColor('primary')}; `, - success: ` + success: css` background-color: ${useEuiBackgroundColor('success')}; `, - warning: ` + warning: css` background-color: ${useEuiBackgroundColor('warning')}; `, - danger: ` + danger: css` background-color: ${useEuiBackgroundColor('danger')}; `, }; diff --git a/src/global_styling/mixins/_padding.ts b/src/global_styling/mixins/_padding.ts index 2ec4199c9b8..48128668e68 100644 --- a/src/global_styling/mixins/_padding.ts +++ b/src/global_styling/mixins/_padding.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { css } from '@emotion/react'; import { useEuiTheme, UseEuiTheme } from '../../services/theme'; import { logicalSide, LogicalSides } from '../functions'; @@ -36,19 +37,19 @@ export const useEuiPaddingCSS = (side?: LogicalSides) => { return { none: null, - xs: ` + xs: css` ${property}: ${useEuiPaddingSize('xs')}; `, - s: ` + s: css` ${property}: ${useEuiPaddingSize('s')}; `, - m: ` + m: css` ${property}: ${useEuiPaddingSize('m')}; `, - l: ` + l: css` ${property}: ${useEuiPaddingSize('l')}; `, - xl: ` + xl: css` ${property}: ${useEuiPaddingSize('xl')}; `, }; From 92339760f15bb471e9c2f2c45136cfd1be202546 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Mon, 9 May 2022 11:39:43 -0400 Subject: [PATCH 08/19] [Page Template Feature] Updating EuiPageHeader to use the same paradigm as EuiPageSection (#5857) * [EuiPageHeader] Refactoring to support same `bottomBorder`, `restrictWidth` and `paddingSize` props as EuiPageSection * Converted EuiPageHeaderContent to Emotion * Consolidate more styles including ensuring max-width is applied as `style` tag --- .../page/components/page_configurations.tsx | 8 +- .../views/page/components/page_section.tsx | 13 +- .../src/views/page_header/page_header.tsx | 1 - .../page_header/page_header_breadcrumbs.tsx | 1 - .../page_header_breadcrumbs_return.tsx | 1 - .../views/page_header/page_header_custom.tsx | 2 +- .../views/page_header/page_header_example.js | 14 +- .../views/page_header/page_header_tabs.tsx | 1 - .../page_header/page_header_tabs_title.tsx | 1 - .../__snapshots__/page_template.test.tsx.snap | 66 ++++- src/components/page/_index.scss | 1 - src/components/page/_page.scss | 4 - src/components/page/_restrict_width.ts | 43 +++- .../__snapshots__/page_header.test.tsx.snap | 235 ++++++++++++------ .../page_header_content.test.tsx.snap | 190 +++++++------- src/components/page/page_header/_index.scss | 3 - .../page/page_header/_page_header.scss | 78 ------ .../page_header/_page_header_content.scss | 15 -- .../page_header/_page_header_section.scss | 26 -- .../page/page_header/page_header.styles.ts | 25 ++ .../page/page_header/page_header.test.tsx | 14 ++ .../page/page_header/page_header.tsx | 113 ++++----- .../page_header/page_header_content.styles.ts | 57 +++++ .../page/page_header/page_header_content.tsx | 110 +++++++- src/components/tabs/_tabs.scss | 2 + .../__snapshots__/_padding.test.ts.snap | 60 ++--- src/global_styling/mixins/_breakpoint.ts | 29 +++ src/global_styling/mixins/_padding.ts | 14 +- src/global_styling/mixins/index.ts | 1 + upcoming_changelogs/5857.md | 6 + 30 files changed, 677 insertions(+), 457 deletions(-) delete mode 100644 src/components/page/page_header/_index.scss delete mode 100644 src/components/page/page_header/_page_header.scss delete mode 100644 src/components/page/page_header/_page_header_content.scss delete mode 100644 src/components/page/page_header/_page_header_section.scss create mode 100644 src/components/page/page_header/page_header.styles.ts create mode 100644 src/components/page/page_header/page_header_content.styles.ts create mode 100644 src/global_styling/mixins/_breakpoint.ts create mode 100644 upcoming_changelogs/5857.md diff --git a/src-docs/src/views/page/components/page_configurations.tsx b/src-docs/src/views/page/components/page_configurations.tsx index 226b3fb0a98..07fb57751e7 100644 --- a/src-docs/src/views/page/components/page_configurations.tsx +++ b/src-docs/src/views/page/components/page_configurations.tsx @@ -31,9 +31,11 @@ export default ({ {pageHeader && ( - - - + )} {emptyPrompt ? ( diff --git a/src-docs/src/views/page/components/page_section.tsx b/src-docs/src/views/page/components/page_section.tsx index 768cd6cd24f..59c1f981e45 100644 --- a/src-docs/src/views/page/components/page_section.tsx +++ b/src-docs/src/views/page/components/page_section.tsx @@ -18,12 +18,13 @@ export default ({ return ( <> - - - + ( ( ( ( - +

Page title

diff --git a/src-docs/src/views/page_header/page_header_example.js b/src-docs/src/views/page_header/page_header_example.js index 70190f8b84f..1589651bbaf 100644 --- a/src-docs/src/views/page_header/page_header_example.js +++ b/src-docs/src/views/page_header/page_header_example.js @@ -65,7 +65,7 @@ export const PageHeaderExample = { An additional prop rightSideItems allows for a simple array of nodes which will layout in a flexbox row. This is commonly used for adding multiple buttons, of - which, at least one should be primary (or{' '} + which, at least one should be primary (adding{' '} {'fill="true"'}). These items are also displayed in reverse order so that the first and primary array item will be displayed on the far right. @@ -99,12 +99,10 @@ export const PageHeaderExample = { EuiTab {' '} objects using the label key for the tab content. - When displaying tabs it is recommended to also apply the{' '} - bottomBorder prop (on the{' '} - EuiPageHeader component not through{' '} - tabsProps) to create separation of the header and - content. You'll still need to manage the page content and - selected tab in your own instance. + When displaying tabs, the bottomBorder prop will + be enforced to create separation of the header and content. + You'll still need to manage the page content and selected tab + in your own instance.

), @@ -125,7 +123,7 @@ export const PageHeaderExample = { pageTitle, EuiPageHeader will promote those tabs as if they are the page title. This means that any description or children{' '} - will sit below the tabs and should be describing + will sit below the tabs and should used to describe the currently selected tab.

diff --git a/src-docs/src/views/page_header/page_header_tabs.tsx b/src-docs/src/views/page_header/page_header_tabs.tsx index 48ab179dfca..28dc57644b2 100644 --- a/src-docs/src/views/page_header/page_header_tabs.tsx +++ b/src-docs/src/views/page_header/page_header_tabs.tsx @@ -4,7 +4,6 @@ import { EuiPageHeader } from '../../../../src/components'; export default () => ( (
+ > +
+
+
+
+
+
@@ -475,10 +487,23 @@ exports[`EuiPageTemplate template centeredContent is rendered with pageHeader 1` >
+ > +
+
+
+
+
+
+ > +
+
+
+
+
+
+ > +
+
+
+
+
+
.euiPageHeader { - margin-bottom: $amount; - } } } diff --git a/src/components/page/_restrict_width.ts b/src/components/page/_restrict_width.ts index c267229eea1..c79d95be9a0 100644 --- a/src/components/page/_restrict_width.ts +++ b/src/components/page/_restrict_width.ts @@ -11,10 +11,6 @@ * This is file contains the type specific to that prop and a helper * function for creating the corresponding classNames and style tags * based on the consumer's configuration - * - * @param {restrictWidth} boolean | number | string The prop value - * @param {style} CSSProperties An object of style attributes if provided - * @returns {{widthClassName: string, newStyle: CSSProperties}} Returns an object with keys for the class name to append to the component's class and the updated style props */ import { CSSProperties } from 'react'; @@ -25,7 +21,7 @@ export const PAGE_MAX_WIDTH: CSSProperties['maxWidth'] = '1200px'; export type _EuiPageRestrictWidth = { /** * Sets the max-width of the page, - * set to `true` to use the default size of `1000px (1200 for Amsterdam)`, + * set to `true` to use the default size of `1200px`, * set to `false` to not restrict the width, * set to a number for a custom width in px, * set to a string for a custom width in custom measurement. @@ -33,19 +29,50 @@ export type _EuiPageRestrictWidth = { restrictWidth?: boolean | number | string; }; +/** + * This function calculates the correct class name and combined styles + * based on the `restrictWidth` value passed in + * + * @param restrictWidth `boolean | number | string` The prop value + * @param style `CSSProperties` An object of style attributes if provided + * @returns An object with keys for the `widthClassName` to append to the component's class and the updated `newStyle` props + */ export function setPropsForRestrictedPageWidth( restrictWidth: _EuiPageRestrictWidth['restrictWidth'], style?: CSSProperties -): { widthClassName?: string; newStyle?: CSSProperties } { +): { widthClassName?: string; newStyle: CSSProperties } { let widthClassName; - let newStyle; + const newStyle = { ...style }; if (restrictWidth === true) { widthClassName = 'restrictWidth-default'; } else if (restrictWidth !== false) { widthClassName = 'restrictWidth-custom'; - newStyle = { ...style, maxWidth: restrictWidth }; + newStyle.maxWidth = restrictWidth; } return { widthClassName, newStyle }; } + +/** + * This function calculates the correct just the combined styles + * based on the `restrictWidth` value passed in + * + * @param restrictWidth `boolean | number | string` The prop value + * @param style `CSSProperties` An object of style attributes if provided + * @returns An object of the updated `style` props + */ +export function setStyleForRestrictedPageWidth( + restrictWidth: _EuiPageRestrictWidth['restrictWidth'], + style?: CSSProperties +): CSSProperties { + const newStyle = { ...style }; + + if (restrictWidth === true) { + newStyle.maxWidth = PAGE_MAX_WIDTH; + } else if (restrictWidth !== false) { + newStyle.maxWidth = restrictWidth; + } + + return newStyle; +} diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 7340b360625..a4608141771 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -3,19 +3,27 @@ exports[`EuiPageHeader is rendered 1`] = `
- Anything +
+
+ Anything +
+
`; exports[`EuiPageHeader props alignItems bottom is rendered 1`] = `
`; +exports[`EuiPageHeader props bottomBorder is rendered as extended 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`EuiPageHeader props bottomBorder is rendered as true 1`] = ` +
+
+
+
+
+
+
+`; + exports[`EuiPageHeader props page content props are passed down is rendered 1`] = `
+`; + +exports[`EuiPageHeader props responsive is rendered as false 1`] = ` +
+
-

- Anything -

-
-
- - -
`; -exports[`EuiPageHeader props responsive is rendered as false 1`] = ` -
-`; - exports[`EuiPageHeader props responsive is rendered as reverse 1`] = `
+ class="euiPageHeader css-1ef1zro-euiPageHeader" +> +
+
+
+
+
+
`; exports[`EuiPageHeader props restrictWidth is rendered as custom 1`] = `
+ class="euiPageHeader css-1ef1zro-euiPageHeader" +> +
+
+
+
+
+
`; exports[`EuiPageHeader props restrictWidth is rendered as true 1`] = `
+ class="euiPageHeader css-1ef1zro-euiPageHeader" +> +
+
+
+
+
+
`; diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index 3e604d39a8d..fdf6219bc49 100644 --- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -3,11 +3,11 @@ exports[`EuiPageHeaderContent is rendered 1`] = `