@chayns-components/core 5.0.0-beta.18 → 5.0.0-beta.181

package/lib/components/accordion/accordion-head/AccordionHead.styles.js

@@ -1,65 +1,158 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTitleElementWrapper = exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitle = exports.StyledMotionIconWrapper = exports.StyledMotionAccordionHead = void 0;
-
+exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = void 0;
 var _framerMotion = require("framer-motion");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    color: ", ";\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n"])), function (_ref) {
-  var theme = _ref.theme;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
   return theme.text;
-});
+}};
+    display: flex;
+    overflow: hidden;
+    padding: 4px 0;
+`;
 exports.StyledMotionAccordionHead = StyledMotionAccordionHead;
-var StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    align-items: center;\n    cursor: ", ";\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n"])), function (_ref2) {
-  var onClick = _ref2.onClick;
+const StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    cursor: ${_ref2 => {
+  let {
+    onClick
+  } = _ref2;
   return typeof onClick === 'function' ? 'pointer' : 'default';
-});
+}};
+    display: flex;
+    flex: 0 0 auto;
+    height: 25px;
+    justify-content: center;
+    width: 25px;
+`;
 exports.StyledMotionIconWrapper = StyledMotionIconWrapper;
-var StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    align-self: flex-start;\n    cursor: ", ";\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n    position: relative;\n"])), function (_ref3) {
-  var onClick = _ref3.onClick;
+const StyledMotionContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-self: flex-start;
+    cursor: ${_ref3 => {
+  let {
+    onClick
+  } = _ref3;
   return typeof onClick === 'function' ? 'pointer' : 'default';
-});
+}};
+    display: flex;
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: hidden;
+    margin-right: 10px;
+`;
+exports.StyledMotionContentWrapper = StyledMotionContentWrapper;
+const StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    display: grid;
+    flex: 0 1 auto;
+    grid-template-areas: 'header';
+`;
 exports.StyledMotionTitleWrapper = StyledMotionTitleWrapper;
-var StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    font-weight: ", ";\n    height: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ", ";\n\n    ", "\n"])), function (_ref4) {
-  var isOpen = _ref4.isOpen,
-      isWrapped = _ref4.isWrapped;
+const StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    font-size: ${_ref4 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref4;
   return isOpen && !isWrapped ? '1.3rem' : undefined;
-}, function (_ref5) {
-  var isOpen = _ref5.isOpen,
-      isWrapped = _ref5.isWrapped;
+}};
+    font-weight: ${_ref5 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref5;
   return isOpen && isWrapped ? 700 : 'normal';
-}, function (_ref6) {
-  var isWrapped = _ref6.isWrapped;
+}};
+    grid-area: header;
+    height: ${_ref6 => {
+  let {
+    isWrapped
+  } = _ref6;
   return isWrapped ? '100%' : undefined;
-}, function (_ref7) {
-  var isOpen = _ref7.isOpen,
-      isWrapped = _ref7.isWrapped;
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transform-origin: top left;
+    user-select: none;
+    white-space: ${_ref7 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref7;
   return isOpen && !isWrapped ? 'normal' : 'nowrap';
-}, function (_ref8) {
-  var isWrapped = _ref8.isWrapped;
-  return isWrapped && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            align-items: center;\n            display: flex;\n        "])));
-});
-exports.StyledMotionTitle = StyledMotionTitle;
-
-var StyledTitleElementWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n"])));
-
-exports.StyledTitleElementWrapper = StyledTitleElementWrapper;
-
-var StyledRightWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 0 0 auto;\n    flex-direction: column;\n    justify-content: center;\n    margin-right: 5px;\n    overflow: hidden;\n"])));
+}};
 
+    ${_ref8 => {
+  let {
+    isWrapped
+  } = _ref8;
+  return isWrapped && (0, _styledComponents.css)`
+            align-items: center;
+            display: flex;
+        `;
+}}
+`;
+exports.StyledMotionTitle = StyledMotionTitle;
+const StyledMotionTitleElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    margin-left: 8px;
+`;
+exports.StyledMotionTitleElementWrapper = StyledMotionTitleElementWrapper;
+const StyledRightWrapper = _styledComponents.default.div`
+    display: grid;
+    flex: 0 0 auto;
+    grid-template-areas: 'right';
+    margin-right: 5px;
+    overflow: hidden;
+    position: relative;
+`;
 exports.StyledRightWrapper = StyledRightWrapper;
