@salutejs/plasma-new-hope 0.249.0-canary.1720.13031638569.0 → 0.249.0-canary.1724.12986049597.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 (119) hide show
  1. package/cjs/components/Accordion/Accordion.tokens.js +1 -0
  2. package/cjs/components/Accordion/Accordion.tokens.js.map +1 -1
  3. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.css +11 -11
  4. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
  5. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  6. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
  7. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  8. package/cjs/components/Accordion/ui/AccordionItem/{AccordionItem.styles_aus2x3.css → AccordionItem.styles_56cr5h.css} +1 -1
  9. package/cjs/components/Calendar/CalendarBase/CalendarBase.js +0 -8
  10. package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
  11. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
  12. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
  13. package/cjs/components/DatePicker/RangeDate/RangeDate.js +36 -57
  14. package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  15. package/cjs/components/DatePicker/SingleDate/SingleDate.js +16 -31
  16. package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  17. package/cjs/components/_Icon/Icons/IconChevronDownFill.js +6 -3
  18. package/cjs/components/_Icon/Icons/IconChevronDownFill.js.map +1 -1
  19. package/cjs/components/_Icon/Icons/IconMinus.js +6 -3
  20. package/cjs/components/_Icon/Icons/IconMinus.js.map +1 -1
  21. package/cjs/index.css +11 -11
  22. package/emotion/cjs/components/Accordion/Accordion.tokens.js +1 -0
  23. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
  24. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +11 -20
  25. package/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.js +0 -8
  26. package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
  27. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +36 -57
  28. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +16 -31
  29. package/emotion/cjs/components/_Icon/Icons/IconChevronDownFill.js +8 -3
  30. package/emotion/cjs/components/_Icon/Icons/IconMinus.js +8 -3
  31. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +10 -6
  32. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
  33. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +10 -10
  34. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
  35. package/emotion/es/components/Accordion/Accordion.tokens.js +1 -0
  36. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
  37. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +11 -20
  38. package/emotion/es/components/Calendar/CalendarBase/CalendarBase.js +0 -8
  39. package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
  40. package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +38 -59
  41. package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +18 -33
  42. package/emotion/es/components/_Icon/Icons/IconChevronDownFill.js +8 -3
  43. package/emotion/es/components/_Icon/Icons/IconMinus.js +8 -3
  44. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +10 -6
  45. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
  46. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.config.js +10 -10
  47. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
  48. package/es/components/Accordion/Accordion.tokens.js +1 -0
  49. package/es/components/Accordion/Accordion.tokens.js.map +1 -1
  50. package/es/components/Accordion/ui/AccordionItem/AccordionItem.css +11 -11
  51. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
  52. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  53. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
  54. package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
  55. package/es/components/Accordion/ui/AccordionItem/{AccordionItem.styles_aus2x3.css → AccordionItem.styles_56cr5h.css} +1 -1
  56. package/es/components/Calendar/CalendarBase/CalendarBase.js +0 -8
  57. package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
  58. package/es/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
  59. package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
  60. package/es/components/DatePicker/RangeDate/RangeDate.js +38 -59
  61. package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  62. package/es/components/DatePicker/SingleDate/SingleDate.js +18 -33
  63. package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  64. package/es/components/_Icon/Icons/IconChevronDownFill.js +6 -3
  65. package/es/components/_Icon/Icons/IconChevronDownFill.js.map +1 -1
  66. package/es/components/_Icon/Icons/IconMinus.js +6 -3
  67. package/es/components/_Icon/Icons/IconMinus.js.map +1 -1
  68. package/es/index.css +11 -11
  69. package/package.json +2 -2
  70. package/styled-components/cjs/components/Accordion/Accordion.tokens.js +1 -0
  71. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
  72. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
  73. package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +0 -8
  74. package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
  75. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +36 -57
  76. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +16 -31
  77. package/styled-components/cjs/components/_Icon/Icons/IconChevronDownFill.js +8 -3
  78. package/styled-components/cjs/components/_Icon/Icons/IconMinus.js +8 -3
  79. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +5 -1
  80. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
  81. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +6 -6
  82. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
  83. package/styled-components/es/components/Accordion/Accordion.tokens.js +1 -0
  84. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
  85. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
  86. package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +0 -8
  87. package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
  88. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +38 -59
  89. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +18 -33
  90. package/styled-components/es/components/_Icon/Icons/IconChevronDownFill.js +8 -3
  91. package/styled-components/es/components/_Icon/Icons/IconMinus.js +8 -3
  92. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +5 -1
  93. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
  94. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.config.js +6 -6
  95. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
  96. package/types/components/Accordion/Accordion.tokens.d.ts +1 -0
  97. package/types/components/Accordion/Accordion.tokens.d.ts.map +1 -1
  98. package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
  99. package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
  100. package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
  101. package/types/components/DatePicker/RangeDate/RangeDate.d.ts +0 -2
  102. package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
  103. package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +0 -4
  104. package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -1
  105. package/types/components/DatePicker/SingleDate/SingleDate.d.ts +0 -2
  106. package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
  107. package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +0 -4
  108. package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
  109. package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts +4 -0
  110. package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts.map +1 -1
  111. package/types/examples/plasma_b2c/components/Accordion/Accordion.d.ts +4 -0
  112. package/types/examples/plasma_b2c/components/Accordion/Accordion.d.ts.map +1 -1
  113. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +0 -2
  114. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
  115. package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts +4 -4
  116. package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts.map +1 -1
  117. package/types/examples/plasma_web/components/Accordion/Accordion.d.ts +4 -4
  118. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +0 -2
  119. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
