@salutejs/plasma-new-hope 0.263.0-canary.1763.13280535388.0 → 0.263.0-dev.0

package/styled-components/cjs/examples/plasma_web/components/Popover/Popover.stories.tsx

@@ -8,6 +8,8 @@ import { WithTheme } from '../../../_helpers';
 
 import { Popover } from './Popover';
 
+import './style.css';
+
 const meta: Meta<typeof Popover> = {
     title: 'web/Overlay/Popover',
     decorators: [WithTheme],
@@ -80,7 +82,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
 const StyledContent = styled.div`
     background: var(--surface-solid-tertiary);
     padding: 1rem;
-    border-radius: 0.5rem;
+    border-radius: var(--popover-border-radius);
 
     display: flex;
     flex-direction: column;

package/styled-components/cjs/examples/plasma_web/components/Popover/style.css

@@ -0,0 +1,4 @@
+.popover-root {
+    --popover-border-radius: 0.5rem;
+    border-radius: var(--popover-border-radius);
+}

package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.config.js

@@ -23,20 +23,13 @@ var config = exports.config = {
      * Вид контрола.
      */
     view: {
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
-      // deprecated
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
-      // deprecated
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
-      // deprecated
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
-      // deprecated
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
-      // deprecated
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
       positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
-      // deprecated
       warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
-      // deprecated
       negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.stories.tsx

@@ -3,10 +3,12 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { RadioGroup } from '../../../../components/Radiobox';
-import { WithTheme } from '../../../_helpers';
+import { RadioGroup, radioboxConfig } from '../../../../components/Radiobox';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
+import { config } from './Radiobox.config';
 import { Radiobox } from './Radiobox';
 
 const onChange = action('onChange');
@@ -17,20 +19,7 @@ const meta: Meta<typeof Radiobox> = {
     title: 'web/Data Entry/Radiobox',
     decorators: [WithTheme],
     component: Radiobox,
-    argTypes: {
-        view: {
-            options: ['accent'],
-            control: {
-                type: 'radio',
-            },
-        },
-        size: {
-            options: ['m', 's'],
-            control: {
-                type: 'radio',
-            },
-        },
-    },
+    argTypes: argTypesFromConfig(mergeConfig(radioboxConfig, config)),
     args: {
         view: 'accent',
         size: 'm',

package/styled-components/es/components/Popover/Popover.styles.js

@@ -9,10 +9,10 @@ export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:inline-block;&.", "{position:absolute;top:0;left:0;width:100%;height:100%;", "{width:100%;height:100%;display:block;}}"], classes.targetAsRef, StyledRoot);
 export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-tnpyex-2"
-})(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskImage), /*#__PURE__*/String(tokens.arrowBackground));
+})(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskImage, tokens.arrowBackground);
 export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-tnpyex-3"
-})(["position:absolute;z-index:", ";opacity:0;visibility:hidden;&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
+})(["position:absolute;z-index:", ";opacity:0;visibility:hidden;box-shadow:var(", ");&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
   var zIndex = _ref.zIndex;
   return zIndex || DEFAULT_Z_INDEX;
-}, classes.animate, classes.open, classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowHeight));
+}, tokens.boxShadow, classes.animate, classes.open, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight);

package/styled-components/es/components/Popover/Popover.tokens.js

@@ -8,6 +8,7 @@ export var classes = {
   animate: 'popover-animate'
 };
 export var tokens = {
+  boxShadow: '--plasma-popover-box-shadow',
   arrowMaskWidth: '--plasma-popover-arrow-mask-width',
   arrowMaskHeight: '--plasma-popover-arrow-mask-height',
   arrowMaskImage: '--plasma-popover-arrow-mask-image',

package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx

@@ -9,12 +9,6 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="Radiobox" />
 <PropsTable name="Radiobox" exclude={['css', 'focused']} />
 
-:::caution Устаревшие значения для свойства view
-Актуальным значением для свойства `view` - является `accent`. 
-
-Все остальные значения `deprecated` и будут удалены в ближайшее время! 
-:::
-
 ## Использование
 Компонент `Radiobox` может содержать лейбл и описание.
 

package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.config.js

@@ -6,7 +6,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
+      "default": /*#__PURE__*/css(["", ":var(--shadow-down-hard-m);", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.boxShadow, popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx

@@ -8,6 +8,8 @@ import { WithTheme } from '../../../_helpers';
 
 import { Popover } from './Popover';
 
+import './style.css';
+
 const meta: Meta<typeof Popover> = {
     title: 'b2c/Overlay/Popover',
     decorators: [WithTheme],
@@ -81,7 +83,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
 const StyledContent = styled.div`
     background: var(--surface-solid-tertiary);
     padding: 1rem;
-    border-radius: 0.5rem;
+    border-radius: var(--popover-border-radius);
 
     display: flex;
     flex-direction: column;

package/styled-components/es/examples/plasma_b2c/components/Popover/style.css

@@ -0,0 +1,4 @@
+.popover-root {
+    --popover-border-radius: 0.5rem;
+    border-radius: var(--popover-border-radius);
+}

package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js

@@ -17,20 +17,13 @@ export var config = {
      * Вид контрола.
      */
     view: {
-      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
       positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx

@@ -3,10 +3,12 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { RadioGroup } from '../../../../components/Radiobox';
-import { WithTheme } from '../../../_helpers';
+import { RadioGroup, radioboxConfig } from '../../../../components/Radiobox';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
+import { config } from './Radiobox.config';
 import { Radiobox } from './Radiobox';
 
 const onChange = action('onChange');
@@ -17,20 +19,7 @@ const meta: Meta<typeof Radiobox> = {
     title: 'b2c/Data Entry/Radiobox',
     decorators: [WithTheme],
     component: Radiobox,
-    argTypes: {
-        view: {
-            options: ['accent'],
-            control: {
-                type: 'radio',
-            },
-        },
-        size: {
-            options: ['m', 's'],
-            control: {
-                type: 'radio',
-            },
-        },
-    },
+    argTypes: argTypesFromConfig(mergeConfig(radioboxConfig, config)),
     args: {
         view: 'accent',
         size: 'm',

package/styled-components/es/examples/plasma_web/components/Popover/Popover.config.js

@@ -6,7 +6,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
+      "default": /*#__PURE__*/css(["", ":var(--shadow-down-hard-m);", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.boxShadow, popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Popover/Popover.stories.tsx

@@ -8,6 +8,8 @@ import { WithTheme } from '../../../_helpers';
 
 import { Popover } from './Popover';
 
+import './style.css';
+
 const meta: Meta<typeof Popover> = {
     title: 'web/Overlay/Popover',
     decorators: [WithTheme],
@@ -80,7 +82,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
 const StyledContent = styled.div`
     background: var(--surface-solid-tertiary);
     padding: 1rem;
-    border-radius: 0.5rem;
+    border-radius: var(--popover-border-radius);
 
     display: flex;
     flex-direction: column;

package/styled-components/es/examples/plasma_web/components/Popover/style.css

@@ -0,0 +1,4 @@
+.popover-root {
+    --popover-border-radius: 0.5rem;
+    border-radius: var(--popover-border-radius);
+}

package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js

@@ -17,20 +17,13 @@ export var config = {
      * Вид контрола.
      */
     view: {
-      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
       positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor),
-      // deprecated
       negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor)
     },
     disabled: {

package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.stories.tsx

@@ -3,10 +3,12 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { RadioGroup } from '../../../../components/Radiobox';
-import { WithTheme } from '../../../_helpers';
+import { RadioGroup, radioboxConfig } from '../../../../components/Radiobox';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { Link } from '../Link/Link';
 
+import { config } from './Radiobox.config';
 import { Radiobox } from './Radiobox';
 
 const onChange = action('onChange');
@@ -17,20 +19,7 @@ const meta: Meta<typeof Radiobox> = {
     title: 'web/Data Entry/Radiobox',
     decorators: [WithTheme],
     component: Radiobox,
-    argTypes: {
-        view: {
-            options: ['accent'],
-            control: {
-                type: 'radio',
-            },
-        },
-        size: {
-            options: ['m', 's'],
-            control: {
-                type: 'radio',
-            },
-        },
-    },
+    argTypes: argTypesFromConfig(mergeConfig(radioboxConfig, config)),
     args: {
         view: 'accent',
         size: 'm',

package/types/components/Popover/Popover.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,UAAU,qKAItB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAgBzB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAcvB,CAAC;AAEF,eAAO,MAAM,aAAa,2KAmJzB,CAAC"}
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,UAAU,qKAItB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAgBzB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAcvB,CAAC;AAEF,eAAO,MAAM,aAAa,2KAqJzB,CAAC"}

package/types/components/Popover/Popover.tokens.d.ts

@@ -8,6 +8,7 @@ export declare const classes: {
     animate: string;
 };
 export declare const tokens: {
+    boxShadow: string;
     arrowMaskWidth: string;
     arrowMaskHeight: string;
     arrowMaskImage: string;

package/types/components/Popover/Popover.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC"}
+{"version":3,"file":"Popover.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;CASlB,CAAC"}

package/types/examples/plasma_b2c/components/Popover/Popover.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAgBlB,CAAC"}
+{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAkBlB,CAAC"}

package/types/examples/plasma_b2c/components/Radiobox/Radiobox.config.d.ts

@@ -15,11 +15,11 @@ export declare const config: {
          * Вид контрола.
          */
         view: {
-            accent: import("@linaria/core").LinariaClassName;
             default: import("@linaria/core").LinariaClassName;
             secondary: import("@linaria/core").LinariaClassName;
             tertiary: import("@linaria/core").LinariaClassName;
             paragraph: import("@linaria/core").LinariaClassName;
+            accent: import("@linaria/core").LinariaClassName;
             positive: import("@linaria/core").LinariaClassName;
             warning: import("@linaria/core").LinariaClassName;
             negative: import("@linaria/core").LinariaClassName;

package/types/examples/plasma_b2c/components/Radiobox/Radiobox.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radiobox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Radiobox/Radiobox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;QAMX;;WAEG;;;;;QA+CH;;WAEG;;;;;;;;;;;;;;;;;;CA6EV,CAAC"}
+{"version":3,"file":"Radiobox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Radiobox/Radiobox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;QAMX;;WAEG;;;;;QA+CH;;WAEG;;;;;;;;;;;;;;;;;;CAsEV,CAAC"}

package/types/examples/plasma_b2c/components/Radiobox/Radiobox.d.ts

@@ -5,11 +5,11 @@ export declare const Radiobox: import("react").FunctionComponent<import("../../.
         m: import("@linaria/core").LinariaClassName;
     };
     view: {
-        accent: import("@linaria/core").LinariaClassName;
         default: import("@linaria/core").LinariaClassName;
         secondary: import("@linaria/core").LinariaClassName;
         tertiary: import("@linaria/core").LinariaClassName;
         paragraph: import("@linaria/core").LinariaClassName;
+        accent: import("@linaria/core").LinariaClassName;
         positive: import("@linaria/core").LinariaClassName;
         warning: import("@linaria/core").LinariaClassName;
         negative: import("@linaria/core").LinariaClassName;

package/types/examples/plasma_web/components/Popover/Popover.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAgBlB,CAAC"}
+{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAkBlB,CAAC"}

package/types/examples/plasma_web/components/Radiobox/Radiobox.config.d.ts

@@ -15,11 +15,11 @@ export declare const config: {
          * Вид контрола.
          */
         view: {
-            accent: import("@linaria/core").LinariaClassName;
             default: import("@linaria/core").LinariaClassName;
             secondary: import("@linaria/core").LinariaClassName;
             tertiary: import("@linaria/core").LinariaClassName;
             paragraph: import("@linaria/core").LinariaClassName;
+            accent: import("@linaria/core").LinariaClassName;
             positive: import("@linaria/core").LinariaClassName;
             warning: import("@linaria/core").LinariaClassName;
             negative: import("@linaria/core").LinariaClassName;

package/types/examples/plasma_web/components/Radiobox/Radiobox.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radiobox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Radiobox/Radiobox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;QAMX;;WAEG;;;;;QA+CH;;WAEG;;;;;;;;;;;;;;;;;;CA6EV,CAAC"}
+{"version":3,"file":"Radiobox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Radiobox/Radiobox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;QAMX;;WAEG;;;;;QA+CH;;WAEG;;;;;;;;;;;;;;;;;;CAsEV,CAAC"}

package/types/examples/plasma_web/components/Radiobox/Radiobox.d.ts

@@ -5,11 +5,11 @@ export declare const Radiobox: import("react").FunctionComponent<import("../../.
         m: import("@linaria/core").LinariaClassName;
     };
     view: {
-        accent: import("@linaria/core").LinariaClassName;
         default: import("@linaria/core").LinariaClassName;
         secondary: import("@linaria/core").LinariaClassName;
         tertiary: import("@linaria/core").LinariaClassName;
         paragraph: import("@linaria/core").LinariaClassName;
+        accent: import("@linaria/core").LinariaClassName;
         positive: import("@linaria/core").LinariaClassName;
         warning: import("@linaria/core").LinariaClassName;
         negative: import("@linaria/core").LinariaClassName;

package/cjs/components/Popover/Popover.styles_15l7isk.css

@@ -1,4 +0,0 @@
-.s1g1xbt5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
-.s12xwbyh{display:inline-block;}.s12xwbyh.popover-target-as-ref{position:absolute;top:0;left:0;width:100%;height:100%;}.s12xwbyh.popover-target-as-ref .s1g1xbt5{width:100%;height:100%;display:block;}
-.s1pd4d8a{width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);}.s1pd4d8a::before{position:absolute;width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);-webkit-mask-image:var(--plasma-popover-arrow-mask-image);mask-image:var(--plasma-popover-arrow-mask-image);background:var(--plasma-popover-arrow-background);content:'';-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
-.s16xlixz{position:absolute;z-index:var(--s16xlixz-0);opacity:0;visibility:hidden;}.s16xlixz.popover-animate{-webkit-transition:opacity 0.2s ease-in-out,-webkit-transform 0s ease-in-out,visibility 0.2s;-webkit-transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}.s16xlixz.popover-open{opacity:1;visibility:visible;}.s16xlixz:before{content:'';display:block;position:absolute;background:transparent;}.s16xlixz[data-popper-placement^='top'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left'] > .popover-arrow{right:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='left'] > .popover-arrow::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.s16xlixz[data-popper-placement^='right'] > .popover-arrow{left:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='right'] > .popover-arrow::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.s16xlixz[data-popper-placement^='top-start'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top-end'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left-start'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-start'] > .popover-arrow{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='left-end'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-end'] > .popover-arrow{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top']:before,.s16xlixz[data-popper-placement^='top-start']:before,.s16xlixz[data-popper-placement^='top-end']:before{top:unset;left:0;right:0;height:var(--plasma-popover-arrow-height);bottom:calc(-1 * var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom']:before,.s16xlixz[data-popper-placement^='bottom-start']:before,.s16xlixz[data-popper-placement^='bottom-end']:before{top:calc(-1 * var(--plasma-popover-arrow-height));left:0;right:0;bottom:var(--plasma-popover-arrow-height);height:var(--plasma-popover-arrow-height);}.s16xlixz[data-popper-placement^='left']:before,.s16xlixz[data-popper-placement^='left-start']:before,.s16xlixz[data-popper-placement^='left-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;right:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}.s16xlixz[data-popper-placement^='right']:before,.s16xlixz[data-popper-placement^='right-start']:before,.s16xlixz[data-popper-placement^='right-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;left:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}

package/es/components/Popover/Popover.styles_15l7isk.css

@@ -1,4 +0,0 @@
-.s1g1xbt5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
-.s12xwbyh{display:inline-block;}.s12xwbyh.popover-target-as-ref{position:absolute;top:0;left:0;width:100%;height:100%;}.s12xwbyh.popover-target-as-ref .s1g1xbt5{width:100%;height:100%;display:block;}
-.s1pd4d8a{width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);}.s1pd4d8a::before{position:absolute;width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);-webkit-mask-image:var(--plasma-popover-arrow-mask-image);mask-image:var(--plasma-popover-arrow-mask-image);background:var(--plasma-popover-arrow-background);content:'';-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
-.s16xlixz{position:absolute;z-index:var(--s16xlixz-0);opacity:0;visibility:hidden;}.s16xlixz.popover-animate{-webkit-transition:opacity 0.2s ease-in-out,-webkit-transform 0s ease-in-out,visibility 0.2s;-webkit-transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}.s16xlixz.popover-open{opacity:1;visibility:visible;}.s16xlixz:before{content:'';display:block;position:absolute;background:transparent;}.s16xlixz[data-popper-placement^='top'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left'] > .popover-arrow{right:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='left'] > .popover-arrow::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.s16xlixz[data-popper-placement^='right'] > .popover-arrow{left:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='right'] > .popover-arrow::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.s16xlixz[data-popper-placement^='top-start'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top-end'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left-start'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-start'] > .popover-arrow{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='left-end'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-end'] > .popover-arrow{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top']:before,.s16xlixz[data-popper-placement^='top-start']:before,.s16xlixz[data-popper-placement^='top-end']:before{top:unset;left:0;right:0;height:var(--plasma-popover-arrow-height);bottom:calc(-1 * var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom']:before,.s16xlixz[data-popper-placement^='bottom-start']:before,.s16xlixz[data-popper-placement^='bottom-end']:before{top:calc(-1 * var(--plasma-popover-arrow-height));left:0;right:0;bottom:var(--plasma-popover-arrow-height);height:var(--plasma-popover-arrow-height);}.s16xlixz[data-popper-placement^='left']:before,.s16xlixz[data-popper-placement^='left-start']:before,.s16xlixz[data-popper-placement^='left-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;right:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}.s16xlixz[data-popper-placement^='right']:before,.s16xlixz[data-popper-placement^='right-start']:before,.s16xlixz[data-popper-placement^='right-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;left:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}