@chayns-components/core 5.0.0-beta.16 → 5.0.0-beta.160

package/lib/components/icon/Icon.js

@@ -4,59 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Icon = require("./Icon.styles");
-
 var _utils = require("./utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Icon = function Icon(_ref) {
-  var className = _ref.className,
-      color = _ref.color,
-      icons = _ref.icons,
-      isDisabled = _ref.isDisabled,
-      onClick = _ref.onClick,
-      onDoubleClick = _ref.onDoubleClick,
-      onMouseDown = _ref.onMouseDown,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 15 : _ref$size,
-      shouldStopPropagation = _ref.shouldStopPropagation;
-
-  var handleClick = function handleClick(event) {
+const Icon = _ref => {
+  let {
+    className,
+    color,
+    icons,
+    isDisabled,
+    onClick,
+    onDoubleClick,
+    onMouseDown,
+    size = 15,
+    shouldStopPropagation
+  } = _ref;
+  const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
-
     if (typeof onClick === 'function') {
       onClick(event);
     }
   };
-
-  var handleDoubleClick = function handleDoubleClick(event) {
+  const handleDoubleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
-
     if (typeof onDoubleClick === 'function') {
       onDoubleClick(event);
     }
   };
-
-  var maxStackSizeFactor = 1;
-  icons.forEach(function (icon) {
-    var stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
-
+  let maxStackSizeFactor = 1;
+  icons.forEach(icon => {
+    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
     if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
       maxStackSizeFactor = stackSizeFactor;
     }
   });
-  var shouldUseStackedIcon = icons.length > 1;
-  var wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
+  const shouldUseStackedIcon = icons.length > 1;
+  const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
   return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
     className: wrapperClasses,
     isDisabled: isDisabled,
@@ -64,9 +53,9 @@ var Icon = function Icon(_ref) {
     onDoubleClick: typeof onDoubleClick === 'function' ? handleDoubleClick : undefined,
     onMouseDown: onMouseDown,
     size: size
-  }, icons.map(function (icon) {
-    var stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
-    var iconClasses = (0, _clsx.default)(icon, className, {
+  }, icons.map(icon => {
+    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
+    const iconClasses = (0, _clsx.default)(icon, className, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
@@ -79,7 +68,6 @@ var Icon = function Icon(_ref) {
     });
   }));
 };
-
 Icon.displayName = 'Icon';
 var _default = Icon;
 exports.default = _default;

package/lib/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/Icon.tsx"],"names":["Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","undefined","map","iconClasses","includes","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAyCA,IAAMA,IAAmB,GAAG,SAAtBA,IAAsB,OAUtB;AAAA,MATFC,SASE,QATFA,SASE;AAAA,MARFC,KAQE,QARFA,KAQE;AAAA,MAPFC,KAOE,QAPFA,KAOE;AAAA,MANFC,UAME,QANFA,UAME;AAAA,MALFC,OAKE,QALFA,OAKE;AAAA,MAJFC,aAIE,QAJFA,aAIE;AAAA,MAHFC,WAGE,QAHFA,WAGE;AAAA,uBAFFC,IAEE;AAAA,MAFFA,IAEE,0BAFK,EAEL;AAAA,MADFC,qBACE,QADFA,qBACE;;AACF,MAAMC,WAA+C,GAAG,SAAlDA,WAAkD,CAACC,KAAD,EAAW;AAC/D,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACM,KAAD,CAAP;AACH;AACJ,GARD;;AAUA,MAAME,iBAAqD,GAAG,SAAxDA,iBAAwD,CAACF,KAAD,EAAW;AACrE,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAON,aAAP,KAAyB,UAA7B,EAAyC;AACrCA,MAAAA,aAAa,CAACK,KAAD,CAAb;AACH;AACJ,GARD;;AAUA,MAAIG,kBAAkB,GAAG,CAAzB;AAEAX,EAAAA,KAAK,CAACY,OAAN,CAAc,UAACC,IAAD,EAAU;AACpB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;;AAEA,QAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAzC,EAA6D;AACzDA,MAAAA,kBAAkB,GAAGG,eAArB;AACH;AACJ,GAND;AAQA,MAAMC,oBAAoB,GAAGf,KAAK,CAACgB,MAAN,GAAe,CAA5C;AAEA,MAAMC,cAAc,GAAG,mBACnB,kBADmB,EAEnBF,oBAAoB,GAAG,UAAH,GAAgB,EAFjB,EAGnBjB,SAHmB,CAAvB;AAMA,sBACI,6BAAC,uBAAD;AACI,IAAA,SAAS,EAAEmB,cADf;AAEI,IAAA,UAAU,EAAEhB,UAFhB;AAGI,IAAA,OAAO,EAAE,OAAOC,OAAP,KAAmB,UAAnB,GAAgCK,WAAhC,GAA8CW,SAH3D;AAII,IAAA,aAAa,EAAE,OAAOf,aAAP,KAAyB,UAAzB,GAAsCO,iBAAtC,GAA0DQ,SAJ7E;AAKI,IAAA,WAAW,EAAEd,WALjB;AAMI,IAAA,IAAI,EAAEC;AANV,KAQKL,KAAK,CAACmB,GAAN,CAAU,UAACN,IAAD,EAAU;AACjB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;AAEA,QAAMO,WAAW,GAAG,mBAAKP,IAAL,EAAWf,SAAX,EAAsB;AACtC,qBAAeiB,oBAAoB,IAAID,eAAe,KAAKI;AADrB,KAAtB,CAApB;AAIA,wBACI,6BAAC,gBAAD;AACI,MAAA,SAAS,EAAEE,WADf;AAEI,MAAA,KAAK,EAAEP,IAAI,CAACQ,QAAL,CAAc,YAAd,IAA8B,OAA9B,GAAwCtB,KAFnD;AAGI,MAAA,QAAQ,EAAG,CAACe,eAAe,IAAI,CAApB,IAAyBH,kBAA1B,GAAgDN,IAH9D;AAII,MAAA,SAAS,EAAEU,oBAJf;AAKI,MAAA,GAAG,EAAEF,IALT;AAMI,MAAA,IAAI,EAAER;AANV,MADJ;AAUH,GAjBA,CARL,CADJ;AA6BH,CA9ED;;AAgFAR,IAAI,CAACyB,WAAL,GAAmB,MAAnB;eAEezB,I","sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: [string, ...string[]];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(icon, className, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"file":"Icon.js"}
+{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_Icon","_utils","obj","__esModule","default","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","undefined","map","iconClasses","StyledIcon","includes","fontSize","isStacked","key","displayName","_default","exports"],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: string[];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double-clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(icon, className, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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"}

package/lib/components/icon/Icon.styles.d.ts

@@ -1,6 +1,6 @@
 import type { MouseEventHandler } from 'react';
 import type { IconProps } from './Icon';
-declare type StyledIconWrapperProps = {
+type StyledIconWrapperProps = {
     isDisabled?: boolean;
     onClick?: MouseEventHandler<HTMLSpanElement>;
     size: number;

package/lib/components/icon/Icon.styles.js

@@ -1,54 +1,76 @@
 "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.StyledIconWrapper = exports.StyledIcon = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3;
-
-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 StyledIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    cursor: ", ";\n    display: inline-flex;\n    height: ", ";\n    justify-content: center;\n    opacity: ", ";\n    position: relative;\n    transition: opacity 0.3s ease;\n    width: ", ";\n"])), function (_ref) {
-  var isDisabled = _ref.isDisabled,
-      onClick = _ref.onClick;
+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 StyledIconWrapper = _styledComponents.default.span`
+    align-items: center;
+    cursor: ${_ref => {
+  let {
+    isDisabled,
+    onClick
+  } = _ref;
   return typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit';
-}, function (_ref2) {
-  var size = _ref2.size;
-  return "".concat(size, "px");
-}, function (_ref3) {
-  var isDisabled = _ref3.isDisabled;
+}};
+    display: inline-flex;
+    height: ${_ref2 => {
+  let {
+    size
+  } = _ref2;
+  return `${size}px`;
+}};
+    justify-content: center;
+    opacity: ${_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
   return isDisabled ? 0.5 : 1;
-}, function (_ref4) {
-  var size = _ref4.size;
-  return "".concat(size, "px");
-});
-
+}};
+    position: relative;
+    transition: opacity 0.3s ease;
+    width: ${_ref4 => {
+  let {
+    size
+  } = _ref4;
+  return `${size}px`;
+}};
+`;
 exports.StyledIconWrapper = StyledIconWrapper;
-
-var StyledIcon = _styledComponents.default.i(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n    display: ", ";\n    font-size: ", ";\n\n    ", "\n"])), function (_ref5) {
-  var color = _ref5.color,
-      theme = _ref5.theme;
+const StyledIcon = _styledComponents.default.i`
+    color: ${_ref5 => {
+  let {
+    color,
+    theme
+  } = _ref5;
   return color || theme.headline;
-}, function (_ref6) {
-  var isStacked = _ref6.isStacked;
+}};
+    display: ${_ref6 => {
+  let {
+    isStacked
+  } = _ref6;
   return isStacked ? undefined : 'inline-flex';
-}, function (_ref7) {
-  var fontSize = _ref7.fontSize;
-  return "".concat(fontSize, "px");
-}, function (_ref8) {
-  var fontSize = _ref8.fontSize,
-      size = _ref8.size;
-  return fontSize !== size && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            top: 50%;\n            transform: translateY(-50%);\n        "])));
-});
+}};
+    font-size: ${_ref7 => {
+  let {
+    fontSize
+  } = _ref7;
+  return `${fontSize}px`;
+}};
 
+    ${_ref8 => {
+  let {
+    fontSize,
+    size
+  } = _ref8;
+  return fontSize !== size && (0, _styledComponents.css)`
+            top: 50%;
+            transform: translateY(-50%);
+        `;
+}}
+`;
 exports.StyledIcon = StyledIcon;
 //# sourceMappingURL=Icon.styles.js.map

package/lib/components/icon/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/Icon.styles.ts"],"names":["StyledIconWrapper","styled","span","isDisabled","onClick","size","StyledIcon","i","color","theme","headline","isStacked","undefined","fontSize","css"],"mappings":";;;;;;;;;AACA;;;;;;;;;;AAUO,IAAMA,iBAAiB,GAAGC,0BAAOC,IAAV,oSAEhB;AAAA,MAAGC,UAAH,QAAGA,UAAH;AAAA,MAAeC,OAAf,QAAeA,OAAf;AAAA,SACN,OAAOA,OAAP,KAAmB,UAAnB,IAAiC,CAACD,UAAlC,GAA+C,SAA/C,GAA2D,SADrD;AAAA,CAFgB,EAKhB;AAAA,MAAGE,IAAH,SAAGA,IAAH;AAAA,mBAAiBA,IAAjB;AAAA,CALgB,EAOf;AAAA,MAAGF,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,GAAH,GAAS,CAAxC;AAAA,CAPe,EAUjB;AAAA,MAAGE,IAAH,SAAGA,IAAH;AAAA,mBAAiBA,IAAjB;AAAA,CAViB,CAAvB;;;;AAmBA,IAAMC,UAAU,GAAGL,0BAAOM,CAAV,kJACV;AAAA,MAAGC,KAAH,SAAGA,KAAH;AAAA,MAAUC,KAAV,SAAUA,KAAV;AAAA,SAAuCD,KAAK,IAAIC,KAAK,CAACC,QAAtD;AAAA,CADU,EAER;AAAA,MAAGC,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAGC,SAAH,GAAe,aAA5C;AAAA,CAFQ,EAGN;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,mBAAqBA,QAArB;AAAA,CAHM,EAKjB;AAAA,MAAGA,QAAH,SAAGA,QAAH;AAAA,MAAaR,IAAb,SAAaA,IAAb;AAAA,SACEQ,QAAQ,KAAKR,IAAb,QACAS,qBADA,mJADF;AAAA,CALiB,CAAhB","sourcesContent":["import type { MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { IconProps } from './Icon';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    isDisabled?: boolean;\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ isDisabled, onClick }) =>\n        typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    height: ${({ size }) => `${size}px`};\n    justify-content: center;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    width: ${({ size }) => `${size}px`};\n`;\n\ntype StyledIconProps = Omit<IconProps, 'icons'> &\n    WithTheme<{\n        fontSize: number;\n        isStacked?: boolean;\n    }>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ color, theme }: StyledIconProps) => color || theme.headline};\n    display: ${({ isStacked }) => (isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ fontSize }) => `${fontSize}px`};\n\n    ${({ fontSize, size }) =>\n        fontSize !== size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n"],"file":"Icon.styles.js"}
+{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledIconWrapper","styled","span","_ref","isDisabled","onClick","_ref2","size","_ref3","_ref4","exports","StyledIcon","i","_ref5","color","theme","headline","_ref6","isStacked","undefined","_ref7","fontSize","_ref8","css"],"sources":["../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { IconProps } from './Icon';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    isDisabled?: boolean;\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ isDisabled, onClick }) =>\n        typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    height: ${({ size }) => `${size}px`};\n    justify-content: center;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    width: ${({ size }) => `${size}px`};\n`;\n\ntype StyledIconProps = Omit<IconProps, 'icons'> &\n    WithTheme<{\n        fontSize: number;\n        isStacked?: boolean;\n    }>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ color, theme }: StyledIconProps) => color || theme.headline};\n    display: ${({ isStacked }) => (isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ fontSize }) => `${fontSize}px`};\n\n    ${({ fontSize, size }) =>\n        fontSize !== size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n"],"mappings":"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"}

package/lib/components/icon/utils.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getStackSizeFactor = void 0;
-
-var getStackSizeFactor = function getStackSizeFactor(icon) {
+const getStackSizeFactor = icon => {
   var _icon$match;
-
-  var sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
+  const sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
   return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;
 };
-
 exports.getStackSizeFactor = getStackSizeFactor;
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/utils.ts"],"names":["getStackSizeFactor","icon","sizeFactorString","match","parseInt","undefined"],"mappings":";;;;;;;AAAO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,IAAD,EAAkB;AAAA;;AAChD,MAAMC,gBAAgB,kBAAGD,IAAI,CAACE,KAAL,CAAW,kBAAX,CAAH,gDAAG,YAAiC,CAAjC,CAAzB;AAEA,SAAO,OAAOD,gBAAP,KAA4B,QAA5B,GAAuCE,QAAQ,CAACF,gBAAD,EAAmB,EAAnB,CAA/C,GAAwEG,SAA/E;AACH,CAJM","sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n    const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n    return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["getStackSizeFactor","icon","_icon$match","sizeFactorString","match","parseInt","undefined","exports"],"sources":["../../../src/components/icon/utils.ts"],"sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n    const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n    return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAIC,IAAY,IAAK;EAAA,IAAAC,WAAA;EAChD,MAAMC,gBAAgB,IAAAD,WAAA,GAAGD,IAAI,CAACG,KAAK,CAAC,kBAAkB,CAAC,cAAAF,WAAA,uBAA9BA,WAAA,CAAiC,CAAC,CAAC;EAE5D,OAAO,OAAOC,gBAAgB,KAAK,QAAQ,GAAGE,QAAQ,CAACF,gBAAgB,EAAE,EAAE,CAAC,GAAGG,SAAS;AAC5F,CAAC;AAACC,OAAA,CAAAP,kBAAA,GAAAA,kBAAA"}

package/lib/components/input/Input.d.ts

@@ -0,0 +1,37 @@
+import { ChangeEventHandler, FC, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler } from 'react';
+export type InputProps = {
+    /**
+     * Disables the input so that it cannot be changed anymore
+     */
+    isDisabled?: boolean;
+    /**
+     * Function that is executed when the input field loses focus
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when the text of the input changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when the input field is focused
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when a letter is pressed
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Input type set for input element (e.g. 'text', 'number' or 'password')
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Value if the input field should be controlled
+     */
+    value?: string;
+};
+declare const Input: FC<InputProps>;
+export default Input;

package/lib/components/input/Input.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Input = require("./Input.styles");
+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 Input = _ref => {
+  let {
+    isDisabled,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    placeholder,
+    type = 'text',
+    value
+  } = _ref;
+  const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
+  const handleInputFieldChange = (0, _react.useCallback)(event => {
+    setHasValue(event.target.value !== '');
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  (0, _react.useEffect)(() => {
+    if (typeof value === 'string') {
+      setHasValue(value !== '');
+    }
+  }, [value]);
+  const labelPosition = (0, _react.useMemo)(() => {
+    if (hasValue) {
+      return {
+        bottom: -8,
+        right: -6
+      };
+    }
+    return {
+      left: 0,
+      top: 0
+    };
+  }, [hasValue]);
+  return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
+    className: "beta-chayns-input",
+    isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
+    disabled: isDisabled,
+    onBlur: onBlur,
+    onChange: handleInputFieldChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    type: type
+  }), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabel, {
+    animate: {
+      scale: hasValue ? 0.6 : 1
+    },
+    layout: true,
+    style: {
+      ...labelPosition,
+      originX: 1,
+      originY: 1
+    },
+    transition: {
+      type: 'tween'
+    }
+  }, placeholder)));
+};
+Input.displayName = 'Input';
+var _default = Input;
+exports.default = _default;
+//# sourceMappingURL=Input.js.map