@@ -19,7 +19,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
19
19
  var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
20
20
  var _RangeDate = /*#__PURE__*/require("./RangeDate.styles");
21
21
  var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover/RangeDatePopover");
22
- var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "value", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
22
+ var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
23
23
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
24
24
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
25
25
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -40,7 +40,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
40
40
  isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
41
41
  _ref$opened = _ref.opened,
42
42
  opened = _ref$opened === void 0 ? false : _ref$opened,
43
- externalValue = _ref.value,
44
43
  label = _ref.label,
45
44
  leftHelper = _ref.leftHelper,
46
45
  contentLeft = _ref.contentLeft,
@@ -123,10 +122,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
123
122
  var rootRef = (0, _react.useRef)(null);
124
123
  var innerRefFirst = (0, _react.useRef)(null);
125
124
  var innerRefSecond = (0, _react.useRef)(null);
126
- var _ref2 = externalValue || [],
127
- _ref3 = _slicedToArray(_ref2, 2),
128
- startExternalValue = _ref3[0],
129
- endExternalValue = _ref3[1];
130
125
  var _useState = (0, _react.useState)(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
131
126
  _useState2 = _slicedToArray(_useState, 2),
132
127
  firstInputRef = _useState2[0],
@@ -139,24 +134,24 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
139
134
  _useState6 = _slicedToArray(_useState5, 2),
140
135
  isInnerOpen = _useState6[0],
141
136
  setIsInnerOpen = _useState6[1];
142
- var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(startExternalValue || defaultFirstDate, format, lang)),
137
+ var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang)),
143
138
  _useState8 = _slicedToArray(_useState7, 2),
144
139
  calendarFirstValue = _useState8[0],
145
140
  setCalendarFirstValue = _useState8[1];
146
141
  var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
147
- value: startExternalValue || defaultFirstDate,
142
+ value: defaultFirstDate,
148
143
  format: format,
149
144
  lang: lang
150
145
  })),
151
146
  _useState10 = _slicedToArray(_useState9, 2),
152
147
  inputFirstValue = _useState10[0],
153
148
  setInputFirstValue = _useState10[1];
