@salutejs/plasma-new-hope 0.116.0-canary.1344.10266908694.0 → 0.116.1-canary.1345.10268848667.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (118) hide show
  1. package/cjs/components/Accordion/Accordion.tokens.js +0 -1
  2. package/cjs/components/Accordion/Accordion.tokens.js.map +1 -1
  3. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  4. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  5. package/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
  6. package/cjs/components/DatePicker/DatePickerBase.styles.js.map +1 -1
  7. package/cjs/components/DatePicker/DatePickerBase.styles_1whkrlf.css +1 -0
  8. package/cjs/components/DatePicker/RangeDate/RangeDate.js +8 -0
  9. package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  10. package/cjs/components/DatePicker/SingleDate/SingleDate.css +4 -4
  11. package/cjs/components/DatePicker/SingleDate/SingleDate.js +4 -0
  12. package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  13. package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  14. package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
  15. package/cjs/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css +5 -0
  16. package/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
  17. package/cjs/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -1
  18. package/cjs/components/DatePicker/SingleDate/variations/_size/base_g7zrur.css +1 -0
  19. package/cjs/components/Modal/Modal.js +1 -1
  20. package/cjs/components/Modal/Modal.js.map +1 -1
  21. package/cjs/index.css +4 -4
  22. package/emotion/cjs/components/Accordion/Accordion.tokens.js +0 -1
  23. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  24. package/emotion/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
  25. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +8 -0
  26. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +4 -0
  27. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +5 -14
  28. package/emotion/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
  29. package/emotion/cjs/components/Modal/Modal.js +1 -1
  30. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
  31. package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
  32. package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +80 -1
  33. package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +115 -1
  34. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
  35. package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +80 -1
  36. package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +115 -1
  37. package/emotion/es/components/Accordion/Accordion.tokens.js +0 -1
  38. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  39. package/emotion/es/components/DatePicker/DatePickerBase.styles.js +1 -1
  40. package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +8 -0
  41. package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +4 -0
  42. package/emotion/es/components/DatePicker/SingleDate/SingleDate.styles.js +6 -15
  43. package/emotion/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
  44. package/emotion/es/components/Modal/Modal.js +1 -1
  45. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -6
  46. package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
  47. package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +80 -1
  48. package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +115 -1
  49. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.config.js +8 -8
  50. package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +80 -1
  51. package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +115 -1
  52. package/es/components/Accordion/Accordion.tokens.js +0 -1
  53. package/es/components/Accordion/Accordion.tokens.js.map +1 -1
  54. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  55. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  56. package/es/components/DatePicker/DatePickerBase.styles.js +1 -1
  57. package/es/components/DatePicker/DatePickerBase.styles.js.map +1 -1
  58. package/es/components/DatePicker/DatePickerBase.styles_1whkrlf.css +1 -0
  59. package/es/components/DatePicker/RangeDate/RangeDate.js +8 -0
  60. package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  61. package/es/components/DatePicker/SingleDate/SingleDate.css +4 -4
  62. package/es/components/DatePicker/SingleDate/SingleDate.js +4 -0
  63. package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  64. package/es/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  65. package/es/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
  66. package/es/components/DatePicker/SingleDate/SingleDate.styles_qt45m5.css +5 -0
  67. package/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
  68. package/es/components/DatePicker/SingleDate/variations/_size/base.js.map +1 -1
  69. package/es/components/DatePicker/SingleDate/variations/_size/base_g7zrur.css +1 -0
  70. package/es/components/Modal/Modal.js +1 -1
  71. package/es/components/Modal/Modal.js.map +1 -1
  72. package/es/index.css +4 -4
  73. package/package.json +4 -4
  74. package/styled-components/cjs/components/Accordion/Accordion.tokens.js +0 -1
  75. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  76. package/styled-components/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
  77. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +8 -0
  78. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +4 -0
  79. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +2 -2
  80. package/styled-components/cjs/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
  81. package/styled-components/cjs/components/Modal/Modal.js +1 -1
  82. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
  83. package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
  84. package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +80 -1
  85. package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +115 -1
  86. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
  87. package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +80 -1
  88. package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +115 -1
  89. package/styled-components/es/components/Accordion/Accordion.tokens.js +0 -1
  90. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +2 -2
  91. package/styled-components/es/components/DatePicker/DatePickerBase.styles.js +1 -1
  92. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +8 -0
  93. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +4 -0
  94. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js +3 -3
  95. package/styled-components/es/components/DatePicker/SingleDate/variations/_size/base.js +1 -1
  96. package/styled-components/es/components/Modal/Modal.js +1 -1
  97. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +2 -2
  98. package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +1 -1
  99. package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +80 -1
  100. package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +115 -1
  101. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.config.js +2 -2
  102. package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +80 -1
  103. package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +115 -1
  104. package/types/components/Accordion/Accordion.tokens.d.ts +0 -1
  105. package/types/components/Accordion/Accordion.tokens.d.ts.map +1 -1
  106. package/types/components/DatePicker/DatePickerBase.styles.d.ts.map +1 -1
  107. package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
  108. package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
  109. package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
  110. package/types/components/DatePicker/SingleDate/variations/_size/base.d.ts.map +1 -1
  111. package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts.map +1 -1
  112. package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts.map +1 -1
  113. package/cjs/components/DatePicker/DatePickerBase.styles_192va2p.css +0 -1
  114. package/cjs/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +0 -5
  115. package/cjs/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +0 -1
  116. package/es/components/DatePicker/DatePickerBase.styles_192va2p.css +0 -1
  117. package/es/components/DatePicker/SingleDate/SingleDate.styles_18z9fw1.css +0 -5
  118. package/es/components/DatePicker/SingleDate/variations/_size/base_lf7y25.css +0 -1
