@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.981

package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js

@@ -0,0 +1,114 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
+export const StyledFilterButtonItem = styled.div`
+    position: relative;
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    padding: ${_ref => {
+  let {
+    $size
+  } = _ref;
+  return $size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px';
+}};
+
+    display: flex;
+    align-items: center;
+
+    &:hover > div:last-child {
+        ${_ref2 => {
+  let {
+    $isSelected
+  } = _ref2;
+  return !$isSelected && css`
+                opacity: 0.2;
+            `;
+}}
+    }
+`;
+export const StyledFilterButtonItemLabel = styled.div`
+    display: flex;
+    gap: 5px;
+    align-items: baseline;
+    position: relative;
+    z-index: 1;
+`;
+export const StyledFilterButtonItemLabelText = styled.p`
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.text;
+}};
+    margin: 0;
+    line-height: 1;
+`;
+export const StyledFilterButtonItemLabelCount = styled.p`
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.text;
+}};
+    margin: 0;
+    line-height: 1;
+    font-weight: bold;
+`;
+export const StyledFilterButtonItemBorder = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0.4;
+    z-index: 0;
+    border-radius: ${_ref5 => {
+  let {
+    $shape
+  } = _ref5;
+  return $shape === FilterButtonItemShape.Round ? 100 : 3;
+}}px;
+
+    ${_ref6 => {
+  let {
+    $color,
+    theme,
+    $isSelected
+  } = _ref6;
+  return !$isSelected && css`
+            border-width: 1px;
+            border-style: solid;
+            border-color: ${$color ?? theme.headline};
+        `;
+}};
+`;
+export const StyledMotionFilterButtonItemBackground = styled(motion.div)`
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 0;
+    opacity: ${_ref7 => {
+  let {
+    $isSelected
+  } = _ref7;
+  return $isSelected ? 0.4 : 0;
+}};
+    transition: opacity 0.5s ease;
+    border-radius: ${_ref8 => {
+  let {
+    $shape
+  } = _ref8;
+  return $shape === FilterButtonItemShape.Round ? 100 : 3;
+}}px;
+    background-color: ${_ref9 => {
+  let {
+    $color,
+    theme
+  } = _ref9;
+  return $color ?? theme.headline;
+}};
+`;
+//# sourceMappingURL=FilterButton.styles.js.map

package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","_ref","$size","Normal","_ref2","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemLabelCount","_ref4","StyledFilterButtonItemBorder","_ref5","$shape","Round","_ref6","$color","headline","StyledMotionFilterButtonItemBackground","_ref7","_ref8","_ref9"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{ $size: FilterButtonSize; $isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n    display: flex;\n    align-items: center;\n\n    &:hover > div:last-child {\n        ${({ $isSelected }) =>\n            !$isSelected &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: baseline;\n    position: relative;\n    z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin: 0;\n    line-height: 1;\n    font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: 0;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n    ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n        !$isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${$color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    $shape: FilterButtonItemShape;\n    $color: CSSProperties['color'];\n    $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 0;\n    opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n    background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAKtF,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACK,GAAgC;AAC7E;AACA;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAKJ,gBAAgB,CAACK,MAAM,GAAG,UAAU,GAAG,SAAS;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACd,CAACC,WAAW,IACZT,GAAG;AACf;AACA,aAAa;AAAA;AACb;AACA,CAAC;AAED,OAAO,MAAMU,2BAA2B,GAAGX,MAAM,CAACK,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,+BAA+B,GAAGZ,MAAM,CAACa,CAAuC;AAC7F,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGjB,MAAM,CAACa,CAAwC;AAC/F,aAAaK,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACC,IAAI;AAAA;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,4BAA4B,GAAGnB,MAAM,CAACK,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBe,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACvF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAET,KAAK;IAAEL;EAA+C,CAAC,GAAAa,KAAA;EAAA,OAChE,CAACb,WAAW,IACZT,GAAG;AACX;AACA;AACA,4BAA4BuB,MAAM,IAAIT,KAAK,CAACU,QAAQ;AACpD,SAAS;AAAA;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAG1B,MAAM,CACxDD,MAAM,CAACM,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAesB,KAAA;EAAA,IAAC;IAAEjB;EAAY,CAAC,GAAAiB,KAAA;EAAA,OAAMjB,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA,qBAAqBkB,KAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,KAAA;EAAA,OAAMP,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACvF,wBAAwBO,KAAA;EAAA,IAAC;IAAEL,MAAM;IAAET;EAA6C,CAAC,GAAAc,KAAA;EAAA,OACzEL,MAAM,IAAIT,KAAK,CAACU,QAAQ;AAAA;AAChC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+import React, { useCallback, useState } from 'react';
+import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
+const GridImage = _ref => {
+  let {
+    background,
+    images,
+    shouldShowRoundImage,
+    size,
+    onClick
+  } = _ref;
+  const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
+  const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);
+  const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);
+  const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);
+  const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);
+  const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
+  const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
+  return /*#__PURE__*/React.createElement(StyledGridImage, {
+    $background: background,
+    $shouldShowRoundImage: shouldShowRoundImage,
+    $size: size,
+    onClick: typeof onClick === 'function' ? onClick : undefined
+  }, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleLeftImageLoaded,
+    $size: size,
+    src: images[0]
+  }), /*#__PURE__*/React.createElement(StyledGridTopRightImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleTopRightImageLoaded,
+    $size: size,
+    src: images[1]
+  }), /*#__PURE__*/React.createElement(StyledGridBottomRightImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleBottomRightImageLoaded,
+    src: images[2]
+  }));
+};
+GridImage.displayName = 'GridImage';
+export default GridImage;
+//# sourceMappingURL=GridImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridImage.js","names":["React","useCallback","useState","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","_ref","background","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$background","$shouldShowRoundImage","$size","undefined","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The background color of the image.\n     */\n    background?: CSSProperties['background'];\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n    background,\n    images,\n    shouldShowRoundImage,\n    size,\n    onClick,\n}) => {\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage\n            $background={background}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={typeof onClick === 'function' ? onClick : undefined}\n        >\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA0CC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAC1F,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;AAyB3B,MAAMC,SAA6B,GAAGC,IAAA,IAMhC;EAAA,IANiC;IACnCC,UAAU;IACVC,MAAM;IACNC,oBAAoB;IACpBC,IAAI;IACJC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM,CAACM,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGb,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACc,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACgB,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAMkB,qBAAqB,GAAGnB,WAAW,CAAC,MAAMc,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMM,yBAAyB,GAAGpB,WAAW,CAAC,MAAMgB,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMK,4BAA4B,GAAGrB,WAAW,CAAC,MAAMkB,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMI,iBAAiB,GACnB,CAACT,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,oBACIlB,KAAA,CAAAwB,aAAA,CAACpB,eAAe;IACZqB,WAAW,EAAEhB,UAAW;IACxBiB,qBAAqB,EAAEf,oBAAqB;IAC5CgB,KAAK,EAAEf,IAAK;IACZC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGA,OAAO,GAAGe;EAAU,gBAE7D5B,KAAA,CAAAwB,aAAA,CAACnB,mBAAmB;IAChBwB,SAAS,EAAEN,iBAAkB;IAC7BO,MAAM,EAAEV,qBAAsB;IAC9BO,KAAK,EAAEf,IAAK;IACZmB,GAAG,EAAErB,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFV,KAAA,CAAAwB,aAAA,CAAClB,uBAAuB;IACpBuB,SAAS,EAAEN,iBAAkB;IAC7BO,MAAM,EAAET,yBAA0B;IAClCM,KAAK,EAAEf,IAAK;IACZmB,GAAG,EAAErB,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFV,KAAA,CAAAwB,aAAA,CAACrB,0BAA0B;IACvB0B,SAAS,EAAEN,iBAAkB;IAC7BO,MAAM,EAAER,4BAA6B;IACrCS,GAAG,EAAErB,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDH,SAAS,CAACyB,WAAW,GAAG,WAAW;AAEnC,eAAezB,SAAS","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+import styled from 'styled-components';
+export const StyledGridImage = styled.div`
+    background: ${_ref => {
+  let {
+    $background,
+    theme
+  } = _ref;
+  return $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`;
+}};
+    border-radius: ${_ref2 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref2;
+  return $shouldShowRoundImage ? '50%' : undefined;
+}};
+    box-shadow: 0 0 0 1px rgba(${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    height: ${_ref4 => {
+  let {
+    $size
+  } = _ref4;
+  return $size;
+}}px;
+    overflow: hidden;
+    position: relative;
+    transition: border-radius 0.3s ease;
+    width: ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size;
+}}px;
+    flex: 0 0 auto;
+`;
+export const StyledGridLeftImage = styled.img`
+    border-right: ${_ref6 => {
+  let {
+    $size
+  } = _ref6;
+  return $size / 40;
+}}px solid white;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    opacity: ${_ref7 => {
+  let {
+    $isHidden
+  } = _ref7;
+  return $isHidden ? 0 : 1;
+}};
+    position: absolute;
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 60%;
+`;
+export const StyledGridTopRightImage = styled.img`
+    border-bottom: ${_ref8 => {
+  let {
+    $size
+  } = _ref8;
+  return $size / 40;
+}}px solid white;
+    height: 50%;
+    object-fit: cover;
+    opacity: ${_ref9 => {
+  let {
+    $isHidden
+  } = _ref9;
+  return $isHidden ? 0 : 1;
+}};
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 0.3s ease;
+    width: 40%;
+`;
+export const StyledGridBottomRightImage = styled.img`
+    bottom: 0;
+    height: 50%;
+    object-fit: cover;
+    opacity: ${_ref10 => {
+  let {
+    $isHidden
+  } = _ref10;
+  return $isHidden ? 0 : 1;
+}};
+    position: absolute;
+    right: 0;
+    transition: opacity 0.3s ease;
+    width: 40%;
+`;
+//# sourceMappingURL=GridImage.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","_ref","$background","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 { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowRoundImage?: boolean;\n    $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n    background: ${({ $background, theme }: StyledGridImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 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    flex: 0 0 auto;\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":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAStC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,kBAAkBC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC;EAA4B,CAAC,GAAAF,IAAA;EAAA,OACvDC,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AAAA;AACnE,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F,iCAAiCC,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA;AACtF,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA;AAClC;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA;AACjC;AACA,CAAC;AAOD,OAAO,MAAME,mBAAmB,GAAGb,MAAM,CAACc,GAA6B;AACvE,oBAAoBC,KAAA;EAAA,IAAC;IAAEJ;EAAM,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,GAAG,EAAE;AAAA;AAC7C;AACA;AACA;AACA,eAAeK,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,uBAAuB,GAAGlB,MAAM,CAACc,GAAiC;AAC/E,qBAAqBK,KAAA;EAAA,IAAC;IAAER;EAAM,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,GAAG,EAAE;AAAA;AAC9C;AACA;AACA,eAAeS,KAAA;EAAA,IAAC;IAAEH;EAAU,CAAC,GAAAG,KAAA;EAAA,OAAMH,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMI,0BAA0B,GAAGrB,MAAM,CAACc,GAAoC;AACrF;AACA;AACA;AACA,eAAeQ,MAAA;EAAA,IAAC;IAAEL;EAAU,CAAC,GAAAK,MAAA;EAAA,OAAML,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,77 @@
+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,
+    color,
+    icons,
+    isDisabled,
+    onClick,
+    onDoubleClick,
+    onMouseDown,
+    size = 15,
+    shouldStopPropagation
+  } = _ref;
+  const handleClick = event => {
+    if (shouldStopPropagation) {
+      event.stopPropagation();
+    }
+    if (typeof onClick === 'function') {
+      onClick(event);
+    }
+  };
+  const handleDoubleClick = event => {
+    if (shouldStopPropagation) {
+      event.stopPropagation();
+    }
+    if (typeof onDoubleClick === 'function') {
+      onDoubleClick(event);
+    }
+  };
+  const theme = useTheme();
+  let maxStackSizeFactor = 1;
+  icons.forEach(icon => {
+    const stackSizeFactor = getStackSizeFactor(icon);
+    if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
+      maxStackSizeFactor = stackSizeFactor;
+    }
+  });
+  const shouldUseStackedIcon = icons.length > 1;
+  const wrapperClasses = clsx('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
+  return /*#__PURE__*/React.createElement(StyledIconWrapper, {
+    className: wrapperClasses,
+    $isDisabled: isDisabled,
+    onClick: typeof onClick === 'function' ? handleClick : undefined,
+    $isOnClick: typeof onClick === 'function',
+    onDoubleClick: typeof onDoubleClick === 'function' ? handleDoubleClick : undefined,
+    onMouseDown: onMouseDown,
+    $size: size
+  }, icons.map(icon => {
+    const stackSizeFactor = getStackSizeFactor(icon);
+
+    // const isIconStyleGiven =
+    //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
+    //
+    // const iconStyle = isIconStyleGiven
+    //     ? undefined
+    //     : (theme?.iconStyle as string) ?? 'fa-regular';
+
+    const iconClasses = clsx(icon, {
+      'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
+    });
+    return /*#__PURE__*/React.createElement(StyledIcon, {
+      className: iconClasses,
+      $color: icon.includes('fa-inverse') ? 'white' : color,
+      $fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,
+      $isStacked: shouldUseStackedIcon,
+      key: icon,
+      $size: size
+    });
+  }));
+};
+Icon.displayName = 'Icon';
+export default Icon;
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"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","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(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":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAyC7D,MAAMC,IAAmB,GAAGC,IAAA,IAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;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,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EAExB,IAAIoB,kBAAkB,GAAG,CAAC;EAE1BZ,KAAK,CAACa,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG5B,IAAI,CACvB,kBAAkB,EAClB0B,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SACJ,CAAC;EAED,oBACIP,KAAA,CAAA4B,aAAA,CAACxB,iBAAiB;IACdG,SAAS,EAAEoB,cAAe;IAC1BE,WAAW,EAAEnB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGc,SAAU;IACjEC,UAAU,EAAE,OAAOpB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGW,SAAU;IACnFjB,WAAW,EAAEA,WAAY;IACzBmB,KAAK,EAAElB;EAAK,GAEXL,KAAK,CAACwB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;;IAEhD;IACA;IACA;IACA;IACA;IACA;;IAEA,MAAMW,WAAW,GAAGnC,IAAI,CAACwB,IAAI,EAAE;MAC3B,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI9B,KAAA,CAAA4B,aAAA,CAACzB,UAAU;MACPI,SAAS,EAAE2B,WAAY;MACvBC,MAAM,EAAEZ,IAAI,CAACa,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG5B,KAAM;MACtD6B,SAAS,EAAG,CAACb,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIP,IAAK;MAChEwB,UAAU,EAAEb,oBAAqB;MACjCc,GAAG,EAAEhB,IAAK;MACVS,KAAK,EAAElB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,CAACmC,WAAW,GAAG,MAAM;AAEzB,eAAenC,IAAI","ignoreList":[]}

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

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+export const StyledIconWrapper = styled.span`
+    align-items: center;
+    cursor: ${_ref => {
+  let {
+    $isDisabled,
+    $isOnClick
+  } = _ref;
+  return $isOnClick && !$isDisabled ? 'pointer' : 'inherit';
+}};
+    display: inline-flex;
+    min-height: ${_ref2 => {
+  let {
+    $size
+  } = _ref2;
+  return `${$size}px`;
+}};
+    justify-content: center;
+    opacity: ${_ref3 => {
+  let {
+    $isDisabled
+  } = _ref3;
+  return $isDisabled ? 0.5 : 1;
+}};
+    position: relative;
+    transition: opacity 0.3s ease;
+    min-width: ${_ref4 => {
+  let {
+    $size
+  } = _ref4;
+  return `${$size}px`;
+}};
+
+    // To insure that stacked icons have the same size as normal icons.
+    &&.fa-stack {
+        height: fit-content;
+        width: fit-content;
+        line-height: ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size;
+}}px;
+    }
+`;
+export const StyledIcon = styled.i`
+    color: ${_ref6 => {
+  let {
+    $color,
+    theme
+  } = _ref6;
+  return $color || theme.headline;
+}};
+    display: ${_ref7 => {
+  let {
+    $isStacked
+  } = _ref7;
+  return $isStacked ? undefined : 'inline-flex';
+}};
+    font-size: ${_ref8 => {
+  let {
+    $fontSize
+  } = _ref8;
+  return `${$fontSize}px`;
+}};
+
+    ${_ref9 => {
+  let {
+    $fontSize,
+    $size
+  } = _ref9;
+  return $fontSize !== $size && css`
+            top: 50%;
+            transform: translateY(-50%);
+        `;
+}}
+`;
+//# sourceMappingURL=Icon.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","_ref","$isDisabled","$isOnClick","_ref2","$size","_ref3","_ref4","_ref5","StyledIcon","i","_ref6","$color","theme","headline","_ref7","$isStacked","undefined","_ref8","$fontSize","_ref9"],"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    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\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,IAA4B;AACpE;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC;EAAW,CAAC,GAAAF,IAAA;EAAA,OAClCE,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA;AAC1D;AACA,kBAAkBE,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAGC,KAAK,IAAI;AAAA;AAC7C;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAY,CAAC,GAAAI,KAAA;EAAA,OAAMJ,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,iBAAiBK,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OAAK,GAAGF,KAAK,IAAI;AAAA;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuBG,KAAA;EAAA,IAAC;IAAEH;EAAM,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK;AAAA;AAC3C;AACA,CAAC;AASD,OAAO,MAAMI,UAAU,GAAGZ,MAAM,CAACa,CAAkB;AACnD,aAAaC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC;EAAuB,CAAC,GAAAF,KAAA;EAAA,OAAKC,MAAM,IAAIC,KAAK,CAACC,QAAQ;AAAA;AAC7E,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAGC,SAAS,GAAG,aAAa;AAAA,CAAC;AAC3E,iBAAiBC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAGC,SAAS,IAAI;AAAA;AACpD;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,SAAS;IAAEd;EAAM,CAAC,GAAAe,KAAA;EAAA,OACnBD,SAAS,KAAKd,KAAK,IACnBP,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

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