154
- var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(endExternalValue || defaultSecondDate, format, lang)),
149
+ var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang)),
155
150
  _useState12 = _slicedToArray(_useState11, 2),
156
151
  calendarSecondValue = _useState12[0],
157
152
  setCalendarSecondValue = _useState12[1];
158
153
  var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
159
- value: endExternalValue || defaultSecondDate,
154
+ value: defaultSecondDate,
160
155
  format: format,
161
156
  lang: lang
162
157
  })),
@@ -294,8 +289,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
294
289
  }));
295
290
  setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(startValue, format, lang));
296
291
  setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(endValue, format, lang));
297
- handleCommitFirstDate(startValue, true, false);
298
- handleCommitSecondDate(endValue, true, false);
299
292
  outerHandler === null || outerHandler === void 0 || outerHandler(event);
300
293
  };
301
294
  var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
@@ -321,10 +314,10 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
321
314
  handleToggle(false);
322
315
  }
323
316
  };
324
- var handleChangeCalendarValue = function handleChangeCalendarValue(_ref4, dateInfo) {
325
- var _ref5 = _slicedToArray(_ref4, 2),
326
- firstDate = _ref5[0],
327
- secondDate = _ref5[1];
317
+ var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
318
+ var _ref3 = _slicedToArray(_ref2, 2),
319
+ firstDate = _ref3[0],
320
+ secondDate = _ref3[1];
328
321
  if (firstDate) {
329
322
  handleCommitFirstDate(firstDate, false, true, dateInfo);
330
323
  }
@@ -401,56 +394,42 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
401
394
  });
402
395
  }, [opened]);
