@chayns-components/core 5.0.0-beta.8 → 5.0.0-beta.801

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSliderButton","exports","styled","div","$isDisabled","StyledSliderButtonWrapper","theme","$width","StyledSliderButtonItem","StyledSliderButtonButtonsWrapper","StyledMotionSliderButtonThumb","motion"],"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`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\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    z-index: 1;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\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<{ $isSelected: boolean; $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    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div`\n    position: absolute;\n    display: flex;\n    align-items: center;\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 }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    width: ${({ $width }) => $width}px;\n    position: absolute;\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    z-index: 3;\n    height: 32px;\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,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMI,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAR,OAAA,CAAAQ,gCAAA,GAAGP,yBAAM,CAACC,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAIM,MAAMO,6BAA6B,GAAAT,OAAA,CAAAS,6BAAA,GAAG,IAAAR,yBAAM,EAACS,oBAAM,CAACR,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvF,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SmallWaitCursorSpeed = exports.SmallWaitCursorSize = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SmallWaitCursor = require("./SmallWaitCursor.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// noinspection JSUnusedGlobalSymbols
+let SmallWaitCursorSize = exports.SmallWaitCursorSize = /*#__PURE__*/function (SmallWaitCursorSize) {
+  SmallWaitCursorSize[SmallWaitCursorSize["Small"] = 16] = "Small";
+  SmallWaitCursorSize[SmallWaitCursorSize["Medium"] = 30] = "Medium";
+  return SmallWaitCursorSize;
+}({});
+let SmallWaitCursorSpeed = exports.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 = ({
+  shouldHideBackground = false,
+  shouldHideWaitCursor = false,
+  size = SmallWaitCursorSize.Medium,
+  speed = SmallWaitCursorSpeed.Medium,
+  color
+}) => /*#__PURE__*/_react.default.createElement(_SmallWaitCursor.StyledSmallWaitCursor, {
+  $shouldShowWaitCursor: !shouldHideWaitCursor,
+  $size: size
+}, /*#__PURE__*/_react.default.createElement(_SmallWaitCursor.StyledSmallWaitCursorWaitCursor, {
+  $shouldHideBackground: shouldHideBackground,
+  $size: size,
+  $speed: speed,
+  $color: color
+}), !shouldHideBackground && /*#__PURE__*/_react.default.createElement(_SmallWaitCursor.StyledSmallWaitCursorBackground, null));
+SmallWaitCursor.displayName = 'SmallWaitCursor';
+var _default = exports.default = SmallWaitCursor;
+//# sourceMappingURL=SmallWaitCursor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmallWaitCursor.js","names":["_react","_interopRequireDefault","require","_SmallWaitCursor","e","__esModule","default","SmallWaitCursorSize","exports","SmallWaitCursorSpeed","SmallWaitCursor","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","color","createElement","StyledSmallWaitCursor","$shouldShowWaitCursor","$size","StyledSmallWaitCursorWaitCursor","$shouldHideBackground","$speed","$color","StyledSmallWaitCursorBackground","displayName","_default"],"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":";;;;;;AAEA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAIkC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAPlC;AAAA,IASYG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,0BAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;AAAA,IAKnBE,oBAAoB,GAAAD,OAAA,CAAAC,oBAAA,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AA6BhC,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,oBAAoB,GAAG,KAAK;EAC5BC,oBAAoB,GAAG,KAAK;EAC5BC,IAAI,GAAGN,mBAAmB,CAACO,MAAM;EACjCC,KAAK,GAAGN,oBAAoB,CAACK,MAAM;EACnCE;AACJ,CAAC,kBACGhB,MAAA,CAAAM,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAe,qBAAqB;EAACC,qBAAqB,EAAE,CAACP,oBAAqB;EAACQ,KAAK,EAAEP;AAAK,gBAC7Eb,MAAA,CAAAM,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAkB,+BAA+B;EAC5BC,qBAAqB,EAAEX,oBAAqB;EAC5CS,KAAK,EAAEP,IAAK;EACZU,MAAM,EAAER,KAAM;EACdS,MAAM,EAAER;AAAM,CACjB,CAAC,EACD,CAACL,oBAAoB,iBAAIX,MAAA,CAAAM,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAsB,+BAA+B,MAAE,CACzC,CAC1B;AAEDf,eAAe,CAACgB,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAnB,OAAA,CAAAF,OAAA,GAEjCI,eAAe","ignoreList":[]}

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSmallWaitCursorWaitCursor = exports.StyledSmallWaitCursorBackground = exports.StyledSmallWaitCursor = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledSmallWaitCursor = exports.StyledSmallWaitCursor = _styledComponents.default.div`
+    position: relative;
+    height: ${({
+  $size
+}) => $size}px;
+    width: ${({
+  $size
+}) => $size}px;
+    opacity: ${({
+  $shouldShowWaitCursor
+}) => $shouldShowWaitCursor ? 1 : 0};
+`;
+const StyledSmallWaitCursorBackground = exports.StyledSmallWaitCursorBackground = _styledComponents.default.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 = (0, _styledComponents.keyframes)`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const StyledSmallWaitCursorWaitCursor = exports.StyledSmallWaitCursorWaitCursor = _styledComponents.default.div`
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 2;
+    border-style: solid;
+    border-width: 3px;
+    border-color: ${({
+  theme,
+  $shouldHideBackground,
+  $color
+}) => {
+  if ($color) {
+    return $color;
+  }
+  return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;
+}};
+    height: ${({
+  $size
+}) => `${$size - 10}px`};
+    width: ${({
+  $size
+}) => `${$size - 10}px`};
+    border-radius: 50%;
+    display: inline-block;
+    border-top: 3px solid transparent;
+
+    animation: ${spin} ${({
+  $speed
+}) => $speed}s linear infinite;
+`;
+//# sourceMappingURL=SmallWaitCursor.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmallWaitCursor.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSmallWaitCursor","exports","styled","div","$size","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","keyframes","StyledSmallWaitCursorWaitCursor","theme","$shouldHideBackground","$color","colorMode","headline","primary","$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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAsD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAS/C,MAAMW,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAClC,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC,eAAe,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC7E,CAAC;AAIM,MAAMC,+BAA+B,GAAAL,OAAA,CAAAK,+BAAA,GAAGJ,yBAAM,CAACC,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,MAAMI,IAAI,GAAG,IAAAC,2BAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAR,OAAA,CAAAQ,+BAAA,GAAGP,yBAAM,CAACC,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,CAAC;EACbO,KAAK;EACLC,qBAAqB;EACrBC;AACkC,CAAC,KAAK;EACxC,IAAIA,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,cAAc,CAAC;EAAEX;AAAM,CAAC,KAAK,GAAGA,KAAK,GAAG,EAAE,IAAI;AAC9C,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAK,GAAGA,KAAK,GAAG,EAAE,IAAI;AAC7C;AACA;AACA;AACA;AACA,iBAAiBG,IAAI,IAAI,CAAC;EAAES;AAAO,CAAC,KAAKA,MAAM;AAC/C,CAAC","ignoreList":[]}

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _uuid = require("uuid");
+var _Badge = _interopRequireDefault(require("../badge/Badge"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _TagInput = require("./TagInput.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TagInput = ({
+  placeholder,
+  tags,
+  onRemove,
+  onAdd
+}) => {
+  const [internalTags, setInternalTags] = (0, _react.useState)();
+  const [currentValue, setCurrentValue] = (0, _react.useState)('');
+  const [selectedId, setSelectedId] = (0, _react.useState)();
+  const theme = (0, _styledComponents.useTheme)();
+  (0, _react.useEffect)(() => {
+    if (tags) {
+      setInternalTags(tags);
+    }
+  }, [tags]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (event.key === 'Enter') {
+      setCurrentValue(prevValue => {
+        if (!prevValue) {
+          return '';
+        }
+        setInternalTags(prevTags => {
+          const newTag = {
+            id: (0, _uuid.v4)(),
+            text: prevValue
+          };
+          if (typeof onAdd === 'function') {
+            onAdd(newTag);
+          }
+          return prevTags ? [...prevTags, newTag] : [newTag];
+        });
+        return '';
+      });
+    }
+    if (event.key === 'Backspace' && currentValue === '') {
+      if (!selectedId) {
+        var _internalTags;
+        if (!internalTags) {
+          return;
+        }
+        const newSelectedId = (_internalTags = internalTags[internalTags.length - 1]) === null || _internalTags === void 0 ? void 0 : _internalTags.id;
+        setSelectedId(newSelectedId);
+        return;
+      }
+      setInternalTags(prevState => {
+        var _prevState;
+        if (!prevState) {
+          return prevState;
+        }
+        const removedId = (_prevState = prevState[prevState.length - 1]) === null || _prevState === void 0 ? void 0 : _prevState.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 = (0, _react.useCallback)(id => {
+    setInternalTags(prevState => {
+      const updatedTags = (prevState ?? []).filter(tag => tag.id !== id);
+      if (typeof onRemove === 'function') {
+        onRemove(id);
+      }
+      return updatedTags;
+    });
+  }, [onRemove]);
+  const content = (0, _react.useMemo)(() => {
+    const items = [];
+    if (!internalTags) {
+      return items;
+    }
+    internalTags.forEach(({
+      text,
+      id
+    }) => {
+      items.push( /*#__PURE__*/_react.default.createElement(_Badge.default, {
+        key: `tag-input-${id}`,
+        backgroundColor: id === selectedId ? theme['206'] ?? undefined : undefined
+      }, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagWrapper, null, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagWrapperText, null, text), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icons: ['ts-wrong'],
+        onClick: () => handleIconClick(id)
+      }))));
+    });
+    return items;
+  }, [handleIconClick, internalTags, selectedId, theme]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInput, null, content, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagInput, {
+    placeholder: tags && tags.length > 0 ? undefined : placeholder,
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    value: currentValue
+  })), [content, currentValue, handleKeyDown, placeholder, tags]);
+};
+var _default = exports.default = TagInput;
+//# sourceMappingURL=TagInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"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/cjs/components/tag-input/TagInput.styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapper = exports.StyledTagInputTagInput = exports.StyledTagInput = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledTagInput = exports.StyledTagInput = _styledComponents.default.div`
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 42px;
+    padding: 5px;
+    align-items: center;
+    gap: 6px;
+    background-color: ${({
+  theme
+}) => theme['100']};
+    border: 1px solid rgba(160, 160, 160, 0.3);
+`;
+const StyledTagInputTagWrapper = exports.StyledTagInputTagWrapper = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+`;
+const StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapperText = _styledComponents.default.p`
+    margin: 0;
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 15px;
+`;
+const StyledTagInputTagInput = exports.StyledTagInputTagInput = _styledComponents.default.input`
+    border: none;
+    height: 24px;
+    flex-grow: 1;
+    background-color: transparent;
+    color: ${({
+  theme
+}) => theme.text};
+`;
+//# sourceMappingURL=TagInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledTagInput","exports","styled","div","theme","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC;AAA2B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxE;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACC,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAEM,MAAMG,4BAA4B,GAAAL,OAAA,CAAAK,4BAAA,GAAGJ,yBAAM,CAACK,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACO,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEL;AAAmC,CAAC,KAAKA,KAAK,CAACM,IAAI;AACnE,CAAC","ignoreList":[]}

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _AreaContextProvider = require("../area-provider/AreaContextProvider");
+var _Input = require("../input/Input.styles");
+var _TextArea = require("./TextArea.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TextArea = ({
+  isDisabled,
+  isInvalid,
+  placeholder,
+  value,
+  onChange,
+  rightElement,
+  onBlur,
+  maxHeight = '120px',
+  minHeight = '41px'
+}) => {
+  var _rightElement$props;
+  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const textareaRef = (0, _react.useRef)(null);
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
+  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const adjustTextareaHeight = (0, _react.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]);
+
+  /**
+   * 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.
+   */
+  (0, _react.useEffect)(() => {
+    if (typeof value === 'string' && value.length > -1) {
+      adjustTextareaHeight();
+    }
+  }, [adjustTextareaHeight, value]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
+    $isInvalid: isInvalid,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    disabled: isDisabled,
+    $isInvalid: isInvalid,
+    ref: textareaRef,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    $maxHeight: maxHeight,
+    $minHeight: minHeight,
+    $isOverflowing: isOverflowing,
+    rows: 1
+  }), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
+    $isInvalid: isInvalid
+  }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
+};
+TextArea.displayName = 'TextArea';
+var _default = exports.default = TextArea;
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","_rightElement$props","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","height","scrollHeight","parseInt","toString","useEffect","length","createElement","StyledTextArea","$isDisabled","StyledTextAreaContentWrapper","$isInvalid","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","disabled","ref","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\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     * 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: FC<TextAreaProps> = ({\n    isDisabled,\n    isInvalid,\n    placeholder,\n    value,\n    onChange,\n    rightElement,\n    onBlur,\n    maxHeight = '120px',\n    minHeight = '41px',\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(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n        }\n    }, [maxHeight]);\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                            $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            placeholder,\n            rightElement,\n            shouldChangeColor,\n            shouldShowBorder,\n            value,\n        ],\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/text-area/TextArea.styles.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTextAreaLabelWrapper = exports.StyledTextAreaLabel = exports.StyledTextAreaInput = exports.StyledTextAreaContentWrapper = exports.StyledTextAreaContent = exports.StyledTextArea = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledTextArea = exports.StyledTextArea = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    position: relative;
+`;
+const StyledTextAreaContentWrapper = exports.StyledTextAreaContentWrapper = _styledComponents.default.div`
+    background-color: ${({
+  theme,
+  $shouldChangeColor
+}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+    border-radius: 3px;
+    border: 1px solid
+        ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
+    width: 100%;
+    display: flex;
+`;
+const StyledTextAreaContent = exports.StyledTextAreaContent = _styledComponents.default.div`
+    display: flex;
+    width: 100%;
+`;
+const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.default.textarea`
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : theme.text};
+    background: none;
+    border: none;
+    resize: none;
+    overflow-y: ${({
+  $isOverflowing
+}) => $isOverflowing ? 'scroll' : 'hidden'};
+    max-height: ${({
+  $maxHeight
+}) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+    min-height: ${({
+  $minHeight
+}) => typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};
+    width: 100%;
+    padding: 8px 10px;
+    cursor: text;
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+              `}
+`;
+const StyledTextAreaLabelWrapper = exports.StyledTextAreaLabelWrapper = _styledComponents.default.label`
+    left: 10px;
+    top: 12px;
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    width: calc(100% - 20px);
+    cursor: text;
+`;
+const StyledTextAreaLabel = exports.StyledTextAreaLabel = _styledComponents.default.label`
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
+    line-height: 1.3;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: text;
+    text-overflow: ellipsis;
+`;
+//# sourceMappingURL=TextArea.styles.js.map

package/lib/cjs/components/text-area/TextArea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n    background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    width: 100%;\n    display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n    $browser: Browser | 'bot' | null | undefined;\n    $isInvalid: TextAreaProps['isInvalid'];\n    $isOverflowing: boolean;\n    $maxHeight: CSSProperties['maxHeight'];\n    $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    background: none;\n    border: none;\n    resize: none;\n    overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n    max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n        typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n    min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n        typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n    width: 100%;\n    padding: 8px 10px;\n    cursor: text;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledTextAreaInputProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n              `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n    left: 10px;\n    top: 12px;\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    width: calc(100% - 20px);\n    cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n    line-height: 1.3;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: text;\n    text-overflow: ellipsis;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tooltip/Tooltip.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _tooltip = require("../../utils/tooltip");
+var _Popup = _interopRequireDefault(require("../popup/Popup"));
+var _TooltipItem = _interopRequireDefault(require("./tooltip-item/TooltipItem"));
+var _Tooltip = require("./Tooltip.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Tooltip = ({
+  item,
+  children,
+  container,
+  isDisabled,
+  itemWidth,
+  shouldUseChildrenWidth = true
+}) => {
+  const tooltipRef = (0, _react.useRef)(null);
+  const content = (0, _react.useMemo)(() => {
+    if ( /*#__PURE__*/(0, _react.isValidElement)(item)) {
+      return item;
+    }
+    return /*#__PURE__*/_react.default.createElement(_TooltipItem.default, {
+      width: itemWidth,
+      text: item.text,
+      headline: item.headline,
+      imageUrl: item.imageUrl,
+      button: item.button
+    });
+  }, [item, itemWidth]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltip, null, isDisabled ? /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
+    $isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children) : /*#__PURE__*/_react.default.createElement(_Popup.default, {
+    shouldShowOnHover: true,
+    content: content,
+    ref: tooltipRef,
+    container: container,
+    shouldUseChildrenWidth: false
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
+    $isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children))), [isDisabled, children, shouldUseChildrenWidth, content, container]);
+};
+Tooltip.displayName = 'Tooltip';
+var _default = exports.default = Tooltip;
+//# sourceMappingURL=Tooltip.js.map