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

package/lib/esm/components/slider-button/SliderButton.styles.js

@@ -0,0 +1,152 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledSliderButton = styled.div`
+    opacity: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 0.5 : 1;
+}};
+    width: 100%;
+    touch-action: none;
+    position: relative;
+`;
+export const StyledSliderButtonWrapper = styled.div`
+    align-items: center;
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['408'];
+}};
+    border-radius: 3px;
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: inline-flex;
+    line-height: 1.15;
+    height: 32px;
+    position: relative;
+    user-select: none;
+    transition: opacity 0.3s ease;
+
+    width: ${_ref3 => {
+  let {
+    $width
+  } = _ref3;
+  return $width;
+}}px;
+
+    max-width: 100%;
+    overflow-x: ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? 'hidden' : 'scroll';
+}};
+    overflow-y: hidden;
+
+    // Chrome
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    // IE and Edge
+    -ms-overflow-style: none;
+
+    // Firefox
+    scrollbar-width: none;
+`;
+export const StyledSliderButtonItem = styled.div`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    padding: 7px 12px;
+    min-width: ${_ref5 => {
+  let {
+    $width
+  } = _ref5;
+  return $width;
+}}px;
+    max-width: ${_ref6 => {
+  let {
+    $width
+  } = _ref6;
+  return $width;
+}}px;
+    display: flex;
+    white-space: nowrap;
+    justify-content: center;
+    color: white;
+`;
+export const StyledSliderButtonPopupContent = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+export const StyledSliderButtonPopupContentItem = styled.div`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    cursor: pointer;
+    background-color: ${_ref7 => {
+  let {
+    $isSelected,
+    theme
+  } = _ref7;
+  return $isSelected ? theme['secondary-102'] : undefined;
+}};
+    padding: 4px 12px;
+`;
+export const StyledSliderButtonButtonsWrapper = styled.div`
+    position: absolute;
+    z-index: ${_ref8 => {
+  let {
+    $isInvisible
+  } = _ref8;
+  return $isInvisible ? '2' : '4';
+}};
+    opacity: ${_ref9 => {
+  let {
+    $isInvisible
+  } = _ref9;
+  return $isInvisible ? 0 : 1;
+}};
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    pointer-events: ${_ref10 => {
+  let {
+    $isInvisible
+  } = _ref10;
+  return $isInvisible ? 'auto' : 'none';
+}};
+`;
+export const StyledMotionSliderButtonThumb = styled(motion.div)`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    background-color: ${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme['405'];
+}};
+    opacity: 1;
+    width: ${_ref12 => {
+  let {
+    $width
+  } = _ref12;
+  return $width - 8;
+}}px;
+    position: absolute;
+    border-radius: 2px;
+    top: 4px;
+    left: 4px;
+    white-space: nowrap;
+    z-index: 3;
+    height: 24px;
+    padding: 7px 12px;
+    display: flex;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+`;
+//# sourceMappingURL=SliderButton.styles.js.map