@@ -1,4 +1,4 @@
1
- import React, { ComponentProps, useRef, useState } from 'react';
1
+ import React, { ComponentProps, useEffect, useRef, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
4
  import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -263,3 +263,82 @@ export const Range: StoryObj<StoryPropsRange> = {
263
263
  },
264
264
  render: (args) => <StoryRange {...args} />,
265
265
  };
266
+
267
+ const StoryDeferred = ({
268
+ enableContentLeft,
269
+ enableContentRight,
270
+ valueError,
271
+ valueSuccess,
272
+ size,
273
+ ...rest
274
+ }: StoryPropsDefault) => {
275
+ const [isOpen, setIsOpen] = useState(false);
276
+
277
+ const [defVal, setDefVal] = useState<Date | undefined>(undefined);
278
+
279
+ const iconSize = size === 'xs' ? 'xs' : 's';
280
+
281
+ useEffect(() => {
282
+ setTimeout(() => {
283
+ setDefVal(new Date(2024, 5, 14));
284
+ }, 5000);
285
+ }, []);
286
+
287
+ return (
288
+ <>
289
+ <h3>Асинхронная установка даты по умолчанию</h3>
290
+ <DatePicker
291
+ defaultDate={defVal}
292
+ isOpen={isOpen}
293
+ size={size}
294
+ valueError={valueError}
295
+ valueSuccess={valueSuccess}
296
+ contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
297
+ contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
298
+ onBlur={onBlur}
299
+ onFocus={onFocus}
300
+ onToggle={(is) => setIsOpen(is)}
301
+ onChangeValue={(e, currentValue) => {
302
+ onChangeValue(e, currentValue);
303
+ }}
304
+ onCommitDate={() => setIsOpen(false)}
305
+ {...rest}
306
+ />
307
+ </>
308
+ );
309
+ };
310
+
311
+ export const Deferred: StoryObj<StoryPropsDefault> = {
312
+ argTypes: {
313
+ defaultDate: {
314
+ control: {
315
+ type: 'date',
316
+ },
317
+ },
318
+ labelPlacement: {
319
+ options: labelPlacements,
320
+ control: {
321
+ type: 'inline-radio',
322
+ },
323
+ },
324
+ },
325
+ args: {
326
+ label: 'Лейбл',
327
+ leftHelper: 'Подсказка к полю',
328
+ placeholder: '30.05.2024',
329
+ size: 'l',
330
+ view: 'default',
331
+ labelPlacement: 'outer',
332
+ min: new Date(2024, 1, 1),
333
+ max: new Date(2024, 12, 29),
334
+ maskWithFormat: false,
335
+ disabled: false,
336
+ readOnly: false,
337
+ textBefore: '',
338
+ enableContentLeft: true,
339
+ enableContentRight: true,
340
+ valueError: false,
341
+ valueSuccess: false,
342
+ },
343
+ render: (args) => <StoryDeferred {...args} />,
344
+ };
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react';
1
+ import React, { useCallback, useRef, useState } from 'react';
2
2
  import styled from 'styled-components';
3
3
  import type { ComponentProps } from 'react';
4
4
  import type { StoryObj, Meta } from '@storybook/react';
@@ -6,6 +6,7 @@ import { SSRProvider } from '@salutejs/plasma-core';
6
6
 
7
7
  import { PopupProvider, popupClasses } from '../Popup/Popup';
8
8
  import { Button } from '../Button/Button';
9
+ import { TextField } from '../TextField/TextField';
9
10
  import { WithTheme } from '../../../_helpers';
10
11
 
11
12
  import { Modal, modalClasses } from './Modal';
@@ -206,3 +207,116 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
206
207
  },
207
208
  render: (args) => <StoryModalDemo {...args} />,
208
209
  };