+const StyledMotionRightElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    grid-area: header;
+    justify-content: flex-end;
+`;
+exports.StyledMotionRightElementWrapper = StyledMotionRightElementWrapper;
+const StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)`
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-bottom-color: rgba(
+        ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme['headline-rgb'];
+}},
+        0.45
+    );
+    grid-area: header;
+    padding: ${_ref10 => {
+  let {
+    hasIcon
+  } = _ref10;
+  return hasIcon ? '5px 23px 5px 1px' : '5px 1px';
+}};
+`;
+exports.StyledMotionRightInput = StyledMotionRightInput;
+const StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    right: 4px;
+    top: 0;
+`;
+exports.StyledMotionRightInputIconWrapper = StyledMotionRightInputIconWrapper;
 //# sourceMappingURL=AccordionHead.styles.js.map

package/lib/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"names":["StyledMotionAccordionHead","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionTitleWrapper","StyledMotionTitle","isOpen","isWrapped","undefined","css","StyledTitleElementWrapper","styled","StyledRightWrapper"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAKO,IAAMA,yBAAyB,GAAG,+BAAOC,qBAAOC,GAAd,CAAH,oLAEzB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAA+CA,KAAK,CAACC,IAArD;AAAA,CAFyB,CAA/B;;AAQA,IAAMC,uBAAuB,GAAG,+BAAOJ,qBAAOC,GAAd,CAAH,mOAEtB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFsB,CAA7B;;AAUA,IAAMC,wBAAwB,GAAG,+BAAON,qBAAOC,GAAd,CAAH,+PAEvB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFuB,CAA9B;;AAgBA,IAAME,iBAAiB,GAAG,+BAAOP,qBAAOC,GAAd,CAAH,6RACb;AAAA,MAAGO,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkCC,SAA9D;AAAA,CADa,EAEX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAIC,SAAV,GAAsB,GAAtB,GAA4B,QAAxD;AAAA,CAFW,EAGhB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,MAAH,GAAYC,SAAzC;AAAA,CAHgB,EAQX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkC,QAA9D;AAAA,CARW,EAUxB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SACEA,SAAS,QACTE,qBADS,gJADX;AAAA,CAVwB,CAAvB;;;AAkBA,IAAMC,yBAAyB,GAAGC,0BAAOZ,GAAV,8IAA/B;;;;AAMA,IAAMa,kBAAkB,GAAGD,0BAAOZ,GAAV,4NAAxB","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n    position: relative;\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n    height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ isWrapped }) =>\n        isWrapped &&\n        css`\n            align-items: center;\n            display: flex;\n        `}\n`;\n\nexport const StyledTitleElementWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    flex-direction: column;\n    justify-content: center;\n    margin-right: 5px;\n    overflow: hidden;\n`;\n"],"file":"AccordionHead.styles.js"}
+{"version":3,"file":"AccordionHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionAccordionHead","styled","motion","div","_ref","theme","text","exports","StyledMotionIconWrapper","_ref2","onClick","StyledMotionContentWrapper","_ref3","StyledMotionTitleWrapper","StyledMotionTitle","_ref4","isOpen","isWrapped","undefined","_ref5","_ref6","_ref7","_ref8","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref9","_ref10","hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ isWrapped }) =>\n        isWrapped &&\n        css`\n            align-items: center;\n            display: flex;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: grid;\n    flex: 0 0 auto;\n    grid-template-areas: 'right';\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    grid-area: header;\n    justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    grid-area: header;\n    padding: ${({ hasIcon }) => (hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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"}

package/lib/components/accordion/accordion-intro/AccordionIntro.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+export type AccordionIntroProps = {
+    /**
+     * The content of the accordion content element
+     */
+    children: ReactNode;
+};
+declare const AccordionIntro: FC<AccordionIntroProps>;
+export default AccordionIntro;

package/lib/components/accordion/accordion-intro/AccordionIntro.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AccordionIntro = require("./AccordionIntro.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const AccordionIntro = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_AccordionIntro.StyledAccordionIntro, {
+    className: "beta-chayns-accordion-intro"
+  }, children);
+};
+AccordionIntro.displayName = 'AccordionIntro';
+var _default = AccordionIntro;
+exports.default = _default;
+//# sourceMappingURL=AccordionIntro.js.map