403
396
  (0, _react.useEffect)(function () {
404
- if (calendarFirstValue && calendarSecondValue) {
405
- setFullDateEntered(true);
406
- }
407
- }, [calendarFirstValue, calendarSecondValue]);
408
- (0, _react.useLayoutEffect)(function () {
397
+ setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
409
398
  setInputFirstValue((0, _dateHelper.formatInputValue)({
410
- value: startExternalValue || defaultFirstDate,
399
+ value: defaultFirstDate,
411
400
  format: format,
412
401
  lang: lang
413
402
  }));
414
- if (!format) {
415
- setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(startExternalValue || defaultFirstDate, undefined, lang));
416
- return;
417
- }
418
- var _validateDateWithFull = (0, _dateHelper.validateDateWithFullMonth)({
419
- currentValue: inputFirstValue,
420
- format: format,
421
- lang: lang
422
- }),
423
- hasMonthFullName = _validateDateWithFull.hasMonthFullName,
424
- isValidMonth = _validateDateWithFull.isValidMonth,
425
- isLengthEqual = _validateDateWithFull.isLengthEqual;
426
- if (!hasMonthFullName && (inputFirstValue === null || inputFirstValue === void 0 ? void 0 : inputFirstValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
427
- setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(inputFirstValue, format, lang));
428
- }
429
- }, [startExternalValue, defaultFirstDate, format, lang]);
430
- (0, _react.useLayoutEffect)(function () {
403
+ }, [defaultFirstDate]);
404
+ (0, _react.useEffect)(function () {
405
+ setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
431
406
  setInputSecondValue((0, _dateHelper.formatInputValue)({
432
- value: endExternalValue || defaultSecondDate,
407
+ value: defaultSecondDate,
433
408
  format: format,
434
409
  lang: lang
435
410
  }));
436
- if (!format) {
437
- setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(endExternalValue || defaultSecondDate, format, lang));
438
- return;
439
- }
440
- var _validateDateWithFull2 = (0, _dateHelper.validateDateWithFullMonth)({
441
- currentValue: inputSecondValue,
442
- format: format,
443
- lang: lang
444
- }),
445
- hasMonthFullName = _validateDateWithFull2.hasMonthFullName,
446
- isValidMonth = _validateDateWithFull2.isValidMonth,
447
- isLengthEqual = _validateDateWithFull2.isLengthEqual;
448
- if (!hasMonthFullName && (inputSecondValue === null || inputSecondValue === void 0 ? void 0 : inputSecondValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
449
- setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(inputSecondValue, format, lang));
411
+ }, [defaultSecondDate]);
412
+ (0, _react.useEffect)(function () {
413
+ setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
414
+ setInputFirstValue((0, _dateHelper.formatInputValue)({
415
+ value: defaultFirstDate,
416
+ format: format,
417
+ lang: lang
418
+ }));
419
+ setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
420
+ setInputSecondValue((0, _dateHelper.formatInputValue)({
421
+ value: defaultSecondDate,
422
+ format: format,
423
+ lang: lang
424
+ }));
425
+ }, [format, lang]);
426
+ (0, _react.useEffect)(function () {
427
+ if (calendarFirstValue && calendarSecondValue) {
428
+ setFullDateEntered(true);
450
429
  }
451
- }, [endExternalValue, defaultSecondDate, format, lang]);
452
- var RootWrapper = (0, _react.useCallback)(function (_ref6) {
453
- var children = _ref6.children;
430
+ }, [calendarFirstValue, calendarSecondValue]);
431
+ var RootWrapper = (0, _react.useCallback)(function (_ref4) {
432
+ var children = _ref4.children;
454
433
  return /*#__PURE__*/_react["default"].createElement(Root, {
455
434
  view: view,
456
435
  size: size,
@@ -17,7 +17,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
17
17
  var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
18
18
  var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
19
19
  var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
20
- var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
20
+ var _excluded = ["className", "opened", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
23
23
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -34,7 +34,6 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
34
34
  var className = _ref.className,
35
35
  _ref$opened = _ref.opened,
36
36
  opened = _ref$opened === void 0 ? false : _ref$opened,
37
- value = _ref.value,
38
37
  label = _ref.label,
39
38
  _ref$labelPlacement = _ref.labelPlacement,
40
39
  labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
@@ -103,12 +102,12 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
103
102
  _useState2 = _slicedToArray(_useState, 2),
104
103
  isInnerOpen = _useState2[0],
105
104
  setIsInnerOpen = _useState2[1];
106
- var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(value || defaultDate, format, lang)),
105
+ var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang)),
107
106
  _useState4 = _slicedToArray(_useState3, 2),
108
107
  calendarValue = _useState4[0],
109
108
  setCalendarValue = _useState4[1];
110
109
  var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
111
- value: value || defaultDate,
110
+ value: defaultDate,
112
111
  format: format,
113
112
  lang: lang
114
113
  })),
@@ -139,12 +138,6 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
139
138
  datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
140
139
  handleChangeValue = _useDatePicker.handleChangeValue,
141
140
  handleCommitDate = _useDatePicker.handleCommitDate;
142
- var handleBlur = function handleBlur(event, date) {
143
- if (onBlur) {
144
- onBlur(event);
145
- }
146
- handleCommitDate(date, true, false);
147
- };
148
141
  var handleToggle = function handleToggle(opened, event) {
149
142
  if (disabled || readOnly) {
150
143
  return;
@@ -183,9 +176,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
183
176
  return handleCommitDate(date, true, false);
184
177
  },
185
178
  onFocus: onFocus,
186
- onBlur: function onBlur(event) {
187
- return handleBlur(event, inputValue);
188
- },
179
+ onBlur: onBlur,
189
180
  onKeyDown: onKeyDown,
190
181
  required: required,
191
182
  requiredPlacement: requiredPlacement,
@@ -198,28 +189,22 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
198
189
  return prevOpen !== opened && opened;
199
190
  });
200
191
  }, [opened]);
