@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

package/lib/components/grid-image/GridImage.styles.js

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledGridImage = _styledComponents.default.div`
+import styled from 'styled-components';
+export const StyledGridImage = styled.div`
     background-color: rgba(${_ref => {
   let {
     theme
@@ -15,9 +8,9 @@ const StyledGridImage = _styledComponents.default.div`
 }}, 0.1);
     border-radius: ${_ref2 => {
   let {
-    shouldShowRoundImage
+    $shouldShowRoundImage
   } = _ref2;
-  return shouldShowRoundImage ? '50%' : undefined;
+  return $shouldShowRoundImage ? '50%' : undefined;
 }};
     box-shadow: 0 0 0 1px rgba(${_ref3 => {
   let {
@@ -27,57 +20,55 @@ const StyledGridImage = _styledComponents.default.div`
 }}, 0.08) inset;
     height: ${_ref4 => {
   let {
-    size
+    $size
   } = _ref4;
-  return size;
+  return $size;
 }}px;
     overflow: hidden;
     position: relative;
     transition: border-radius 0.3s ease;
     width: ${_ref5 => {
   let {
-    size
+    $size
   } = _ref5;
-  return size;
+  return $size;
 }}px;
 `;
-exports.StyledGridImage = StyledGridImage;
-const StyledGridLeftImage = _styledComponents.default.img`
+export const StyledGridLeftImage = styled.img`
     border-right: ${_ref6 => {
   let {
-    size
+    $size
   } = _ref6;
-  return size / 40;
+  return $size / 40;
 }}px solid white;
     height: 100%;
     left: 0;
     object-fit: cover;
     opacity: ${_ref7 => {
   let {
-    isHidden
+    $isHidden
   } = _ref7;
-  return isHidden ? 0 : 1;
+  return $isHidden ? 0 : 1;
 }};
     position: absolute;
     top: 0;
     transition: opacity 0.4s ease;
     width: 60%;
 `;
-exports.StyledGridLeftImage = StyledGridLeftImage;
-const StyledGridTopRightImage = _styledComponents.default.img`
+export const StyledGridTopRightImage = styled.img`
     border-bottom: ${_ref8 => {
   let {
-    size
+    $size
   } = _ref8;
-  return size / 40;
+  return $size / 40;
 }}px solid white;
     height: 50%;
     object-fit: cover;
     opacity: ${_ref9 => {
   let {
-    isHidden
+    $isHidden
   } = _ref9;
-  return isHidden ? 0 : 1;
+  return $isHidden ? 0 : 1;
 }};
     position: absolute;
     right: 0;
@@ -85,21 +76,19 @@ const StyledGridTopRightImage = _styledComponents.default.img`
     transition: opacity 0.3s ease;
     width: 40%;
 `;
-exports.StyledGridTopRightImage = StyledGridTopRightImage;
-const StyledGridBottomRightImage = _styledComponents.default.img`
+export const StyledGridBottomRightImage = styled.img`
     bottom: 0;
     height: 50%;
     object-fit: cover;
     opacity: ${_ref10 => {
   let {
-    isHidden
+    $isHidden
   } = _ref10;
-  return isHidden ? 0 : 1;
+  return $isHidden ? 0 : 1;
 }};
     position: absolute;
     right: 0;
     transition: opacity 0.3s ease;
     width: 40%;
 `;
-exports.StyledGridBottomRightImage = StyledGridBottomRightImage;
 //# sourceMappingURL=GridImage.styles.js.map

package/lib/components/grid-image/GridImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.styles.js","names":["StyledGridImage","styled","div","theme","shouldShowRoundImage","undefined","size","StyledGridLeftImage","img","isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n    size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background-color: rgba(${({ theme }: StyledGridImageProps) => theme['text-rgb']}, 0.1);\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ size }) => size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ size }) => size}px;\n`;\n\ntype StyledGridLeftImageProps = {\n    isHidden: boolean;\n    size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ size }) => size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    isHidden: boolean;\n    size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ size }) => size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAQhC,MAAMA,eAAe,GAAGC,yBAAM,CAACC,GAA0B;AAChE,6BAA6B;EAAA,IAAC;IAAEC;EAA4B,CAAC;EAAA,OAAKA,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACpF,qBAAqB;EAAA,IAAC;IAAEC;EAAqB,CAAC;EAAA,OAAMA,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F,iCAAiC;EAAA,IAAC;IAAEF;EAA4B,CAAC;EAAA,OAAKA,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACvF,cAAc;EAAA,IAAC;IAAEG;EAAK,CAAC;EAAA,OAAKA,IAAI;AAAA,CAAC;AACjC;AACA;AACA;AACA,aAAa;EAAA,IAAC;IAAEA;EAAK,CAAC;EAAA,OAAKA,IAAI;AAAA,CAAC;AAChC,CAAC;AAAC;AAOK,MAAMC,mBAAmB,GAAGN,yBAAM,CAACO,GAA8B;AACxE,oBAAoB;EAAA,IAAC;IAAEF;EAAK,CAAC;EAAA,OAAKA,IAAI,GAAG,EAAE;AAAA,CAAC;AAC5C;AACA;AACA;AACA,eAAe;EAAA,IAAC;IAAEG;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAAC;AAOK,MAAMC,uBAAuB,GAAGT,yBAAM,CAACO,GAAkC;AAChF,qBAAqB;EAAA,IAAC;IAAEF;EAAK,CAAC;EAAA,OAAKA,IAAI,GAAG,EAAE;AAAA,CAAC;AAC7C;AACA;AACA,eAAe;EAAA,IAAC;IAAEG;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAME,0BAA0B,GAAGV,yBAAM,CAACO,GAAqC;AACtF;AACA;AACA;AACA,eAAe;EAAA,IAAC;IAAEC;EAAS,CAAC;EAAA,OAAMA,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAAC"}
+{"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","_ref","theme","_ref2","$shouldShowRoundImage","undefined","_ref3","_ref4","$size","_ref5","StyledGridLeftImage","img","_ref6","_ref7","$isHidden","StyledGridTopRightImage","_ref8","_ref9","StyledGridBottomRightImage","_ref10"],"sources":["../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background-color: rgba(${({ theme }: StyledGridImageProps) => theme['text-rgb']}, 0.1);\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n    height: ${({ $size }) => $size}px;\n    overflow: hidden;\n    position: relative;\n    transition: border-radius 0.3s ease;\n    width: ${({ $size }) => $size}px;\n`;\n\ntype StyledGridLeftImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n    border-right: ${({ $size }) => $size / 40}px solid white;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    top: 0;\n    transition: opacity 0.4s ease;\n    width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n    $isHidden: boolean;\n    $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n    border-bottom: ${({ $size }) => $size / 40}px solid white;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    top: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n    $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n    bottom: 0;\n    height: 50%;\n    object-fit: cover;\n    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n    position: absolute;\n    right: 0;\n    transition: opacity 0.3s ease;\n    width: 40%;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAA0B;AAChE,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACpF,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAChG,iCAAiCC,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACvF,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACnC;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA,CAAC;AAClC,CAAC;AAOD,OAAO,MAAME,mBAAmB,GAAGZ,MAAM,CAACa,GAA8B;AACxE,oBAAoBC,KAAA;EAAA,IAAC;IAAEJ;EAAM,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,GAAG,EAAE;AAAA,CAAC;AAC9C;AACA;AACA;AACA,eAAeK,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACtD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,uBAAuB,GAAGjB,MAAM,CAACa,GAAkC;AAChF,qBAAqBK,KAAA;EAAA,IAAC;IAAER;EAAM,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,GAAG,EAAE;AAAA,CAAC;AAC/C;AACA;AACA,eAAeS,KAAA;EAAA,IAAC;IAAEH;EAAU,CAAC,GAAAG,KAAA;EAAA,OAAMH,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMI,0BAA0B,GAAGpB,MAAM,CAACa,GAAqC;AACtF;AACA;AACA;AACA,eAAeQ,MAAA;EAAA,IAAC;IAAEL;EAAU,CAAC,GAAAK,MAAA;EAAA,OAAML,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACtD;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/icon/Icon.js

@@ -1,14 +1,8 @@
-"use strict";
-
-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 }; }
+import clsx from 'clsx';
+import React from 'react';
+import { useTheme } from 'styled-components';
+import { getStackSizeFactor } from '../../utils/icon';
+import { StyledIcon, StyledIconWrapper } from './Icon.styles';
 const Icon = _ref => {
   let {
     className,
@@ -37,38 +31,41 @@ const Icon = _ref => {
       onDoubleClick(event);
     }
   };
+  const theme = useTheme();
   let maxStackSizeFactor = 1;
   icons.forEach(icon => {
-    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
+    const stackSizeFactor = getStackSizeFactor(icon);
     if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
       maxStackSizeFactor = stackSizeFactor;
     }
   });
   const shouldUseStackedIcon = icons.length > 1;
