@salutejs/plasma-new-hope 0.324.1-canary.1997.15290839769.0 → 0.324.1-canary.1999.15295614542.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/cjs/components/Notification/Notification.css +12 -12
  2. package/cjs/components/Notification/Notification.js +5 -1
  3. package/cjs/components/Notification/Notification.js.map +1 -1
  4. package/cjs/components/Notification/Notification.styles.js +63 -48
  5. package/cjs/components/Notification/Notification.styles.js.map +1 -1
  6. package/cjs/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  7. package/cjs/components/Notification/Notification.types.js.map +1 -1
  8. package/cjs/components/Notification/NotificationsProvider.css +11 -11
  9. package/cjs/components/Notification/variations/_layout/base.js +1 -1
  10. package/cjs/components/Notification/variations/_layout/base.js.map +1 -1
  11. package/cjs/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  12. package/cjs/index.css +12 -12
  13. package/emotion/cjs/components/Notification/Notification.js +5 -1
  14. package/emotion/cjs/components/Notification/Notification.styles.js +43 -36
  15. package/emotion/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  16. package/emotion/cjs/components/Notification/variations/_layout/base.js +1 -1
  17. package/emotion/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  18. package/emotion/cjs/examples/fixtures/Notification.js +1 -1
  19. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  20. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  21. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  22. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  23. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  24. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  25. package/emotion/es/components/Notification/Notification.js +5 -1
  26. package/emotion/es/components/Notification/Notification.styles.js +43 -36
  27. package/emotion/es/components/Notification/Notification.template-doc.mdx +44 -0
  28. package/emotion/es/components/Notification/variations/_layout/base.js +1 -1
  29. package/emotion/es/components/TextField/TextField.template-doc.mdx +16 -1
  30. package/emotion/es/examples/fixtures/Notification.js +1 -1
  31. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  32. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  33. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  34. package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  35. package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  36. package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  37. package/es/components/Notification/Notification.css +12 -12
  38. package/es/components/Notification/Notification.js +5 -1
  39. package/es/components/Notification/Notification.js.map +1 -1
  40. package/es/components/Notification/Notification.styles.js +63 -48
  41. package/es/components/Notification/Notification.styles.js.map +1 -1
  42. package/es/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  43. package/es/components/Notification/Notification.types.js.map +1 -1
  44. package/es/components/Notification/NotificationsProvider.css +11 -11
  45. package/es/components/Notification/variations/_layout/base.js +1 -1
  46. package/es/components/Notification/variations/_layout/base.js.map +1 -1
  47. package/es/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  48. package/es/index.css +12 -12
  49. package/package.json +2 -2
  50. package/styled-components/cjs/components/Notification/Notification.js +5 -1
  51. package/styled-components/cjs/components/Notification/Notification.styles.js +33 -26
  52. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  53. package/styled-components/cjs/components/Notification/variations/_layout/base.js +1 -1
  54. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  55. package/styled-components/cjs/examples/fixtures/Notification.js +1 -1
  56. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  57. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  58. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  59. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  60. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  61. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  62. package/styled-components/es/components/Notification/Notification.js +5 -1
  63. package/styled-components/es/components/Notification/Notification.styles.js +33 -26
  64. package/styled-components/es/components/Notification/Notification.template-doc.mdx +44 -0
  65. package/styled-components/es/components/Notification/variations/_layout/base.js +1 -1
  66. package/styled-components/es/components/TextField/TextField.template-doc.mdx +16 -1
  67. package/styled-components/es/examples/fixtures/Notification.js +1 -1
  68. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  69. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  70. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  71. package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  72. package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  73. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  74. package/types/components/Notification/Notification.d.ts.map +1 -1
  75. package/types/components/Notification/Notification.styles.d.ts +3 -1
  76. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  77. package/types/components/Notification/Notification.types.d.ts +9 -0
  78. package/types/components/Notification/Notification.types.d.ts.map +1 -1
  79. package/cjs/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
  80. package/es/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx CHANGED