package/lib/esm/components/slider-button/SliderButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","$isDisabled","StyledSliderButtonWrapper","_ref2","theme","_ref3","$width","_ref4","StyledSliderButtonItem","_ref5","_ref6","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","_ref7","$isSelected","undefined","StyledSliderButtonButtonsWrapper","_ref8","$isInvisible","_ref9","_ref10","StyledMotionSliderButtonThumb","_ref11","_ref12"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n    position: relative;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n    overflow-y: hidden;\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    white-space: nowrap;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\ntype StyledSliderButtonPopupContentItemProps = WithTheme<{ $isSelected?: boolean }>;\n\nexport const StyledSliderButtonPopupContentItem = styled.div<StyledSliderButtonPopupContentItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    cursor: pointer;\n    background-color: ${({ $isSelected, theme }: StyledSliderButtonPopupContentItemProps) =>\n        $isSelected ? theme['secondary-102'] : undefined};\n    padding: 4px 12px;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n    position: absolute;\n    z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n    opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['405']};\n    opacity: 1;\n    width: ${({ $width }) => $width - 8}px;\n    position: absolute;\n    border-radius: 2px;\n    top: 4px;\n    left: 4px;\n    white-space: nowrap;\n    z-index: 3;\n    height: 24px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACE,GAAmC;AACnF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEN;EAAY,CAAC,GAAAM,KAAA;EAAA,OAAMN,WAAW,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,sBAAsB,GAAGX,MAAM,CAACE,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiBU,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA;AACvC,iBAAiBI,KAAA;EAAA,IAAC;IAAEJ;EAAO,CAAC,GAAAI,KAAA;EAAA,OAAKJ,MAAM;AAAA;AACvC;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,8BAA8B,GAAGd,MAAM,CAACE,GAAG;AACxD;AACA;AACA,CAAC;AAID,OAAO,MAAMa,kCAAkC,GAAGf,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA,wBAAwBc,KAAA;EAAA,IAAC;IAAEC,WAAW;IAAEV;EAA+C,CAAC,GAAAS,KAAA;EAAA,OAChFC,WAAW,GAAGV,KAAK,CAAC,eAAe,CAAC,GAAGW,SAAS;AAAA;AACxD;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGnB,MAAM,CAACE,GAA0C;AACjG;AACA,eAAekB,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OAAMC,YAAY,GAAG,GAAG,GAAG,GAAG;AAAA,CAAC;AAC/D,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAa,CAAC,GAAAC,KAAA;EAAA,OAAMD,YAAY,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,sBAAsBE,MAAA;EAAA,IAAC;IAAEF;EAAa,CAAC,GAAAE,MAAA;EAAA,OAAMF,YAAY,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC5E,CAAC;AAID,OAAO,MAAMG,6BAA6B,GAAGxB,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwBuB,MAAA;EAAA,IAAC;IAAElB;EAA+B,CAAC,GAAAkB,MAAA;EAAA,OAAKlB,KAAK,CAAC,KAAK,CAAC;AAAA;AAC5E;AACA,aAAamB,MAAA;EAAA,IAAC;IAAEjB;EAAO,CAAC,GAAAiB,MAAA;EAAA,OAAKjB,MAAM,GAAG,CAAC;AAAA;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.js