package/lib/components/accordion/accordion-intro/AccordionIntro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIntro.js","names":["_react","_interopRequireDefault","require","_AccordionIntro","obj","__esModule","default","AccordionIntro","_ref","children","createElement","StyledAccordionIntro","className","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { StyledAccordionIntro } from './AccordionIntro.styles';\n\nexport type AccordionIntroProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n};\n\nconst AccordionIntro: FC<AccordionIntroProps> = ({ children }) => (\n    <StyledAccordionIntro className=\"beta-chayns-accordion-intro\">{children}</StyledAccordionIntro>\n);\n\nAccordionIntro.displayName = 'AccordionIntro';\n\nexport default AccordionIntro;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAA+D,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAS/D,MAAMG,cAAuC,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAAA,oBACzDR,MAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,eAAA,CAAAQ,oBAAoB;IAACC,SAAS,EAAC;EAA6B,GAAEH,QAA+B,CAAC;AAAA,CAClG;AAEDF,cAAc,CAACM,WAAW,GAAG,gBAAgB;AAAC,IAAAC,QAAA,GAE/BP,cAAc;AAAAQ,OAAA,CAAAT,OAAA,GAAAQ,QAAA"}

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledAccordionIntro: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledAccordionIntro = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledAccordionIntro = _styledComponents.default.div`
+    padding: 0 9px 6px;
+`;
+exports.StyledAccordionIntro = StyledAccordionIntro;
+//# sourceMappingURL=AccordionIntro.styles.js.map

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIntro.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledAccordionIntro","styled","div","exports"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledAccordionIntro = styled.div`\n    padding: 0 9px 6px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,oBAAoB,GAAGC,yBAAM,CAACC,GAAI;AAC/C;AACA,CAAC;AAACC,OAAA,CAAAH,oBAAA,GAAAA,oBAAA"}

package/lib/components/accordion/utils.js

@@ -4,35 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAccordionHeadHeight = void 0;
-
-var getAccordionHeadHeight = function getAccordionHeadHeight(_ref) {
-  var isWrapped = _ref.isWrapped,
-      title = _ref.title,
-      width = _ref.width;
-  var element = document.createElement('div');
+const getAccordionHeadHeight = _ref => {
+  let {
+    isWrapped,
+    title,
+    width
+  } = _ref;
+  const element = document.createElement('div');
   element.style.fontSize = '1rem';
   element.style.opacity = '0';
   element.style.pointerEvents = 'none';
   element.style.whiteSpace = 'nowrap';
-  element.style.width = "".concat(width, "px");
+  element.style.width = `${width}px`;
   element.innerText = title;
   document.body.appendChild(element);
-  var closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
-
+  const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
   if (isWrapped) {
     element.style.fontWeight = 'bold';
   } else {
     element.style.fontSize = '1.3rem';
   }
-
   element.style.whiteSpace = 'normal';
-  var openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
+  const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);
   document.body.removeChild(element);
   return {
     closed: closedHeight,
     open: openHeight
   };
 };
-
 exports.getAccordionHeadHeight = getAccordionHeadHeight;
 //# sourceMappingURL=utils.js.map