@@ -1,13 +1,14 @@
1
1
  import React, { ComponentProps, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
- import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
4
+ import { IconPlaceholder, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
7
  import { IconCross, IconLock } from '../../../../components/_Icon';
8
8
  import type { PopoverPlacement } from '../Popover/Popover';
9
9
 
10
10
  import { TextField } from './TextField';
11
+ import { config } from './TextField.config';
11
12
 
12
13
  const onChange = action('onChange');
13
14
  const onFocus = action('onFocus');
@@ -15,8 +16,8 @@ const onBlur = action('onBlur');
15
16
  const onSearch = action('onSearch');
16
17
  const onChipsChange = action('onChipsChange');
17
18
 
18
- const sizes = ['l', 'm', 's', 'xs'];
19
- const views = ['default', 'positive', 'warning', 'negative'];
19
+ const { views, sizes } = getConfigVariations(config);
20
+
20
21
  const chipViews = ['default', 'secondary', 'accent', 'positive', 'warning', 'negative'];
21
22
  const hintViews = ['default'];
22
23
  const hintSizes = ['m', 's'];
@@ -63,6 +64,10 @@ const meta: Meta<typeof TextField> = {
63
64
  control: {
64
65
  type: 'select',
65
66
  },
67
+ if: {
68
+ arg: 'optional',
69
+ truthy: false,
70
+ },
66
71
  },
67
72
  required: {
68
73
  control: {
@@ -328,7 +333,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
328
333
  },
329
334
  parameters: {
330
335
  controls: {
331
- exclude: ['chipType'],
336
+ exclude: ['chipType', 'chipView'],
332
337
  },
333
338
  },
334
339
  render: (args) => <StoryDemo {...args} />,
package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx CHANGED
@@ -170,12 +170,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
170
170
  placement?: NotificationPlacement;
171
171
  };
172
172
 
173
- const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
173
+ const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
174
174
  const count = useRef(0);
175
175
  const handleClick = useCallback(() => {
176
176
  addNotification(
177
177
  {
178
178
  icon: <IconDisclosureRight color="inherit" />,
179
+ width,
180
+ maxWidth,
179
181
  ...rest,
180
182
  ...getNotificationProps(count.current),
181
183
  },
@@ -213,6 +215,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
213
215
  role: 'alert',
214
216
  layout: 'vertical',
215
217
  placement: 'bottom-right',
218
+ width: '',
219
+ maxWidth: '',
216
220
  },
217
221
  render: (args) => <StoryLiveDemo {...args} />,
218
222
  };
package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js CHANGED
@@ -8,12 +8,13 @@ export var config = {
8
8
  },
9
9
  variations: {
10
10
  view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--outline-transparent-primary);", ":var(--outline-transparent-primary-hover);", ":var(--surface-accent);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.clearPlaceholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColorFocus, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.textBeforeColor, tokens.textAfterColor, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
12
- positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-positive);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.clearPlaceholderColor, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColorFocus, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.textBeforeColor, tokens.textAfterColor, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
13
- warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-warning);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.clearPlaceholderColor, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColorFocus, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.textBeforeColor, tokens.textAfterColor, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
14
- negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-negative);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.clearPlaceholderColor, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColorFocus, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.textBeforeColor, tokens.textAfterColor, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
11
+ "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--outline-transparent-primary);", ":var(--outline-transparent-primary-hover);", ":var(--surface-accent);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColor, tokens.clearPlaceholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
12
+ positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColor, tokens.clearPlaceholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
13
+ warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColor, tokens.clearPlaceholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
14
+ negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColor, tokens.clearPlaceholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
15
15
  },
