@chayns-components/core 5.0.0-beta.998 → 5.0.0

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

@@ -1,24 +1,15 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 export const StyledSliderButton = styled.div`
-    opacity: ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return $isDisabled ? 0.5 : 1;
-}};
+    opacity: ${({
+  $isDisabled
+}) => $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;
@@ -30,20 +21,14 @@ export const StyledSliderButtonWrapper = styled.div`
     user-select: none;
     transition: opacity 0.3s ease;
 
-    width: ${_ref3 => {
-  let {
-    $width
-  } = _ref3;
-  return $width;
-}}px;
+    width: ${({
+  $width
+}) => $width}px;
 
     max-width: 100%;
-    overflow-x: ${_ref4 => {
-  let {
-    $isDisabled
-  } = _ref4;
-  return $isDisabled ? 'hidden' : 'scroll';
-}};
+    overflow-x: ${({
+  $isDisabled
+}) => $isDisabled ? 'hidden' : 'scroll'};
     overflow-y: hidden;
 
     // Chrome
@@ -61,22 +46,19 @@ 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;
+    min-width: ${({
+  $width
+}) => $width}px;
+    max-width: ${({
+  $width
+}) => $width}px;
     display: flex;
     white-space: nowrap;
     justify-content: center;
-    color: white;
+    color: ${({
+  $isSecondary,
+  theme
+}) => $isSecondary ? theme.text : theme.buttonColor ?? 'white'};
 `;
 export const StyledSliderButtonPopupContent = styled.div`
     display: flex;
@@ -86,55 +68,34 @@ 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;
-}};
+    background-color: ${({
+  $isSelected,
+  theme
+}) => $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;
-}};
+    z-index: ${({
+  $isInvisible
+}) => $isInvisible ? '2' : '4'};
+    opacity: ${({
+  $isInvisible
+}) => $isInvisible ? 0 : 1};
     display: flex;
     cursor: pointer;
     align-items: center;