-  const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
-  return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
+  const wrapperClasses = clsx('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
+  return /*#__PURE__*/React.createElement(StyledIconWrapper, {
     className: wrapperClasses,
-    isDisabled: isDisabled,
+    $isDisabled: isDisabled,
     onClick: typeof onClick === 'function' ? handleClick : undefined,
+    $isOnClick: typeof onClick === 'function',
     onDoubleClick: typeof onDoubleClick === 'function' ? handleDoubleClick : undefined,
     onMouseDown: onMouseDown,
-    size: size
+    $size: size
   }, icons.map(icon => {
-    const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
-    const iconClasses = (0, _clsx.default)(icon, className, {
+    const stackSizeFactor = getStackSizeFactor(icon);
+    const isIconStyleGiven = /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
+    const iconStyle = isIconStyleGiven ? undefined : theme?.iconStyle ?? 'fa-regular';
+    const iconClasses = clsx(iconStyle, icon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
-    return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
+    return /*#__PURE__*/React.createElement(StyledIcon, {
       className: iconClasses,
-      color: icon.includes('fa-inverse') ? 'white' : color,
-      fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,
-      isStacked: shouldUseStackedIcon,
+      $color: icon.includes('fa-inverse') ? 'white' : color,
+      $fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,
+      $isStacked: shouldUseStackedIcon,
       key: icon,
-      size: size
+      $size: size
     });
   }));
 };
 Icon.displayName = 'Icon';
-var _default = Icon;
-exports.default = _default;
+export default Icon;
 //# sourceMappingURL=Icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","undefined","map","iconClasses","includes","displayName"],"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":";;;;;;AAAA;AACA;AACA;AACA;AAA6C;AAyC7C,MAAMA,IAAmB,GAAG,QAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC;EACG,MAAMC,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,EAAE;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,EAAE;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,IAAIG,kBAAkB,GAAG,CAAC;EAE1BX,KAAK,CAACY,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAME,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG,IAAAC,aAAI,EACvB,kBAAkB,EAClBH,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SAAS,CACZ;EAED,oBACI,6BAAC,uBAAiB;IACd,SAAS,EAAEoB,cAAe;IAC1B,UAAU,EAAEjB,UAAW;IACvB,OAAO,EAAE,OAAOC,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGa,SAAU;IACjE,aAAa,EAAE,OAAOjB,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGU,SAAU;IACnF,WAAW,EAAEhB,WAAY;IACzB,IAAI,EAAEC;EAAK,GAEVL,KAAK,CAACqB,GAAG,CAAER,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;IAEhD,MAAMS,WAAW,GAAG,IAAAH,aAAI,EAACN,IAAI,EAAEf,SAAS,EAAE;MACtC,aAAa,EAAEkB,oBAAoB,IAAIF,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI,6BAAC,gBAAU;MACP,SAAS,EAAEE,WAAY;MACvB,KAAK,EAAET,IAAI,CAACU,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAGxB,KAAM;MACrD,QAAQ,EAAG,CAACe,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIN,IAAK;MAC/D,SAAS,EAAEW,oBAAqB;MAChC,GAAG,EAAEH,IAAK;MACV,IAAI,EAAER;IAAK,EACb;EAEV,CAAC,CAAC,CACc;AAE5B,CAAC;AAEDR,IAAI,CAAC2B,WAAW,GAAG,MAAM;AAAC,eAEX3B,IAAI;AAAA"}
+{"version":3,"file":"Icon.js","names":["clsx","React","useTheme","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","isIconStyleGiven","test","iconStyle","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\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    const theme = useTheme();\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            $isOnClick={typeof onClick === 'function'}\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 isIconStyleGiven =\n                    /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);\n\n                const iconStyle = isIconStyleGiven\n                    ? undefined\n                    : (theme?.iconStyle as string) ?? 'fa-regular';\n\n                const iconClasses = clsx(iconStyle, icon, {\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,15 +1,16 @@
-import type { MouseEventHandler } from 'react';
-import type { IconProps } from './Icon';
+/// <reference types="react" />
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 type StyledIconWrapperProps = {
-    isDisabled?: boolean;
-    onClick?: MouseEventHandler<HTMLSpanElement>;
-    size: number;
+    $isDisabled?: boolean;
+    $isOnClick: boolean;
+    $size: number;
 };
-export declare const StyledIconWrapper: import("styled-components").StyledComponent<"span", any, StyledIconWrapperProps, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<"i", any, Omit<IconProps, "icons"> & {
-    fontSize: number;
-    isStacked?: boolean | undefined;
-} & {
-    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;
+export declare const StyledIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledIconWrapperProps>>;
+type StyledIconProps = WithTheme<{
+    $fontSize: number;
+    $isStacked?: boolean;
+    $color?: string;
+    $size: number;
+}>;
+export declare const StyledIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledIconProps>>;
 export {};

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

@@ -1,76 +1,66 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledIconWrapper = exports.StyledIcon = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-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`
+import styled, { css } from 'styled-components';
+export const StyledIconWrapper = styled.span`
     align-items: center;
     cursor: ${_ref => {
   let {
-    isDisabled,
-    onClick
+    $isDisabled,
+    $isOnClick
   } = _ref;
-  return typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit';
+  return $isOnClick && !$isDisabled ? 'pointer' : 'inherit';
 }};
     display: inline-flex;
-    height: ${_ref2 => {
+    min-height: ${_ref2 => {
   let {
-    size
+    $size
   } = _ref2;
-  return `${size}px`;
+  return `${$size}px`;
 }};
     justify-content: center;
     opacity: ${_ref3 => {
   let {
-    isDisabled
+    $isDisabled
   } = _ref3;
-  return isDisabled ? 0.5 : 1;
+  return $isDisabled ? 0.5 : 1;
 }};
     position: relative;
     transition: opacity 0.3s ease;
-    width: ${_ref4 => {
+    min-width: ${_ref4 => {
   let {
-    size
+    $size
   } = _ref4;
-  return `${size}px`;
+  return `${$size}px`;
 }};
 `;
-exports.StyledIconWrapper = StyledIconWrapper;
-const StyledIcon = _styledComponents.default.i`
+export const StyledIcon = styled.i`
     color: ${_ref5 => {
   let {
-    color,
+    $color,
     theme
   } = _ref5;
-  return color || theme.headline;
+  return $color || theme.headline;
 }};
     display: ${_ref6 => {
   let {
-    isStacked
+    $isStacked
   } = _ref6;
-  return isStacked ? undefined : 'inline-flex';
+  return $isStacked ? undefined : 'inline-flex';
 }};
     font-size: ${_ref7 => {
   let {
-    fontSize
+    $fontSize
   } = _ref7;
-  return `${fontSize}px`;
+  return `${$fontSize}px`;
 }};
 
     ${_ref8 => {
   let {
-    fontSize,
-    size
+    $fontSize,
+    $size
   } = _ref8;
-  return fontSize !== size && (0, _styledComponents.css)`
+  return $fontSize !== $size && 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,"file":"Icon.styles.js","names":["StyledIconWrapper","styled","span","isDisabled","onClick","size","StyledIcon","i","color","theme","headline","isStacked","undefined","fontSize","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":";;;;;;AACA;AAAgD;AAAA;AAUzC,MAAMA,iBAAiB,GAAGC,yBAAM,CAACC,IAA6B;AACrE;AACA,cAAc;EAAA,IAAC;IAAEC,UAAU;IAAEC;EAAQ,CAAC;EAAA,OAC9B,OAAOA,OAAO,KAAK,UAAU,IAAI,CAACD,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AAC7E;AACA,cAAc;EAAA,IAAC;IAAEE;EAAK,CAAC;EAAA,OAAM,GAAEA,IAAK,IAAG;AAAA,CAAC;AACxC;AACA,eAAe;EAAA,IAAC;IAAEF;EAAW,CAAC;EAAA,OAAMA,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA,aAAa;EAAA,IAAC;IAAEE;EAAK,CAAC;EAAA,OAAM,GAAEA,IAAK,IAAG;AAAA,CAAC;AACvC,CAAC;AAAC;AAQK,MAAMC,UAAU,GAAGL,yBAAM,CAACM,CAAmB;AACpD,aAAa;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAuB,CAAC;EAAA,OAAKD,KAAK,IAAIC,KAAK,CAACC,QAAQ;AAAA,CAAC;AAC5E,eAAe;EAAA,IAAC;IAAEC;EAAU,CAAC;EAAA,OAAMA,SAAS,GAAGC,SAAS,GAAG,aAAa;AAAA,CAAE;AAC1E,iBAAiB;EAAA,IAAC;IAAEC;EAAS,CAAC;EAAA,OAAM,GAAEA,QAAS,IAAG;AAAA,CAAC;AACnD;AACA,MAAM;EAAA,IAAC;IAAEA,QAAQ;IAAER;EAAK,CAAC;EAAA,OACjBQ,QAAQ,KAAKR,IAAI,IACjB,IAAAS,qBAAG,CAAC;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC"}
+{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","_ref","$isDisabled","$isOnClick","_ref2","$size","_ref3","_ref4","StyledIcon","i","_ref5","$color","theme","headline","_ref6","$isStacked","undefined","_ref7","$fontSize","_ref8"],"sources":["../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-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    min-width: ${({ $size }) => `${$size}px`};\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\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":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA6B;AACrE;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC;EAAW,CAAC,GAAAF,IAAA;EAAA,OAClCE,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AAC3D;AACA,kBAAkBE,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAM,GAAEC,KAAM,IAAG;AAAA,CAAC;AAC9C;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAY,CAAC,GAAAI,KAAA;EAAA,OAAMJ,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA;AACA,iBAAiBK,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OAAM,GAAEF,KAAM,IAAG;AAAA,CAAC;AAC7C,CAAC;AASD,OAAO,MAAMG,UAAU,GAAGX,MAAM,CAACY,CAAmB;AACpD,aAAaC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC;EAAuB,CAAC,GAAAF,KAAA;EAAA,OAAKC,MAAM,IAAIC,KAAK,CAACC,QAAQ;AAAA,CAAC;AAC9E,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAGC,SAAS,GAAG,aAAa;AAAA,CAAE;AAC5E,iBAAiBC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM,GAAEC,SAAU,IAAG;AAAA,CAAC;AACrD;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,SAAS;IAAEb;EAAM,CAAC,GAAAc,KAAA;EAAA,OACnBD,SAAS,KAAKb,KAAK,IACnBP,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}

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

@@ -1,5 +1,21 @@
-import { ChangeEventHandler, FC, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler } from 'react';
+import React, { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, ReactNode, type ReactElement } 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;
+    /**
+     * The id of the input
+     */
+    id?: string;
+    /**
+     * Defines the input mode of the input
+     */
+    inputMode?: InputMode;
     /**
      * Disables the input so that it cannot be changed anymore
      */
@@ -24,6 +40,18 @@ export type InputProps = {
      * Placeholder for the input field
      */
     placeholder?: string;
+    /**
+     * Element to be displayed next to or instead of the "placeholder"
+     */
+    placeholderElement?: ReactNode;
+    /**
+     * An element that should be displayed on the right side of the Input.
+     */
+    rightElement?: ReactElement;
+    /**
+     * 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')
      */
@@ -32,6 +60,18 @@ export type InputProps = {
      * Value if the input field should be controlled
      */
     value?: string;
+    /**
+     * Whether only the bottom border should be displayed
+     */
+    shouldShowOnlyBottomBorder?: boolean;
+    /**
+     * 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: FC<InputProps>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export default Input;

package/lib/components/input/Input.js

@@ -1,37 +1,80 @@
-"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 => {
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import Icon from '../icon/Icon';
+import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
+const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
+    iconElement,
+    inputMode,
     isDisabled,
     onBlur,
     onChange,
     onFocus,
     onKeyDown,
     placeholder,
+    placeholderElement,
+    rightElement,
+    shouldShowOnlyBottomBorder,
+    shouldShowClearIcon = false,
     type = 'text',
-    value
+    value,
+    shouldUseAutoFocus = false,
+    isInvalid = false,
+    id
   } = _ref;
-  const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
-  const handleInputFieldChange = (0, _react.useCallback)(event => {
+  const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');
+  const [width, setWidth] = useState(0);
+  const theme = useTheme();
+  const inputRef = useRef(null);
+  const handleClearIconClick = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      setHasValue(false);
+      if (typeof onChange === 'function') {
+        onChange({
+          target: inputRef.current
+        });
+      }
+    }
+  }, [onChange]);
+  const shouldShowBorder = useMemo(() => {
+    if (rightElement) {
+      // Ignore because rightElement can be any type of element.
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      return rightElement.props.style.backgroundColor === undefined;
+    }
+    return true;
+  }, [rightElement]);
+  useEffect(() => {
+    if (inputRef.current) {
+      const resizeObserver = new ResizeObserver(entries => {
+        if (entries && entries[0]) {
+          const observedWidth = entries[0].contentRect.width;
+          setWidth(observedWidth);
+        }
+      });
+      resizeObserver.observe(inputRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, []);
+  const handleInputFieldChange = useCallback(event => {
     setHasValue(event.target.value !== '');
     if (typeof onChange === 'function') {
       onChange(event);
     }
   }, [onChange]);
-  (0, _react.useEffect)(() => {
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus()
+  }), []);
+  useEffect(() => {
     if (typeof value === 'string') {
       setHasValue(value !== '');
     }
   }, [value]);
-  const labelPosition = (0, _react.useMemo)(() => {
+  const labelPosition = useMemo(() => {
     if (hasValue) {
       return {
         bottom: -8,
@@ -43,33 +86,57 @@ const Input = _ref => {
       top: 0
     };
   }, [hasValue]);
-  return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
+  return /*#__PURE__*/React.createElement(StyledInput, {
     className: "beta-chayns-input",
-    isDisabled: isDisabled
-  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledInputContentWrapper, {
+    $isInvalid: isInvalid,
+    $shouldRoundRightCorners: shouldShowBorder,
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
+  }, iconElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, iconElement), /*#__PURE__*/React.createElement(StyledInputContent, null, /*#__PURE__*/React.createElement(StyledInputField, {
+    id: id,
     disabled: isDisabled,
     onBlur: onBlur,
     onChange: handleInputFieldChange,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
+    ref: inputRef,
+    type: type,
     value: value,
-    type: type
-  }), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabel, {
+    autoFocus: shouldUseAutoFocus,
+    inputMode: inputMode,
+    $isInvalid: isInvalid
+  }), /*#__PURE__*/React.createElement(StyledMotionInputLabelWrapper, {
     animate: {
-      scale: hasValue ? 0.6 : 1
+      fontSize: hasValue ? '10px' : '16px'
     },
+    initial: false,
     layout: true,
     style: {
-      ...labelPosition,
-      originX: 1,
-      originY: 1
+      ...labelPosition
     },
+    transition: {
+      type: 'tween',
+      duration: 0.3
+    },
+    $width: width
+  }, placeholderElement, /*#__PURE__*/React.createElement(StyledInputLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    animate: {
+      opacity: hasValue ? 1 : 0
+    },
+    initial: false,
+    onClick: handleClearIconClick,
     transition: {
       type: 'tween'
     }
-  }, placeholder)));
-};
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-times'],
+    color: isInvalid ? theme.wrong : undefined
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement));
+});
 Input.displayName = 'Input';
-var _default = Input;
-exports.default = _default;
+export default Input;
 //# sourceMappingURL=Input.js.map