16
16
  size: {
17
+ xl: /*#__PURE__*/css(["", ":4rem;", ":1.3125rem 1.125rem;", ":0.375rem;", ":1rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem 0rem;", ":-0.0625rem 0rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.82rem -2.938rem auto auto;", ":0.82rem -2.063rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.8125rem 0 0.125rem 0;", ":1.813rem 0 0.813rem 0;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.125rem;", ":1rem;", ":0.625rem;", ":auto;", ":3.25rem;", ":0 0.75rem 0 1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":-0.25rem;", ":1.75rem auto auto -0.875rem;", ":1.75rem -0.875rem auto auto;", ":1.75rem -2.488rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.chipGap, tokens.chipMarginRight, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorLabelPlacementHintOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight),
17
18
  l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":-0.0625rem -0.438rem -0.0625rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.563rem -2.938rem auto auto;", ":0.563rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0 0.75rem 0 1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.5rem auto auto -0.875rem;", ":1.5rem -0.875rem auto auto;", ":1.5rem -2.488rem auto auto;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.rightContentWithHintMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight, tokens.textBeforeMargin, tokens.textAfterMargin),
18
19
  m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":-0.125rem -0.438rem -0.125rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.312rem -2.813rem auto auto;", ":0.312rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0 0.625rem 0 0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.6875rem auto auto;", ":1.25rem auto auto -0.875rem;", ":1.25rem -0.875rem auto auto;", ":1.25rem -2.488rem auto auto;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.rightContentWithHintMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight, tokens.textBeforeMargin, tokens.textAfterMargin),
19
20
  s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":-0.1875rem -0.438rem -0.1875rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.062rem -2.688rem auto auto;", ":0.062rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0 0.5rem 0 0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.3125rem auto auto -0.6875rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.063rem auto auto -0.75rem;", ":1.063rem -0.75rem auto auto;", ":1.063rem -2.238rem auto auto;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.rightContentWithHintMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight, tokens.textBeforeMargin, tokens.textAfterMargin),
@@ -35,7 +36,7 @@ export var config = {
35
36
  negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly)
36
37
  },
37
38
  hintView: {
38
- "default": /*#__PURE__*/css(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card);"], tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
39
+ "default": /*#__PURE__*/css(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card-brightness);"], tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
39
40
  },
40
41
  hintSize: {
41
42
  m: /*#__PURE__*/css(["", ":0.6875rem;", ":0.875rem;", ":0.6875rem;", ":0.875rem;", ":2.5rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":1.25rem;", ":1.25rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");", ":0.5rem;", ":0.625rem;"], tokens.tooltipPaddingTop, tokens.tooltipPaddingRight, tokens.tooltipPaddingBottom, tokens.tooltipPaddingLeft, tokens.tooltipMinHeight, tokens.tooltipBorderRadius, tokens.tooltipTextFontFamily, tokens.tooltipTextFontSize, tokens.tooltipTextFontStyle, tokens.tooltipTextFontWeight, tokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLineHeight, tokens.tooltipContentLeftMargin, tokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskImage, tokens.tooltipArrowHeight, tokens.tooltipArrowEdgeMargin),
@@ -45,7 +46,7 @@ export var config = {
45
46
  "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
46
47
  },
47
48
  readOnly: {
48
- "true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-primary);", ":var(--surface-clear);", ":var(--outline-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-primary);"], tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.borderColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly)
49
+ "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":0.4;", ":var(--text-primary);", ":var(--surface-clear);", ":var(--outline-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--surface-transparent-primary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.borderColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly)
49
50
  }
50
51
  }
51
52
  };