201
- (0, _react.useLayoutEffect)(function () {
192
+ (0, _react.useEffect)(function () {
193
+ setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
202
194
  setInputValue((0, _dateHelper.formatInputValue)({
203
- value: value || defaultDate,
195
+ value: defaultDate,
204
196
  format: format,
205
197
  lang: lang
206
198
  }));
207
- if (!format) {
208
- setCalendarValue((0, _dateHelper.formatCalendarValue)(value || defaultDate, undefined, lang));
209
- return;
210
- }
211
- var _validateDateWithFull = (0, _dateHelper.validateDateWithFullMonth)({
212
- currentValue: inputValue,
213
- format: format,
214
- lang: lang
215
- }),
216
- hasMonthFullName = _validateDateWithFull.hasMonthFullName,
217
- isValidMonth = _validateDateWithFull.isValidMonth,
218
- isLengthEqual = _validateDateWithFull.isLengthEqual;
219
- if (!hasMonthFullName && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
220
- setCalendarValue((0, _dateHelper.formatCalendarValue)(inputValue, format, lang));
221
- }
222
- }, [value, defaultDate, format, lang]);
199
+ }, [defaultDate]);
200
+ (0, _react.useEffect)(function () {
201
+ setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
202
+ setInputValue((0, _dateHelper.formatInputValue)({
203
+ value: defaultDate,
204
+ format: format,
205
+ lang: lang
206
+ }));
207
+ }, [format, lang]);
223
208
  return /*#__PURE__*/_react["default"].createElement(Root, _extends({
224
209
  view: view,
225
210
  size: size,
@@ -7,16 +7,21 @@ exports.IconChevronDownFill = void 0;
7
7
  var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
8
  var _ChevronDownFill = /*#__PURE__*/require("../Icon.assets/ChevronDownFill");
9
9
  var _IconRoot = /*#__PURE__*/require("../IconRoot");
10
+ var _excluded = ["size", "color", "className"];
10
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
13
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
14
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
15
  var IconChevronDownFill = exports.IconChevronDownFill = function IconChevronDownFill(_ref) {
12
16
  var _ref$size = _ref.size,
13
17
  size = _ref$size === void 0 ? 'xs' : _ref$size,
14
18
  color = _ref.color,
15
- className = _ref.className;
16
- return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
19
+ className = _ref.className,
20
+ rest = _objectWithoutProperties(_ref, _excluded);
21
+ return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
17
22
  className: className,
18
23
  size: size,
19
24
  color: color,
20
25
  icon: _ChevronDownFill.ChevronDownFill
21
- });
26
+ }, rest));
22
27
  };
@@ -7,16 +7,21 @@ exports.IconMinus = void 0;
7
7
  var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
8
8
  var _Minus = /*#__PURE__*/require("../Icon.assets/Minus");
9
9
  var _IconRoot = /*#__PURE__*/require("../IconRoot");
10
+ var _excluded = ["size", "color", "className"];
10
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
13
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
14
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
15
  var IconMinus = exports.IconMinus = function IconMinus(_ref) {
12
16
  var _ref$size = _ref.size,
13
17
  size = _ref$size === void 0 ? 's' : _ref$size,
14
18
  color = _ref.color,
15
- className = _ref.className;
16
- return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
19
+ className = _ref.className,
20
+ rest = _objectWithoutProperties(_ref, _excluded);
21
+ return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
17
22
  className: className,
18
23
  size: size,
19
24
  color: color,
20
25
  icon: _Minus.Minus
21
- });
26
+ }, rest));
22
27
  };
@@ -20,7 +20,11 @@ var config = exports.config = {
20
20
  l: /*#__PURE__*/(0, _styledComponents.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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
21
21
  m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.375rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
22
22
  s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.6875rem;", ":0.875rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
23
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
23
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
24
+ h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.125rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-bold-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
25
+ h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-bold-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
26
+ h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.688rem;", ":0.875rem;", ":0.25rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
27
+ h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-bold-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
24
28
  }
25
29
  }
26
30
  };