package/lib/components/accordion/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion/utils.ts"],"names":["getAccordionHeadHeight","isWrapped","title","width","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open"],"mappings":";;;;;;;AAWO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,OAI6B;AAAA,MAH/DC,SAG+D,QAH/DA,SAG+D;AAAA,MAF/DC,KAE+D,QAF/DA,KAE+D;AAAA,MAD/DC,KAC+D,QAD/DA,KAC+D;AAC/D,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;AAEAF,EAAAA,OAAO,CAACG,KAAR,CAAcC,QAAd,GAAyB,MAAzB;AACAJ,EAAAA,OAAO,CAACG,KAAR,CAAcE,OAAd,GAAwB,GAAxB;AACAL,EAAAA,OAAO,CAACG,KAAR,CAAcG,aAAd,GAA8B,MAA9B;AACAN,EAAAA,OAAO,CAACG,KAAR,CAAcI,UAAd,GAA2B,QAA3B;AACAP,EAAAA,OAAO,CAACG,KAAR,CAAcJ,KAAd,aAAyBA,KAAzB;AAEAC,EAAAA,OAAO,CAACQ,SAAR,GAAoBV,KAApB;AAEAG,EAAAA,QAAQ,CAACQ,IAAT,CAAcC,WAAd,CAA0BV,OAA1B;AAEA,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAL,CAASb,OAAO,CAACc,YAAR,GAAuB,CAAhC,EAAmCjB,SAAS,GAAG,EAAH,GAAQ,EAApD,CAArB;;AAEA,MAAIA,SAAJ,EAAe;AACXG,IAAAA,OAAO,CAACG,KAAR,CAAcY,UAAd,GAA2B,MAA3B;AACH,GAFD,MAEO;AACHf,IAAAA,OAAO,CAACG,KAAR,CAAcC,QAAd,GAAyB,QAAzB;AACH;;AAEDJ,EAAAA,OAAO,CAACG,KAAR,CAAcI,UAAd,GAA2B,QAA3B;AAEA,MAAMS,UAAU,GAAGJ,IAAI,CAACC,GAAL,CAASb,OAAO,CAACc,YAAR,GAAuB,CAAhC,EAAmCjB,SAAS,GAAG,EAAH,GAAQ,EAApD,CAAnB;AAEAI,EAAAA,QAAQ,CAACQ,IAAT,CAAcQ,WAAd,CAA0BjB,OAA1B;AAEA,SAAO;AAAEkB,IAAAA,MAAM,EAAEP,YAAV;AAAwBQ,IAAAA,IAAI,EAAEH;AAA9B,GAAP;AACH,CAhCM","sourcesContent":["interface GetAccordionHeadHeightOptions {\n    isWrapped?: boolean;\n    title: string;\n    width: number;\n}\n\ninterface GetAccordionHeadHeightResult {\n    closed: number;\n    open: number;\n}\n\nexport const getAccordionHeadHeight = ({\n    isWrapped,\n    title,\n    width,\n}: GetAccordionHeadHeightOptions): GetAccordionHeadHeightResult => {\n    const element = document.createElement('div');\n\n    element.style.fontSize = '1rem';\n    element.style.opacity = '0';\n    element.style.pointerEvents = 'none';\n    element.style.whiteSpace = 'nowrap';\n    element.style.width = `${width}px`;\n\n    element.innerText = title;\n\n    document.body.appendChild(element);\n\n    const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    if (isWrapped) {\n        element.style.fontWeight = 'bold';\n    } else {\n        element.style.fontSize = '1.3rem';\n    }\n\n    element.style.whiteSpace = 'normal';\n\n    const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    document.body.removeChild(element);\n\n    return { closed: closedHeight, open: openHeight };\n};\n"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["getAccordionHeadHeight","_ref","isWrapped","title","width","element","document","createElement","style","fontSize","opacity","pointerEvents","whiteSpace","innerText","body","appendChild","closedHeight","Math","max","clientHeight","fontWeight","openHeight","removeChild","closed","open","exports"],"sources":["../../../src/components/accordion/utils.ts"],"sourcesContent":["interface GetAccordionHeadHeightOptions {\n    isWrapped?: boolean;\n    title: string;\n    width: number;\n}\n\ninterface GetAccordionHeadHeightResult {\n    closed: number;\n    open: number;\n}\n\nexport const getAccordionHeadHeight = ({\n    isWrapped,\n    title,\n    width,\n}: GetAccordionHeadHeightOptions): GetAccordionHeadHeightResult => {\n    const element = document.createElement('div');\n\n    element.style.fontSize = '1rem';\n    element.style.opacity = '0';\n    element.style.pointerEvents = 'none';\n    element.style.whiteSpace = 'nowrap';\n    element.style.width = `${width}px`;\n\n    element.innerText = title;\n\n    document.body.appendChild(element);\n\n    const closedHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    if (isWrapped) {\n        element.style.fontWeight = 'bold';\n    } else {\n        element.style.fontSize = '1.3rem';\n    }\n\n    element.style.whiteSpace = 'normal';\n\n    const openHeight = Math.max(element.clientHeight + 8, isWrapped ? 40 : 33);\n\n    document.body.removeChild(element);\n\n    return { closed: closedHeight, open: openHeight };\n};\n"],"mappings":";;;;;;AAWO,MAAMA,sBAAsB,GAAGC,IAAA,IAI6B;EAAA,IAJ5B;IACnCC,SAAS;IACTC,KAAK;IACLC;EAC2B,CAAC,GAAAH,IAAA;EAC5B,MAAMI,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAE7CF,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,MAAM;EAC/BJ,OAAO,CAACG,KAAK,CAACE,OAAO,GAAG,GAAG;EAC3BL,OAAO,CAACG,KAAK,CAACG,aAAa,GAAG,MAAM;EACpCN,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EACnCP,OAAO,CAACG,KAAK,CAACJ,KAAK,GAAI,GAAEA,KAAM,IAAG;EAElCC,OAAO,CAACQ,SAAS,GAAGV,KAAK;EAEzBG,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACV,OAAO,CAAC;EAElC,MAAMW,YAAY,GAAGC,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE5E,IAAIA,SAAS,EAAE;IACXG,OAAO,CAACG,KAAK,CAACY,UAAU,GAAG,MAAM;EACrC,CAAC,MAAM;IACHf,OAAO,CAACG,KAAK,CAACC,QAAQ,GAAG,QAAQ;EACrC;EAEAJ,OAAO,CAACG,KAAK,CAACI,UAAU,GAAG,QAAQ;EAEnC,MAAMS,UAAU,GAAGJ,IAAI,CAACC,GAAG,CAACb,OAAO,CAACc,YAAY,GAAG,CAAC,EAAEjB,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC;EAE1EI,QAAQ,CAACQ,IAAI,CAACQ,WAAW,CAACjB,OAAO,CAAC;EAElC,OAAO;IAAEkB,MAAM,EAAEP,YAAY;IAAEQ,IAAI,EAAEH;EAAW,CAAC;AACrD,CAAC;AAACI,OAAA,CAAAzB,sBAAA,GAAAA,sBAAA"}