package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx CHANGED
@@ -1,13 +1,14 @@
1
1
  import React, { ComponentProps, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
- import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
4
+ import { IconPlaceholder, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
7
  import { IconCross, IconLock } from '../../../../components/_Icon';
8
8
  import type { PopoverPlacement } from '../Popover/Popover';
9
9
 
10
10
  import { TextField } from './TextField';
11
+ import { config } from './TextField.config';
11
12
 
12
13
  const onChange = action('onChange');
13
14
  const onFocus = action('onFocus');
@@ -15,14 +16,14 @@ const onBlur = action('onBlur');
15
16
  const onSearch = action('onSearch');
16
17
  const onChipsChange = action('onChipsChange');
17
18
 
18
- const sizes = ['l', 'm', 's', 'xs'];
19
- const views = ['default', 'positive', 'warning', 'negative'];
19
+ const { views, sizes } = getConfigVariations(config);
20
+
20
21
  const chipViews = ['default', 'secondary', 'accent', 'positive', 'warning', 'negative'];
21
22
  const hintViews = ['default'];
22
23
  const hintSizes = ['m', 's'];
23
24
  const hintTriggers = ['hover', 'click'];
24
- const hintTargetPlacements = ['outer', 'inner'];
25
25
  const labelPlacements = ['outer', 'inner'];
26
+ const hintTargetPlacements = ['outer', 'inner'];
26
27
  const placements: Array<PopoverPlacement> = [
27
28
  'top',
28
29
  'top-start',
@@ -63,6 +64,10 @@ const meta: Meta<typeof TextField> = {
63
64
  control: {
64
65
  type: 'select',
65
66
  },
67
+ if: {
68
+ arg: 'optional',
69
+ truthy: false,
70
+ },
66
71
  },
67
72
  required: {
68
73
  control: {
@@ -322,7 +327,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
322
327
  },
323
328
  parameters: {
324
329
  controls: {
325
- exclude: ['chipType'],
330
+ exclude: ['chipType', 'chipView'],
326
331
  },
327
332
  },
328
333
  render: (args) => <StoryDemo {...args} />,
package/types/components/Notification/Notification.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU1C,OAAO,EAAsB,iBAAiB,EAAW,MAAM,sBAAsB,CAAC;AActF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,KAAK,iBAAiB,EAAE,OAAO,CAAC,CAAC,6FA4G5F,CAAC;AAEP,eAAO,MAAM,kBAAkB;;;mBA9GQ,UAAU,cAAc,EAAE,KAAK,iBAAiB,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CAuIjG,CAAC"}
1
+ {"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU1C,OAAO,EAAsB,iBAAiB,EAAW,MAAM,sBAAsB,CAAC;AActF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,KAAK,iBAAiB,EAAE,OAAO,CAAC,CAAC,6FAgH5F,CAAC;AAEP,eAAO,MAAM,kBAAkB;;;mBAlHQ,UAAU,cAAc,EAAE,KAAK,iBAAiB,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CA2IjG,CAAC"}
package/types/components/Notification/Notification.styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import type { CSSProperties } from 'react';
2
2
  import { CloseIconType, IconPlacementType } from './Notification.types';
3
3
  export declare const StyledNotification: import("@linaria/core").LinariaClassName;
4
4
  export declare const CloseIconWrapper: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & ((Omit<import("react").ButtonHTMLAttributes<HTMLElement>, "value"> & Omit<import("react").AnchorHTMLAttributes<HTMLElement>, "type"> & import("../..").AsProps<any> & {
@@ -46,6 +46,8 @@ export declare const CloseIconWrapper: import("@linaria/react").StyledMeta & imp
46
46
  } & import("react").RefAttributes<HTMLButtonElement>))>;
47
47
  export declare const Wrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
48
48
  backgroundColor?: string | undefined;
49
+ width?: CSSProperties['width'];
50
+ maxWidth?: CSSProperties['maxWidth'];
49
51
  }>;
50
52
  export declare const ButtonsWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & IconPlacementType>;
51
53
  export declare const IconWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & IconPlacementType & {
package/types/components/Notification/Notification.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Notification.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.styles.ts"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAqC,MAAM,sBAAsB,CAAC;AAE3G,eAAO,MAAM,kBAAkB,0CAE9B,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAe5B,CAAC;AAEF,eAAO,MAAM,OAAO;;EAanB,CAAC;AAEF,eAAO,MAAM,cAAc,gKAW1B,CAAC;AAEF,eAAO,MAAM,WAAW;;EAevB,CAAC;AAEF,eAAO,MAAM,UAAU,gKActB,CAAC;AAEF,eAAO,MAAM,OAAO,gLAqBnB,CAAC;AAEF,eAAO,MAAM,WAAW;;EAUvB,CAAC;AAEF,eAAO,MAAM,aAAa;;EAUzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;cAA0B,OAAO;EAmG9D,CAAC;AAEF,eAAO,MAAM,UAAU;;EAOtB,CAAC"}
1
+ {"version":3,"file":"Notification.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAS3C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAqC,MAAM,sBAAsB,CAAC;AAE3G,eAAO,MAAM,kBAAkB,0CAE9B,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAe5B,CAAC;AAEF,eAAO,MAAM,OAAO;;YAER,aAAa,CAAC,OAAO,CAAC;eACnB,aAAa,CAAC,UAAU,CAAC;EAiBvC,CAAC;AAEF,eAAO,MAAM,cAAc,gKAW1B,CAAC;AAEF,eAAO,MAAM,WAAW;;EAevB,CAAC;AAEF,eAAO,MAAM,UAAU,gKActB,CAAC;AAEF,eAAO,MAAM,OAAO,gLAqBnB,CAAC;AAEF,eAAO,MAAM,WAAW;;EAUvB,CAAC;AAEF,eAAO,MAAM,aAAa;;EAUzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;cAA0B,OAAO;EAmG9D,CAAC;AAEF,eAAO,MAAM,UAAU;;EAOtB,CAAC"}
package/types/components/Notification/Notification.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { AsProps } from '@salutejs/plasma-core';
2
2
  import { HTMLAttributes, ReactNode } from 'react';
3
+ import type { CSSProperties } from 'react';
3
4
  import { ComponentConfig, PropsType, Variants } from '../../engines/types';
4
5
  import type { PopupPlacement } from '../Popup';
5
6
  export declare const layouts: {
@@ -81,6 +82,14 @@ export interface NotificationProps extends AsProps, Omit<HTMLAttributes<HTMLDivE
81
82
  * Цвет заголовка (по умолчанию берётся цвет из view)
82
83
  */
83
84
  backgroundColor?: string;
85
+ /**
86
+ * Свойства для управления шириной уведомления
87
+ */
88
+ width?: CSSProperties['width'];
89
+ /**
90
+ * Свойства для ограничения ширины уведомления
91
+ */
92
+ maxWidth?: CSSProperties['maxWidth'];
84
93
  /**
85
94
  * Callback при нажатии на кнопку закрытия.
86
95
  */
package/types/components/Notification/Notification.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,MAAM,OAAO,OAAO,CAAC;AAEtD,eAAO,MAAM,UAAU;;;CAGtB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,MAAM,OAAO,UAAU,CAAC;AAChE,oBAAY,qBAAqB,GAAG,cAAc,CAAC;AAEnD,oBAAY,UAAU,GAAG;IACrB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC5B,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC7C,CAAC;AAEF,oBAAY,aAAa,GAAG;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC7F;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F;;OAEG;IACH,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC"}
1
+ {"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,MAAM,OAAO,OAAO,CAAC;AAEtD,eAAO,MAAM,UAAU;;;CAGtB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,MAAM,OAAO,UAAU,CAAC;AAChE,oBAAY,qBAAqB,GAAG,cAAc,CAAC;AAEnD,oBAAY,UAAU,GAAG;IACrB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC5B,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC7C,CAAC;AAEF,oBAAY,aAAa,GAAG;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC7F;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F;;OAEG;IACH,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IACnH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC"}
package/cjs/components/Notification/variations/_layout/base_qkc3i4.css DELETED
@@ -1 +0,0 @@
1
- .bg3tssa .notification-wrapper{width:var(--plasma-notification-width);padding:var(--plasma-notification-padding);}.bg3tssa .notification-wrapper.notification-layout-horizontal{padding:var(--plasma-notification-horizontal-layout-padding);}.bg3tssa .notification-wrapper.notification-layout-horizontal.notification-without-close-icon{padding-right:var(--plasma-notification-horizontal-layout-right-padding-without-close-icon);}.bg3tssa .notification-wrapper.notification-layout-horizontal.notification-one-line-textbox{padding:var(--plasma-notification-padding-one-line-textbox);}
package/es/components/Notification/variations/_layout/base_qkc3i4.css DELETED
@@ -1 +0,0 @@
1
- .bg3tssa .notification-wrapper{width:var(--plasma-notification-width);padding:var(--plasma-notification-padding);}.bg3tssa .notification-wrapper.notification-layout-horizontal{padding:var(--plasma-notification-horizontal-layout-padding);}.bg3tssa .notification-wrapper.notification-layout-horizontal.notification-without-close-icon{padding-right:var(--plasma-notification-horizontal-layout-right-padding-without-close-icon);}.bg3tssa .notification-wrapper.notification-layout-horizontal.notification-one-line-textbox{padding:var(--plasma-notification-padding-one-line-textbox);}