@salutejs/plasma-new-hope 0.168.0-canary.1484.11355807813.0 → 0.168.0-dev.0

package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -6,12 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDatePicker = void 0;
 var _DatePicker = /*#__PURE__*/require("../DatePicker.tokens");
 var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
-var _datejs = /*#__PURE__*/require("../../../utils/datejs");
 var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
     setInputValue = _ref.setInputValue,
     setCalendarValue = _ref.setCalendarValue,
-    setIsInnerOpen = _ref.setIsInnerOpen,
     dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
     _ref$lang = _ref.lang,
@@ -21,24 +19,12 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     maskWithFormat = _ref.maskWithFormat,
     valueError = _ref.valueError,
     valueSuccess = _ref.valueSuccess,
-    inputRef = _ref.inputRef,
     name = _ref.name,
-    onToggle = _ref.onToggle,
     onChangeValue = _ref.onChangeValue,
     onCommitDate = _ref.onCommitDate,
     onChange = _ref.onChange;
   var datePickerErrorClass = valueError ? _DatePicker.classes.datePickerError : undefined;
   var datePickerSuccessClass = valueSuccess ? _DatePicker.classes.datePickerSuccess : undefined;
-  var handleToggle = function handleToggle(opened, event) {
-    if (disabled || readOnly) {
-      return;
-    }
-    var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) ? true : opened;
-    if (onToggle) {
-      return onToggle(isCalendarOpen, event);
-    }
-    setIsInnerOpen(isCalendarOpen);
-  };
   var handleChangeValue = function handleChangeValue(event) {
     if (disabled || readOnly) {
       return;
@@ -61,24 +47,14 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       });
       return;
     }
-
-    /**
-     * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
-     * нужно дополнительно проводить валидацию на полноту введенной даты.
-     * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
-     */
-    var hasMonthFullName = /M{3,4}/g.test(format);
-    var isValidMonth;
-    var isLengthEqual;
-    if (hasMonthFullName) {
-      _datejs.customDayjs.locale(lang);
-      var firstIndexOfMonth = format.indexOf('M');
-      var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
-      var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
-      var monthFormatting = format.replace(/[^M]/g, '');
-      isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
-      isLengthEqual = format.length - monthFormatting.length === newValue.length - fullMonthName.length;
-    }
+    var _validateDateWithFull = (0, _dateHelper.validateDateWithFullMonth)({
+        currentValue: newValue,
+        format: format,
+        lang: lang
+      }),
+      hasMonthFullName = _validateDateWithFull.hasMonthFullName,
+      isValidMonth = _validateDateWithFull.isValidMonth,
+      isLengthEqual = _validateDateWithFull.isLengthEqual;
     if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
     }
@@ -108,20 +84,18 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
-      setInputValue((0, _dateHelper.formatInputValue)({
+      var _formattedInputValue = (0, _dateHelper.formatInputValue)({
         value: date,
         format: format,
         lang: lang
-      }));
+      });
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
+      setInputValue(_formattedInputValue);
       onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, _formattedInputValue);
       onChange === null || onChange === void 0 || onChange({
         target: {
-          value: (0, _dateHelper.formatInputValue)({
-            value: date,
-            format: format,
-            lang: lang
-          }),
+          value: _formattedInputValue,
           name: name
         }
       });
@@ -132,19 +106,18 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
-    setInputValue((0, _dateHelper.formatInputValue)({
+    var formattedInputValue = (0, _dateHelper.formatInputValue)({
       value: newDate,
       format: format,
       lang: lang
-    }));
+    });
+    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
+    setInputValue(formattedInputValue);
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
+    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedInputValue);
     onChange === null || onChange === void 0 || onChange({
       target: {
-        value: (0, _dateHelper.formatInputValue)({
-          value: date,
-          format: format
-        }),
+        value: formattedInputValue,
         name: name
       }
     });
@@ -152,7 +125,6 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
-    handleToggle: handleToggle,
     handleChangeValue: handleChangeValue,
     handleCommitDate: handleCommitDate
   };

