@chayns-components/core 5.0.0-beta.29 → 5.0.0-beta.293

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

@@ -1,54 +1,74 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledIconWrapper = exports.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");
-});
-
-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;
+}};
+    position: relative;
+    transition: opacity 0.3s ease;
+    width: ${_ref4 => {
+  let {
+    size
+  } = _ref4;
+  return `${size}px`;
+}};
+`;
+const StyledIcon = exports.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`;
+}};
 
-exports.StyledIcon = StyledIcon;
+    ${_ref8 => {
+  let {
+    fontSize,
+    size
+  } = _ref8;
+  return fontSize !== size && (0, _styledComponents.css)`
+            top: 50%;
+            transform: translateY(-50%);
+        `;
+}}
+`;
 //# 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","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledIconWrapper","exports","styled","span","_ref","isDisabled","onClick","_ref2","size","_ref3","_ref4","StyledIcon","_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,65 @@
+import React, { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, ReactNode } from 'react';
+export type InputRef = {
+    focus: VoidFunction;
+};
+type InputMode = 'email' | 'search' | 'tel' | 'text' | 'url' | 'none' | 'numeric' | 'decimal' | undefined;
+export type InputProps = {
+    /**
+     * Icon element to be displayed on the left side of the input field
+     */
+    iconElement?: ReactNode;
+    /**
+     * Defines the input mode of the input
+     */
+    inputMode?: InputMode;
+    /**
+     * 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;
+    /**
+     * Element to be displayed next to or instead of the "placeholder"
+     */
+    placeholderElement?: ReactNode;
+    /**
+     * If true, a clear icon is displayed at the end of the input field
+     */
+    shouldShowClearIcon?: boolean;
+    /**
+     * Input type set for input element (e.g. 'text', 'number' or 'password')
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Value if the input field should be controlled
+     */
+    value?: string;
+    /**
+     * If true, the input field is focused when the component is mounted
+     */
+    shouldUseAutoFocus?: boolean;
+    /**
+     * If true, the input field is marked as invalid
+     */
+    isInvalid?: boolean;
+};
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+export default Input;

package/lib/components/input/Input.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _Input = require("./Input.styles");
+var _styledComponents = require("styled-components");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    iconElement,
+    inputMode,
+    isDisabled,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    placeholder,
+    placeholderElement,
+    shouldShowClearIcon = false,
+    type = 'text',
+    value,
+    shouldUseAutoFocus = false,
+    isInvalid = false
+  } = _ref;
+  const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
+  const theme = (0, _styledComponents.useTheme)();
+  const inputRef = (0, _react.useRef)(null);
+  const handleClearIconClick = (0, _react.useCallback)(() => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      if (typeof onChange === 'function') {
+        onChange({
+          target: inputRef.current
+        });
+      }
+    }
+  }, [onChange]);
+  const handleInputFieldChange = (0, _react.useCallback)(event => {
+    setHasValue(event.target.value !== '');
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    }
+  }), []);
+  (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,
+    isInvalid: isInvalid
+  }, iconElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, iconElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
+    disabled: isDisabled,
+    onBlur: onBlur,
+    onChange: handleInputFieldChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    ref: inputRef,
+    type: type,
+    value: value,
+    autoFocus: shouldUseAutoFocus,
+    inputMode: inputMode,
+    isInvalid: isInvalid
+  }), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabel, {
+    animate: {
+      scale: hasValue ? 0.6 : 1
+    },
+    initial: false,
+    layout: true,
+    style: {
+      ...labelPosition
+    },
+    transition: {
+      type: 'tween'
+    },
+    isInvalid: isInvalid
+  }, placeholderElement, placeholder)), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
+    animate: {
+      opacity: hasValue ? 1 : 0
+    },
+    initial: false,
+    onClick: handleClearIconClick,
+    transition: {
+      type: 'tween'
+    },
+    isInvalid: isInvalid
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-times'],
+    color: isInvalid ? theme.wrong : undefined
+  })));
+});
+Input.displayName = 'Input';
+var _default = exports.default = Input;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_Input","_styledComponents","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","hasValue","setHasValue","useState","theme","useTheme","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","scale","initial","layout","style","transition","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","undefined","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabel,\n} from './Input.styles';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useTheme } from 'styled-components';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\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     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\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     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false\n        },\n        ref\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const theme = useTheme() as Theme;\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\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        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            []\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} isInvalid={isInvalid}>\n                {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                <StyledInputContent>\n                    <StyledInputField\n                        disabled={isDisabled}\n                        onBlur={onBlur}\n                        onChange={handleInputFieldChange}\n                        onFocus={onFocus}\n                        onKeyDown={onKeyDown}\n                        ref={inputRef}\n                        type={type}\n                        value={value}\n                        autoFocus={shouldUseAutoFocus}\n                        inputMode={inputMode}\n                        isInvalid={isInvalid}\n                    />\n                    <StyledMotionInputLabel\n                        animate={{ scale: hasValue ? 0.6 : 1 }}\n                        initial={false}\n                        layout\n                        style={{ ...labelPosition }}\n                        transition={{ type: 'tween' }}\n                        isInvalid={isInvalid}\n                    >\n                        {placeholderElement}\n                        {placeholder}\n                    </StyledMotionInputLabel>\n                </StyledInputContent>\n                {shouldShowClearIcon && (\n                    <StyledMotionInputClearIcon\n                        animate={{ opacity: hasValue ? 1 : 0 }}\n                        initial={false}\n                        onClick={handleClearIconClick}\n                        transition={{ type: 'tween' }}\n                        isInvalid={isInvalid}\n                    >\n                        <Icon icons={['fa fa-times']} color={isInvalid ? theme.wrong : undefined}/>\n                    </StyledMotionInputClearIcon>\n                )}\n            </StyledInput>\n        );\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,15 @@
+import type { InputProps } from './Input';
+export declare const StyledInput: import("styled-components").StyledComponent<"div", any, Pick<InputProps, "isDisabled" | "isInvalid"> & {
+    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, Pick<InputProps, "isInvalid"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionInputLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, any, Pick<InputProps, "isInvalid"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionInputClearIcon: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, Pick<InputProps, "isInvalid"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledInputIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionInputLabel = exports.StyledMotionInputClearIcon = exports.StyledInputIconWrapper = 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 = exports.StyledInput = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['100'];
+}};
+    border: 1px solid ${_ref2 => {
+  let {
+    theme,
+    isInvalid
+  } = _ref2;
+  return isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
+}};
+    border-radius: 3px;
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['006'];
+}};
+    display: flex;
+    justify-content: space-between;
+    min-height: 42px;
+    opacity: ${_ref4 => {
+  let {
+    isDisabled
+  } = _ref4;
+  return isDisabled ? 0.5 : 1;
+}};
+    transition: opacity 0.3s ease;
+    width: 100%;
+`;
+const StyledInputContent = exports.StyledInputContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 8px 10px;
+    position: relative;
+`;
+const StyledInputField = exports.StyledInputField = _styledComponents.default.input`
+    background: none;
+    border: none;
+    color: ${_ref5 => {
+  let {
+    theme,
+    isInvalid
+  } = _ref5;
+  return isInvalid ? theme.wrong : theme.text;
+}};
+    padding: 0;
+    width: 100%;
+`;
+const StyledMotionInputLabel = exports.StyledMotionInputLabel = (0, _styledComponents.default)(_framerMotion.motion.label)`
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    color: ${_ref6 => {
+  let {
+    theme,
+    isInvalid
+  } = _ref6;
+  return isInvalid ? theme.wrong : undefined;
+}}
+`;
+const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    border-left: 1px solid rgba(160, 160, 160, 0.3);
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    width: 40px;
+`;
+const StyledInputIconWrapper = exports.StyledInputIconWrapper = _styledComponents.default.div`
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    margin-left: 10px;
+`;
+//# 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","exports","styled","div","_ref","theme","_ref2","isInvalid","wrong","_ref3","_ref4","isDisabled","StyledInputContent","StyledInputField","input","_ref5","text","StyledMotionInputLabel","motion","label","_ref6","undefined","StyledMotionInputClearIcon","StyledInputIconWrapper"],"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'| 'isInvalid'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid ${({theme, isInvalid}:StyledInputProps ) => isInvalid ? theme.wrong : '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    transition: opacity 0.3s ease;\n    width: 100%;\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: 8px 10px;\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, isInvalid }: StyledInputFieldProps) => isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\ntype StyledMotionInputLabelProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputLabel = styled(motion.label)<StyledMotionInputLabelProps>`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    color: ${({theme, isInvalid}: StyledMotionInputLabelProps)=> isInvalid ? theme.wrong : undefined}\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\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,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE,wBAAwBC,KAAA;EAAA,IAAC;IAACD,KAAK;IAAEE;EAA0B,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,0BAA0B;AAAA,CAAC;AACvH;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEJ;EAAwB,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeK,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA,CAAC;AAEM,MAAMC,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAGV,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMU,gBAAgB,GAAAZ,OAAA,CAAAY,gBAAA,GAAGX,yBAAM,CAACY,KAA6B;AACpE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEV,KAAK;IAAEE;EAAiC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAGH,KAAK,CAACW,IAAI;AAAA,CAAC;AACnG;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAhB,OAAA,CAAAgB,sBAAA,GAAG,IAAAf,yBAAM,EAACgB,oBAAM,CAACC,KAAK,CAA+B;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAACf,KAAK;IAAEE;EAAsC,CAAC,GAAAa,KAAA;EAAA,OAAIb,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAGa,SAAS;AAAA,CAAC;AACrG,CAAC;AAIM,MAAMC,0BAA0B,GAAArB,OAAA,CAAAqB,0BAAA,GAAG,IAAApB,yBAAM,EAACgB,oBAAM,CAACf,GAAG,CAAmC;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMoB,sBAAsB,GAAAtB,OAAA,CAAAsB,sBAAA,GAAGrB,yBAAM,CAACC,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC"}

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
      */