@@ -0,0 +1,36 @@
+// noinspection JSUnusedGlobalSymbols
+
+import React from 'react';
+import { StyledSmallWaitCursor, StyledSmallWaitCursorBackground, StyledSmallWaitCursorWaitCursor } from './SmallWaitCursor.styles';
+export let SmallWaitCursorSize = /*#__PURE__*/function (SmallWaitCursorSize) {
+  SmallWaitCursorSize[SmallWaitCursorSize["Small"] = 16] = "Small";
+  SmallWaitCursorSize[SmallWaitCursorSize["Medium"] = 30] = "Medium";
+  return SmallWaitCursorSize;
+}({});
+export let SmallWaitCursorSpeed = /*#__PURE__*/function (SmallWaitCursorSpeed) {
+  SmallWaitCursorSpeed[SmallWaitCursorSpeed["Slow"] = 1.5] = "Slow";
+  SmallWaitCursorSpeed[SmallWaitCursorSpeed["Medium"] = 1] = "Medium";
+  SmallWaitCursorSpeed[SmallWaitCursorSpeed["Fast"] = 0.5] = "Fast";
+  return SmallWaitCursorSpeed;
+}({});
+const SmallWaitCursor = _ref => {
+  let {
+    shouldHideBackground = false,
+    shouldHideWaitCursor = false,
+    size = SmallWaitCursorSize.Medium,
+    speed = SmallWaitCursorSpeed.Medium,
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledSmallWaitCursor, {
+    $shouldShowWaitCursor: !shouldHideWaitCursor,
+    $size: size
+  }, /*#__PURE__*/React.createElement(StyledSmallWaitCursorWaitCursor, {
+    $shouldHideBackground: shouldHideBackground,
+    $size: size,
+    $speed: speed,
+    $color: color
+  }), !shouldHideBackground && /*#__PURE__*/React.createElement(StyledSmallWaitCursorBackground, null));
+};
+SmallWaitCursor.displayName = 'SmallWaitCursor';
+export default SmallWaitCursor;
+//# sourceMappingURL=SmallWaitCursor.js.map

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallWaitCursor.js","names":["React","StyledSmallWaitCursor","StyledSmallWaitCursorBackground","StyledSmallWaitCursorWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","SmallWaitCursor","_ref","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","color","createElement","$shouldShowWaitCursor","$size","$shouldHideBackground","$speed","$color","displayName"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { FC } from 'react';\nimport {\n    StyledSmallWaitCursor,\n    StyledSmallWaitCursorBackground,\n    StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n    Small = 16,\n    Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n    Slow = 1.5,\n    Medium = 1,\n    Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n    /**\n     * Specifies whether the wait cursor should be displayed with a background.\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Specifies whether the wait cursor should be displayed.\n     */\n    shouldHideWaitCursor?: boolean;\n    /**\n     * The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.\n     */\n    size?: SmallWaitCursorSize | number;\n    /**\n     * The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n     */\n    speed?: SmallWaitCursorSpeed;\n    /**\n     * The color of the inner circle of the wait cursor.\n     */\n    color?: string;\n};\n\nconst SmallWaitCursor: FC<SmallWaitCursorProps> = ({\n    shouldHideBackground = false,\n    shouldHideWaitCursor = false,\n    size = SmallWaitCursorSize.Medium,\n    speed = SmallWaitCursorSpeed.Medium,\n    color,\n}) => (\n    <StyledSmallWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor} $size={size}>\n        <StyledSmallWaitCursorWaitCursor\n            $shouldHideBackground={shouldHideBackground}\n            $size={size}\n            $speed={speed}\n            $color={color}\n        />\n        {!shouldHideBackground && <StyledSmallWaitCursorBackground />}\n    </StyledSmallWaitCursor>\n);\n\nSmallWaitCursor.displayName = 'SmallWaitCursor';\n\nexport default SmallWaitCursor;\n"],"mappings":"AAAA;;AAEA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,qBAAqB,EACrBC,+BAA+B,EAC/BC,+BAA+B,QAC5B,0BAA0B;AAEjC,WAAYC,mBAAmB,0BAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;AAK/B,WAAYC,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AA6BhC,MAAMC,eAAyC,GAAGC,IAAA;EAAA,IAAC;IAC/CC,oBAAoB,GAAG,KAAK;IAC5BC,oBAAoB,GAAG,KAAK;IAC5BC,IAAI,GAAGN,mBAAmB,CAACO,MAAM;IACjCC,KAAK,GAAGP,oBAAoB,CAACM,MAAM;IACnCE;EACJ,CAAC,GAAAN,IAAA;EAAA,oBACGP,KAAA,CAAAc,aAAA,CAACb,qBAAqB;IAACc,qBAAqB,EAAE,CAACN,oBAAqB;IAACO,KAAK,EAAEN;EAAK,gBAC7EV,KAAA,CAAAc,aAAA,CAACX,+BAA+B;IAC5Bc,qBAAqB,EAAET,oBAAqB;IAC5CQ,KAAK,EAAEN,IAAK;IACZQ,MAAM,EAAEN,KAAM;IACdO,MAAM,EAAEN;EAAM,CACjB,CAAC,EACD,CAACL,oBAAoB,iBAAIR,KAAA,CAAAc,aAAA,CAACZ,+BAA+B,MAAE,CACzC,CAAC;AAAA,CAC3B;AAEDI,eAAe,CAACc,WAAW,GAAG,iBAAiB;AAE/C,eAAed,eAAe","ignoreList":[]}

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.styles.js