@@ -95,6 +95,24 @@ export const Default: StoryObj<AccordionProps> = {
95
95
  };
96
96
 
97
97
  const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
98
+ const getSizeForIconButton = (size) => {
99
+ switch (size) {
100
+ case 'l':
101
+ case 'h2':
102
+ case 'h3':
103
+ return 'l';
104
+ case 'm':
105
+ return 'm';
106
+ case 's':
107
+ case 'h4':
108
+ return 's';
109
+ case 'xs':
110
+ case 'h5':
111
+ return 'xs';
112
+ default:
113
+ return 'm';
114
+ }
115
+ };
98
116
 
99
117
  const ControlledAccordion = (props: AccordionProps) => {
100
118
  const args = { ...props, text: undefined };
@@ -106,7 +124,11 @@ const ControlledAccordion = (props: AccordionProps) => {
106
124
  <Accordion {...args}>
107
125
  <AccordionItem
108
126
  contentRight={
109
- <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
127
+ <IconButton
128
+ view="secondary"
129
+ size={getSizeForIconButton(args.size)}
130
+ onClick={() => setActiveFirst(!activeFirst)}
131
+ >
110
132
  <IconPlus size={getSizeForIcon(args.size)} />
111
133
  </IconButton>
112
134
  }
@@ -120,7 +142,11 @@ const ControlledAccordion = (props: AccordionProps) => {
120
142
  </AccordionItem>
121
143
  <AccordionItem
122
144
  contentRight={
123
- <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
145
+ <IconButton
146
+ view="secondary"
147
+ size={getSizeForIconButton(args.size)}
148
+ onClick={() => setActiveSecond(!activeSecond)}
149
+ >
124
150
  <IconPlus size={getSizeForIcon(args.size)} />
125
151
  </IconButton>
126
152
  }
@@ -134,7 +160,11 @@ const ControlledAccordion = (props: AccordionProps) => {
134
160
  </AccordionItem>
135
161
  <AccordionItem
136
162
  contentRight={
137
- <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
163
+ <IconButton
164
+ view="secondary"
165
+ size={getSizeForIconButton(args.size)}
166
+ onClick={() => setActiveThree(!activeThree)}
167
+ >
138
168
  <IconPlus size={getSizeForIcon(args.size)} />
139
169
  </IconButton>
140
170
  }
@@ -14,17 +14,17 @@ var config = exports.config = {
14
14
  variations: {
15
15
  view: {
16
16
  "default": /*#__PURE__*/(0, _styledComponents.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(", ");"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft, _Accordion.accordionTokens.accordionItemPaddingHorizontal),
17
- clear: /*#__PURE__*/(0, _styledComponents.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;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
17
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0rem;", ":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;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
18
18
  },
19
19
  size: {
20
20
  l: /*#__PURE__*/(0, _styledComponents.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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
21
21
  m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.375rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
22
22
  s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.6875rem;", ":0.875rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
23
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
24
- },
25
- stretching: {
26
- filled: /*#__PURE__*/(0, _styledComponents.css)([""]),
27
- fixed: /*#__PURE__*/(0, _styledComponents.css)([""])
23
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
24
+ h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.125rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-bold-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
25
+ h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-bold-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
26
+ h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.688rem;", ":0.875rem;", ":0.25rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
27
+ h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-bold-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
28
28
  }
29
29
  }
30
30
  };
@@ -95,6 +95,24 @@ export const Default: StoryObj<AccordionProps> = {
95
95
  };
96
96
 
97
97
  const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
98
+ const getSizeForIconButton = (size) => {
99
+ switch (size) {
100
+ case 'l':
101
+ case 'h2':
102
+ case 'h3':
103
+ return 'l';
104
+ case 'm':
105
+ return 'm';
106
+ case 's':
107
+ case 'h4':
108
+ return 's';
109
+ case 'xs':
110
+ case 'h5':
111
+ return 'xs';
112
+ default:
113
+ return 'm';
114
+ }
115
+ };
98
116
 
99
117
  const ControlledAccordion = (props: AccordionProps) => {
100
118
  const args = { ...props, text: undefined };
@@ -106,7 +124,11 @@ const ControlledAccordion = (props: AccordionProps) => {
106
124
  <Accordion {...args}>
107
125
  <AccordionItem
108
126
  contentRight={
109
- <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
127
+ <IconButton
128
+ view="secondary"
129
+ size={getSizeForIconButton(args.size)}
130
+ onClick={() => setActiveFirst(!activeFirst)}
131
+ >
110
132
  <IconPlus size={getSizeForIcon(args.size)} />
111
133
  </IconButton>
112
134
  }
@@ -120,7 +142,11 @@ const ControlledAccordion = (props: AccordionProps) => {
120
142
  </AccordionItem>
121
143
  <AccordionItem
122
144
  contentRight={
123
- <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
145
+ <IconButton
146
+ view="secondary"
147
+ size={getSizeForIconButton(args.size)}
148
+ onClick={() => setActiveSecond(!activeSecond)}
149
+ >
124
150
  <IconPlus size={getSizeForIcon(args.size)} />
125
151
  </IconButton>
126
152
  }
@@ -134,7 +160,11 @@ const ControlledAccordion = (props: AccordionProps) => {
134
160
  </AccordionItem>
135
161
  <AccordionItem
136
162
  contentRight={
137
- <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
163
+ <IconButton
164
+ view="secondary"
165
+ size={getSizeForIconButton(args.size)}
166
+ onClick={() => setActiveThree(!activeThree)}
167
+ >
138
168
  <IconPlus size={getSizeForIcon(args.size)} />
139
169
  </IconButton>
140
170
  }
@@ -24,6 +24,7 @@ export var tokens = {
24
24
  accordionItemBorder: '--plasma-accordion-item-border',
25
25
  accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
26
26
  accordionItemIconColor: '--plasma-accordion-item-color-icon',
27
+ accordionItemIconSize: '--plasma-accordion-item-icon-szie',
27
28
  accordionItemTitleColor: '--plasma-accordion-item-title-color',
28
29
  accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
29
30
  accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
@@ -1,5 +1,4 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _StyledMinus, _StyledArrow;
3
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
4
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -63,21 +62,24 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
63
62
  }, [value, type, leftContentRef, setLeftPadding]);
64
63
  var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
65
64
  var StyledAnimationPlus = function StyledAnimationPlus() {
66
- return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
65
+ return /*#__PURE__*/React.createElement(StyledPlus, null, /*#__PURE__*/React.createElement(StyledMinus, {
67
66
  size: "xs",
68
- color: "inherit"
69
- })), /*#__PURE__*/React.createElement(StyledMinus, {
67
+ color: "inherit",
68
+ sizeCustomProperty: tokens.accordionItemIconSize
69
+ }), /*#__PURE__*/React.createElement(StyledMinus, {
70
70
  size: "xs",
71
71
  color: "inhert",
72
- className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement
72
+ className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement,
73
+ sizeCustomProperty: tokens.accordionItemIconSize
73
74
  }));
74
75
  };
75
76
  var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
76
77
  var disabledClass = disabled ? classes.accordionDisabled : '';
77
- var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(StyledArrow, {
78
+ var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? /*#__PURE__*/React.createElement(StyledArrow, {
78
79
  size: "xs",
79
- color: "inherit"
80
- })) : undefined;
80
+ color: "inherit",
81
+ sizeCustomProperty: tokens.accordionItemIconSize
82
+ }) : undefined;
81
83
  var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
82
84
  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
83
85
  var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
@@ -39,4 +39,4 @@ export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
39
39
  })(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
40
40
  export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
41
41
  componentId: "plasma-new-hope__sc-20ij9z-10"
42
- })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);
42
+ })(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);