@@ -0,0 +1,158 @@
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { useElementSize } from '../../hooks/useElementSize';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import Icon from '../icon/Icon';
+import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
+export let InputSize = /*#__PURE__*/function (InputSize) {
+  InputSize["Small"] = "small";
+  InputSize["Medium"] = "medium";
+  return InputSize;
+}({});
+const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    leftElement,
+    inputMode,
+    isDisabled,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onPaste,
+    placeholder,
+    rightElement,
+    shouldShowOnlyBottomBorder,
+    shouldRemainPlaceholder = false,
+    shouldShowClearIcon = false,
+    shouldShowCenteredContent = false,
+    size = InputSize.Medium,
+    type = 'text',
+    value,
+    shouldUseAutoFocus = false,
+    isInvalid = false,
+    shouldPreventPlaceholderAnimation = false,
+    id
+  } = _ref;
+  const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');
+  const [placeholderWidth, setPlaceholderWidth] = useState(0);
+  const areaProvider = useContext(AreaContext);
+  const theme = useTheme();
+  const inputRef = useRef(null);
+  const placeholderRef = useRef(null);
+  const placeholderSize = useElementSize(placeholderRef);
+  useEffect(() => {
+    if (placeholderSize && shouldShowOnlyBottomBorder) {
+      setPlaceholderWidth(placeholderSize.width + 5);
+    }
+  }, [placeholderSize, shouldShowOnlyBottomBorder]);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const handleClearIconClick = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      setHasValue(false);
+      if (typeof onChange === 'function') {
+        onChange({
+          target: inputRef.current
+        });
+      }
+    }
+  }, [onChange]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
+  const handleInputFieldChange = useCallback(event => {
+    setHasValue(event.target.value !== '');
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus()
+  }), []);
+  useEffect(() => {
+    if (typeof value === 'string') {
+      setHasValue(value !== '');
+    }
+  }, [value]);
+  const labelPosition = useMemo(() => {
+    if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
+      return shouldShowOnlyBottomBorder ? {
+        right: 3,
+        top: -1.5
+      } : {
+        bottom: size === InputSize.Small ? -4 : -10,
+        right: -6
+      };
+    }
+    return {
+      left: -1
+    };
+  }, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
+  return /*#__PURE__*/React.createElement(StyledInput, {
+    className: "beta-chayns-input",
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledInputContentWrapper, {
+    $shouldChangeColor: shouldChangeColor,
+    $isInvalid: isInvalid,
+    $shouldRoundRightCorners: shouldShowBorder,
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size
+  }, leftElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, leftElement), /*#__PURE__*/React.createElement(StyledInputContent, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
+  }, /*#__PURE__*/React.createElement(StyledInputField, {
+    $placeholderWidth: placeholderWidth,
+    id: id,
+    disabled: isDisabled,
+    onBlur: onBlur,
+    onChange: handleInputFieldChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    onPaste: onPaste,
+    ref: inputRef,
+    type: type,
+    value: value,
+    autoFocus: shouldUseAutoFocus,
+    inputMode: inputMode,
+    $isInvalid: isInvalid,
+    $shouldShowCenteredContent: shouldShowCenteredContent
+  }), /*#__PURE__*/React.createElement(StyledMotionInputLabelWrapper, {
+    animate: shouldPreventPlaceholderAnimation ? {
+      opacity: hasValue ? 0 : 1
+    } : {
+      fontSize: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? '9px' : `${Number(theme.fontSize)}px`
+    },
+    initial: false,
+    layout: true,
+    ref: placeholderRef,
+    style: {
+      ...labelPosition
+    },
+    transition: {
+      type: 'tween',
+      duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
+    }
+  }, /*#__PURE__*/React.createElement(StyledInputLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size,
+    animate: {
+      opacity: hasValue ? 1 : 0
+    },
+    initial: false,
+    onClick: handleClearIconClick,
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__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';
+export default Input;
+//# sourceMappingURL=Input.js.map