package/lib/components/input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Input","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","_ref","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","type","value","hasValue","setHasValue","useState","handleInputFieldChange","useCallback","event","target","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContent","StyledInputField","disabled","StyledMotionInputLabel","animate","scale","layout","style","originX","originY","transition","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputField,\n    StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputProps = {\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input: FC<InputProps> = ({\n    isDisabled,\n    onBlur,\n    onChange,\n    onFocus,\n    onKeyDown,\n    placeholder,\n    type = 'text',\n    value,\n}) => {\n    const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n    const handleInputFieldChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setHasValue(event.target.value !== '');\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange]\n    );\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setHasValue(value !== '');\n        }\n    }, [value]);\n\n    const labelPosition = useMemo(() => {\n        if (hasValue) {\n            return { bottom: -8, right: -6 };\n        }\n\n        return { left: 0, top: 0 };\n    }, [hasValue]);\n\n    return (\n        <StyledInput className=\"beta-chayns-input\" isDisabled={isDisabled}>\n            <StyledInputContent>\n                <StyledInputField\n                    disabled={isDisabled}\n                    onBlur={onBlur}\n                    onChange={handleInputFieldChange}\n                    onFocus={onFocus}\n                    onKeyDown={onKeyDown}\n                    value={value}\n                    type={type}\n                />\n                <StyledMotionInputLabel\n                    animate={{ scale: hasValue ? 0.6 : 1 }}\n                    layout\n                    style={{ ...labelPosition, originX: 1, originY: 1 }}\n                    transition={{ type: 'tween' }}\n                >\n                    {placeholder}\n                </StyledMotionInputLabel>\n            </StyledInputContent>\n        </StyledInput>\n    );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/components/input/Input.styles.d.ts

@@ -0,0 +1,7 @@
+import type { InputProps } from './Input';
+export declare const StyledInput: import("styled-components").StyledComponent<"div", any, Pick<InputProps, "isDisabled"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledInputContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledInputField: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StyledMotionInputLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, any, {}, never>;

package/lib/components/input/Input.styles.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionInputLabel = exports.StyledInputField = exports.StyledInputContent = exports.StyledInput = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledInput = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['100'];
+}};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-radius: 3px;
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['006'];
+}};
+    display: flex;
+    justify-content: space-between;
+    min-height: 42px;
+    opacity: ${_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled ? 0.5 : 1;
+}};
+    padding: 8px 10px;
+    transition: opacity 0.3s ease;
+    width: 100%;
+
+    &:not(&:first-child) {
+        margin-top: 8px;
+    }
+`;
+exports.StyledInput = StyledInput;
+const StyledInputContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    position: relative;
+    min-width: 0;
+`;
+exports.StyledInputContent = StyledInputContent;
+const StyledInputField = _styledComponents.default.input`
+    background: none;
+    border: none;
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.text;
+}};
+    padding: 0;
+`;
+exports.StyledInputField = StyledInputField;
+const StyledMotionInputLabel = (0, _styledComponents.default)(_framerMotion.motion.label)`
+    line-height: 1.15;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+`;
+exports.StyledMotionInputLabel = StyledMotionInputLabel;
+//# sourceMappingURL=Input.styles.js.map