@@ -0,0 +1,83 @@
+import styled, { keyframes } from 'styled-components';
+export const StyledSmallWaitCursor = styled.div`
+    position: relative;
+    height: ${_ref => {
+  let {
+    $size
+  } = _ref;
+  return $size;
+}}px;
+    width: ${_ref2 => {
+  let {
+    $size
+  } = _ref2;
+  return $size;
+}}px;
+    opacity: ${_ref3 => {
+  let {
+    $shouldShowWaitCursor
+  } = _ref3;
+  return $shouldShowWaitCursor ? 1 : 0;
+}};
+`;
+export const StyledSmallWaitCursorBackground = styled.div`
+    background-color: white;
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    box-shadow:
+        0 4px 12px 0 rgba(0, 0, 0, 0.2),
+        0 1px 1px rgba(0, 0, 0, 0.2);
+`;
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+export const StyledSmallWaitCursorWaitCursor = styled.div`
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 2;
+    border-style: solid;
+    border-width: 3px;
+    border-color: ${_ref4 => {
+  let {
+    theme,
+    $shouldHideBackground,
+    $color
+  } = _ref4;
+  if ($color) {
+    return $color;
+  }
+  return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;
+}};
+    height: ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return `${$size - 10}px`;
+}};
+    width: ${_ref6 => {
+  let {
+    $size
+  } = _ref6;
+  return `${$size - 10}px`;
+}};
+    border-radius: 50%;
+    display: inline-block;
+    border-top: 3px solid transparent;
+
+    animation: ${spin} ${_ref7 => {
+  let {
+    $speed
+  } = _ref7;
+  return $speed;
+}}s linear infinite;
+`;
+//# sourceMappingURL=SmallWaitCursor.styles.js.map

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallWaitCursor.styles.js","names":["styled","keyframes","StyledSmallWaitCursor","div","_ref","$size","_ref2","_ref3","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","StyledSmallWaitCursorWaitCursor","_ref4","theme","$shouldHideBackground","$color","colorMode","headline","primary","_ref5","_ref6","_ref7","$speed"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { SmallWaitCursorSize, SmallWaitCursorSpeed } from './SmallWaitCursor';\n\ntype StyledSmallWaitCursorProps = WithTheme<{\n    $shouldShowWaitCursor: boolean;\n    $size: SmallWaitCursorSize | number;\n}>;\n\nexport const StyledSmallWaitCursor = styled.div<StyledSmallWaitCursorProps>`\n    position: relative;\n    height: ${({ $size }) => $size}px;\n    width: ${({ $size }) => $size}px;\n    opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledSmallWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledSmallWaitCursorBackground = styled.div<StyledSmallWaitCursorBackgroundProps>`\n    background-color: white;\n    border-radius: 50%;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    z-index: 1;\n    box-shadow:\n        0 4px 12px 0 rgba(0, 0, 0, 0.2),\n        0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledSmallWaitCursorWaitCursorProps = WithTheme<{\n    $size: SmallWaitCursorSize | number;\n    $speed: SmallWaitCursorSpeed;\n    $shouldHideBackground: boolean;\n    $color?: string;\n}>;\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const StyledSmallWaitCursorWaitCursor = styled.div<StyledSmallWaitCursorWaitCursorProps>`\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 2;\n    border-style: solid;\n    border-width: 3px;\n    border-color: ${({\n        theme,\n        $shouldHideBackground,\n        $color,\n    }: StyledSmallWaitCursorWaitCursorProps) => {\n        if ($color) {\n            return $color;\n        }\n\n        return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;\n    }};\n    height: ${({ $size }) => `${$size - 10}px`};\n    width: ${({ $size }) => `${$size - 10}px`};\n    border-radius: 50%;\n    display: inline-block;\n    border-top: 3px solid transparent;\n\n    animation: ${spin} ${({ $speed }) => $speed}s linear infinite;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AASrD,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA;AAClC,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA;AACjC,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AAC7E,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGT,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,MAAMO,IAAI,GAAGT,SAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,+BAA+B,GAAGX,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBS,KAAA,IAI4B;EAAA,IAJ3B;IACbC,KAAK;IACLC,qBAAqB;IACrBC;EACkC,CAAC,GAAAH,KAAA;EACnC,IAAIG,MAAM,EAAE;IACR,OAAOA,MAAM;EACjB;EAEA,OAAOF,KAAK,CAACG,SAAS,KAAK,MAAM,IAAIF,qBAAqB,GAAGD,KAAK,CAACI,QAAQ,GAAGJ,KAAK,CAACK,OAAO;AAC/F,CAAC;AACL,cAAcC,KAAA;EAAA,IAAC;IAAEd;EAAM,CAAC,GAAAc,KAAA;EAAA,OAAK,GAAGd,KAAK,GAAG,EAAE,IAAI;AAAA;AAC9C,aAAae,KAAA;EAAA,IAAC;IAAEf;EAAM,CAAC,GAAAe,KAAA;EAAA,OAAK,GAAGf,KAAK,GAAG,EAAE,IAAI;AAAA;AAC7C;AACA;AACA;AACA;AACA,iBAAiBK,IAAI,IAAIW,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC/C,CAAC","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.js

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import Badge from '../badge/Badge';
+import Icon from '../icon/Icon';
+import { StyledTagInput, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
+const TagInput = _ref => {
+  let {
+    placeholder,
+    tags,
+    onRemove,
+    onAdd
+  } = _ref;
+  const [internalTags, setInternalTags] = useState();
+  const [currentValue, setCurrentValue] = useState('');
+  const [selectedId, setSelectedId] = useState();
+  const theme = useTheme();
+  useEffect(() => {
+    if (tags) {
+      setInternalTags(tags);
+    }
+  }, [tags]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      setCurrentValue(prevValue => {
+        if (!prevValue) {
+          return '';
+        }
+        setInternalTags(prevTags => {
+          const newTag = {
+            id: uuidv4(),
+            text: prevValue
+          };
+          if (typeof onAdd === 'function') {
+            onAdd(newTag);
+          }
+          return prevTags ? [...prevTags, newTag] : [newTag];
+        });
+        return '';
+      });
+    }
+    if (event.key === 'Backspace' && currentValue === '') {
+      if (!selectedId) {
+        if (!internalTags) {
+          return;
+        }
+        const newSelectedId = internalTags[internalTags.length - 1]?.id;
+        setSelectedId(newSelectedId);
+        return;
+      }
+      setInternalTags(prevState => {
+        if (!prevState) {
+          return prevState;
+        }
+        const removedId = prevState[prevState.length - 1]?.id;
+        if (!removedId) {
+          return prevState;
+        }
+        const updatedTags = (prevState ?? []).filter(tag => tag.id !== removedId);
+        if (typeof onRemove === 'function') {
+          onRemove(removedId);
+        }
+        setSelectedId(undefined);
+        return updatedTags;
+      });
+    }
+  }, [currentValue, internalTags, onAdd, onRemove, selectedId]);
+  const handleChange = event => {
+    setCurrentValue(event.target.value);
+    if (event.target.value !== '') {
+      setSelectedId(undefined);
+    }
+  };
+  const handleIconClick = useCallback(id => {
+    setInternalTags(prevState => {
+      const updatedTags = (prevState ?? []).filter(tag => tag.id !== id);
+      if (typeof onRemove === 'function') {
+        onRemove(id);
+      }
+      return updatedTags;
+    });
+  }, [onRemove]);
+  const content = useMemo(() => {
+    const items = [];
+    if (!internalTags) {
+      return items;
+    }
+    internalTags.forEach(_ref2 => {
+      let {
+        text,
+        id
+      } = _ref2;
+      items.push(/*#__PURE__*/React.createElement(Badge, {
+        key: `tag-input-${id}`,
+        backgroundColor: id === selectedId ? theme['206'] ?? undefined : undefined
+      }, /*#__PURE__*/React.createElement(StyledTagInputTagWrapper, null, /*#__PURE__*/React.createElement(StyledTagInputTagWrapperText, null, text), /*#__PURE__*/React.createElement(Icon, {
+        icons: ['ts-wrong'],
+        onClick: () => handleIconClick(id)
+      }))));
+    });
+    return items;
+  }, [handleIconClick, internalTags, selectedId, theme]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, null, content, /*#__PURE__*/React.createElement(StyledTagInputTagInput, {
+    placeholder: tags && tags.length > 0 ? undefined : placeholder,
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    value: currentValue
+  })), [content, currentValue, handleKeyDown, placeholder, tags]);
+};
+export default TagInput;
+//# sourceMappingURL=TagInput.js.map