210
+
211
+ const StyledModalAnimation = styled(Modal)`
212
+ /* stylelint-disable */
213
+ && .${popupClasses.root} {
214
+ animation: fadeIn 1s forwards;
215
+ }
216
+
217
+ &&.${popupClasses.endAnimation} .${popupClasses.root} {
218
+ animation: fadeOut 1s forwards;
219
+ }
220
+
221
+ && .${modalClasses.overlay} {
222
+ animation: overlayFadeIn 1s forwards;
223
+ }
224
+
225
+ &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
226
+ animation: overlayFadeOut 1s forwards;
227
+ }
228
+ /* stylelint-enable */
229
+
230
+ @keyframes overlayFadeIn {
231
+ from {
232
+ opacity: 0;
233
+ }
234
+
235
+ to {
236
+ opacity: 1;
237
+ }
238
+ }
239
+
240
+ @keyframes overlayFadeOut {
241
+ from {
242
+ opacity: 1;
243
+ }
244
+
245
+ to {
246
+ opacity: 0;
247
+ }
248
+ }
249
+
250
+ @keyframes fadeIn {
251
+ from {
252
+ opacity: 0;
253
+ transform: translate(-50%, 100%);
254
+ }
255
+
256
+ to {
257
+ opacity: 1;
258
+ transform: translate(-50%, -50%);
259
+ }
260
+ }
261
+
262
+ @keyframes fadeOut {
263
+ from {
264
+ opacity: 1;
265
+ transform: translate(-50%, -50%);
266
+ }
267
+
268
+ to {
269
+ opacity: 0;
270
+ transform: translate(-50%, 100%);
271
+ }
272
+ }
273
+ `;
274
+
275
+ const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
276
+ const ref = useRef(null);
277
+ const [isOpen, setIsOpen] = useState(false);
278
+
279
+ const close = useCallback(() => {
280
+ setIsOpen(false);
281
+ }, []);
282
+
283
+ return (
284
+ <SSRProvider>
285
+ {/* <StyledWrapper> */}
286
+ <PopupProvider>
287
+ <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
288
+ <StyledModalAnimation
289
+ id="modal"
290
+ frame="theme-root"
291
+ withAnimation
292
+ onClose={() => setIsOpen(false)}
293
+ isOpen={isOpen}
294
+ placement={placement}
295
+ offset={[offsetX, offsetY]}
296
+ initialFocusRef={ref}
297
+ {...rest}
298
+ >
299
+ <Content>
300
+ <TextField value="Text" onChange={() => {}} />
301
+ <TextField ref={ref} value="Text2" onChange={() => {}} />
302
+ <Button text="Закрыть" onClick={close} />
303
+ </Content>
304
+ </StyledModalAnimation>
305
+ </PopupProvider>
306
+ {/* </StyledWrapper> */}
307
+ </SSRProvider>
308
+ );
309
+ };
310
+
311
+ export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
312
+ args: {
313
+ placement: 'bottom',
314
+ withAnimation: true,
315
+ withBlur: false,
316
+ closeOnEsc: true,
317
+ closeOnOverlayClick: true,
318
+ offsetX: 0,
319
+ offsetY: 0,
320
+ },
321
+ render: (args) => <StoryModalAnimationDemo {...args} />,
322
+ };
@@ -7,8 +7,8 @@ export var config = {
7
7
  },
8
8
  variations: {
9
9
  view: {
10
- "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
11
- clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
10
+ "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
11
+ clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
12
12
  },
13
13
  size: {
14
14
  l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),
@@ -1,4 +1,4 @@
1
- import React, { ComponentProps, useRef, useState } from 'react';
1
+ import React, { ComponentProps, useEffect, useRef, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
4
  import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -262,3 +262,82 @@ export const Range: StoryObj<StoryPropsRange> = {
262
262
  },
263
263
  render: (args) => <StoryRange {...args} />,
264
264
  };
265
+
266
+ const StoryDeferred = ({
267
+ enableContentLeft,
268
+ enableContentRight,
269
+ valueError,
270
+ valueSuccess,
271
+ size,
272
+ ...rest
273
+ }: StoryPropsDefault) => {
274
+ const [isOpen, setIsOpen] = useState(false);
275
+
276
+ const [defVal, setDefVal] = useState<Date | undefined>(undefined);
277
+
278
+ const iconSize = size === 'xs' ? 'xs' : 's';
279
+
280
+ useEffect(() => {
281
+ setTimeout(() => {
282
+ setDefVal(new Date(2024, 5, 14));
283
+ }, 5000);
284
+ }, []);
285
+
286
+ return (
287
+ <>
288
+ <h3>Асинхронная установка даты по умолчанию</h3>
289
+ <DatePicker
290
+ defaultDate={defVal}
291
+ isOpen={isOpen}
292
+ size={size}
293
+ valueError={valueError}
294
+ valueSuccess={valueSuccess}
295
+ contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
296
+ contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
297
+ onBlur={onBlur}
298
+ onFocus={onFocus}
299
+ onToggle={(is) => setIsOpen(is)}
300
+ onChangeValue={(e, currentValue) => {
301
+ onChangeValue(e, currentValue);
302
+ }}
303
+ onCommitDate={() => setIsOpen(false)}
304
+ {...rest}
305
+ />
306
+ </>
307
+ );
308
+ };
309
+
310
+ export const Deferred: StoryObj<StoryPropsDefault> = {
311
+ argTypes: {
312
+ defaultDate: {
313
+ control: {
314
+ type: 'date',
315
+ },
316
+ },
317
+ labelPlacement: {
318
+ options: labelPlacements,
319
+ control: {
320
+ type: 'inline-radio',
321
+ },
322
+ },
323
+ },
324
+ args: {
325
+ label: 'Лейбл',
326
+ leftHelper: 'Подсказка к полю',
327
+ placeholder: '30.05.2024',
328
+ size: 'l',
329
+ view: 'default',
330
+ labelPlacement: 'outer',
331
+ min: new Date(2024, 1, 1),
332
+ max: new Date(2024, 12, 29),
333
+ maskWithFormat: false,
334
+ disabled: false,
335
+ readOnly: false,
336
+ textBefore: '',
337
+ enableContentLeft: true,
338
+ enableContentRight: true,
339
+ valueError: false,
340
+ valueSuccess: false,
341
+ },
342
+ render: (args) => <StoryDeferred {...args} />,
343
+ };
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react';
1
+ import React, { useCallback, useRef, useState } from 'react';
2
2
  import styled from 'styled-components';
3
3
  import type { ComponentProps } from 'react';
4
4
  import type { StoryObj, Meta } from '@storybook/react';
@@ -6,6 +6,7 @@ import { SSRProvider } from '@salutejs/plasma-core';
6
6
 
7
7
  import { PopupProvider, popupClasses } from '../Popup/Popup';
8
8
  import { Button } from '../Button/Button';
9
+ import { TextField } from '../TextField/TextField';
9
10
  import { WithTheme } from '../../../_helpers';
10
11
 
11
12
  import { Modal, modalClasses } from './Modal';
@@ -206,3 +207,116 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
206
207
  },