package/lib/components/input/Input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledInput","styled","div","_ref","theme","_ref2","_ref3","isDisabled","exports","StyledInputContent","StyledInputField","input","_ref4","text","StyledMotionInputLabel","motion","label"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding: 8px 10px;\n    transition: opacity 0.3s ease;\n    width: 100%;\n\n    &:not(&:first-child) {\n        margin-top: 8px;\n    }\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    position: relative;\n    min-width: 0;\n`;\n\nexport const StyledInputField = styled.input`\n    background: none;\n    border: none;\n    color: ${({ theme }: StyledInputProps) => theme.text};\n    padding: 0;\n`;\n\nexport const StyledMotionInputLabel = styled(motion.label)`\n    line-height: 1.15;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAwB,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAEK,MAAMS,kBAAkB,GAAGR,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAEK,MAAMC,gBAAgB,GAAGT,yBAAM,CAACU,KAAM;AAC7C;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAER;EAAwB,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAACS,IAAI;AAAA,CAAC;AACzD;AACA,CAAC;AAACL,OAAA,CAAAE,gBAAA,GAAAA,gBAAA;AAEK,MAAMI,sBAAsB,GAAG,IAAAb,yBAAM,EAACc,oBAAM,CAACC,KAAK,CAAE;AAC3D;AACA;AACA;AACA;AACA,CAAC;AAACR,OAAA,CAAAM,sBAAA,GAAAA,sBAAA"}

package/lib/components/list/List.d.ts

@@ -8,7 +8,7 @@ interface IListContext {
     }) => void;
 }
 export declare const ListContext: React.Context<IListContext>;
-declare type ListProps = {
+type ListProps = {
     /**
      * The items of the list
      */