@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/components/design/paginators/scrollingPaginator/scrollingPaginator.css

@@ -0,0 +1,36 @@
+.scrollingPaginator {
+  overflow-y: auto;
+}
+.scrollingPaginator.scrollingPaginator_xs {
+  max-height: 200px;
+}
+.scrollingPaginator.scrollingPaginator_s {
+  max-height: 300px;
+}
+.scrollingPaginator.scrollingPaginator_m {
+  max-height: 400px;
+}
+.scrollingPaginator.scrollingPaginator_l {
+  max-height: 500px;
+}
+.scrollingPaginator.scrollingPaginator_xl {
+  max-height: 600px;
+}
+.scrollingPaginator.scrollingPaginator_fullParent {
+  max-height: 100%;
+}
+.scrollingPaginator.isLoadingMore {
+  position: relative;
+}
+.scrollingPaginator .scrollingPaginatorLoading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  gap: 10px;
+  z-index: 10;
+  margin: -40px 0 0;
+  height: 30px;
+}

package/dist/cjs/components/design/revealMore/RevealMore.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RevealMore = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./revealMore.css");
+var _RevealMoreInline = require("./RevealMoreInline");
+var _RevealMoreBelow = require("./RevealMoreBelow");
+const RevealMore = props => {
+  if (props.labelStyle === 'inline') {
+    return /*#__PURE__*/_react.default.createElement(_RevealMoreInline.RevealMoreInline, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_RevealMoreBelow.RevealMoreBelow, props);
+};
+exports.RevealMore = RevealMore;
+//# sourceMappingURL=RevealMore.js.map

package/dist/cjs/components/design/revealMore/RevealMore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealMore.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","RevealMore","_react","_RevealMoreInline","_RevealMoreBelow","props","labelStyle","default","createElement","RevealMoreInline","RevealMoreBelow"],"sources":["../../../../../src/components/design/revealMore/RevealMore.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport './revealMore.scss';\nimport { RevealMoreProps } from './types/revealMoreTypes';\nimport { RevealMoreInline } from './RevealMoreInline';\nimport { RevealMoreBelow } from './RevealMoreBelow';\n\nexport const RevealMore: React.FC<RevealMoreProps> = (props) => {\n  if (props.labelStyle === 'inline') {\n    return <RevealMoreInline { ...props } />;\n  }\n  \n  return <RevealMoreBelow { ...props } />;\n};\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,UAAA;AAEb,IAAAC,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAEA,IAAAO,iBAAA,GAAAP,OAAA;AACA,IAAAQ,gBAAA,GAAAR,OAAA;AAEO,MAAMK,UAAqC,GAAII,KAAK,IAAK;EAC9D,IAAIA,KAAK,CAACC,UAAU,KAAK,QAAQ,EAAE;IACjC,oBAAOJ,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACL,iBAAA,CAAAM,gBAAgB,EAAMJ,KAAS,CAAC;EAC1C;EAEA,oBAAOH,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACJ,gBAAA,CAAAM,eAAe,EAAML,KAAS,CAAC;AACzC,CAAC;AAACN,OAAA,CAAAE,UAAA,GAAAA,UAAA","ignoreList":[]}

package/dist/cjs/components/design/revealMore/RevealMoreBelow.js

@@ -0,0 +1,70 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RevealMoreBelow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../../..");
+var _useRevealMoreLogic = require("./hooks/useRevealMoreLogic");
+var _useCustomButton = require("./hooks/useCustomButton");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const RevealMoreBelow = props => {
+  const {
+    children,
+    lineClamp = 2,
+    customCssClass
+  } = props;
+  const {
+    isExpanded,
+    isOverflowing,
+    setIsOverflowing,
+    toggleExpand
+  } = (0, _useRevealMoreLogic.useRevealMoreLogic)();
+  const {
+    renderCustomButton
+  } = (0, _useCustomButton.useCustomButton)(toggleExpand);
+  const contentRef = (0, _react.useRef)(null);
+  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;
+  (0, _react.useEffect)(() => {
+    const el = contentRef.current;
+    if (el) {
+      setIsOverflowing(el.scrollHeight > el.clientHeight);
+    }
+  }, [children, lineClamp]);
+  const elementStyle = {
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: lineClamp
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `revealMore revealMore_below ${customCssClass || ''}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef,
+    className: 'revealMore_content',
+    style: isExpanded ? {
+      ...elementStyle,
+      WebkitLineClamp: 'none'
+    } : elementStyle
+  }, children), isOverflowing && (isCustomButton ? renderCustomButton(isExpanded ? props.revealLessButton : props.revealMoreButton) : /*#__PURE__*/_react.default.createElement(_.SimpleButton, {
+    onClickHandler: () => {
+      toggleExpand();
+      if (isExpanded) {
+        props.revealLessLabelOnClickHandler?.();
+      } else {
+        props.revealMoreLabelOnClickHandler?.();
+      }
+    },
+    id: "revealMore_button-below",
+    cssClass: "button compact",
+    label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
+    leftIcon: props.icon ? {
+      icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
+    } : undefined,
+    "aria-hidden": props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true
+  })));
+};
+exports.RevealMoreBelow = RevealMoreBelow;
+//# sourceMappingURL=RevealMoreBelow.js.map

package/dist/cjs/components/design/revealMore/RevealMoreBelow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealMoreBelow.js","names":["Object","defineProperty","exports","value","RevealMoreBelow","_react","_interopRequireWildcard","require","_","_useRevealMoreLogic","_useCustomButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","props","children","lineClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","useRevealMoreLogic","renderCustomButton","useCustomButton","contentRef","useRef","isCustomButton","useEffect","el","current","scrollHeight","clientHeight","elementStyle","overflow","display","WebkitBoxOrient","WebkitLineClamp","createElement","className","ref","style","revealLessButton","revealMoreButton","SimpleButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore","undefined"],"sources":["../../../../../src/components/design/revealMore/RevealMoreBelow.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreBelowProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreBelow: React.FC<RevealMoreBelowProps> = (props) => {\n  const {\n    children,\n    lineClamp = 2,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const el = contentRef.current;\n    if (el) {\n      setIsOverflowing(el.scrollHeight > el.clientHeight);\n    }\n  }, [children, lineClamp]);\n\n  const elementStyle: React.CSSProperties = {\n    overflow: 'hidden',\n    display: '-webkit-box',\n    WebkitBoxOrient: 'vertical',\n    WebkitLineClamp: lineClamp,\n  };\n\n  return (\n    <div className={ `revealMore revealMore_below ${ customCssClass || '' }` }>\n      <div\n        ref={ contentRef }\n        className={ 'revealMore_content' }\n        style={ isExpanded ? { ...elementStyle, WebkitLineClamp: 'none' } : elementStyle }\n      >\n        { children }\n      </div>\n      { isOverflowing && (\n        isCustomButton ? (\n          renderCustomButton(\n            isExpanded ? props.revealLessButton : props.revealMoreButton\n          )\n        ) : (\n          <SimpleButton\n            onClickHandler={ () => {\n              toggleExpand();\n              if (isExpanded) {\n                (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n              } else {\n                (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n              }\n            } }\n            id='revealMore_button-below'\n            cssClass=\"button compact\"\n            label={\n              isExpanded \n                ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n            }\n            leftIcon={\n              (props as ManagedButtonProps).icon ? { \n                icon: isExpanded \n                  ? (props as ManagedButtonProps).icon!.onRevealLess \n                  : (props as ManagedButtonProps).icon!.onRevealMore \n              } : undefined\n            }\n            aria-hidden = { props.revealLessLabelOnClickHandler || props.revealMoreLabelOnClickHandler ? false : true }\n          />\n        )\n      ) }\n    </div>\n  );\n};"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/design/revealMore/RevealMoreInline.js

@@ -0,0 +1,64 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RevealMoreInline = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../../..");
+var _useRevealMoreLogic = require("./hooks/useRevealMoreLogic");
+var _useCustomButton = require("./hooks/useCustomButton");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const RevealMoreInline = props => {
+  const {
+    children,
+    characterClamp = 100,
+    customCssClass
+  } = props;
+  const {
+    isExpanded,
+    isOverflowing,
+    setIsOverflowing,
+    toggleExpand
+  } = (0, _useRevealMoreLogic.useRevealMoreLogic)();
+  const {
+    renderCustomButton
+  } = (0, _useCustomButton.useCustomButton)(toggleExpand);
+  const [truncatedText, setTruncatedText] = (0, _react.useState)('');
+  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;
+  (0, _react.useEffect)(() => {
+    const text = children;
+    const limit = characterClamp;
+    if (text.length > limit) {
+      setTruncatedText(text.substring(0, limit));
+      setIsOverflowing(true);
+    } else {
+      setTruncatedText(text);
+      setIsOverflowing(false);
+    }
+  }, [children, characterClamp]);
+  const displayText = isExpanded ? children : truncatedText;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `revealMore revealMore_inline ${customCssClass || ''}`
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "revealMore_content"
+  }, displayText, isOverflowing && (isCustomButton ? renderCustomButton(isExpanded ? props.revealLessButton : props.revealMoreButton) : /*#__PURE__*/_react.default.createElement(_.SimpleButton, {
+    onClickHandler: () => {
+      toggleExpand();
+      if (isExpanded) {
+        props.revealLessLabelOnClickHandler?.();
+      } else {
+        props.revealMoreLabelOnClickHandler?.();
+      }
+    },
+    id: "revealMore_button-inline",
+    cssClass: "button compact text_only",
+    label: isExpanded ? props.revealLessLabel || 'Reveal Less' : props.revealMoreLabel || 'Reveal More',
+    leftIcon: props.icon ? {
+      icon: isExpanded ? props.icon.onRevealLess : props.icon.onRevealMore
+    } : undefined
+  }))));
+};
+exports.RevealMoreInline = RevealMoreInline;
+//# sourceMappingURL=RevealMoreInline.js.map

package/dist/cjs/components/design/revealMore/RevealMoreInline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealMoreInline.js","names":["Object","defineProperty","exports","value","RevealMoreInline","_react","_interopRequireWildcard","require","_","_useRevealMoreLogic","_useCustomButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","props","children","characterClamp","customCssClass","isExpanded","isOverflowing","setIsOverflowing","toggleExpand","useRevealMoreLogic","renderCustomButton","useCustomButton","truncatedText","setTruncatedText","useState","isCustomButton","useEffect","text","limit","length","substring","displayText","createElement","className","revealLessButton","revealMoreButton","SimpleButton","onClickHandler","revealLessLabelOnClickHandler","revealMoreLabelOnClickHandler","id","cssClass","label","revealLessLabel","revealMoreLabel","leftIcon","icon","onRevealLess","onRevealMore","undefined"],"sources":["../../../../../src/components/design/revealMore/RevealMoreInline.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useEffect } from 'react';\nimport { SimpleButton } from '../../..';\nimport { RevealMoreInlineProps, ManagedButtonProps } from './types/revealMoreTypes';\nimport { useRevealMoreLogic } from './hooks/useRevealMoreLogic';\nimport { useCustomButton } from './hooks/useCustomButton';\n\nexport const RevealMoreInline: React.FC<RevealMoreInlineProps> = (props) => {\n  const {\n    children,\n    characterClamp = 100,\n    customCssClass\n  } = props;\n\n  const { isExpanded, isOverflowing, setIsOverflowing, toggleExpand } = useRevealMoreLogic();\n  const { renderCustomButton } = useCustomButton(toggleExpand);\n  const [truncatedText, setTruncatedText] = useState('');\n\n  const isCustomButton = 'revealMoreButton' in props && 'revealLessButton' in props;\n\n  useEffect(() => {\n    const text = children as string;\n    const limit = characterClamp;\n    \n    if (text.length > limit) {\n      setTruncatedText(text.substring(0, limit));\n      setIsOverflowing(true);\n    } else {\n      setTruncatedText(text);\n      setIsOverflowing(false);\n    }\n  }, [children, characterClamp]);\n\n  const displayText = isExpanded ? (children as string) : truncatedText;\n\n  return (\n    <div className={ `revealMore revealMore_inline ${ customCssClass || '' }` }>\n      <span className=\"revealMore_content\">\n        { displayText }\n        { isOverflowing && (\n          isCustomButton ? (\n            renderCustomButton(\n              isExpanded ? props.revealLessButton : props.revealMoreButton\n            )\n          ) : (\n            <SimpleButton\n              onClickHandler={ () => {\n                toggleExpand();\n                if (isExpanded) {\n                  (props as ManagedButtonProps).revealLessLabelOnClickHandler?.();\n                } else {\n                  (props as ManagedButtonProps).revealMoreLabelOnClickHandler?.();\n                }\n              } }\n              id='revealMore_button-inline'\n              cssClass=\"button compact text_only\"\n              label={\n                isExpanded \n                  ? (props as ManagedButtonProps).revealLessLabel || 'Reveal Less' \n                  : (props as ManagedButtonProps).revealMoreLabel || 'Reveal More'\n              }\n              leftIcon={\n                (props as ManagedButtonProps).icon ? { \n                  icon: isExpanded \n                    ? (props as ManagedButtonProps).icon!.onRevealLess \n                    : (props as ManagedButtonProps).icon!.onRevealMore \n                } : undefined\n              }\n            />\n          )\n        ) }\n      </span>\n    </div>\n  );\n};"],"mappings":";AAAA,YAAY;;AAACA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,gBAAA;AAEb,IAAAC,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,CAAA,GAAAD,OAAA;AAEA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAA0D,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAjB,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAA2B,wBAAA,CAAAhB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEnD,MAAMR,gBAAiD,GAAIwB,KAAK,IAAK;EAC1E,MAAM;IACJC,QAAQ;IACRC,cAAc,GAAG,GAAG;IACpBC;EACF,CAAC,GAAGH,KAAK;EAET,MAAM;IAAEI,UAAU;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC;EAAa,CAAC,GAAG,IAAAC,sCAAkB,EAAC,CAAC;EAC1F,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,gCAAe,EAACH,YAAY,CAAC;EAC5D,MAAM,CAACI,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EAEtD,MAAMC,cAAc,GAAG,kBAAkB,IAAId,KAAK,IAAI,kBAAkB,IAAIA,KAAK;EAEjF,IAAAe,gBAAS,EAAC,MAAM;IACd,MAAMC,IAAI,GAAGf,QAAkB;IAC/B,MAAMgB,KAAK,GAAGf,cAAc;IAE5B,IAAIc,IAAI,CAACE,MAAM,GAAGD,KAAK,EAAE;MACvBL,gBAAgB,CAACI,IAAI,CAACG,SAAS,CAAC,CAAC,EAAEF,KAAK,CAAC,CAAC;MAC1CX,gBAAgB,CAAC,IAAI,CAAC;IACxB,CAAC,MAAM;MACLM,gBAAgB,CAACI,IAAI,CAAC;MACtBV,gBAAgB,CAAC,KAAK,CAAC;IACzB;EACF,CAAC,EAAE,CAACL,QAAQ,EAAEC,cAAc,CAAC,CAAC;EAE9B,MAAMkB,WAAW,GAAGhB,UAAU,GAAIH,QAAQ,GAAcU,aAAa;EAErE,oBACElC,MAAA,CAAAgB,OAAA,CAAA4B,aAAA;IAAKC,SAAS,EAAG,gCAAiCnB,cAAc,IAAI,EAAE;EAAK,gBACzE1B,MAAA,CAAAgB,OAAA,CAAA4B,aAAA;IAAMC,SAAS,EAAC;EAAoB,GAChCF,WAAW,EACXf,aAAa,KACbS,cAAc,GACZL,kBAAkB,CAChBL,UAAU,GAAGJ,KAAK,CAACuB,gBAAgB,GAAGvB,KAAK,CAACwB,gBAC9C,CAAC,gBAED/C,MAAA,CAAAgB,OAAA,CAAA4B,aAAA,CAACzC,CAAA,CAAA6C,YAAY;IACXC,cAAc,EAAGA,CAAA,KAAM;MACrBnB,YAAY,CAAC,CAAC;MACd,IAAIH,UAAU,EAAE;QACbJ,KAAK,CAAwB2B,6BAA6B,GAAG,CAAC;MACjE,CAAC,MAAM;QACJ3B,KAAK,CAAwB4B,6BAA6B,GAAG,CAAC;MACjE;IACF,CAAG;IACHC,EAAE,EAAC,0BAA0B;IAC7BC,QAAQ,EAAC,0BAA0B;IACnCC,KAAK,EACH3B,UAAU,GACLJ,KAAK,CAAwBgC,eAAe,IAAI,aAAa,GAC7DhC,KAAK,CAAwBiC,eAAe,IAAI,aACtD;IACDC,QAAQ,EACLlC,KAAK,CAAwBmC,IAAI,GAAG;MACnCA,IAAI,EAAE/B,UAAU,GACXJ,KAAK,CAAwBmC,IAAI,CAAEC,YAAY,GAC/CpC,KAAK,CAAwBmC,IAAI,CAAEE;IAC1C,CAAC,GAAGC;EACL,CACF,CACF,CAEC,CACH,CAAC;AAEV,CAAC;AAAChE,OAAA,CAAAE,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/dist/cjs/components/design/revealMore/hooks/useCustomButton.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCustomButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+const useCustomButton = toggleExpand => {
+  const renderCustomButton = button => {
+    return /*#__PURE__*/_react.default.cloneElement(button, {
+      onClickHandler: event => {
+        if (button.props.onClickHandler) {
+          button.props.onClickHandler(event);
+        }
+        toggleExpand();
+      }
+    });
+  };
+  return {
+    renderCustomButton
+  };
+};
+exports.useCustomButton = useCustomButton;
+//# sourceMappingURL=useCustomButton.js.map

package/dist/cjs/components/design/revealMore/hooks/useCustomButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomButton.js","names":["_react","_interopRequireDefault","require","useCustomButton","toggleExpand","renderCustomButton","button","React","cloneElement","onClickHandler","event","props","exports"],"sources":["../../../../../../src/components/design/revealMore/hooks/useCustomButton.ts"],"sourcesContent":["import React from 'react';\n\nexport const useCustomButton = (toggleExpand: () => void) => {\n  const renderCustomButton = (button: React.ReactElement) => {\n    return React.cloneElement(button, {\n      onClickHandler: (event: any) => {\n        if (button.props.onClickHandler) {\n          button.props.onClickHandler(event);\n        }\n        \n        toggleExpand();\n      },\n    });\n  };\n\n  return { renderCustomButton };\n};"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,MAAMC,eAAe,GAAIC,YAAwB,IAAK;EAC3D,MAAMC,kBAAkB,GAAIC,MAA0B,IAAK;IACzD,oBAAOC,cAAK,CAACC,YAAY,CAACF,MAAM,EAAE;MAChCG,cAAc,EAAGC,KAAU,IAAK;QAC9B,IAAIJ,MAAM,CAACK,KAAK,CAACF,cAAc,EAAE;UAC/BH,MAAM,CAACK,KAAK,CAACF,cAAc,CAACC,KAAK,CAAC;QACpC;QAEAN,YAAY,CAAC,CAAC;MAChB;IACF,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IAAEC;EAAmB,CAAC;AAC/B,CAAC;AAACO,OAAA,CAAAT,eAAA,GAAAA,eAAA","ignoreList":[]}

package/dist/cjs/components/design/revealMore/hooks/useRevealMoreLogic.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRevealMoreLogic = void 0;
+var _react = require("react");
+const useRevealMoreLogic = () => {
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return {
+    isExpanded,
+    isOverflowing,
+    setIsOverflowing,
+    toggleExpand
+  };
+};
+exports.useRevealMoreLogic = useRevealMoreLogic;
+//# sourceMappingURL=useRevealMoreLogic.js.map

package/dist/cjs/components/design/revealMore/hooks/useRevealMoreLogic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRevealMoreLogic.js","names":["_react","require","useRevealMoreLogic","isExpanded","setIsExpanded","useState","isOverflowing","setIsOverflowing","toggleExpand","exports"],"sources":["../../../../../../src/components/design/revealMore/hooks/useRevealMoreLogic.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport const useRevealMoreLogic = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  \n  const toggleExpand = () => {\n    setIsExpanded(!isExpanded);\n  };\n  \n  return {\n    isExpanded,\n    isOverflowing,\n    setIsOverflowing,\n    toggleExpand\n  };\n};"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACnD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAEzD,MAAMG,YAAY,GAAGA,CAAA,KAAM;IACzBJ,aAAa,CAAC,CAACD,UAAU,CAAC;EAC5B,CAAC;EAED,OAAO;IACLA,UAAU;IACVG,aAAa;IACbC,gBAAgB;IAChBC;EACF,CAAC;AACH,CAAC;AAACC,OAAA,CAAAP,kBAAA,GAAAA,kBAAA","ignoreList":[]}

package/dist/cjs/components/design/revealMore/revealMore.css

@@ -0,0 +1,10 @@
+.revealMore.revealMore_below {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+}
+.revealMore #revealMore_button-inline {
+  padding: 0;
+  margin-left: 5px;
+}

package/dist/cjs/components/design/revealMore/types/revealMoreTypes.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=revealMoreTypes.js.map

package/dist/cjs/components/design/revealMore/types/revealMoreTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revealMoreTypes.js","names":[],"sources":["../../../../../../src/components/design/revealMore/types/revealMoreTypes.ts"],"sourcesContent":["import React from 'react';\n\n// Props shared by both components\nexport type BaseRevealMoreProps = {\n  children: React.ReactNode | string;\n  customCssClass?: string;\n}\n\n// Button configuration types\nexport type CustomButtonProps = {\n  revealMoreButton: React.ReactElement;\n  revealLessButton: React.ReactElement;\n}\n\nexport type ManagedButtonProps = {\n  revealMoreLabel?: string;\n  revealLessLabel?: string;\n  revealMoreLabelOnClickHandler?: () => void;\n  revealLessLabelOnClickHandler?: () => void;\n  icon?: {\n    onRevealMore: string;\n    onRevealLess: string;\n  };\n}\n\n// Component-specific props\nexport type RevealMoreInlineProps = BaseRevealMoreProps & (CustomButtonProps | ManagedButtonProps) & {\n  characterClamp?: number;\n  children: string; \n}\n\nexport type RevealMoreBelowProps = BaseRevealMoreProps & (CustomButtonProps | ManagedButtonProps) & {\n  lineClamp?: number;\n  children: React.ReactNode | string;\n}\n\n// Main component props \nexport type RevealMoreProps = \n  | ({ labelStyle: 'inline' } & RevealMoreInlineProps)\n  | ({ labelStyle: 'below' } & RevealMoreBelowProps);"],"mappings":"","ignoreList":[]}

package/dist/cjs/components/design/sidePanel/SidePanel.js

@@ -0,0 +1,114 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidePanel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = require("../icons/basicIcon/Icon");
+require("./sidePanel.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SidePanel = ({
+  id,
+  panelLabel = 'side panel',
+  size = 'm',
+  position = 'right',
+  positionRefNode,
+  animation = 'slide',
+  icons,
+  onClose = () => {},
+  onOpen = () => {},
+  isOpen = false,
+  allowOverflow = false,
+  isFloating = true,
+  customCssClass,
+  customControlButtonCssClass = '',
+  children
+}) => {
+  const [isOpenState, setIsOpenState] = (0, _react.useState)(isOpen);
+  const panelElement = (0, _react.useRef)(null);
+  const TOGGLE_TEXT = `Open and close ${panelLabel}`;
+  const panelCloseButton = (0, _react.useRef)(null);
+  const TogglePanelOpenState = (0, _react.useCallback)(() => {
+    const newStateIsOpen = !isOpenState;
+    setIsOpenState(newStateIsOpen);
+    if (newStateIsOpen) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [isOpenState, onClose, onOpen]);
+  const getIconCssClass = () => {
+    if (icons) {
+      return isOpenState ? icons.closed : icons.open;
+    }
+    if (isOpenState) {
+      return 'close';
+    }
+    switch (position) {
+      case 'left':
+        return 'chevronRightSelect';
+      case 'top':
+        return 'chevronDownSelect';
+      case 'bottom':
+        return 'chevronUpSelect';
+      default:
+        return 'chevronLeftSelect';
+    }
+  };
+  const PanelCloseButton = () => /*#__PURE__*/_react.default.createElement("button", {
+    ref: panelCloseButton,
+    className: `sidePanelClose ${customControlButtonCssClass}`,
+    title: TOGGLE_TEXT,
+    type: "button",
+    onClick: () => TogglePanelOpenState()
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: getIconCssClass()
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, "Open and close panel"));
+  const panelCssClass = (0, _react.useCallback)(() => `sidePanel 
+    ${isOpenState ? 'isOpen' : ''}
+    ${allowOverflow ? 'allowOverflow' : ''}
+    ${isFloating ? 'isFloating' : ''}
+    sidePanelSize_${size}
+    sidePanelPosition_${position}
+    sidePanelAnimation_${animation}
+    ${customCssClass || ''}`, [isOpenState, isFloating, size, position, animation, customCssClass]);
+  (0, _react.useEffect)(() => {
+    setIsOpenState(isOpen);
+  }, [isOpen]);
+  const getParentNode = () => {
+    if (positionRefNode) {
+      if ('current' in positionRefNode) {
+        return positionRefNode.current ? positionRefNode.current : document.body;
+      }
+      return positionRefNode;
+    }
+    return document.body;
+  };
+  (0, _react.useEffect)(() => {
+    const parentNode = getParentNode();
+    parentNode.classList.add('withSidePanels');
+    if (isOpenState) {
+      parentNode.classList.add(`sidePanel_${size}_${position}`);
+    } else {
+      parentNode.classList.remove(`sidePanel_${size}_${position}`);
+    }
+    return () => {
+      parentNode.classList.remove(`sidePanel_${size}_${position}`);
+    };
+  }, [animation, isOpenState, position, size]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: panelElement,
+    title: panelLabel,
+    id: id,
+    className: panelCssClass()
+  }, animation === 'slide' && /*#__PURE__*/_react.default.createElement(PanelCloseButton, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidePanelContent",
+    tabIndex: 0
+  }, children));
+};
+exports.SidePanel = SidePanel;
+//# sourceMappingURL=SidePanel.js.map

package/dist/cjs/components/design/sidePanel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","names":["Object","defineProperty","exports","value","SidePanel","_react","_interopRequireWildcard","require","_Icon","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","id","panelLabel","size","position","positionRefNode","animation","icons","onClose","onOpen","isOpen","allowOverflow","isFloating","customCssClass","customControlButtonCssClass","children","isOpenState","setIsOpenState","useState","panelElement","useRef","TOGGLE_TEXT","panelCloseButton","TogglePanelOpenState","useCallback","newStateIsOpen","getIconCssClass","closed","open","PanelCloseButton","createElement","ref","className","title","type","onClick","Icon","icon","panelCssClass","useEffect","getParentNode","current","document","body","parentNode","classList","add","remove","tabIndex"],"sources":["../../../../../src/components/design/sidePanel/SidePanel.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  ReactNode, useCallback, useEffect, useRef, useState\n} from 'react';\nimport { GenericFunction } from '../../../interfaces';\nimport { Icon } from '../icons/basicIcon/Icon';\n\nimport './sidePanel.scss';\n\nexport interface SidePanelInterface {\n  id: string;\n  panelLabel?: string;\n  size?: 's' | 'm' | 'l';\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  positionRefNode?: HTMLElement | React.RefObject<HTMLElement>;\n  animation?: 'none' | 'slide';\n  icons?: {\n    open: string;\n    closed: string;\n  }\n  onClose?: GenericFunction;\n  onOpen?: GenericFunction;\n  isOpen?: boolean;\n  allowOverflow?: boolean;\n  isFloating?: boolean;\n  customCssClass?: string;\n  customControlButtonCssClass?: string;\n  children: ReactNode;\n}\n\nexport const SidePanel: React.FC<SidePanelInterface> = (\n  {\n    id,\n    panelLabel = 'side panel',\n    size = 'm',\n    position = 'right',\n    positionRefNode,\n    animation = 'slide',\n    icons,\n    onClose = () => {},\n    onOpen = () => {},\n    isOpen = false,\n    allowOverflow = false,\n    isFloating = true,\n    customCssClass,\n    customControlButtonCssClass = '',\n    children\n  }\n) => {\n  const [isOpenState, setIsOpenState] = useState(isOpen);\n  const panelElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = `Open and close ${ panelLabel }`;\n  const panelCloseButton = useRef(null);\n\n  const TogglePanelOpenState = useCallback(() => {\n    const newStateIsOpen = !isOpenState;\n    setIsOpenState(newStateIsOpen);\n    if (newStateIsOpen) {\n      onOpen();\n    } else {\n      onClose();\n    }\n  }, [isOpenState, onClose, onOpen]);\n\n  const getIconCssClass = () => {\n    if (icons) {\n      return isOpenState ? icons.closed : icons.open;\n    }\n\n    if (isOpenState) {\n      return 'close';\n    }\n\n    switch (position) {\n    case 'left':\n      return 'chevronRightSelect';\n    case 'top':\n      return 'chevronDownSelect';\n    case 'bottom':\n      return 'chevronUpSelect';\n    default:\n      return 'chevronLeftSelect';\n    }\n  };\n\n  const PanelCloseButton: React.FC = () => (\n    <button\n      ref={ panelCloseButton }\n      className={ `sidePanelClose ${ customControlButtonCssClass }` }\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => TogglePanelOpenState() }\n    >\n      <Icon icon={ getIconCssClass() } />\n      <span className=\"sr-only\">Open and close panel</span>\n    </button>\n  );\n\n  const panelCssClass = useCallback(() =>\n    `sidePanel \n    ${ isOpenState ? 'isOpen' : '' }\n    ${ allowOverflow ? 'allowOverflow' : '' }\n    ${ isFloating ? 'isFloating' : '' }\n    sidePanelSize_${ size }\n    sidePanelPosition_${ position }\n    sidePanelAnimation_${ animation }\n    ${ customCssClass || '' }`,\n  [isOpenState, isFloating, size, position, animation, customCssClass]);\n\n  useEffect(() => {\n    setIsOpenState(isOpen);\n  }, [isOpen]);\n\n  const getParentNode = () => {\n    if (positionRefNode) {\n      if ('current' in positionRefNode) {\n        return positionRefNode.current ? positionRefNode.current : document.body;\n      }\n      return positionRefNode;\n    }\n    return document.body;\n  };\n\n  useEffect(() => {\n    const parentNode = getParentNode();\n\n    parentNode.classList.add('withSidePanels');\n    if (isOpenState) {\n      parentNode.classList.add(`sidePanel_${ size }_${ position }`);\n    } else {\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    }\n    return () =>{\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    };\n  }, [animation, isOpenState, position, size]);\n\n  return (\n    <div ref={ panelElement } title={ panelLabel } id={ id } className={ panelCssClass() }>\n      { animation === 'slide' && <PanelCloseButton /> }\n      { /* eslint-disable-next-line jsxA11y/no-noninteractive-tabindex */ }\n      <div className=\"sidePanelContent\" tabIndex={ 0 }>\n        { children }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/design/sidePanel/sidePanel.css

@@ -0,0 +1,178 @@
+/* BODY CLASSES FOR NON-FLOATING VERSIONS */
+body.withSidePanels,
+.panelContainer.withSidePanels {
+  transition: none;
+}
+body.withSidePanels.sidePanel_s_left,
+.panelContainer.withSidePanels.sidePanel_s_left {
+  padding-left: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_left,
+.panelContainer.withSidePanels.sidePanel_m_left {
+  padding-left: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_left,
+.panelContainer.withSidePanels.sidePanel_l_left {
+  padding-left: var(--sidePanelSizeLarge, 420px);
+}
+body.withSidePanels.sidePanel_s_right,
+.panelContainer.withSidePanels.sidePanel_s_right {
+  padding-right: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_right,
+.panelContainer.withSidePanels.sidePanel_m_right {
+  padding-right: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_right,
+.panelContainer.withSidePanels.sidePanel_l_right {
+  padding-right: var(--sidePanelSizeLarge, 420px);
+}
+body.withSidePanels.sidePanel_s_top,
+.panelContainer.withSidePanels.sidePanel_s_top {
+  padding-top: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_top,
+.panelContainer.withSidePanels.sidePanel_m_top {
+  padding-top: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_top,
+.panelContainer.withSidePanels.sidePanel_l_top {
+  padding-top: var(--sidePanelSizeLarge, 420px);
+}
+body.withSidePanels.sidePanel_s_bottom,
+.panelContainer.withSidePanels.sidePanel_s_bottom {
+  padding-bottom: var(--sidePanelSizeSmall, 44px);
+}
+body.withSidePanels.sidePanel_m_bottom,
+.panelContainer.withSidePanels.sidePanel_m_bottom {
+  padding-bottom: var(--sidePanelSizeMedium, 300px);
+}
+body.withSidePanels.sidePanel_l_bottom,
+.panelContainer.withSidePanels.sidePanel_l_bottom {
+  padding-bottom: var(--sidePanelSizeLarge, 420px);
+}
+
+.sidePanel {
+  position: fixed;
+  z-index: 10;
+  background: var(--sidePanelBg, #fff);
+  color: var(--sidePanelFg, #24282b);
+  border-left: var(--sidePanelBorder, 1px solid #eef2f4);
+  box-shadow: var(--sidePanelShadow, none);
+  display: flex;
+  top: 0;
+  bottom: 0;
+}
+.sidePanel .sidePanelContent {
+  position: relative;
+  z-index: 1;
+  padding: var(--sidePanelPadding, 20px);
+  box-sizing: border-box;
+  overflow: auto;
+  flex: 1;
+}
+.sidePanel.allowOverflow .sidePanelContent {
+  overflow: visible;
+}
+.sidePanel .sidePanelClose {
+  position: absolute;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  max-width: none;
+  padding: 0;
+  border: var(--sidePanelCloseButtonBorder, 1px solid #eef2f4);
+  background: var(--sidePanelCloseButtonBg, #fff);
+  color: var(--sidePanelCloseButtonFg, #24282b);
+  box-shadow: var(--sidePanelCloseButtonShadow, 0 0 5px 0 #eef2f4);
+}
+.sidePanel.sidePanelSize_s {
+  width: var(--sidePanelSizeSmall, 44px);
+}
+.sidePanel.sidePanelSize_s .sidePanelContent {
+  padding: 0;
+  display: flex;
+  row-gap: 2px;
+  column-gap: 2px;
+}
+.sidePanel.sidePanelSize_s.sidePanelPosition_left .sidePanelContent, .sidePanel.sidePanelSize_s.sidePanelPosition_right .sidePanelContent {
+  flex-direction: column;
+}
+.sidePanel.sidePanelSize_m {
+  width: var(--sidePanelSizeMedium, 300px);
+}
+.sidePanel.sidePanelSize_l {
+  width: var(--sidePanelSizeLarge, 420px);
+}
+.sidePanel.sidePanelPosition_left .sidePanelClose, .sidePanel.sidePanelPosition_right .sidePanelClose {
+  top: 0;
+  width: 20px;
+  height: 60px;
+}
+.sidePanel.sidePanelPosition_top .sidePanelClose, .sidePanel.sidePanelPosition_bottom .sidePanelClose {
+  left: 50%;
+  margin-left: -30px;
+  width: 60px;
+  height: 20px;
+}
+.sidePanel.sidePanelPosition_left.isOpen, .sidePanel.sidePanelPosition_right.isOpen, .sidePanel.sidePanelPosition_top.isOpen, .sidePanel.sidePanelPosition_bottom.isOpen {
+  transform: none;
+}
+.sidePanel.sidePanelPosition_left {
+  left: 0;
+  right: auto;
+  transform: translateX(-100%);
+}
+.sidePanel.sidePanelPosition_left .sidePanelClose {
+  border-radius: 0 3px 0 0;
+  right: -20px;
+}
+.sidePanel.sidePanelPosition_right {
+  right: 0;
+  left: auto;
+  transform: translateX(100%);
+}
+.sidePanel.sidePanelPosition_right .sidePanelClose {
+  border-radius: 0 0 0 3px;
+  left: -20px;
+}
+.sidePanel.sidePanelPosition_top {
+  left: 0;
+  bottom: auto;
+  transform: translateY(-100%);
+}
+.sidePanel.sidePanelPosition_top .sidePanelClose {
+  border-radius: 0 3px 3px 0;
+  top: auto;
+  bottom: -20px;
+}
+.sidePanel.sidePanelPosition_bottom {
+  left: 0;
+  top: auto;
+  bottom: 0;
+  transform: translateY(100%);
+}
+.sidePanel.sidePanelPosition_bottom .sidePanelClose {
+  border-radius: 3px 0 0 3px;
+  top: -20px;
+}
+.sidePanel.sidePanelPosition_top, .sidePanel.sidePanelPosition_bottom {
+  height: 300px;
+  width: 100%;
+}
+.sidePanel.sidePanelPosition_top.sidePanelSize_s, .sidePanel.sidePanelPosition_bottom.sidePanelSize_s {
+  height: 44px;
+}
+.sidePanel.sidePanelPosition_top.sidePanelSize_l, .sidePanel.sidePanelPosition_bottom.sidePanelSize_l {
+  height: 420px;
+}
+.sidePanel.sidePanelAnimation_slide {
+  transition: all ease 0.5s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidePanel.sidePanelAnimation_slide {
+    transition: none;
+  }
+}