@chayns-components/core 5.0.0-beta.13 → 5.0.0-beta.1300

package/lib/esm/components/grouped-image/GroupedImage.styles.js

@@ -0,0 +1,83 @@
+import styled, { css } from 'styled-components';
+export const StyledGroupedImage = styled.div`
+    flex: 0 0 auto;
+    height: ${({
+  $height
+}) => $height};
+    position: relative;
+    width: ${({
+  $height
+}) => $height};
+`;
+export let ImageSize = /*#__PURE__*/function (ImageSize) {
+  ImageSize["Full"] = "100%";
+  ImageSize["Small"] = "75%";
+  ImageSize["Grouped"] = "80%";
+  ImageSize["GroupedSmall"] = "65%";
+  return ImageSize;
+}({});
+export const StyledGroupImageElement = styled.img`
+    aspect-ratio: 1;
+    border-radius: ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage ? '50%' : '0'};
+    height: ${({
+  $imageSize
+}) => $imageSize};
+    object-fit: cover;
+    position: absolute;
+
+    ${({
+  $imageSize,
+  $isSecondImage
+}) => $isSecondImage ? css`
+                  bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
+                  right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
+              ` : css`
+                  top: 0;
+                  left: 0;
+              `}
+
+    ${({
+  $background,
+  $shouldPreventBackground,
+  theme
+}) => !$shouldPreventBackground && css`
+            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
+        `}
+`;
+export const StyledCornerImage = styled.img`
+    aspect-ratio: 1;
+    bottom: 0;
+    height: 50%;
+    position: absolute;
+    right: 0;
+
+    ${({
+  $background,
+  $shouldPreventBackground,
+  theme
+}) => !$shouldPreventBackground && css`
+            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
+        `}
+`;
+export const StyledCornerElement = styled.span`
+    height: 18px;
+    width: 18px;
+    position: absolute;
+    bottom: 0;
+    right: -5px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > * {
+        max-height: 100%;
+        max-width: 100%;
+        display: block;
+    }
+`;
+//# sourceMappingURL=GroupedImage.styles.js.map