207
208
  render: (args) => <StoryModalDemo {...args} />,
208
209
  };
210
+
211
+ const StyledModalAnimation = styled(Modal)`
212
+ /* stylelint-disable */
213
+ && .${popupClasses.root} {
214
+ animation: fadeIn 1s forwards;
215
+ }
216
+
217
+ &&.${popupClasses.endAnimation} .${popupClasses.root} {
218
+ animation: fadeOut 1s forwards;
219
+ }
220
+
221
+ && .${modalClasses.overlay} {
222
+ animation: overlayFadeIn 1s forwards;
223
+ }
224
+
225
+ &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
226
+ animation: overlayFadeOut 1s forwards;
227
+ }
228
+ /* stylelint-enable */
229
+
230
+ @keyframes overlayFadeIn {
231
+ from {
232
+ opacity: 0;
233
+ }
234
+
235
+ to {
236
+ opacity: 1;
237
+ }
238
+ }
239
+
240
+ @keyframes overlayFadeOut {
241
+ from {
242
+ opacity: 1;
243
+ }
244
+
245
+ to {
246
+ opacity: 0;
247
+ }
248
+ }
249
+
250
+ @keyframes fadeIn {
251
+ from {
252
+ opacity: 0;
253
+ transform: translate(-50%, 100%);
254
+ }
255
+
256
+ to {
257
+ opacity: 1;
258
+ transform: translate(-50%, -50%);
259
+ }
260
+ }
261
+
262
+ @keyframes fadeOut {
263
+ from {
264
+ opacity: 1;
265
+ transform: translate(-50%, -50%);
266
+ }
267
+
268
+ to {
269
+ opacity: 0;
270
+ transform: translate(-50%, 100%);
271
+ }
272
+ }
273
+ `;
274
+
275
+ const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
276
+ const ref = useRef(null);
277
+ const [isOpen, setIsOpen] = useState(false);
278
+
279
+ const close = useCallback(() => {
280
+ setIsOpen(false);
281
+ }, []);
282
+
283
+ return (
284
+ <SSRProvider>
285
+ {/* <StyledWrapper> */}
286
+ <PopupProvider>
287
+ <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
288
+ <StyledModalAnimation
289
+ id="modal"
290
+ frame="theme-root"
291
+ withAnimation
292
+ onClose={() => setIsOpen(false)}
293
+ isOpen={isOpen}
294
+ placement={placement}
295
+ offset={[offsetX, offsetY]}
296
+ initialFocusRef={ref}
297
+ {...rest}
298
+ >
299
+ <Content>
300
+ <TextField value="Text" onChange={() => {}} />
301
+ <TextField ref={ref} value="Text2" onChange={() => {}} />
302
+ <Button text="Закрыть" onClick={close} />
303
+ </Content>
304
+ </StyledModalAnimation>
305
+ </PopupProvider>
306
+ {/* </StyledWrapper> */}
307
+ </SSRProvider>
308
+ );
309
+ };
310
+
311
+ export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
312
+ args: {
313
+ placement: 'bottom',
314
+ withAnimation: true,
315
+ withBlur: false,
316
+ closeOnEsc: true,
317
+ closeOnOverlayClick: true,
318
+ offsetX: 0,
319
+ offsetY: 0,
320
+ },
321
+ render: (args) => <StoryModalAnimationDemo {...args} />,
322
+ };
@@ -23,7 +23,6 @@ export declare const tokens: {
23
23
  accordionItemFocus: string;
24
24
  accordionItemBorder: string;
25
25
  accordionItemBorderBottom: string;
26
- accordionItemIconColor: string;
27
26
  accordionItemTitleColor: string;
28
27
  accordionItemTitleFontFamily: string;
29
28
  accordionItemTitleFontSize: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgClB,CAAC"}
1
+ {"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BlB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,kBAAkB,QAkG9B,CAAC;AAGF,eAAO,MAAM,cAAc,qTAE1B,CAAC"}
1
+ {"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,kBAAkB,QAkG9B,CAAC;AAGF,eAAO,MAAM,cAAc,qTAG1B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EA8QvG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBAhRxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyS3G,CAAC"}
1
+ {"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAwRvG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBA1RxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmT3G,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SACjB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC,gXAoKlG,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBAtKnB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CA+LtG,CAAC"}
1
+ {"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SACjB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC,gXAyKlG,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBA3KnB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;CAoMtG,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HAqEvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC"}
1
+ {"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HAuEvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAMhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/SingleDate/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAwBhB,CAAC"}
1
+ {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/SingleDate/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAsBhB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CA2HlB,CAAC"}
1
+ {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CAyHlB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA4HlB,CAAC"}
1
+ {"version":3,"file":"Accordion.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Accordion/Accordion.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA0HlB,CAAC"}
@@ -1 +0,0 @@
1
- .s1ywkx25{padding-top:var(--plasma-date-picker-calendar-padding-top);box-shadow:var(--plasma-date-picker-calendar-shadow);border-radius:var(--plasma-date-picker-calendar-border-radius);--plasma-calendar-background:var(--plasma-date-picker-calendar__background-color);--plasma-calendar-selected-item-background:var(--plasma-date-picker-calendar__selected-item-background);--plasma-calendar-selected-item-color:var(--plasma-date-picker-calendar__selected-item-color);--plasma-calendar-selectable-item-bg-hover:var(--plasma-date-picker-calendar__selectable-item-background-hover);--plasma-calendar-current-item-border-color:var(--plasma-date-picker-calendar__current-item-border-color);--plasma-calendar-current-item-bg-hover:var(--plasma-date-picker-calendar__current-item-background-hover);--plasma-calendar-current-item-color-hover:var(--plasma-date-picker-calendar__current-item-color-hover);--plasma-calendar-current-item-child-bg-hover:var(--plasma-date-picker-calendar__current-item-child-background-hover);--plasma-calendar-active-item-bg:var(--plasma-date-picker-calendar__active-item-background);--plasma-calendar-active-item-color:var(--plasma-date-picker-calendar__active-item-color);--plasma-calendar-hovered-item-bg:var(--plasma-date-picker-calendar__hovered-item-background);--plasma-calendar-hovered-item-color:var(--plasma-date-picker-calendar__hovered-item-color);--plasma-calendar-range-background:var(--plasma-date-picker-calendar__range-background);--plasma-calendar-outline-focus-color:var(--plasma-date-picker-calendar__outline-focus-color);--plasma-calendar-content-primary-color:var(--plasma-date-picker-calendar__content-primary-color);--plasma-calendar-content-secondary-color:var(--plasma-date-picker-calendar__content-secondary-color);--plasma-calendar-icon-button-color:var(--plasma-date-picker-icon-button__color);--plasma-calendar-icon-button-background:var(--plasma-date-picker-icon-button__background-color);--plasma-calendar-icon-button-color-hover:var(--plasma-date-picker-icon-button__color-hover);--plasma-calendar-icon-button-background-hover:var(--plasma-date-picker-icon-button__background-color-hover);--plasma-calendar-icon-button-color-active:var(--plasma-date-picker-icon-button__color-active);--plasma-calendar-icon-button-background-active:var(--plasma-date-picker-icon-button__background-color-active);--plasma-calendar-width:var(--plasma-date-picker-calendar-width);--plasma-calendar-height:var(--plasma-date-picker-calendar-height);--plasma-calendar-years-padding:var(--plasma-date-picker-calendar__years-padding);--plasma-calendar-year-item-border-radius:var(--plasma-date-picker-calendar__year-item-border-radius);--plasma-calendar-year-item-width:var(--plasma-date-picker-calendar__year-item-width);--plasma-calendar-year-item-height:var(--plasma-date-picker-calendar__year-item-height);--plasma-calendar-year-font-family:var(--plasma-date-picker-calendar__year-font-family);--plasma-calendar-year-font-size:var(--plasma-date-picker-calendar__year-font-size);--plasma-calendar-year-font-style:var(--plasma-date-picker-calendar__year-font-style);--plasma-calendar-year-font-letter-spacing:var(--plasma-date-picker-calendar__year-letter-spacing);--plasma-calendar-year-line-height:var(--plasma-date-picker-calendar__year-line-height);--plasma-calendar-year-font-weight:var(--plasma-date-picker-calendar__year-font-weight);--plasma-calendar-year-selected-font-weight:var(--plasma-date-picker-calendar__year-selected-font-weight);--plasma-calendar-months-padding:var(--plasma-date-picker-calendar__months-padding);--plasma-calendar-month-item-border-radius:var(--plasma-date-picker-calendar__month-item-border-radius);--plasma-calendar-month-item-width:var(--plasma-date-picker-calendar__month-item-width);--plasma-calendar-month-item-height:var(--plasma-date-picker-calendar__month-item-height);--plasma-calendar-month-font-family:var(--plasma-date-picker-calendar__month-font-family);--plasma-calendar-month-font-size:var(--plasma-date-picker-calendar__month-font-size);--plasma-calendar-month-font-style:var(--plasma-date-picker-calendar__month-font-style);--plasma-calendar-month-font-letter-spacing:var(--plasma-date-picker-calendar__month-letter-spacing);--plasma-calendar-month-line-height:var(--plasma-date-picker-calendar__month-line-height);--plasma-calendar-month-font-weight:var(--plasma-date-picker-calendar__month-font-weight);--plasma-calendar-month-selected-font-weight:var(--plasma-date-picker-calendar__month-selected-font-weight);--plasma-calendar-quarters-padding:var(--plasma-date-picker-calendar__quarters-padding);--plasma-calendar-quarter-item-border-radius:var(--plasma-date-picker-calendar__quarter-item-border-radius);--plasma-calendar-quarter-item-width:var(--plasma-date-picker-calendar__quarter-item-width);--plasma-calendar-quarter-item-height:var(--plasma-date-picker-calendar__quarter-item-height);--plasma-calendar-quarter-font-family:var(--plasma-date-picker-calendar__quarter-font-family);--plasma-calendar-quarter-font-size:var(--plasma-date-picker-calendar__quarter-font-size);--plasma-calendar-quarter-font-style:var(--plasma-date-picker-calendar__quarter-font-style);--plasma-calendar-quarter-font-letter-spacing:var(--plasma-date-picker-calendar__quarter-letter-spacing);--plasma-calendar-quarter-line-height:var(--plasma-date-picker-calendar__quarter-line-height);--plasma-calendar-quarter-font-weight:var(--plasma-date-picker-calendar__quarter-font-weight);--plasma-calendar-quarter-selected-font-weight:var(--plasma-date-picker-calendar__quarter-selected-font-weight);--plasma-calendar-days-padding:var(--plasma-date-picker-calendar__days-padding);--plasma-calendar-day-item-border-radius:var(--plasma-date-picker-calendar__day-item-border-radius);--plasma-calendar-day-item-width:var(--plasma-date-picker-calendar__day-item-width);--plasma-calendar-day-item-height:var(--plasma-date-picker-calendar__day-item-height);--plasma-calendar-day-font-family:var(--plasma-date-picker-calendar__day-font-family);--plasma-calendar-day-font-size:var(--plasma-date-picker-calendar__day-font-size);--plasma-calendar-day-font-style:var(--plasma-date-picker-calendar__day-font-style);--plasma-calendar-day-font-letter-spacing:var(--plasma-date-picker-calendar__day-letter-spacing);--plasma-calendar-day-line-height:var(--plasma-date-picker-calendar__day-line-height);--plasma-calendar-day-font-weight:var(--plasma-date-picker-calendar__day-font-weight);--plasma-calendar-day-selected-font-weight:var(--plasma-date-picker-calendar__day-selected-font-weight);--plasma-calendar-header-wrapper-padding:var(--plasma-date-picker-calendar__header-wrapper-padding);--plasma-calendar-arrow-container-gap:var(--plasma-date-picker-calendar__header-arrow-gap);--plasma-calendar-arrow-container-padding:var(--plasma-date-picker-calendar__header-arrow-padding);--plasma-calendar-header-padding:var(--plasma-date-picker-calendar__header-padding);--plasma-calendar-header-date-gap:var(--plasma-date-picker-calendar__header-date-gap);--plasma-calendar-header-font-family:var(--plasma-date-picker-calendar__header-font-family);--plasma-calendar-header-font-size:var(--plasma-date-picker-calendar__header-font-size);--plasma-calendar-header-font-style:var(--plasma-date-picker-calendar__header-font-style);--plasma-calendar-header-font-letter-spacing:var(--plasma-date-picker-calendar__header-letter-spacing);--plasma-calendar-header-line-height:var(--plasma-date-picker-calendar__header-line-height);--plasma-calendar-header-font-weight:var(--plasma-date-picker-calendar__header-font-weight);--plasma-calendar-header-font-weight-bold:var(--plasma-date-picker-calendar__header-font-weight-bold);--plasma-calendar-icon-button-height:var(--plasma-date-picker-icon-button__height);--plasma-calendar-icon-button-width:var(--plasma-date-picker-icon-button__width);--plasma-calendar-icon-button-padding:var(--plasma-date-picker-icon-button__padding);--plasma-calendar-icon-button-radius:var(--plasma-date-picker-icon-button__radius);--plasma-calendar-icon-button-focus-color:var(--plasma-date-picker-icon-button__focus-color);}
@@ -1,5 +0,0 @@
1
-
2
- .s15omatb{--plasma-textfield-color:var(--plasma-date-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-date-picker-textfield-placeholder-color);--plasma-textfield__caret-color:var(--plasma-date-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-date-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-date-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-date-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker_range-border-color-focus);--plasma-textfield-color-readonly:var(--plasma-date-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-date-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-date-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-date-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-date-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-date-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-date-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-date-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-date-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-date-picker-placement_inner__content-padding);--plasma-textfield-placement_inner__label-font-family:var(--plasma-date-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-date-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-date-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-date-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-date-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-date-picker-placement_inner__label-line-height);--plasma-textfield__left-content-margin:var(--plasma-date-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-date-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-date-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-date-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-date-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-date-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-date-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-date-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-date-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-date-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-date-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-date-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-date-picker-textfield__after-text-margin);}.s15omatb.date-picker-error{--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-date-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-date-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker-textfield-border-color-error-focus);}.s15omatb.date-picker-success{--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-date-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-date-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker-textfield-border-color-success-focus);}
3
- .boba7w3{display:inline-block;}
4
-
5
-
@@ -1 +0,0 @@
1
- .bjvjzuw{width:var(--plasma-date-picker-width);}.bjvjzuw .svfqi8{margin:var(--plasma-date-picker__label-offset);font-family:var(--plasma-date-picker__label-font-family);font-size:var(--plasma-date-picker__label-font-size);font-style:var(--plasma-date-picker__label-font-style);font-weight:var(--plasma-date-picker__label-font-weight);-webkit-letter-spacing:var(--plasma-date-picker__label-letter-spacing);-moz-letter-spacing:var(--plasma-date-picker__label-letter-spacing);-ms-letter-spacing:var(--plasma-date-picker__label-letter-spacing);letter-spacing:var(--plasma-date-picker__label-letter-spacing);line-height:var(--plasma-date-picker__label-line-height);}.bjvjzuw .l5dd1qs{margin:var(--plasma-date-picker__left-helper-offset);font-family:var(--plasma-date-picker__left-helper-font-family);font-size:var(--plasma-date-picker__left-helper-font-size);font-style:var(--plasma-date-picker__left-helper-font-style);font-weight:var(--plasma-date-picker__left-helper-font-weight);-webkit-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);-moz-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);-ms-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);line-height:var(--plasma-date-picker__left-helper-line-height);}
@@ -1 +0,0 @@
1
- .s1ywkx25{padding-top:var(--plasma-date-picker-calendar-padding-top);box-shadow:var(--plasma-date-picker-calendar-shadow);border-radius:var(--plasma-date-picker-calendar-border-radius);--plasma-calendar-background:var(--plasma-date-picker-calendar__background-color);--plasma-calendar-selected-item-background:var(--plasma-date-picker-calendar__selected-item-background);--plasma-calendar-selected-item-color:var(--plasma-date-picker-calendar__selected-item-color);--plasma-calendar-selectable-item-bg-hover:var(--plasma-date-picker-calendar__selectable-item-background-hover);--plasma-calendar-current-item-border-color:var(--plasma-date-picker-calendar__current-item-border-color);--plasma-calendar-current-item-bg-hover:var(--plasma-date-picker-calendar__current-item-background-hover);--plasma-calendar-current-item-color-hover:var(--plasma-date-picker-calendar__current-item-color-hover);--plasma-calendar-current-item-child-bg-hover:var(--plasma-date-picker-calendar__current-item-child-background-hover);--plasma-calendar-active-item-bg:var(--plasma-date-picker-calendar__active-item-background);--plasma-calendar-active-item-color:var(--plasma-date-picker-calendar__active-item-color);--plasma-calendar-hovered-item-bg:var(--plasma-date-picker-calendar__hovered-item-background);--plasma-calendar-hovered-item-color:var(--plasma-date-picker-calendar__hovered-item-color);--plasma-calendar-range-background:var(--plasma-date-picker-calendar__range-background);--plasma-calendar-outline-focus-color:var(--plasma-date-picker-calendar__outline-focus-color);--plasma-calendar-content-primary-color:var(--plasma-date-picker-calendar__content-primary-color);--plasma-calendar-content-secondary-color:var(--plasma-date-picker-calendar__content-secondary-color);--plasma-calendar-icon-button-color:var(--plasma-date-picker-icon-button__color);--plasma-calendar-icon-button-background:var(--plasma-date-picker-icon-button__background-color);--plasma-calendar-icon-button-color-hover:var(--plasma-date-picker-icon-button__color-hover);--plasma-calendar-icon-button-background-hover:var(--plasma-date-picker-icon-button__background-color-hover);--plasma-calendar-icon-button-color-active:var(--plasma-date-picker-icon-button__color-active);--plasma-calendar-icon-button-background-active:var(--plasma-date-picker-icon-button__background-color-active);--plasma-calendar-width:var(--plasma-date-picker-calendar-width);--plasma-calendar-height:var(--plasma-date-picker-calendar-height);--plasma-calendar-years-padding:var(--plasma-date-picker-calendar__years-padding);--plasma-calendar-year-item-border-radius:var(--plasma-date-picker-calendar__year-item-border-radius);--plasma-calendar-year-item-width:var(--plasma-date-picker-calendar__year-item-width);--plasma-calendar-year-item-height:var(--plasma-date-picker-calendar__year-item-height);--plasma-calendar-year-font-family:var(--plasma-date-picker-calendar__year-font-family);--plasma-calendar-year-font-size:var(--plasma-date-picker-calendar__year-font-size);--plasma-calendar-year-font-style:var(--plasma-date-picker-calendar__year-font-style);--plasma-calendar-year-font-letter-spacing:var(--plasma-date-picker-calendar__year-letter-spacing);--plasma-calendar-year-line-height:var(--plasma-date-picker-calendar__year-line-height);--plasma-calendar-year-font-weight:var(--plasma-date-picker-calendar__year-font-weight);--plasma-calendar-year-selected-font-weight:var(--plasma-date-picker-calendar__year-selected-font-weight);--plasma-calendar-months-padding:var(--plasma-date-picker-calendar__months-padding);--plasma-calendar-month-item-border-radius:var(--plasma-date-picker-calendar__month-item-border-radius);--plasma-calendar-month-item-width:var(--plasma-date-picker-calendar__month-item-width);--plasma-calendar-month-item-height:var(--plasma-date-picker-calendar__month-item-height);--plasma-calendar-month-font-family:var(--plasma-date-picker-calendar__month-font-family);--plasma-calendar-month-font-size:var(--plasma-date-picker-calendar__month-font-size);--plasma-calendar-month-font-style:var(--plasma-date-picker-calendar__month-font-style);--plasma-calendar-month-font-letter-spacing:var(--plasma-date-picker-calendar__month-letter-spacing);--plasma-calendar-month-line-height:var(--plasma-date-picker-calendar__month-line-height);--plasma-calendar-month-font-weight:var(--plasma-date-picker-calendar__month-font-weight);--plasma-calendar-month-selected-font-weight:var(--plasma-date-picker-calendar__month-selected-font-weight);--plasma-calendar-quarters-padding:var(--plasma-date-picker-calendar__quarters-padding);--plasma-calendar-quarter-item-border-radius:var(--plasma-date-picker-calendar__quarter-item-border-radius);--plasma-calendar-quarter-item-width:var(--plasma-date-picker-calendar__quarter-item-width);--plasma-calendar-quarter-item-height:var(--plasma-date-picker-calendar__quarter-item-height);--plasma-calendar-quarter-font-family:var(--plasma-date-picker-calendar__quarter-font-family);--plasma-calendar-quarter-font-size:var(--plasma-date-picker-calendar__quarter-font-size);--plasma-calendar-quarter-font-style:var(--plasma-date-picker-calendar__quarter-font-style);--plasma-calendar-quarter-font-letter-spacing:var(--plasma-date-picker-calendar__quarter-letter-spacing);--plasma-calendar-quarter-line-height:var(--plasma-date-picker-calendar__quarter-line-height);--plasma-calendar-quarter-font-weight:var(--plasma-date-picker-calendar__quarter-font-weight);--plasma-calendar-quarter-selected-font-weight:var(--plasma-date-picker-calendar__quarter-selected-font-weight);--plasma-calendar-days-padding:var(--plasma-date-picker-calendar__days-padding);--plasma-calendar-day-item-border-radius:var(--plasma-date-picker-calendar__day-item-border-radius);--plasma-calendar-day-item-width:var(--plasma-date-picker-calendar__day-item-width);--plasma-calendar-day-item-height:var(--plasma-date-picker-calendar__day-item-height);--plasma-calendar-day-font-family:var(--plasma-date-picker-calendar__day-font-family);--plasma-calendar-day-font-size:var(--plasma-date-picker-calendar__day-font-size);--plasma-calendar-day-font-style:var(--plasma-date-picker-calendar__day-font-style);--plasma-calendar-day-font-letter-spacing:var(--plasma-date-picker-calendar__day-letter-spacing);--plasma-calendar-day-line-height:var(--plasma-date-picker-calendar__day-line-height);--plasma-calendar-day-font-weight:var(--plasma-date-picker-calendar__day-font-weight);--plasma-calendar-day-selected-font-weight:var(--plasma-date-picker-calendar__day-selected-font-weight);--plasma-calendar-header-wrapper-padding:var(--plasma-date-picker-calendar__header-wrapper-padding);--plasma-calendar-arrow-container-gap:var(--plasma-date-picker-calendar__header-arrow-gap);--plasma-calendar-arrow-container-padding:var(--plasma-date-picker-calendar__header-arrow-padding);--plasma-calendar-header-padding:var(--plasma-date-picker-calendar__header-padding);--plasma-calendar-header-date-gap:var(--plasma-date-picker-calendar__header-date-gap);--plasma-calendar-header-font-family:var(--plasma-date-picker-calendar__header-font-family);--plasma-calendar-header-font-size:var(--plasma-date-picker-calendar__header-font-size);--plasma-calendar-header-font-style:var(--plasma-date-picker-calendar__header-font-style);--plasma-calendar-header-font-letter-spacing:var(--plasma-date-picker-calendar__header-letter-spacing);--plasma-calendar-header-line-height:var(--plasma-date-picker-calendar__header-line-height);--plasma-calendar-header-font-weight:var(--plasma-date-picker-calendar__header-font-weight);--plasma-calendar-header-font-weight-bold:var(--plasma-date-picker-calendar__header-font-weight-bold);--plasma-calendar-icon-button-height:var(--plasma-date-picker-icon-button__height);--plasma-calendar-icon-button-width:var(--plasma-date-picker-icon-button__width);--plasma-calendar-icon-button-padding:var(--plasma-date-picker-icon-button__padding);--plasma-calendar-icon-button-radius:var(--plasma-date-picker-icon-button__radius);--plasma-calendar-icon-button-focus-color:var(--plasma-date-picker-icon-button__focus-color);}
@@ -1,5 +0,0 @@
1
-
2
- .s15omatb{--plasma-textfield-color:var(--plasma-date-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-date-picker-textfield-placeholder-color);--plasma-textfield__caret-color:var(--plasma-date-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-date-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-date-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-date-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker_range-border-color-focus);--plasma-textfield-color-readonly:var(--plasma-date-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-date-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-date-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-date-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-date-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-date-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-date-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-date-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-date-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-date-picker-placement_inner__content-padding);--plasma-textfield-placement_inner__label-font-family:var(--plasma-date-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-date-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-date-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-date-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-date-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-date-picker-placement_inner__label-line-height);--plasma-textfield__left-content-margin:var(--plasma-date-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-date-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-date-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-date-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-date-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-date-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-date-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-date-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-date-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-date-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-date-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-date-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-date-picker-textfield__after-text-margin);}.s15omatb.date-picker-error{--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-date-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-date-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker-textfield-border-color-error-focus);}.s15omatb.date-picker-success{--plasma-textfield-bg-color:var(--plasma-date-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-date-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-date-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-date-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-date-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-date-picker-textfield-border-color-success-focus);}
3
- .boba7w3{display:inline-block;}
4
-
5
-
@@ -1 +0,0 @@
1
- .bjvjzuw{width:var(--plasma-date-picker-width);}.bjvjzuw .svfqi8{margin:var(--plasma-date-picker__label-offset);font-family:var(--plasma-date-picker__label-font-family);font-size:var(--plasma-date-picker__label-font-size);font-style:var(--plasma-date-picker__label-font-style);font-weight:var(--plasma-date-picker__label-font-weight);-webkit-letter-spacing:var(--plasma-date-picker__label-letter-spacing);-moz-letter-spacing:var(--plasma-date-picker__label-letter-spacing);-ms-letter-spacing:var(--plasma-date-picker__label-letter-spacing);letter-spacing:var(--plasma-date-picker__label-letter-spacing);line-height:var(--plasma-date-picker__label-line-height);}.bjvjzuw .l5dd1qs{margin:var(--plasma-date-picker__left-helper-offset);font-family:var(--plasma-date-picker__left-helper-font-family);font-size:var(--plasma-date-picker__left-helper-font-size);font-style:var(--plasma-date-picker__left-helper-font-style);font-weight:var(--plasma-date-picker__left-helper-font-weight);-webkit-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);-moz-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);-ms-letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);letter-spacing:var(--plasma-date-picker__left-helper-letter-spacing);line-height:var(--plasma-date-picker__left-helper-line-height);}