package/styled-components/cjs/components/DatePicker/hooks/useKeyboardNavigation.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useKeyNavigation = exports.keys = void 0;
 var keys = exports.keys = {
-  Space: 'Space'
+  Space: 'Space',
+  Escape: 'Escape'
 };
 var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref) {
   var isCalendarOpen = _ref.isCalendarOpen,
+    closeOnEsc = _ref.closeOnEsc,
     onToggle = _ref.onToggle;
   var onKeyDown = function onKeyDown(event) {
     switch (event.code) {
@@ -20,6 +22,14 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
           }
           break;
         }
+      case keys.Escape:
+        {
+          if (isCalendarOpen && closeOnEsc) {
+            event.preventDefault();
+            onToggle(false, event);
+          }
+          break;
+        }
       default:
         {
           break;

package/styled-components/cjs/components/DatePicker/utils/dateHelper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
+exports.validateDateWithFullMonth = exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
 var _datejs = /*#__PURE__*/require("../../../utils/datejs");
 var formatInputValue = exports.formatInputValue = function formatInputValue(_ref) {
   var value = _ref.value,
@@ -84,4 +84,34 @@ var getMaskedDateOnInput = exports.getMaskedDateOnInput = function getMaskedDate
     return value + delimiter;
   }
   return value;
+};
+var validateDateWithFullMonth = exports.validateDateWithFullMonth = function validateDateWithFullMonth(_ref2) {
+  var currentValue = _ref2.currentValue,
+    format = _ref2.format,
+    lang = _ref2.lang;
+  /**
+   * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+   * нужно дополнительно проводить валидацию на полноту введенной даты.
+   * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+   */
+  var hasMonthFullName = /M{3,4}/g.test(format);
+  if (!hasMonthFullName) {
+    return {
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: false,
+      isLengthEqual: false
+    };
+  }
+  _datejs.customDayjs.locale(lang);
+  var firstIndexOfMonth = format.indexOf('M');
+  var lastIndexOfMonth = currentValue.indexOf(getDateFormatDelimiter(format), firstIndexOfMonth);
+  var fullMonthName = !lastIndexOfMonth ? currentValue.slice(firstIndexOfMonth) : currentValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+  var monthFormatting = format.replace(/[^M]/g, '');
+  var isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+  var isLengthEqual = format.length - monthFormatting.length === currentValue.length - fullMonthName.length;
+  return {
+    hasMonthFullName: hasMonthFullName,
+    isValidMonth: isValidMonth,
+    isLengthEqual: isLengthEqual
+  };
 };

package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,8 +7,6 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
-import { IconButton } from '../IconButton/IconButton';
-import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -93,80 +91,3 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
-
-const getSizeForIcon = (size) => {
-    const map = {
-        mr: 's',
-        lr: 's',
-        m: 's',
-        l: 's',
-        sr: 's',
-        xsr: 'xs',
-    };
-    if (map[size]) {
-        return map[size];
-    }
-
-    return size;
-};
-
-const ControlledAccordion = (props: AccordionProps) => {
-    const args = { ...props, text: undefined };
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [activeFirst, setActiveFirst] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [activeSecond, setActiveSecond] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [activeThree, setActiveThree] = useState(false);
-
-    return (
-        <Accordion {...args}>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeFirst}
-            >
-                {args.body}
-            </AccordionItem>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeSecond}
-            >
-                {args.body}
-            </AccordionItem>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeThree}
-            >
-                {args.body}
-            </AccordionItem>
-        </Accordion>
-    );
-};
-
-export const Controlled: StoryObj<AccordionProps> = {
-    render: (props: AccordionProps) => ControlledAccordion(props),
-};

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,8 +7,6 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
-import { IconButton } from '../IconButton/IconButton';
-import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -93,80 +91,3 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
-
-const getSizeForIcon = (size) => {
-    const map = {
-        mr: 's',
-        lr: 's',
-        m: 's',
-        l: 's',
-        sr: 's',
-        xsr: 'xs',
-    };
-    if (map[size]) {
-        return map[size];
-    }
-
-    return size;
-};
-
-const ControlledAccordion = (props: AccordionProps) => {
-    const args = { ...props, text: undefined };
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [activeFirst, setActiveFirst] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [activeSecond, setActiveSecond] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [activeThree, setActiveThree] = useState(false);
-
-    return (
-        <Accordion {...args}>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeFirst}
-            >
-                {args.body}
-            </AccordionItem>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeSecond}
-            >
-                {args.body}
-            </AccordionItem>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeThree}
-            >
-                {args.body}
-            </AccordionItem>
-        </Accordion>
-    );
-};
-
-export const Controlled: StoryObj<AccordionProps> = {
-    render: (props: AccordionProps) => ControlledAccordion(props),
-};

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -11,12 +11,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, useRef, forwardRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { convertRoundnessMatrix } from '../../../../utils/roundness';
 import { classes, tokens } from '../../Accordion.tokens';
 import { cx } from '../../../../utils';