package/lib/esm/components/grouped-image/GroupedImage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedImage.styles.js","names":["styled","css","StyledGroupedImage","div","$height","ImageSize","StyledGroupImageElement","img","$shouldShowRoundImage","$imageSize","$isSecondImage","GroupedSmall","$background","$shouldPreventBackground","theme","StyledCornerImage","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height};\n    position: relative;\n    width: ${({ $height }) => $height};\n`;\n\nexport enum ImageSize {\n    Full = '100%',\n    Small = '75%',\n    Grouped = '80%',\n    GroupedSmall = '65%',\n}\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $imageSize: ImageSize;\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledGroupImageElement = styled.img<StyledImageProps>`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    height: ${({ $imageSize }) => $imageSize};\n    object-fit: cover;\n    position: absolute;\n\n    ${({ $imageSize, $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n                  right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: 50%;\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC;AACA,aAAa,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO;AACrC,CAAC;AAED,WAAYC,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAerB,OAAO,MAAMC,uBAAuB,GAAGN,MAAM,CAACO,GAAqB;AACnE;AACA,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,GAAI;AACzF,cAAc,CAAC;EAAEC;AAAW,CAAC,KAAKA,UAAU;AAC5C;AACA;AACA;AACA,MAAM,CAAC;EAAEA,UAAU;EAAEC;AAAe,CAAC,KAC7BA,cAAc,GACRT,GAAG;AACjB,4BAA4BQ,UAAU,KAAKJ,SAAS,CAACM,YAAY,GAAG,KAAK,GAAG,CAAC;AAC7E,2BAA2BF,UAAU,KAAKJ,SAAS,CAACM,YAAY,GAAG,KAAK,GAAG,CAAC;AAC5E,eAAe,GACDV,GAAG;AACjB;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEW,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBZ,GAAG;AACX,0BAA0BW,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAOD,OAAO,MAAMC,iBAAiB,GAAGf,MAAM,CAACO,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEK,WAAW;EAAEC,wBAAwB;EAAEC;AAAM,CAAC,KAC/C,CAACD,wBAAwB,IACzBZ,GAAG;AACX,0BAA0BW,WAAW,IAAI,QAAQE,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACrF,yCAAyCA,KAAK,CAAC,SAAS,CAAC;AACzD,SAAS;AACT,CAAC;AAED,OAAO,MAAME,mBAAmB,GAAGhB,MAAM,CAACiB,IAAI;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/highlight-slider/HighlightSlider.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyledHighlightSlider } from './HighlightSlider.styles';
+import HighlightSliderItem from './highlight-slider-item/HighlightSliderItem';
+const DEFAULT_HIGHLIGHT_SLIDER_COLORS = {
+  backgroundColor: '#E0E0E0',
+  fillColor: '#808080'
+};
+const HighlightSlider = ({
+  count,
+  colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,
+  onIndexChange,
+  currentIndex,
+  duration = 10
+}) => {
+  const handleFinish = useCallback(index => {
+    if (typeof onIndexChange === 'function') {
+      onIndexChange(index >= count - 1 ? 0 : index + 1);
+    }
+  }, [count, onIndexChange]);
+  const handleClick = useCallback(index => {
+    if (typeof onIndexChange === 'function') {
+      onIndexChange(index);
+    }
+  }, [onIndexChange]);
+  const content = useMemo(() => Array.from({
+    length: count
+  }).map((value, index) => /*#__PURE__*/React.createElement(HighlightSliderItem, {
+    key: `highlight-slider-item--${value}`,
+    index: index,
+    duration: duration,
+    colors: colors,
+    isActive: currentIndex === index,
+    isFinished: currentIndex > index,
+    onClick: handleClick,
+    onFinish: handleFinish
+  })), [colors, count, currentIndex, duration, handleClick, handleFinish]);
+  return /*#__PURE__*/React.createElement(StyledHighlightSlider, null, content);
+};
+HighlightSlider.displayName = 'HighlightSlider';
+export default HighlightSlider;
+//# sourceMappingURL=HighlightSlider.js.map

package/lib/esm/components/highlight-slider/HighlightSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightSlider.js","names":["React","useCallback","useMemo","StyledHighlightSlider","HighlightSliderItem","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","handleFinish","index","handleClick","content","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","displayName"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n    HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n    backgroundColor: '#E0E0E0',\n    fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n    /**\n     * The Colors of the slider.\n     */\n    colors?: HighlightSliderItemColors;\n    /**\n     * The total number of sections, that should be displayed.\n     */\n    count: number;\n    /**\n     * The current index.\n     */\n    currentIndex: number;\n    /**\n     * The duration of the animation of a single item in seconds.\n     */\n    duration?: number;\n    /**\n     * Function to be executed if the index has changed.\n     */\n    onIndexChange?: (index: number) => void;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n    count,\n    colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n    onIndexChange,\n    currentIndex,\n    duration = 10,\n}) => {\n    const handleFinish = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index >= count - 1 ? 0 : index + 1);\n            }\n        },\n        [count, onIndexChange],\n    );\n\n    const handleClick = useCallback(\n        (index: number) => {\n            if (typeof onIndexChange === 'function') {\n                onIndexChange(index);\n            }\n        },\n        [onIndexChange],\n    );\n\n    const content = useMemo(\n        () =>\n            Array.from({ length: count }).map((value, index) => (\n                <HighlightSliderItem\n                    key={`highlight-slider-item--${value as number}`}\n                    index={index}\n                    duration={duration}\n                    colors={colors}\n                    isActive={currentIndex === index}\n                    isFinished={currentIndex > index}\n                    onClick={handleClick}\n                    onFinish={handleFinish}\n                />\n            )),\n        [colors, count, currentIndex, duration, handleClick, handleFinish],\n    );\n\n    return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,OAAOC,mBAAmB,MAEnB,6CAA6C;AAEpD,MAAMC,+BAA0D,GAAG;EAC/DC,eAAe,EAAE,SAAS;EAC1BC,SAAS,EAAE;AACf,CAAC;AAyBD,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,MAAM,GAAGL,+BAA+B;EACxCM,aAAa;EACbC,YAAY;EACZC,QAAQ,GAAG;AACf,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGb,WAAW,CAC3Bc,KAAa,IAAK;IACf,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACI,KAAK,IAAIN,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGM,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,CAACN,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,MAAMK,WAAW,GAAGf,WAAW,CAC1Bc,KAAa,IAAK;IACf,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACI,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,CAACJ,aAAa,CAClB,CAAC;EAED,MAAMM,OAAO,GAAGf,OAAO,CACnB,MACIgB,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEX;EAAM,CAAC,CAAC,CAACY,GAAG,CAAC,CAACC,KAAK,EAAEP,KAAK,kBAC3Cf,KAAA,CAAAuB,aAAA,CAACnB,mBAAmB;IAChBoB,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDP,KAAK,EAAEA,KAAM;IACbF,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;IACfe,QAAQ,EAAEb,YAAY,KAAKG,KAAM;IACjCW,UAAU,EAAEd,YAAY,GAAGG,KAAM;IACjCY,OAAO,EAAEX,WAAY;IACrBY,QAAQ,EAAEd;EAAa,CAC1B,CACJ,CAAC,EACN,CAACJ,MAAM,EAAED,KAAK,EAAEG,YAAY,EAAEC,QAAQ,EAAEG,WAAW,EAAEF,YAAY,CACrE,CAAC;EAED,oBAAOd,KAAA,CAAAuB,aAAA,CAACpB,qBAAqB,QAAEc,OAA+B,CAAC;AACnE,CAAC;AAEDT,eAAe,CAACqB,WAAW,GAAG,iBAAiB;AAE/C,eAAerB,eAAe","ignoreList":[]}

package/lib/esm/components/highlight-slider/HighlightSlider.styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const StyledHighlightSlider = styled.div`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+`;
+//# sourceMappingURL=HighlightSlider.styles.js.map

package/lib/esm/components/highlight-slider/HighlightSlider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightSlider.styles.js","names":["styled","StyledHighlightSlider","div"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledHighlightSlider = styled.div`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACE,GAAG;AAC/C;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyledHighlightSliderItem, StyledHighlightSliderItemBackground, StyledHighlightSliderItemProgress } from './HighlightSliderItem.styles';
+import { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';
+import { useUuid } from '../../../hooks/uuid';
+const HighlightSliderItem = ({
+  colors,
+  isActive,
+  isFinished,
+  onFinish,
+  index,
+  onClick,
+  duration
+}) => {
+  const uuid = useUuid();
+  return /*#__PURE__*/React.createElement(StyledHighlightSliderItem, {
+    onClick: () => onClick(index)
+  }, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, isActive && /*#__PURE__*/React.createElement(StyledHighlightSliderItemProgress, {
+    key: `highlight-slider-item-active--${uuid}`,
+    initial: {
+      width: '100%',
+      left: '-100%'
+    },
+    animate: {
+      width: '100%',
+      left: '0%'
+    },
+    exit: {
+      width: '100%',
+      left: '0%'
+    },
+    onAnimationComplete: () => onFinish(index),
+    $backgroundColor: colors.fillColor,
+    transition: {
+      ease: 'linear',
+      duration
+    }
+  }), isFinished && /*#__PURE__*/React.createElement(StyledHighlightSliderItemProgress, {
+    key: `highlight-slider-item-finished--${uuid}`,
+    style: {
+      width: '100%',
+      left: '0%'
+    },
+    $backgroundColor: colors.fillColor
+  }), /*#__PURE__*/React.createElement(StyledHighlightSliderItemBackground, {
+    $backgroundColor: colors.backgroundColor
+  })));
+};
+HighlightSliderItem.displayName = 'HighlightSliderItem';
+export default HighlightSliderItem;
+//# sourceMappingURL=HighlightSliderItem.js.map

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightSliderItem.js","names":["React","StyledHighlightSliderItem","StyledHighlightSliderItemBackground","StyledHighlightSliderItemProgress","StyledProgressBarProgressWrapper","useUuid","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","uuid","createElement","key","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","backgroundColor","displayName"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledHighlightSliderItem,\n    StyledHighlightSliderItemBackground,\n    StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n    backgroundColor: string;\n    fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n    index: number;\n    isActive: boolean;\n    isFinished: boolean;\n    onClick: (index: number) => void;\n    onFinish: (index: number) => void;\n    duration: number;\n    colors: HighlightSliderItemColors;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n    colors,\n    isActive,\n    isFinished,\n    onFinish,\n    index,\n    onClick,\n    duration,\n}) => {\n    const uuid = useUuid();\n\n    return (\n        <StyledHighlightSliderItem onClick={() => onClick(index)}>\n            <StyledProgressBarProgressWrapper>\n                {isActive && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-active--${uuid}`}\n                        initial={{ width: '100%', left: '-100%' }}\n                        animate={{ width: '100%', left: '0%' }}\n                        exit={{ width: '100%', left: '0%' }}\n                        onAnimationComplete={() => onFinish(index)}\n                        $backgroundColor={colors.fillColor}\n                        transition={{\n                            ease: 'linear',\n                            duration,\n                        }}\n                    />\n                )}\n                {isFinished && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-finished--${uuid}`}\n                        style={{ width: '100%', left: '0%' }}\n                        $backgroundColor={colors.fillColor}\n                    />\n                )}\n                <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        </StyledHighlightSliderItem>\n    );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,yBAAyB,EACzBC,mCAAmC,EACnCC,iCAAiC,QAC9B,8BAA8B;AACrC,SAASC,gCAAgC,QAAQ,uCAAuC;AACxF,SAASC,OAAO,QAAQ,qBAAqB;AAiB7C,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,IAAI,GAAGT,OAAO,CAAC,CAAC;EAEtB,oBACIL,KAAA,CAAAe,aAAA,CAACd,yBAAyB;IAACW,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACD,KAAK;EAAE,gBACrDX,KAAA,CAAAe,aAAA,CAACX,gCAAgC,QAC5BI,QAAQ,iBACLR,KAAA,CAAAe,aAAA,CAACZ,iCAAiC;IAC9Ba,GAAG,EAAE,iCAAiCF,IAAI,EAAG;IAC7CG,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,KAAMZ,QAAQ,CAACC,KAAK,CAAE;IAC3CY,gBAAgB,EAAEhB,MAAM,CAACiB,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdb;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,iBACPT,KAAA,CAAAe,aAAA,CAACZ,iCAAiC;IAC9Ba,GAAG,EAAE,mCAAmCF,IAAI,EAAG;IAC/Ca,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,EAAEhB,MAAM,CAACiB;EAAU,CACtC,CACJ,eACDxB,KAAA,CAAAe,aAAA,CAACb,mCAAmC;IAACqB,gBAAgB,EAAEhB,MAAM,CAACqB;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;AAEDtB,mBAAmB,CAACuB,WAAW,GAAG,qBAAqB;AAEvD,eAAevB,mBAAmB","ignoreList":[]}

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { motion } from 'motion/react';
+export const StyledHighlightSliderItem = styled.div`
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+`;
+export const StyledHighlightSliderItemProgress = styled(motion.div)`
+    height: 4px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
+`;
+export const StyledHighlightSliderItemBackground = styled(motion.div)`
+    height: 4px;
+    width: 100%;
+    border-radius: 2px;
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
+`;
+//# sourceMappingURL=HighlightSliderItem.styles.js.map