package/lib/esm/components/tag-input/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","names":["React","useCallback","useEffect","useMemo","useState","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","theme","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","newSelectedId","length","prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","items","forEach","_ref2","push","createElement","backgroundColor","icons","onClick","onKeyDown","onChange"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n    const [internalTags, setInternalTags] = useState<Tag[]>();\n    const [currentValue, setCurrentValue] = useState('');\n    const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (tags) {\n            setInternalTags(tags);\n        }\n    }, [tags]);\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                setCurrentValue((prevValue) => {\n                    if (!prevValue) {\n                        return '';\n                    }\n\n                    setInternalTags((prevTags) => {\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            onAdd(newTag);\n                        }\n\n                        return prevTags ? [...prevTags, newTag] : [newTag];\n                    });\n\n                    return '';\n                });\n            }\n\n            if (event.key === 'Backspace' && currentValue === '') {\n                if (!selectedId) {\n                    if (!internalTags) {\n                        return;\n                    }\n\n                    const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                    setSelectedId(newSelectedId);\n\n                    return;\n                }\n\n                setInternalTags((prevState) => {\n                    if (!prevState) {\n                        return prevState;\n                    }\n\n                    const removedId = prevState[prevState.length - 1]?.id;\n\n                    if (!removedId) {\n                        return prevState;\n                    }\n\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(removedId);\n                    }\n\n                    setSelectedId(undefined);\n\n                    return updatedTags;\n                });\n            }\n        },\n        [currentValue, internalTags, onAdd, onRemove, selectedId],\n    );\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setCurrentValue(event.target.value);\n\n        if (event.target.value !== '') {\n            setSelectedId(undefined);\n        }\n    };\n\n    const handleIconClick = useCallback(\n        (id: string) => {\n            setInternalTags((prevState) => {\n                const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                return updatedTags;\n            });\n        },\n        [onRemove],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!internalTags) {\n            return items;\n        }\n\n        internalTags.forEach(({ text, id }) => {\n            items.push(\n                <Badge\n                    key={`tag-input-${id}`}\n                    backgroundColor={\n                        id === selectedId ? (theme['206'] as string) ?? undefined : undefined\n                    }\n                >\n                    <StyledTagInputTagWrapper>\n                        <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                        <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                    </StyledTagInputTagWrapper>\n                </Badge>,\n            );\n        });\n\n        return items;\n    }, [handleIconClick, internalTags, selectedId, theme]);\n\n    return useMemo(\n        () => (\n            <StyledTagInput>\n                {content}\n                <StyledTagInputTagInput\n                    placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                    onKeyDown={handleKeyDown}\n                    onChange={handleChange}\n                    value={currentValue}\n                />\n            </StyledTagInput>\n        ),\n        [content, currentValue, handleKeyDown, placeholder, tags],\n    );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.styles.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+export const StyledTagInput = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 42px;
+    padding: 5px;
+    align-items: center;
+    gap: 6px;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['100'];
+}};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+`;
+export const StyledTagInputTagWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+`;
+export const StyledTagInputTagWrapperText = styled.p`
+    margin: 0;
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 15px;
+`;
+export const StyledTagInputTagInput = styled.input`
+    border: none;
+    height: 24px;
+    flex-grow: 1;
+    background-color: transparent;
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+`;
+//# sourceMappingURL=TagInput.styles.js.map