-    pointer-events: ${_ref10 => {
-  let {
-    $isInvisible
-  } = _ref10;
-  return $isInvisible ? 'auto' : 'none';
-}};
+    pointer-events: ${({
+  $isInvisible
+}) => $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;
+    width: ${({
+  $width
+}) => $width - 8}px;
     position: absolute;
     border-radius: 2px;
     top: 4px;

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

@@ -1 +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":[]}
+{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","$isDisabled","StyledSliderButtonWrapper","$width","StyledSliderButtonItem","$isSecondary","theme","text","buttonColor","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","$isSelected","undefined","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\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    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<{\n    $isSecondary?: boolean;\n    $width: number;\n}>;\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: ${({ $isSecondary, theme }: StyledSliderButtonItemProps) =>\n        $isSecondary ? theme.text : (theme.buttonColor ?? '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    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,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACE,GAAmC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEG;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMG,sBAAsB,GAAGN,MAAM,CAACE,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEG;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEE,YAAY;EAAEC;AAAmC,CAAC,KAC1DD,YAAY,GAAGC,KAAK,CAACC,IAAI,GAAID,KAAK,CAACE,WAAW,IAAI,OAAQ;AAClE,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGX,MAAM,CAACE,GAAG;AACxD;AACA;AACA,CAAC;AAID,OAAO,MAAMU,kCAAkC,GAAGZ,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA,wBAAwB,CAAC;EAAEW,WAAW;EAAEL;AAA+C,CAAC,KAChFK,WAAW,GAAGL,KAAK,CAAC,eAAe,CAAC,GAAGM,SAAS;AACxD;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACE,GAA0C;AACjG;AACA,eAAe,CAAC;EAAEc;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;AAID,OAAO,MAAMC,6BAA6B,GAAGjB,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG;AACA;AACA;AACA,aAAa,CAAC;EAAEG;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;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

@@ -13,24 +13,21 @@ export let SmallWaitCursorSpeed = /*#__PURE__*/function (SmallWaitCursorSpeed) {
   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));
-};
+const SmallWaitCursor = ({
+  shouldHideBackground = false,
+  shouldHideWaitCursor = false,
+  size = SmallWaitCursorSize.Medium,
+  speed = SmallWaitCursorSpeed.Medium,
+  color
+}) => /*#__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

@@ -1 +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":[]}
+{"version":3,"file":"SmallWaitCursor.js","names":["React","StyledSmallWaitCursor","StyledSmallWaitCursorBackground","StyledSmallWaitCursorWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","SmallWaitCursor","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     * @description The color of the inner circle of the wait cursor.\n     * @optional\n     * @default undefined\n     * @example <SmallWaitCursor color=\"#FF0000\" />\n     */\n    color?: string;\n    /**\n     * @description Specifies whether the wait cursor should be displayed with a background.\n     * @optional\n     * @default false\n     * @example <SmallWaitCursor shouldHideBackground />\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * @description Specifies whether the wait cursor should be displayed.\n     * @optional\n     * @default false\n     * @example <SmallWaitCursor shouldHideWaitCursor />\n     */\n    shouldHideWaitCursor?: boolean;\n    /**\n     * @description The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop or a custom value in pixels.\n     * @optional\n     * @default SmallWaitCursorSize.Medium\n     * @example <SmallWaitCursor size={SmallWaitCursorSize.Small} />\n     */\n    size?: SmallWaitCursorSize | number;\n    /**\n     * @description The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n     * @optional\n     * @default SmallWaitCursorSpeed.Medium\n     * @example <SmallWaitCursor speed={SmallWaitCursorSpeed.Fast} />\n     */\n    speed?: SmallWaitCursorSpeed;\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;AA4ChC,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,oBAAoB,GAAG,KAAK;EAC5BC,oBAAoB,GAAG,KAAK;EAC5BC,IAAI,GAAGL,mBAAmB,CAACM,MAAM;EACjCC,KAAK,GAAGN,oBAAoB,CAACK,MAAM;EACnCE;AACJ,CAAC,kBACGZ,KAAA,CAAAa,aAAA,CAACZ,qBAAqB;EAACa,qBAAqB,EAAE,CAACN,oBAAqB;EAACO,KAAK,EAAEN;AAAK,gBAC7ET,KAAA,CAAAa,aAAA,CAACV,+BAA+B;EAC5Ba,qBAAqB,EAAET,oBAAqB;EAC5CQ,KAAK,EAAEN,IAAK;EACZQ,MAAM,EAAEN,KAAM;EACdO,MAAM,EAAEN;AAAM,CACjB,CAAC,EACD,CAACL,oBAAoB,iBAAIP,KAAA,CAAAa,aAAA,CAACX,+BAA+B,MAAE,CACzC,CAC1B;AAEDI,eAAe,CAACa,WAAW,GAAG,iBAAiB;AAE/C,eAAeb,eAAe","ignoreList":[]}

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

@@ -1,24 +1,15 @@
 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;
-}};
+    height: ${({
+  $size
+}) => $size}px;
+    width: ${({
+  $size
+}) => $size}px;
+    opacity: ${({
+  $shouldShowWaitCursor
+}) => $shouldShowWaitCursor ? 1 : 0};
 `;
 export const StyledSmallWaitCursorBackground = styled.div`
     background-color: white;
@@ -32,52 +23,44 @@ export const StyledSmallWaitCursorBackground = styled.div`
         0 1px 1px rgba(0, 0, 0, 0.2);
 `;
 const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 `;
 export const StyledSmallWaitCursorWaitCursor = styled.div`
     position: absolute;
-    top: 5px;
-    left: 5px;
+    top: ${({
+  $shouldHideBackground
+}) => $shouldHideBackground ? 0 : 5}px;
+    left: ${({
+  $shouldHideBackground
+}) => $shouldHideBackground ? 0 : 5}px;
     z-index: 2;
     border-style: solid;
     border-width: 3px;