package/lib/components/list/List.js

@@ -1,91 +1,52 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ListContext = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var ListContext = /*#__PURE__*/_react.default.createContext({
-  incrementExpandableItemCount: function incrementExpandableItemCount() {
-    return function () {};
-  },
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ListContext = exports.ListContext = /*#__PURE__*/_react.default.createContext({
+  incrementExpandableItemCount: () => () => {},
   isAnyItemExpandable: false,
   openItemUuid: undefined,
-  updateOpenItemUuid: function updateOpenItemUuid() {}
+  updateOpenItemUuid: () => {}
 });
-
-exports.ListContext = ListContext;
 ListContext.displayName = 'ListContext';
-
-var List = function List(_ref) {
-  var children = _ref.children;
-
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      openItemUuid = _useState2[0],
-      setOpenItemUuid = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      expandableItemCount = _useState4[0],
-      setExpandableItemCount = _useState4[1];
-
-  var updateOpenItemUuid = (0, _react.useCallback)(function (uuid) {
-    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        shouldOnlyOpen = _ref2.shouldOnlyOpen;
-
-    setOpenItemUuid(function (currentOpenItemUuid) {
+const List = _ref => {
+  let {
+    children
+  } = _ref;
+  const [openItemUuid, setOpenItemUuid] = (0, _react.useState)(undefined);
+  const [expandableItemCount, setExpandableItemCount] = (0, _react.useState)(0);
+  const updateOpenItemUuid = (0, _react.useCallback)(function (uuid) {
+    let {
+      shouldOnlyOpen
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    setOpenItemUuid(currentOpenItemUuid => {
       if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {
         return undefined;
       }
-
       return uuid;
     });
   }, [setOpenItemUuid]);
-  var incrementExpandableItemCount = (0, _react.useCallback)(function () {
-    setExpandableItemCount(function (count) {
-      return count + 1;
-    });
-    return function () {
-      setExpandableItemCount(function (count) {
-        return count - 1;
-      });
+  const incrementExpandableItemCount = (0, _react.useCallback)(() => {
+    setExpandableItemCount(count => count + 1);
+    return () => {
+      setExpandableItemCount(count => count - 1);
     };
   }, [setExpandableItemCount]);
-  var providerValue = (0, _react.useMemo)(function () {
-    return {
-      isAnyItemExpandable: expandableItemCount > 0,
-      updateOpenItemUuid: updateOpenItemUuid,
-      openItemUuid: openItemUuid,
-      incrementExpandableItemCount: incrementExpandableItemCount
-    };
-  }, [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]);
+  const providerValue = (0, _react.useMemo)(() => ({
+    isAnyItemExpandable: expandableItemCount > 0,
+    updateOpenItemUuid,
+    openItemUuid,
+    incrementExpandableItemCount
+  }), [expandableItemCount, incrementExpandableItemCount, openItemUuid, updateOpenItemUuid]);
   return /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
     value: providerValue
   }, children);
 };
-
 List.displayName = 'List';
-var _default = List;
-exports.default = _default;
+var _default = exports.default = List;
 //# sourceMappingURL=List.js.map