package/lib/components/amount-control/AmountControl.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+export type DisplayState = 'default' | 'delete' | 'normal';
+export type AmountControlProps = {
+    /**
+     * The amount that should be displayed.
+     */
+    amount?: number;
+    /**
+     * A Text that should be displayed, if no amount is selected;
+     */
+    label?: string;
+    /**
+     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.
+     */
+    maxAmount?: number;
+    /**
+     * A Function that is executed when the amount is changed
+     */
+    onChange?: (amount: number) => void;
+};
+declare const AmountControl: FC<AmountControlProps>;
+export default AmountControl;

package/lib/components/amount-control/AmountControl.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _AmountControl = require("./AmountControl.styles");
+var _amountControl = require("./utils/amountControl");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const AmountControl = _ref => {
+  let {
+    amount,
+    label,
+    maxAmount,
+    onChange
+  } = _ref;
+  const [amountValue, setAmountValue] = (0, _react.useState)(0);
+  const [inputValue, setInputValue] = (0, _react.useState)('0');
+  const [displayState, setDisplayState] = (0, _react.useState)('default');
+  const minAmount = 0;
+
+  /**
+   * This function controls the displayState
+   */
+  (0, _react.useEffect)(() => {
+    switch (true) {
+      case maxAmount === 1 && amountValue === 1:
+        setDisplayState('delete');
+        return;
+      case amountValue > 0:
+        setDisplayState('normal');
+        return;
+      default:
+        setDisplayState('default');
+    }
+  }, [amountValue, maxAmount]);
+
+  /**
+   * Function that sets the amountValue to the amount
+   */
+  (0, _react.useEffect)(() => {
+    if (!amount) {
+      return;
+    }
+    setAmountValue((0, _amountControl.checkForValidAmount)({
+      amount,
+      maxAmount,
+      minAmount
+    }));
+    setInputValue((0, _amountControl.checkForValidAmount)({
+      amount,
+      maxAmount,
+      minAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount]);
+
+  /**
+   * Function that updates the onChange event
+   */
+  (0, _react.useEffect)(() => {
+    if (onChange) {
+      onChange(amountValue);
+    }
+  }, [amountValue, onChange]);
+  const handleAmountAdd = () => {
+    setAmountValue(prevState => prevState + 1);
+    setInputValue(prevState => (Number(prevState) + 1).toString());
+  };
+  const handleAmountRemove = () => {
+    setAmountValue(prevState => prevState - 1);
+    setInputValue(prevState => (Number(prevState) - 1).toString());
+  };
+  const handleFirstAmount = (0, _react.useCallback)(() => {
+    if (amountValue !== 0) {
+      return;
+    }
+    setAmountValue(1);
+    setInputValue('1');
+  }, [amountValue]);
+  const handleInputBlur = (0, _react.useCallback)(() => {
+    setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    if (inputValue === '') {
+      setInputValue('0');
+    }
+  }, [inputValue]);
+  const handleInputChange = (0, _react.useCallback)(event => {
+    const valueBeforeCheck = Number(event.target.value);
+    const checkedValue = (0, _amountControl.checkForValidAmount)({
+      minAmount,
+      maxAmount,
+      amount: Number(event.target.value)
+    });
+    if (valueBeforeCheck < minAmount && minAmount === 0) {
+      setInputValue('0');
+      return;
+    }
+    setInputValue(checkedValue === 0 ? '' : checkedValue.toString());
+  }, [maxAmount, minAmount]);
+  const leftIcon = (0, _react.useMemo)(() => {
+    let item = null;
+    switch (displayState) {
+      case 'default':
+        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa fa-cart-shopping'],
+          size: 15
+        });
+        break;
+      case 'delete':
+        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa ts-trash'],
+          size: 25
+        });
+        break;
+      case 'normal':
+        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa fa-minus'],
+          size: 15,
+          color: "red"
+        });
+        break;
+      default:
+        break;
+    }
+    return item;
+  }, [displayState]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControl, {
+    onClick: handleFirstAmount
+  }, /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+    onClick: handleAmountRemove,
+    disabled: amountValue !== 0 && amountValue <= minAmount
+  }, leftIcon), /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlInput, {
+    displayState: displayState,
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    value: displayState === 'default' && label ? label : inputValue,
+    type: amountValue === 0 ? 'text' : 'number'
+  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, displayState === 'normal' && /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+    key: "right_button",
+    initial: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    animate: {
+      width: 40,
+      opacity: 1,
+      padding: 0
+    },
+    exit: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    },
+    onClick: handleAmountAdd,
+    disabled: maxAmount ? amountValue >= maxAmount : false
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-plus'],
+    size: 15,
+    color: "green"
+  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, inputValue, label, leftIcon, maxAmount, minAmount]);
+};
+AmountControl.displayName = 'AmountControl';
+var _default = AmountControl;
+exports.default = _default;
+//# sourceMappingURL=AmountControl.js.map