-    border-color: ${_ref4 => {
-  let {
-    theme,
-    $shouldHideBackground,
-    $color
-  } = _ref4;
+    border-color: ${({
+  theme,
+  $shouldHideBackground,
+  $color
+}) => {
   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`;
-}};
+    height: ${({
+  $shouldHideBackground,
+  $size
+}) => $shouldHideBackground ? '100%' : `${$size - 10}px`};
+    width: ${({
+  $shouldHideBackground,
+  $size
+}) => $shouldHideBackground ? '100%' : `${$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;
+    animation: ${spin} ${({
+  $speed
+}) => $speed}s linear infinite;
 `;
 //# sourceMappingURL=SmallWaitCursor.styles.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"SmallWaitCursor.styles.js","names":["styled","keyframes","StyledSmallWaitCursor","div","$size","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","StyledSmallWaitCursorWaitCursor","$shouldHideBackground","theme","$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 {\n    SmallWaitCursorProps,\n    SmallWaitCursorSize,\n    SmallWaitCursorSpeed,\n} 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    $color: SmallWaitCursorProps['color'];\n    $shouldHideBackground: SmallWaitCursorProps['shouldHideBackground'];\n    $size: SmallWaitCursorSize | number;\n    $speed: SmallWaitCursorSpeed;\n}>;\n\nconst spin = keyframes`\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n`;\n\nexport const StyledSmallWaitCursorWaitCursor = styled.div<StyledSmallWaitCursorWaitCursorProps>`\n    position: absolute;\n    top: ${({ $shouldHideBackground }) => ($shouldHideBackground ? 0 : 5)}px;\n    left: ${({ $shouldHideBackground }) => ($shouldHideBackground ? 0 : 5)}px;\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: ${({ $shouldHideBackground, $size }) =>\n        $shouldHideBackground ? '100%' : `${$size - 10}px`};\n    width: ${({ $shouldHideBackground, $size }) =>\n        $shouldHideBackground ? '100%' : `${$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;AAarD,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,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;AAID,OAAO,MAAMC,+BAA+B,GAAGN,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,MAAMI,IAAI,GAAGN,SAAS;AACtB;AACA;AACA,CAAC;AAED,OAAO,MAAMO,+BAA+B,GAAGR,MAAM,CAACG,GAAyC;AAC/F;AACA,WAAW,CAAC;EAAEM;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AACzE,YAAY,CAAC;EAAEA;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,CAAC,GAAG,CAAE;AAC1E;AACA;AACA;AACA,oBAAoB,CAAC;EACbC,KAAK;EACLD,qBAAqB;EACrBE;AACkC,CAAC,KAAK;EACxC,IAAIA,MAAM,EAAE;IACR,OAAOA,MAAM;EACjB;EAEA,OAAOD,KAAK,CAACE,SAAS,KAAK,MAAM,IAAIH,qBAAqB,GAAGC,KAAK,CAACG,QAAQ,GAAGH,KAAK,CAACI,OAAO;AAC/F,CAAC;AACL,cAAc,CAAC;EAAEL,qBAAqB;EAAEL;AAAM,CAAC,KACvCK,qBAAqB,GAAG,MAAM,GAAG,GAAGL,KAAK,GAAG,EAAE,IAAI;AAC1D,aAAa,CAAC;EAAEK,qBAAqB;EAAEL;AAAM,CAAC,KACtCK,qBAAqB,GAAG,MAAM,GAAG,GAAGL,KAAK,GAAG,EAAE,IAAI;AAC1D;AACA;AACA;AACA;AACA,iBAAiBG,IAAI,IAAI,CAAC;EAAEQ;AAAO,CAAC,KAAKA,MAAM;AAC/C,CAAC","ignoreList":[]}

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

@@ -1,113 +1,138 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState, useImperativeHandle, useContext, useRef } 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';
-// ToDo: Add reference with "save" function to return unsaved tags
-
-const TagInput = _ref => {
-  let {
-    placeholder,
-    tags,
-    onRemove,
-    onAdd
-  } = _ref;
-  const [internalTags, setInternalTags] = useState();
+import { StyledTagInput, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import { useCursorRepaint } from '../../hooks/resize';
+const TagInput = /*#__PURE__*/forwardRef(({
+  leftElement,
+  onAdd,
+  onBlur,
+  onChange,
+  onFocus,
+  onRemove,
+  placeholder,
+  shouldAllowMultiple = true,
+  shouldPreventEnter,
+  tags
+}, ref) => {
   const [currentValue, setCurrentValue] = useState('');
   const [selectedId, setSelectedId] = useState();
+  const areaProvider = useContext(AreaContext);
+  const inputRef = useRef(null);
+  useCursorRepaint(inputRef);
   const theme = useTheme();
-  useEffect(() => {
-    if (tags) {
-      setInternalTags(tags);
-    }
-  }, [tags]);
+  const handleResetValue = () => {
+    setCurrentValue('');
+  };
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  useImperativeHandle(ref, () => ({
+    blur: () => inputRef.current?.blur(),
+    getUnsavedTagText: currentValue !== '' ? currentValue : undefined,
+    resetValue: handleResetValue
+  }), [currentValue]);
   const handleKeyDown = useCallback(event => {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && !shouldPreventEnter) {
       setCurrentValue(prevValue => {
         if (!prevValue) {
           return '';
         }
-        setInternalTags(prevTags => {
-          const newTag = {
-            id: uuidv4(),
-            text: prevValue
-          };
-          if (typeof onAdd === 'function') {
-            onAdd(newTag);
+        if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';
+        const newTag = {
+          id: uuidv4(),
+          text: prevValue
+        };
+        if (typeof onAdd === 'function') {
+          const onAddResult = onAdd(newTag);
+          if (typeof onAddResult === 'boolean' && !onAddResult) {
+            return prevValue;
           }
-          return prevTags ? [...prevTags, newTag] : [newTag];
-        });
+          if (onAddResult instanceof Promise) {
+            void onAddResult.then(shouldAddTag => {
+              if (!shouldAddTag) {
+                return prevValue;
+              }
+              return '';
+            });
+          }
+        }
         return '';
       });
     }
     if (event.key === 'Backspace' && currentValue === '') {
       if (!selectedId) {
-        if (!internalTags) {
+        if (!tags) {
           return;
         }
-        const newSelectedId = internalTags[internalTags.length - 1]?.id;
+        const newSelectedId = tags[tags.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;
-      });
+      if (!tags) {
+        return;
+      }
+      const removedId = tags[tags.length - 1]?.id;
+      if (!removedId) {
+        return;
+      }
+      if (typeof onRemove === 'function') {
+        onRemove(removedId);
+      }
+      setSelectedId(undefined);
     }
-  }, [currentValue, internalTags, onAdd, onRemove, selectedId]);
-  const handleChange = event => {
+  }, [currentValue, onAdd, onRemove, selectedId, shouldAllowMultiple, shouldPreventEnter, tags]);
+  const handleChange = useCallback(event => {
     setCurrentValue(event.target.value);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
     if (event.target.value !== '') {
       setSelectedId(undefined);
     }
-  };
+  }, [onChange]);
   const handleIconClick = useCallback(id => {
-    setInternalTags(prevState => {
-      const updatedTags = (prevState ?? []).filter(tag => tag.id !== id);
-      if (typeof onRemove === 'function') {
-        onRemove(id);
-      }
-      return updatedTags;
-    });
+    if (typeof onRemove === 'function') {
+      onRemove(id);
+    }
   }, [onRemove]);
   const content = useMemo(() => {
     const items = [];
-    if (!internalTags) {
+    if (!tags) {
       return items;
     }
-    internalTags.forEach(_ref2 => {
-      let {
-        text,
-        id
-      } = _ref2;
+    (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(({
+      text,
+      id,
+      rightElement
+    }) => {
       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, {
+      }, /*#__PURE__*/React.createElement(StyledTagInputTagWrapper, null, /*#__PURE__*/React.createElement(StyledTagInputTagWrapperText, null, text), rightElement, /*#__PURE__*/React.createElement(Icon, {
         icons: ['ts-wrong'],
-        onClick: () => handleIconClick(id)
+        onClick: event => {
+          event.preventDefault();
+          event.stopPropagation();
+          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,
+  }, [tags, shouldAllowMultiple, selectedId, theme, handleIconClick]);
+  const shouldShowInput = useMemo(() => shouldAllowMultiple || (tags?.length ?? 0) < 1, [tags?.length, shouldAllowMultiple]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, {
+    $shouldChangeColor: shouldChangeColor
+  }, leftElement && /*#__PURE__*/React.createElement(StyledTagInputIconWrapper, null, leftElement), content, shouldShowInput && /*#__PURE__*/React.createElement(StyledTagInputTagInput, {
+    onBlur: onBlur,
     onChange: handleChange,
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown,
+    placeholder: tags && tags.length > 0 ? undefined : placeholder,
+    ref: inputRef,
     value: currentValue
-  })), [content, currentValue, handleKeyDown, placeholder, tags]);
-};
+  })), [content, currentValue, handleChange, handleKeyDown, leftElement, onBlur, onFocus, placeholder, shouldChangeColor, shouldShowInput, tags]);
+});
 export default TagInput;
 //# sourceMappingURL=TagInput.js.map