package/lib/esm/components/tag-input/TagInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.styles.js","names":["styled","StyledTagInput","div","_ref","theme","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","_ref2","text"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n    display: flex;\n    flex-wrap: wrap;\n    min-height: 42px;\n    padding: 5px;\n    align-items: center;\n    gap: 6px;\n    background-color: ${({ theme }: StyledTagInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 4px;\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n    margin: 0;\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n    border: none;\n    height: 24px;\n    flex-grow: 1;\n    background-color: transparent;\n    color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxE;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACE,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,4BAA4B,GAAGN,MAAM,CAACO,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGR,MAAM,CAACS,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AACnE,CAAC","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.js

@@ -0,0 +1,73 @@
+import { getDevice } from 'chayns-api';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import { StyledInputRightElement } from '../input/Input.styles';
+import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
+const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    isDisabled,
+    isInvalid,
+    placeholder,
+    value,
+    onChange,
+    onFocus,
+    onKeyDown,
+    rightElement,
+    onBlur,
+    maxHeight = '120px',
+    minHeight = '41px'
+  } = _ref;
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const areaProvider = useContext(AreaContext);
+  const textareaRef = useRef(null);
+  const {
+    browser
+  } = getDevice();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const adjustTextareaHeight = useCallback(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
+    }
+  }, [maxHeight]);
+  useImperativeHandle(ref, () => textareaRef.current);
+
+  /**
+   * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the "textareaRef".
+   * To maintain the functionality while clearing the input, the length need to be greater than -1.
+   */
+  useEffect(() => {
+    if (typeof value === 'string' && value.length > -1) {
+      adjustTextareaHeight();
+    }
+  }, [adjustTextareaHeight, value]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea, {
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
+    $isInvalid: isInvalid,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
+    $browser: browser?.name,
+    disabled: isDisabled,
+    $isInvalid: isInvalid,
+    ref: textareaRef,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    $maxHeight: maxHeight,
+    $minHeight: minHeight,
+    $isOverflowing: isOverflowing,
+    rows: 1
+  }), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, onFocus, onKeyDown, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
+});
+TextArea.displayName = 'TextArea';
+export default TextArea;
+//# sourceMappingURL=TextArea.js.map

package/lib/esm/components/text-area/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["getDevice","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","ref","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}