-import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionBody, StyledAccordionTitle, StyledAccordionContentLeft, StyledAccordionHeaderLeft, StyledAccordionContentRight, StyledArrow, StyledMinus, StyledPlus, StyledAccordionBodyAnimate, StyledAccordionContentRightDefault } from './AccordionItem.styles';
-export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
+import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionBody, StyledAccordionTitle, StyledAccordionContentLeft, StyledAccordionHeaderLeft, StyledAccordionContentRight, StyledArrow, StyledMinus, StyledPlus, StyledAccordionBodyAnimate } from './AccordionItem.styles';
+export var AccordionItem = function AccordionItem(_ref) {
   var _ref2;
   var value = _ref.value,
     contentRight = _ref.contentRight,
@@ -34,7 +34,6 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
     disabled = _ref.disabled,
     _ref$alignWithTitle = _ref.alignWithTitle,
     alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
-    opened = _ref.opened,
     view = _ref.view,
     onChange = _ref.onChange;
   var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
@@ -57,7 +56,7 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
     var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
     setLeftPadding(leftPaddingBody);
   }, [value, type, leftContentRef, setLeftPadding]);
-  var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
+  var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
   var StyledAnimationPLus = function StyledAnimationPLus() {
     return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
       size: "xs",
@@ -80,7 +79,6 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   return /*#__PURE__*/React.createElement(StyledAccordionItem, {
     className: cx(classes.accordionItem, className, disabledClass),
     key: key,
-    ref: outerRef,
     style: _objectSpread({
       borderRadius: accordionBorderRadius
     }, style)
@@ -94,7 +92,7 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   }, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
     ref: leftContentRef,
     className: leftContentRotate
-  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight ? /*#__PURE__*/React.createElement(StyledAccordionContentRightDefault, null, contentRight) : /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
+  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
     className: rightContentRotate
   }, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
     "aria-labelledby": "accordion-item-".concat(key),
@@ -107,4 +105,4 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   }, /*#__PURE__*/React.createElement(StyledAccordionBody, {
     className: classes.accordionItemBody
   }, children)));
-});
+};

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -19,27 +19,24 @@ export var StyledAccordionHeaderLeft = /*#__PURE__*/styled.div.withConfig({
 export var StyledAccordionContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-3"
 })(["transition:0.2s;transform:rotate(90deg);&.", "{transition:0.2s;transform:rotate(0deg);}"], classes.accordionItemShowBody);
-export var StyledAccordionContentRightDefault = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-4"
-})(["margin-top:calc(0px - var(", "));margin-right:calc(0px - var(", "));margin-bottom:calc(0px - var(", "));"], tokens.accordionItemPaddingVertical, tokens.accordionItemPaddingHorizontalLeft, tokens.accordionItemPaddingVertical);
 export var StyledAccordionContentLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-5"
+  componentId: "plasma-new-hope__sc-20ij9z-4"
 })(["transition:0.2s;display:flex;align-items:center;&.", "{transition:0.2s;transform:rotate(180deg);}"], classes.accordionItemShowBody);
 export var StyledAccordionTitle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-6"
+  componentId: "plasma-new-hope__sc-20ij9z-5"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], tokens.accordionItemTitleColor, tokens.accordionItemTitleFontFamily, tokens.accordionItemTitleFontSize, tokens.accordionItemTitleFontWeight, tokens.accordionItemTitleFontStyle, tokens.accordionItemTitleLetterSpacing, tokens.accordionItemTitleLineHeight);
 export var StyledAccordionBodyAnimate = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-7"
+  componentId: "plasma-new-hope__sc-20ij9z-6"
 })(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ");&.", "{transition:0.2s;transform:rotate(0deg);}}"], classes.accordionItemShowBody, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
 export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-8"
+  componentId: "plasma-new-hope__sc-20ij9z-7"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-9"
+  componentId: "plasma-new-hope__sc-20ij9z-8"
 })(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-10"
+  componentId: "plasma-new-hope__sc-20ij9z-9"
 })(["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);
 export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-11"
+  componentId: "plasma-new-hope__sc-20ij9z-10"
 })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);