package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightSliderItem.styles.js","names":["styled","motion","StyledHighlightSliderItem","div","StyledHighlightSliderItemProgress","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledHighlightSliderItem = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: 4px;\n    cursor: pointer;\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n    motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n    height: 4px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n        $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n    motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n    height: 4px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n        $backgroundColor};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,cAAc;AAGrC,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMC,iCAAiC,GAAGJ,MAAM,CACnDC,MAAM,CAACE,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGN,MAAM,CACrDC,MAAM,CAACE,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,74 @@
+import clsx from 'clsx';
+import React from 'react';
+import { getStackSizeFactor } from '../../utils/icon';
+import { StyledIcon, StyledIconWrapper } from './Icon.styles';
+const Icon = ({
+  className,
+  color,
+  icons,
+  isDisabled,
+  onClick,
+  onDoubleClick,
+  onMouseDown,
+  size = 15,
+  shouldStopPropagation
+}) => {
+  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);
+    }
+  };
+  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' && !isDisabled ? handleClick : undefined,
+    $isOnClick: typeof onClick === 'function' && !isDisabled,
+    onDoubleClick: typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined,
+    onMouseDown: typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined,
+    $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","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","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 { 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    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' && !isDisabled ? handleClick : undefined}\n            $isOnClick={typeof onClick === 'function' && !isDisabled}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\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,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAyC7D,MAAMC,IAAmB,GAAGA,CAAC;EACzBC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,aAAa;EACbC,WAAW;EACXC,IAAI,GAAG,EAAE;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,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,IAAIG,kBAAkB,GAAG,CAAC;EAE1BX,KAAK,CAACY,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGpB,kBAAkB,CAACmB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGf,KAAK,CAACgB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAGzB,IAAI,CACvB,kBAAkB,EAClBuB,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtCjB,SACJ,CAAC;EAED,oBACIL,KAAA,CAAAyB,aAAA,CAACtB,iBAAiB;IACdE,SAAS,EAAEmB,cAAe;IAC1BE,WAAW,EAAElB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,IAAI,CAACD,UAAU,GAAGM,WAAW,GAAGa,SAAU;IAChFC,UAAU,EAAE,OAAOnB,OAAO,KAAK,UAAU,IAAI,CAACD,UAAW;IACzDE,aAAa,EACT,OAAOA,aAAa,KAAK,UAAU,IAAI,CAACF,UAAU,GAAGS,iBAAiB,GAAGU,SAC5E;IACDhB,WAAW,EAAE,OAAOA,WAAW,KAAK,UAAU,IAAI,CAACH,UAAU,GAAGG,WAAW,GAAGgB,SAAU;IACxFE,KAAK,EAAEjB;EAAK,GAEXL,KAAK,CAACuB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGpB,kBAAkB,CAACmB,IAAI,CAAC;;IAEhD;IACA;IACA;IACA;IACA;IACA;;IAEA,MAAMW,WAAW,GAAGhC,IAAI,CAACqB,IAAI,EAAE;MAC3B,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI3B,KAAA,CAAAyB,aAAA,CAACvB,UAAU;MACPG,SAAS,EAAE0B,WAAY;MACvBC,MAAM,EAAEZ,IAAI,CAACa,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG3B,KAAM;MACtD4B,SAAS,EAAG,CAACb,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIN,IAAK;MAChEuB,UAAU,EAAEb,oBAAqB;MACjCc,GAAG,EAAEhB,IAAK;MACVS,KAAK,EAAEjB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDR,IAAI,CAACiC,WAAW,GAAG,MAAM;AAEzB,eAAejC,IAAI","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+export const StyledIconWrapper = styled.span`
+    align-items: center;
+    cursor: ${({
+  $isDisabled,
+  $isOnClick
+}) => $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};
+    display: inline-flex;
+    min-height: ${({
+  $size
+}) => `${$size}px`};
+    justify-content: center;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    position: relative;
+    transition: opacity 0.3s ease;
+    min-width: ${({
+  $size
+}) => `${$size}px`};
+
+    // To insure that stacked icons have the same size as normal icons.
+    &&.fa-stack {
+        height: fit-content;
+        width: fit-content;
+        line-height: ${({
+  $size
+}) => $size}px;
+    }
+`;
+export const StyledIcon = styled.i`
+    color: ${({
+  $color,
+  theme
+}) => $color || theme.iconColor || theme.headline};
+    display: ${({
+  $isStacked
+}) => $isStacked ? undefined : 'inline-flex'};
+    font-size: ${({
+  $fontSize
+}) => `${$fontSize}px`};
+
+    ${({
+  $fontSize,
+  $size
+}) => $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","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","headline","$isStacked","undefined","$fontSize"],"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.iconColor || 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,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAMC,UAAU,GAAGP,MAAM,CAACQ,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,QAAQ;AAChG,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAET;AAAM,CAAC,KACnBS,SAAS,KAAKT,KAAK,IACnBL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}

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

@@ -0,0 +1,175 @@
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { useElementSize } from '../../hooks/element';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import Icon from '../icon/Icon';
+import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
+import { ContentCardType } from '../../types/contentCard';
+import { useCursorRepaint } from '../../hooks/resize';
+export let InputSize = /*#__PURE__*/function (InputSize) {
+  InputSize["Small"] = "small";
+  InputSize["Medium"] = "medium";
+  return InputSize;
+}({});
+const Input = /*#__PURE__*/forwardRef(({
+  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,
+  shouldShowTransparentBackground = false,
+  autoComplete
+}, 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);
+  useCursorRepaint(inputRef);
+  const placeholderSize = useElementSize(placeholderRef);
+  useEffect(() => {
+    if (placeholderSize && shouldShowOnlyBottomBorder) {
+      setPlaceholderWidth(placeholderSize.width + 5);
+    }
+  }, [placeholderSize, shouldShowOnlyBottomBorder]);
+  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(),
+    blur: () => inputRef.current?.blur()
+  }), []);
+  useEffect(() => {
+    if (typeof value === 'string') {
+      setHasValue(value !== '');
+    }
+  }, [value]);
+  let backgroundColor;
+  let color;
+  if (shouldShowTransparentBackground) {
+    backgroundColor = 'transparent';
+  } else if (areaProvider.contentCardType && [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(areaProvider.contentCardType)) {
+    backgroundColor = 'white';
+    color = '#555';
+  } else if (areaProvider.shouldChangeColor) {
+    backgroundColor = theme['000'];
+  }
+  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, {
+    $shouldShowTransparentBackground: shouldShowTransparentBackground,
+    $backgroundColor: backgroundColor,
+    $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, {
+    $color: color,
+    $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,
+    autoComplete: autoComplete,
+    $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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: 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 content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\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?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\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                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let color: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            color = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                    $backgroundColor={backgroundColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $color={color}\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            onClick={(event) => {\n                                event.preventDefault();\n                                event.stopPropagation();\n                            }}\n                            onPaste={onPaste}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            autoComplete={autoComplete}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={\n                                shouldPreventPlaceholderAnimation\n                                    ? {\n                                          opacity: hasValue ? 0 : 1,\n                                      }\n                                    : {\n                                          fontSize:\n                                              hasValue &&\n                                              !shouldShowOnlyBottomBorder &&\n                                              !shouldRemainPlaceholder\n                                                  ? '9px'\n                                                  : `${Number(theme.fontSize)}px`,\n                                      }\n                            }\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{\n                                type: 'tween',\n                                duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                            }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}