package/lib/components/amount-control/AmountControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_AmountControl","_amountControl","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AmountControl","_ref","amount","label","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","useMemo","item","createElement","icons","size","color","StyledAmountControl","onClick","StyledMotionAmountControlButton","disabled","StyledAmountControlInput","onBlur","type","AnimatePresence","initial","width","opacity","padding","animate","exit","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\nimport { checkForValidAmount } from './utils/amountControl';\n\nexport type DisplayState = 'default' | 'delete' | 'normal';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({ amount, label, maxAmount, onChange }) => {\n    const [amountValue, setAmountValue] = useState(0);\n    const [inputValue, setInputValue] = useState('0');\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const minAmount = 0;\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case amountValue > 0:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    /**\n     * Function that updates the onChange event\n     */\n    useEffect(() => {\n        if (onChange) {\n            onChange(amountValue);\n        }\n    }, [amountValue, onChange]);\n\n    const handleAmountAdd = () => {\n        setAmountValue((prevState) => prevState + 1);\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    };\n\n    const handleAmountRemove = () => {\n        setAmountValue((prevState) => prevState - 1);\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    };\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const valueBeforeCheck = Number(event.target.value);\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: Number(event.target.value),\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount]\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={['fa fa-cart-shopping']} size={15} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-trash']} size={25} />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <StyledMotionAmountControlButton\n                    onClick={handleAmountRemove}\n                    disabled={amountValue !== 0 && amountValue <= minAmount}\n                >\n                    {leftIcon}\n                </StyledMotionAmountControlButton>\n                <StyledAmountControlInput\n                    displayState={displayState}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    value={displayState === 'default' && label ? label : inputValue}\n                    type={amountValue === 0 ? 'text' : 'number'}\n                />\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            minAmount,\n        ]\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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"}

package/lib/components/amount-control/AmountControl.styles.d.ts

@@ -0,0 +1,14 @@
+import type { DisplayState } from './AmountControl';
+export declare const StyledAmountControl: import("styled-components").StyledComponent<"div", any, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledAmountControlInput: import("styled-components").StyledComponent<"input", any, {
+    displayState: DisplayState;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionAmountControlButton: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, any, {
+    disabled: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;