@chayns-components/core 5.4.6-alpha.0 → 5.4.6

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { StyledHighlightSliderItem, StyledHighlightSliderItemBackground, StyledHighlightSliderItemProgress } from './HighlightSliderItem.styles';
 import { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';
 import { useUuid } from '../../../hooks/uuid';
@@ -9,28 +9,11 @@ const HighlightSliderItem = ({
   onFinish,
   index,
   onClick,
-  duration,
-  isInteractive,
-  shouldEnableKeyboardHighlighting,
-  shouldShowKeyboardHighlighting = false
+  duration
 }) => {
   const uuid = useUuid();
-  const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;
-  const handleKeyDown = useCallback(event => {
-    if (!isInteractive) {
-      return;
-    }
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      onClick(index);
-    }
-  }, [index, isInteractive, onClick]);
   return /*#__PURE__*/React.createElement(StyledHighlightSliderItem, {
-    onClick: isInteractive ? () => onClick(index) : undefined,
-    onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
-    tabIndex: isKeyboardFocusable ? 0 : -1,
-    role: isInteractive ? 'button' : undefined,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    onClick: () => onClick(index)
   }, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, isActive && /*#__PURE__*/React.createElement(StyledHighlightSliderItemProgress, {
     key: `highlight-slider-item-active--${uuid}`,
     initial: {

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

@@ -1 +1 @@
-{"version":3,"file":"HighlightSliderItem.js","names":["React","useCallback","StyledHighlightSliderItem","StyledHighlightSliderItemBackground","StyledHighlightSliderItemProgress","StyledProgressBarProgressWrapper","useUuid","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","isInteractive","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","uuid","isKeyboardFocusable","handleKeyDown","event","key","preventDefault","createElement","undefined","onKeyDown","tabIndex","role","$shouldShowKeyboardHighlighting","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","backgroundColor","displayName"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback } from 'react';\nimport {\n    StyledHighlightSliderItem,\n    StyledHighlightSliderItemBackground,\n    StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n    backgroundColor: string;\n    fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n    index: number;\n    isActive: boolean;\n    isFinished: boolean;\n    onClick: (index: number) => void;\n    onFinish: (index: number) => void;\n    duration: number;\n    colors: HighlightSliderItemColors;\n    isInteractive: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    shouldShowKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n    colors,\n    isActive,\n    isFinished,\n    onFinish,\n    index,\n    onClick,\n    duration,\n    isInteractive,\n    shouldEnableKeyboardHighlighting,\n    shouldShowKeyboardHighlighting = false,\n}) => {\n    const uuid = useUuid();\n    const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;\n\n    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onClick(index);\n            }\n        },\n        [index, isInteractive, onClick],\n    );\n\n    return (\n        <StyledHighlightSliderItem\n            onClick={isInteractive ? () => onClick(index) : undefined}\n            onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            role={isInteractive ? 'button' : undefined}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n        >\n            <StyledProgressBarProgressWrapper>\n                {isActive && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-active--${uuid}`}\n                        initial={{ width: '100%', left: '-100%' }}\n                        animate={{ width: '100%', left: '0%' }}\n                        exit={{ width: '100%', left: '0%' }}\n                        onAnimationComplete={() => onFinish(index)}\n                        $backgroundColor={colors.fillColor}\n                        transition={{\n                            ease: 'linear',\n                            duration,\n                        }}\n                    />\n                )}\n                {isFinished && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-finished--${uuid}`}\n                        style={{ width: '100%', left: '0%' }}\n                        $backgroundColor={colors.fillColor}\n                    />\n                )}\n                <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        </StyledHighlightSliderItem>\n    );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA8BC,WAAW,QAAQ,OAAO;AACpE,SACIC,yBAAyB,EACzBC,mCAAmC,EACnCC,iCAAiC,QAC9B,8BAA8B;AACrC,SAASC,gCAAgC,QAAQ,uCAAuC;AACxF,SAASC,OAAO,QAAQ,qBAAqB;AAoB7C,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,aAAa;EACbC,gCAAgC;EAChCC,8BAA8B,GAAG;AACrC,CAAC,KAAK;EACF,MAAMC,IAAI,GAAGZ,OAAO,CAAC,CAAC;EACtB,MAAMa,mBAAmB,GAAGJ,aAAa,IAAIC,gCAAgC;EAE7E,MAAMI,aAAa,GAAGnB,WAAW,CAC5BoB,KAAK,IAAK;IACP,IAAI,CAACN,aAAa,EAAE;MAChB;IACJ;IAEA,IAAIM,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBV,OAAO,CAACD,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACA,KAAK,EAAEG,aAAa,EAAEF,OAAO,CAClC,CAAC;EAED,oBACIb,KAAA,CAAAwB,aAAA,CAACtB,yBAAyB;IACtBW,OAAO,EAAEE,aAAa,GAAG,MAAMF,OAAO,CAACD,KAAK,CAAC,GAAGa,SAAU;IAC1DC,SAAS,EAAEP,mBAAmB,GAAGC,aAAa,GAAGK,SAAU;IAC3DE,QAAQ,EAAER,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCS,IAAI,EAAEb,aAAa,GAAG,QAAQ,GAAGU,SAAU;IAC3CI,+BAA+B,EAAEZ;EAA+B,gBAEhEjB,KAAA,CAAAwB,aAAA,CAACnB,gCAAgC,QAC5BI,QAAQ,iBACLT,KAAA,CAAAwB,aAAA,CAACpB,iCAAiC;IAC9BkB,GAAG,EAAE,iCAAiCJ,IAAI,EAAG;IAC7CY,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,KAAMxB,QAAQ,CAACC,KAAK,CAAE;IAC3CwB,gBAAgB,EAAE5B,MAAM,CAAC6B,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdzB;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,iBACPV,KAAA,CAAAwB,aAAA,CAACpB,iCAAiC;IAC9BkB,GAAG,EAAE,mCAAmCJ,IAAI,EAAG;IAC/CsB,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,EAAE5B,MAAM,CAAC6B;EAAU,CACtC,CACJ,eACDrC,KAAA,CAAAwB,aAAA,CAACrB,mCAAmC;IAACiC,gBAAgB,EAAE5B,MAAM,CAACiC;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;AAEDlC,mBAAmB,CAACmC,WAAW,GAAG,qBAAqB;AAEvD,eAAenC,mBAAmB","ignoreList":[]}
+{"version":3,"file":"HighlightSliderItem.js","names":["React","StyledHighlightSliderItem","StyledHighlightSliderItemBackground","StyledHighlightSliderItemProgress","StyledProgressBarProgressWrapper","useUuid","HighlightSliderItem","colors","isActive","isFinished","onFinish","index","onClick","duration","uuid","createElement","key","initial","width","left","animate","exit","onAnimationComplete","$backgroundColor","fillColor","transition","ease","style","backgroundColor","displayName"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledHighlightSliderItem,\n    StyledHighlightSliderItemBackground,\n    StyledHighlightSliderItemProgress,\n} from './HighlightSliderItem.styles';\nimport { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';\nimport { useUuid } from '../../../hooks/uuid';\n\nexport interface HighlightSliderItemColors {\n    backgroundColor: string;\n    fillColor: string;\n}\n\nexport type HighlightSliderItemProps = {\n    index: number;\n    isActive: boolean;\n    isFinished: boolean;\n    onClick: (index: number) => void;\n    onFinish: (index: number) => void;\n    duration: number;\n    colors: HighlightSliderItemColors;\n};\n\nconst HighlightSliderItem: FC<HighlightSliderItemProps> = ({\n    colors,\n    isActive,\n    isFinished,\n    onFinish,\n    index,\n    onClick,\n    duration,\n}) => {\n    const uuid = useUuid();\n\n    return (\n        <StyledHighlightSliderItem onClick={() => onClick(index)}>\n            <StyledProgressBarProgressWrapper>\n                {isActive && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-active--${uuid}`}\n                        initial={{ width: '100%', left: '-100%' }}\n                        animate={{ width: '100%', left: '0%' }}\n                        exit={{ width: '100%', left: '0%' }}\n                        onAnimationComplete={() => onFinish(index)}\n                        $backgroundColor={colors.fillColor}\n                        transition={{\n                            ease: 'linear',\n                            duration,\n                        }}\n                    />\n                )}\n                {isFinished && (\n                    <StyledHighlightSliderItemProgress\n                        key={`highlight-slider-item-finished--${uuid}`}\n                        style={{ width: '100%', left: '0%' }}\n                        $backgroundColor={colors.fillColor}\n                    />\n                )}\n                <StyledHighlightSliderItemBackground $backgroundColor={colors.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        </StyledHighlightSliderItem>\n    );\n};\n\nHighlightSliderItem.displayName = 'HighlightSliderItem';\n\nexport default HighlightSliderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,yBAAyB,EACzBC,mCAAmC,EACnCC,iCAAiC,QAC9B,8BAA8B;AACrC,SAASC,gCAAgC,QAAQ,uCAAuC;AACxF,SAASC,OAAO,QAAQ,qBAAqB;AAiB7C,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,MAAM;EACNC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAMC,IAAI,GAAGT,OAAO,CAAC,CAAC;EAEtB,oBACIL,KAAA,CAAAe,aAAA,CAACd,yBAAyB;IAACW,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACD,KAAK;EAAE,gBACrDX,KAAA,CAAAe,aAAA,CAACX,gCAAgC,QAC5BI,QAAQ,iBACLR,KAAA,CAAAe,aAAA,CAACZ,iCAAiC;IAC9Ba,GAAG,EAAE,iCAAiCF,IAAI,EAAG;IAC7CG,OAAO,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC1CC,OAAO,EAAE;MAAEF,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACvCE,IAAI,EAAE;MAAEH,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACpCG,mBAAmB,EAAEA,CAAA,KAAMZ,QAAQ,CAACC,KAAK,CAAE;IAC3CY,gBAAgB,EAAEhB,MAAM,CAACiB,SAAU;IACnCC,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdb;IACJ;EAAE,CACL,CACJ,EACAJ,UAAU,iBACPT,KAAA,CAAAe,aAAA,CAACZ,iCAAiC;IAC9Ba,GAAG,EAAE,mCAAmCF,IAAI,EAAG;IAC/Ca,KAAK,EAAE;MAAET,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAK,CAAE;IACrCI,gBAAgB,EAAEhB,MAAM,CAACiB;EAAU,CACtC,CACJ,eACDxB,KAAA,CAAAe,aAAA,CAACb,mCAAmC;IAACqB,gBAAgB,EAAEhB,MAAM,CAACqB;EAAgB,CAAE,CAClD,CACX,CAAC;AAEpC,CAAC;AAEDtB,mBAAmB,CAACuB,WAAW,GAAG,qBAAqB;AAEvD,eAAevB,mBAAmB","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { motion } from 'motion/react';
-import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledHighlightSliderItem = styled.div`
     overflow: hidden;
     position: relative;
@@ -8,14 +7,6 @@ export const StyledHighlightSliderItem = styled.div`
     height: 4px;
     border-radius: 4px;
     cursor: pointer;
-
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
 `;
 export const StyledHighlightSliderItemProgress = styled(motion.div)`
     height: 4px;

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

@@ -1 +1 @@
-{"version":3,"file":"HighlightSliderItem.styles.js","names":["styled","css","motion","keyboardFocusHighlightingRingCss","StyledHighlightSliderItem","div","$shouldShowKeyboardHighlighting","StyledHighlightSliderItemProgress","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledHighlightSliderItemProps = {\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledHighlightSliderItem = styled.div<StyledHighlightSliderItemProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: 4px;\n    cursor: pointer;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n    motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n    height: 4px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n        $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n    motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n    height: 4px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n        $backgroundColor};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,cAAc;AAErC,SAASC,gCAAgC,QAAQ,iDAAiD;AAMlG,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACK,GAAmC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BL,GAAG;AACX;AACA,kBAAkBE,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAGD,OAAO,MAAMI,iCAAiC,GAAGP,MAAM,CACnDE,MAAM,CAACG,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGT,MAAM,CACrDE,MAAM,CAACG,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}
+{"version":3,"file":"HighlightSliderItem.styles.js","names":["styled","motion","StyledHighlightSliderItem","div","StyledHighlightSliderItemProgress","$backgroundColor","StyledHighlightSliderItemBackground"],"sources":["../../../../../src/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledHighlightSliderItem = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: 4px;\n    cursor: pointer;\n`;\ntype StyledHighlightSliderItemProgressProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemProgress = styled(\n    motion.div,\n)<StyledHighlightSliderItemProgressProps>`\n    height: 4px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemProgressProps) =>\n        $backgroundColor};\n`;\n\ntype StyledHighlightSliderItemBackgroundProps = WithTheme<{ $backgroundColor: string }>;\n\nexport const StyledHighlightSliderItemBackground = styled(\n    motion.div,\n)<StyledHighlightSliderItemBackgroundProps>`\n    height: 4px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ $backgroundColor }: StyledHighlightSliderItemBackgroundProps) =>\n        $backgroundColor};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,cAAc;AAGrC,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMC,iCAAiC,GAAGJ,MAAM,CACnDC,MAAM,CAACE,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE;AAAyD,CAAC,KAC7EA,gBAAgB;AACxB,CAAC;AAID,OAAO,MAAMC,mCAAmC,GAAGN,MAAM,CACrDC,MAAM,CAACE,GACX,CAA2C;AAC3C;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE;AAA2D,CAAC,KAC/EA,gBAAgB;AACxB,CAAC","ignoreList":[]}

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

@@ -1,9 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { getStackSizeFactor } from '../../utils/icon';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
-import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
-import { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';
+import { StyledIcon, StyledIconWrapper } from './Icon.styles';
 import { useTheme } from 'styled-components';
 const Icon = ({
   className,
@@ -15,14 +13,9 @@ const Icon = ({
   onMouseDown,
   tabIndex,
   size = 15,
-  shouldStopPropagation,
-  shouldEnableKeyboardHighlighting
+  shouldStopPropagation
 }) => {
   const theme = useTheme();
-  const colorScheme = useColorScheme();
-  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
-  const isClickable = typeof onClick === 'function' && !isDisabled;
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective && isClickable);
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -39,15 +32,6 @@ const Icon = ({
       onDoubleClick(event);
     }
   };
-  const handleKeyDown = event => {
-    if (!isClickable) {
-      return;
-    }
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleClick(event);
-    }
-  };
   let maxStackSizeFactor = 1;
   icons.forEach(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
@@ -58,17 +42,14 @@ const Icon = ({
   const shouldUseStackedIcon = icons.length > 1;
   const wrapperClasses = clsx('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
   return /*#__PURE__*/React.createElement(StyledIconWrapper, {
-    tabIndex: shouldEnableKeyboardHighlightingEffective && isClickable ? tabIndex ?? 0 : tabIndex,
+    tabIndex: tabIndex,
     className: wrapperClasses,
     $isDisabled: isDisabled,
-    onClick: isClickable ? handleClick : undefined,
-    $isOnClick: isClickable,
+    onClick: typeof onClick === 'function' && !isDisabled ? handleClick : undefined,
+    $isOnClick: typeof onClick === 'function' && !isDisabled,
     onDoubleClick: typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined,
     onMouseDown: typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined,
-    onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
-    $size: size,
-    role: isClickable ? 'button' : undefined
+    $size: size
   }, icons.map(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
     const iconStyle = `${theme?.iconStyle ?? 'fa-regular'} `;
@@ -76,7 +57,7 @@ const Icon = ({
     const iconClasses = clsx(themedIcon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
-    return /*#__PURE__*/React.createElement(StyledIconElement, {
+    return /*#__PURE__*/React.createElement(StyledIcon, {
       className: iconClasses,
       $color: icon.includes('fa-inverse') ? 'white' : color,
       $fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["clsx","React","getStackSizeFactor","useKeyboardFocusHighlighting","useColorScheme","StyledIcon","StyledIconElement","StyledIconWrapper","useTheme","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","shouldEnableKeyboardHighlighting","theme","colorScheme","shouldEnableKeyboardHighlightingEffective","isClickable","shouldShowKeyboardHighlighting","handleClick","event","stopPropagation","handleDoubleClick","handleKeyDown","key","preventDefault","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","onKeyDown","$shouldShowKeyboardHighlighting","$size","role","map","iconStyle","themedIcon","replace","iconClasses","$color","includes","$fontSize","$isStacked","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable icons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const theme = useTheme() as Theme;\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isClickable = typeof onClick === 'function' && !isDisabled;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isClickable,\n    );\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {\n        if (!isClickable) {\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick(event as unknown as React.MouseEvent<HTMLSpanElement>);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={\n                shouldEnableKeyboardHighlightingEffective && isClickable\n                    ? (tabIndex ?? 0)\n                    : tabIndex\n            }\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={isClickable ? handleClick : undefined}\n            $isOnClick={isClickable}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            $size={size}\n            role={isClickable ? 'button' : undefined}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIconElement\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["clsx","React","getStackSizeFactor","StyledIcon","StyledIconWrapper","useTheme","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","theme","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","iconStyle","themedIcon","replace","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const theme = useTheme() as Theme;\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={tabIndex}\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' && !isDisabled ? handleClick : undefined}\n            $isOnClick={typeof onClick === 'function' && !isDisabled}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            $size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledIconWrapper = styled.span`
     align-items: center;
     cursor: ${({
@@ -20,28 +19,6 @@ export const StyledIconWrapper = styled.span`
   $size
 }) => `${$size}px`};
 
-    ${({
-  $shouldShowKeyboardHighlighting,
-  $size
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                outline: none;
-                color: inherit;
-            }
-
-            &:focus-visible::after {
-                ${keyboardFocusHighlightingCircleRingCss};
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: ${$size + 14}px;
-                height: ${$size + 14}px;
-                transform: translate(-50%, -50%);
-                pointer-events: none;
-            }
-        `}
-
     // To insure that stacked icons have the same size as normal icons.
     &&.fa-stack {
         height: fit-content;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["styled","css","keyboardFocusHighlightingCircleRingCss","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","$shouldShowKeyboardHighlighting","StyledIcon","i","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    ${({ $shouldShowKeyboardHighlighting, $size }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                outline: none;\n                color: inherit;\n            }\n\n            &:focus-visible::after {\n                ${keyboardFocusHighlightingCircleRingCss};\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: ${$size + 14}px;\n                height: ${$size + 14}px;\n                transform: translate(-50%, -50%);\n                pointer-events: none;\n            }\n        `}\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,sCAAsC,QAAQ,8CAA8C;AASrG,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA,MAAM,CAAC;EAAEC,+BAA+B;EAAED;AAAM,CAAC,KACzCC,+BAA+B,IAC/BP,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBC,sCAAsC;AACxD;AACA;AACA;AACA;AACA,yBAAyBK,KAAK,GAAG,EAAE;AACnC,0BAA0BA,KAAK,GAAG,EAAE;AACpC;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAME,UAAU,GAAGT,MAAM,CAACU,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAEV;AAAM,CAAC,KACnBU,SAAS,KAAKV,KAAK,IACnBN,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMiB,iBAAiB,GAAGlB,MAAM,CAACU,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACO,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,cAAc;AAC3D;AACA;AACA,mBAAmB,CAAC;EAAER,KAAK;EAAEQ;AAAM,CAAC,KAAK;EAC7B,IAAIR,KAAK,CAACS,SAAS,KAAK,YAAY,EAAE;IAClC,OAAO,MAAMD,KAAK,cAAc;EACpC;EACA,OAAO,EAAE;AACb,CAAC;AACT;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAMC,UAAU,GAAGP,MAAM,CAACQ,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAET;AAAM,CAAC,KACnBS,SAAS,KAAKT,KAAK,IACnBL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMe,iBAAiB,GAAGhB,MAAM,CAACQ,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACO,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,cAAc;AAC3D;AACA;AACA,mBAAmB,CAAC;EAAER,KAAK;EAAEQ;AAAM,CAAC,KAAK;EAC7B,IAAIR,KAAK,CAACS,SAAS,KAAK,YAAY,EAAE;IAClC,OAAO,MAAMD,KAAK,cAAc;EACpC;EACA,OAAO,EAAE;AACb,CAAC;AACT;AACA,CAAC","ignoreList":[]}

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

@@ -7,7 +7,6 @@ import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInput
 import { ContentCardType } from '../../types/contentCard';
 import { useCursorRepaint } from '../../hooks/resize';
 import Tooltip from '../tooltip/Tooltip';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 export let InputSize = /*#__PURE__*/function (InputSize) {
   InputSize["Small"] = "small";
   InputSize["Medium"] = "medium";
@@ -38,8 +37,7 @@ const Input = /*#__PURE__*/forwardRef(({
   shouldPreventPlaceholderAnimation = false,
   id,
   shouldShowTransparentBackground = false,
-  autoComplete,
-  shouldEnableKeyboardHighlighting
+  autoComplete
 }, ref) => {
   const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');
   const [placeholderWidth, setPlaceholderWidth] = useState(0);
@@ -65,13 +63,6 @@ const Input = /*#__PURE__*/forwardRef(({
       }
     }
   }, [onChange]);
-  const handleClearIconKeyDown = useCallback(event => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleClearIconClick();
-      inputRef.current?.focus();
-    }
-  }, [handleClearIconClick]);
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
@@ -100,9 +91,6 @@ const Input = /*#__PURE__*/forwardRef(({
   } else if (areaProvider.shouldChangeColor) {
     backgroundColor = theme['000'];
   }
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
-  const borderColor = color?.border;
-  const placeholderColor = color?.placeholder;
   const labelPosition = useMemo(() => {
     if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
       return shouldShowOnlyBottomBorder ? {
@@ -128,8 +116,7 @@ const Input = /*#__PURE__*/forwardRef(({
     $shouldRoundRightCorners: shouldShowBorder,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
-    $borderColor: borderColor,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+    $borderColor: color?.border
   }, leftElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, leftElement), /*#__PURE__*/React.createElement(StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/React.createElement(StyledInputField, {
@@ -171,30 +158,23 @@ const Input = /*#__PURE__*/forwardRef(({
       duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
     }
   }, /*#__PURE__*/React.createElement(StyledInputLabel, {
-    $color: placeholderColor,
+    $color: color?.placeholder,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: hasValue ? 1 : 0
     },
     initial: false,
     onClick: handleClearIconClick,
-    onKeyDown: handleClearIconKeyDown,
-    tabIndex: shouldShowKeyboardHighlighting && hasValue && !isDisabled ? 0 : -1,
-    role: shouldShowKeyboardHighlighting ? 'button' : undefined,
-    "aria-hidden": !hasValue,
     transition: {
       type: 'tween'
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, {
-    $isInline: true
-  }, rightElement)), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, borderColor, placeholderColor, placeholder, shouldShowClearIcon, handleClearIconClick, handleClearIconKeyDown, rightElement, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting]);
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, color?.placeholder, placeholder, shouldShowClearIcon, handleClearIconClick, rightElement]);
   if (isDisabled && typeof disabledHint === 'string') {
     return /*#__PURE__*/React.createElement(Tooltip, {
       item: {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","useKeyboardFocusHighlighting","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","shouldEnableKeyboardHighlighting","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","handleClearIconKeyDown","event","key","preventDefault","focus","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","blur","internalColor","contentCardType","Error","Success","Warning","includes","shouldChangeColor","shouldShowKeyboardHighlighting","borderColor","border","placeholderColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","$shouldShowKeyboardHighlighting","$color","$placeholderWidth","disabled","onClick","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","tabIndex","role","icons","wrong","$isInline","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\ninterface Color {\n    placeholder?: CSSProperties['color'];\n    border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n    /**\n     * If set and the input is disabled, the input will display a tooltip with this message.\n     */\n    disabledHint?: string;\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * Colors for different parts of the input. You can set the color of the placeholder and the border color.\n     */\n    color?: Color;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            color,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            disabledHint,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        const handleClearIconKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n            (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    handleClearIconClick();\n                    inputRef.current?.focus();\n                }\n            },\n            [handleClearIconClick],\n        );\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let internalColor: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            internalColor = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting && !isDisabled,\n        );\n\n        const borderColor = color?.border;\n        const placeholderColor = color?.placeholder;\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1, top: -1.5 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        const inputElement = useMemo(\n            () => (\n                <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                    <StyledInputContentWrapper\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $backgroundColor={backgroundColor}\n                        $isInvalid={isInvalid}\n                        $shouldRoundRightCorners={shouldShowBorder}\n                        $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        $size={size}\n                        $borderColor={borderColor}\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    >\n                        {leftElement && (\n                            <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n                        )}\n                        <StyledInputContent\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        >\n                            <StyledInputField\n                                $color={internalColor}\n                                $placeholderWidth={placeholderWidth}\n                                id={id}\n                                disabled={isDisabled}\n                                onBlur={onBlur}\n                                onChange={handleInputFieldChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                }}\n                                onPaste={onPaste}\n                                ref={inputRef}\n                                type={type}\n                                value={value}\n                                autoFocus={shouldUseAutoFocus}\n                                inputMode={inputMode}\n                                autoComplete={autoComplete}\n                                $isInvalid={isInvalid}\n                                $shouldShowCenteredContent={shouldShowCenteredContent}\n                            />\n                            <StyledMotionInputLabelWrapper\n                                animate={\n                                    shouldPreventPlaceholderAnimation\n                                        ? {\n                                              opacity: hasValue ? 0 : 1,\n                                          }\n                                        : {\n                                              fontSize:\n                                                  hasValue &&\n                                                  !shouldShowOnlyBottomBorder &&\n                                                  !shouldRemainPlaceholder\n                                                      ? '9px'\n                                                      : `${Number(theme.fontSize)}px`,\n                                          }\n                                }\n                                initial={false}\n                                layout\n                                ref={placeholderRef}\n                                style={{ ...labelPosition }}\n                                transition={{\n                                    type: 'tween',\n                                    duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                                }}\n                            >\n                                <StyledInputLabel $color={placeholderColor} $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledInputLabel>\n                            </StyledMotionInputLabelWrapper>\n                        </StyledInputContent>\n                        {shouldShowClearIcon && (\n                            <StyledMotionInputClearIcon\n                                $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                                $size={size}\n                                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                                animate={{ opacity: hasValue ? 1 : 0 }}\n                                initial={false}\n                                onClick={handleClearIconClick}\n                                onKeyDown={handleClearIconKeyDown}\n                                tabIndex={\n                                    shouldShowKeyboardHighlighting && hasValue && !isDisabled\n                                        ? 0\n                                        : -1\n                                }\n                                role={shouldShowKeyboardHighlighting ? 'button' : undefined}\n                                aria-hidden={!hasValue}\n                                transition={{ type: 'tween' }}\n                            >\n                                <Icon\n                                    icons={['fa fa-times']}\n                                    color={isInvalid ? theme.wrong : undefined}\n                                />\n                            </StyledMotionInputClearIcon>\n                        )}\n                        {rightElement && shouldShowBorder && (\n                            <StyledInputRightElement $isInline>\n                                {rightElement}\n                            </StyledInputRightElement>\n                        )}\n                    </StyledInputContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledInput>\n            ),\n            [\n                isDisabled,\n                shouldShowTransparentBackground,\n                backgroundColor,\n                isInvalid,\n                shouldShowBorder,\n                shouldShowOnlyBottomBorder,\n                size,\n                leftElement,\n                internalColor,\n                placeholderWidth,\n                id,\n                onBlur,\n                handleInputFieldChange,\n                onFocus,\n                onKeyDown,\n                onPaste,\n                type,\n                value,\n                shouldUseAutoFocus,\n                inputMode,\n                autoComplete,\n                shouldShowCenteredContent,\n                shouldPreventPlaceholderAnimation,\n                hasValue,\n                shouldRemainPlaceholder,\n                theme.fontSize,\n                theme.wrong,\n                labelPosition,\n                borderColor,\n                placeholderColor,\n                placeholder,\n                shouldShowClearIcon,\n                handleClearIconClick,\n                handleClearIconKeyDown,\n                rightElement,\n                shouldEnableKeyboardHighlighting,\n                shouldShowKeyboardHighlighting,\n            ],\n        );\n\n        if (isDisabled && typeof disabledHint === 'string') {\n            return (\n                <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n                    {inputElement}\n                </Tooltip>\n            );\n        }\n\n        return inputElement;\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,UAAU,EAKVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,WAAW,QAAQ,sCAAsC;AAElE,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,WAAW,EACXC,kBAAkB,EAClBC,yBAAyB,EACzBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,EAChBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,6BAA6B,QAC1B,gBAAgB;AACvB,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SAASC,4BAA4B,QAAQ,0CAA0C;AAiCvF,WAAYC,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAqHrB,MAAMC,KAAK,gBAAG1B,UAAU,CACpB,CACI;EACI2B,WAAW;EACXC,SAAS;EACTC,UAAU;EACVC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,KAAK;EACLC,YAAY;EACZC,0BAA0B;EAC1BC,uBAAuB,GAAG,KAAK;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,yBAAyB,GAAG,KAAK;EACjCC,IAAI,GAAGjB,SAAS,CAACkB,MAAM;EACvBC,IAAI,GAAG,MAAM;EACbC,KAAK;EACLC,YAAY;EACZC,kBAAkB,GAAG,KAAK;EAC1BC,SAAS,GAAG,KAAK;EACjBC,iCAAiC,GAAG,KAAK;EACzCC,EAAE;EACFC,+BAA+B,GAAG,KAAK;EACvCC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGjD,QAAQ,CAAC,OAAOsC,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACY,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGnD,QAAQ,CAAC,CAAC,CAAC;EAE3D,MAAMoD,YAAY,GAAGzD,UAAU,CAACQ,WAAW,CAAC;EAE5C,MAAMkD,KAAK,GAAGpD,QAAQ,CAAC,CAAU;EAEjC,MAAMqD,QAAQ,GAAGvD,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMwD,cAAc,GAAGxD,MAAM,CAAmB,IAAI,CAAC;EAErDgB,gBAAgB,CAACuC,QAAQ,CAAC;EAE1B,MAAME,eAAe,GAAGtD,cAAc,CAACqD,cAAc,CAAC;EAEtD3D,SAAS,CAAC,MAAM;IACZ,IAAI4D,eAAe,IAAIzB,0BAA0B,EAAE;MAC/CoB,mBAAmB,CAACK,eAAe,CAACC,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACD,eAAe,EAAEzB,0BAA0B,CAAC,CAAC;EAEjD,MAAM2B,oBAAoB,GAAGhE,WAAW,CAAC,MAAM;IAC3C,IAAI4D,QAAQ,CAACK,OAAO,EAAE;MAClBL,QAAQ,CAACK,OAAO,CAACrB,KAAK,GAAG,EAAE;MAE3BW,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOzB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAEoC,MAAM,EAAEN,QAAQ,CAACK;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAACnC,QAAQ,CAAC,CAAC;EAEd,MAAMqC,sBAAsB,GAAGnE,WAAW,CACrCoE,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBN,oBAAoB,CAAC,CAAC;MACtBJ,QAAQ,CAACK,OAAO,EAAEM,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC,EACD,CAACP,oBAAoB,CACzB,CAAC;;EAED;EACA,MAAMQ,gBAAgB,GAAGpC,YAAY,EAAEqC,KAAK,EAAEC,KAAK,EAAEC,eAAe,KAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG7E,WAAW,CACrCoE,KAAoC,IAAK;IACtCb,WAAW,CAACa,KAAK,CAACF,MAAM,CAACtB,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACsC,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACtC,QAAQ,CACb,CAAC;EAED3B,mBAAmB,CACfkD,GAAG,EACH,OAAO;IACHkB,KAAK,EAAEA,CAAA,KAAMX,QAAQ,CAACK,OAAO,EAAEM,KAAK,CAAC,CAAC;IACtCO,IAAI,EAAEA,CAAA,KAAMlB,QAAQ,CAACK,OAAO,EAAEa,IAAI,CAAC;EACvC,CAAC,CAAC,EACF,EACJ,CAAC;EAED5E,SAAS,CAAC,MAAM;IACZ,IAAI,OAAO0C,KAAK,KAAK,QAAQ,EAAE;MAC3BW,WAAW,CAACX,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAI+B,eAA6D;EACjE,IAAII,aAAiD;EAErD,IAAI7B,+BAA+B,EAAE;IACjCyB,eAAe,GAAG,aAAa;EACnC,CAAC,MAAM,IACHjB,YAAY,CAACsB,eAAe,IAC5B,CAAC5D,eAAe,CAAC6D,KAAK,EAAE7D,eAAe,CAAC8D,OAAO,EAAE9D,eAAe,CAAC+D,OAAO,CAAC,CAACC,QAAQ,CAC9E1B,YAAY,CAACsB,eACjB,CAAC,EACH;IACEL,eAAe,GAAG,OAAO;IACzBI,aAAa,GAAG,MAAM;EAC1B,CAAC,MAAM,IAAIrB,YAAY,CAAC2B,iBAAiB,EAAE;IACvCV,eAAe,GAAGhB,KAAK,CAAC,KAAK,CAAC;EAClC;EAEA,MAAM2B,8BAA8B,GAAG/D,4BAA4B,CAC/D6B,gCAAgC,IAAI,CAACxB,UACzC,CAAC;EAED,MAAM2D,WAAW,GAAGpD,KAAK,EAAEqD,MAAM;EACjC,MAAMC,gBAAgB,GAAGtD,KAAK,EAAED,WAAW;EAE3C,MAAMwD,aAAa,GAAGtF,OAAO,CAAC,MAAM;IAChC,IAAIkD,QAAQ,IAAI,CAAChB,uBAAuB,IAAI,CAACU,iCAAiC,EAAE;MAC5E,OAAOX,0BAA0B,GAC3B;QAAEsD,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAEpD,IAAI,KAAKjB,SAAS,CAACsE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;QAAEH,KAAK,EAAE,CAAC;MAAE,CAAC;IACpE;IAEA,OAAO;MAAEI,IAAI,EAAE,CAAC,CAAC;MAAEH,GAAG,EAAE,CAAC;IAAI,CAAC;EAClC,CAAC,EAAE,CACCtC,QAAQ,EACRN,iCAAiC,EACjCV,uBAAuB,EACvBD,0BAA0B,EAC1BI,IAAI,CACP,CAAC;EAEF,MAAMuD,YAAY,GAAG5F,OAAO,CACxB,mBACIN,KAAA,CAAAmG,aAAA,CAACtF,WAAW;IAACuF,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAEvE;EAAW,gBAC/D9B,KAAA,CAAAmG,aAAA,CAACpF,yBAAyB;IACtBuF,gCAAgC,EAAElD,+BAAgC;IAClEmD,gBAAgB,EAAE1B,eAAgB;IAClC2B,UAAU,EAAEvD,SAAU;IACtBwD,wBAAwB,EAAE/B,gBAAiB;IAC3CgC,2BAA2B,EAAEnE,0BAA2B;IACxDoE,KAAK,EAAEhE,IAAK;IACZiE,YAAY,EAAEnB,WAAY;IAC1BoB,+BAA+B,EAAErB;EAA+B,GAE/D5D,WAAW,iBACR5B,KAAA,CAAAmG,aAAA,CAAClF,sBAAsB,QAAEW,WAAoC,CAChE,eACD5B,KAAA,CAAAmG,aAAA,CAACrF,kBAAkB;IACf4F,2BAA2B,EAAEnE;EAA2B,gBAExDvC,KAAA,CAAAmG,aAAA,CAACnF,gBAAgB;IACb8F,MAAM,EAAE7B,aAAc;IACtB8B,iBAAiB,EAAErD,gBAAiB;IACpCP,EAAE,EAAEA,EAAG;IACP6D,QAAQ,EAAElF,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAE+C,sBAAuB;IACjC9C,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrB+E,OAAO,EAAG3C,KAAK,IAAK;MAChBA,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBF,KAAK,CAAC4C,eAAe,CAAC,CAAC;IAC3B,CAAE;IACF/E,OAAO,EAAEA,OAAQ;IACjBoB,GAAG,EAAEO,QAAS;IACdjB,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbqE,SAAS,EAAEnE,kBAAmB;IAC9BnB,SAAS,EAAEA,SAAU;IACrBwB,YAAY,EAAEA,YAAa;IAC3BmD,UAAU,EAAEvD,SAAU;IACtBmE,0BAA0B,EAAE1E;EAA0B,CACzD,CAAC,eACF1C,KAAA,CAAAmG,aAAA,CAAC9E,6BAA6B;IAC1BgG,OAAO,EACHnE,iCAAiC,GAC3B;MACIoE,OAAO,EAAE9D,QAAQ,GAAG,CAAC,GAAG;IAC5B,CAAC,GACD;MACI+D,QAAQ,EACJ/D,QAAQ,IACR,CAACjB,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL,GAAGgF,MAAM,CAAC3D,KAAK,CAAC0D,QAAQ,CAAC;IACvC,CACT;IACDE,OAAO,EAAE,KAAM;IACfC,MAAM;IACNnE,GAAG,EAAEQ,cAAe;IACpBa,KAAK,EAAE;MAAE,GAAGgB;IAAc,CAAE;IAC5B+B,UAAU,EAAE;MACR9E,IAAI,EAAE,OAAO;MACb+E,QAAQ,EAAE1E,iCAAiC,GAAG,CAAC,GAAG;IACtD;EAAE,gBAEFlD,KAAA,CAAAmG,aAAA,CAACjF,gBAAgB;IAAC4F,MAAM,EAAEnB,gBAAiB;IAACa,UAAU,EAAEvD;EAAU,GAC7Db,WACa,CACS,CACf,CAAC,EACpBK,mBAAmB,iBAChBzC,KAAA,CAAAmG,aAAA,CAAC/E,0BAA0B;IACvBsF,2BAA2B,EAAEnE,0BAA2B;IACxDoE,KAAK,EAAEhE,IAAK;IACZkE,+BAA+B,EAAErB,8BAA+B;IAChE6B,OAAO,EAAE;MAAEC,OAAO,EAAE9D,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCiE,OAAO,EAAE,KAAM;IACfR,OAAO,EAAE/C,oBAAqB;IAC9BhC,SAAS,EAAEmC,sBAAuB;IAClCwD,QAAQ,EACJrC,8BAA8B,IAAIhC,QAAQ,IAAI,CAAC1B,UAAU,GACnD,CAAC,GACD,CAAC,CACV;IACDgG,IAAI,EAAEtC,8BAA8B,GAAG,QAAQ,GAAGV,SAAU;IAC5D,eAAa,CAACtB,QAAS;IACvBmE,UAAU,EAAE;MAAE9E,IAAI,EAAE;IAAQ;EAAE,gBAE9B7C,KAAA,CAAAmG,aAAA,CAACvF,IAAI;IACDmH,KAAK,EAAE,CAAC,aAAa,CAAE;IACvB1F,KAAK,EAAEY,SAAS,GAAGY,KAAK,CAACmE,KAAK,GAAGlD;EAAU,CAC9C,CACuB,CAC/B,EACAxC,YAAY,IAAIoC,gBAAgB,iBAC7B1E,KAAA,CAAAmG,aAAA,CAAChF,uBAAuB;IAAC8G,SAAS;EAAA,GAC7B3F,YACoB,CAEN,CAAC,EAC3BA,YAAY,IAAI,CAACoC,gBAAgB,iBAC9B1E,KAAA,CAAAmG,aAAA,CAAChF,uBAAuB,QAAEmB,YAAsC,CAE3D,CAChB,EACD,CACIR,UAAU,EACVsB,+BAA+B,EAC/ByB,eAAe,EACf5B,SAAS,EACTyB,gBAAgB,EAChBnC,0BAA0B,EAC1BI,IAAI,EACJf,WAAW,EACXqD,aAAa,EACbvB,gBAAgB,EAChBP,EAAE,EACFpB,MAAM,EACNgD,sBAAsB,EACtB9C,OAAO,EACPC,SAAS,EACTC,OAAO,EACPU,IAAI,EACJC,KAAK,EACLE,kBAAkB,EAClBnB,SAAS,EACTwB,YAAY,EACZX,yBAAyB,EACzBQ,iCAAiC,EACjCM,QAAQ,EACRhB,uBAAuB,EACvBqB,KAAK,CAAC0D,QAAQ,EACd1D,KAAK,CAACmE,KAAK,EACXpC,aAAa,EACbH,WAAW,EACXE,gBAAgB,EAChBvD,WAAW,EACXK,mBAAmB,EACnByB,oBAAoB,EACpBG,sBAAsB,EACtB/B,YAAY,EACZgB,gCAAgC,EAChCkC,8BAA8B,CAEtC,CAAC;EAED,IAAI1D,UAAU,IAAI,OAAOiB,YAAY,KAAK,QAAQ,EAAE;IAChD,oBACI/C,KAAA,CAAAmG,aAAA,CAAC3E,OAAO;MAAC0G,IAAI,EAAE;QAAEC,IAAI,EAAEpF;MAAa,CAAE;MAACqF,kBAAkB;IAAA,GACpDlC,YACI,CAAC;EAElB;EAEA,OAAOA,YAAY;AACvB,CACJ,CAAC;AAEDvE,KAAK,CAAC0G,WAAW,GAAG,OAAO;AAE3B,eAAe1G,KAAK","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","internalColor","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","border","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\ninterface Color {\n    placeholder?: CSSProperties['color'];\n    border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n    /**\n     * If set and the input is disabled, the input will display a tooltip with this message.\n     */\n    disabledHint?: string;\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * Colors for different parts of the input. You can set the color of the placeholder and the border color.\n     */\n    color?: Color;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            color,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            disabledHint,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let internalColor: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            internalColor = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1, top: -1.5 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        const inputElement = useMemo(\n            () => (\n                <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                    <StyledInputContentWrapper\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $backgroundColor={backgroundColor}\n                        $isInvalid={isInvalid}\n                        $shouldRoundRightCorners={shouldShowBorder}\n                        $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        $size={size}\n                        $borderColor={color?.border}\n                    >\n                        {leftElement && (\n                            <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n                        )}\n                        <StyledInputContent\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        >\n                            <StyledInputField\n                                $color={internalColor}\n                                $placeholderWidth={placeholderWidth}\n                                id={id}\n                                disabled={isDisabled}\n                                onBlur={onBlur}\n                                onChange={handleInputFieldChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                }}\n                                onPaste={onPaste}\n                                ref={inputRef}\n                                type={type}\n                                value={value}\n                                autoFocus={shouldUseAutoFocus}\n                                inputMode={inputMode}\n                                autoComplete={autoComplete}\n                                $isInvalid={isInvalid}\n                                $shouldShowCenteredContent={shouldShowCenteredContent}\n                            />\n                            <StyledMotionInputLabelWrapper\n                                animate={\n                                    shouldPreventPlaceholderAnimation\n                                        ? {\n                                              opacity: hasValue ? 0 : 1,\n                                          }\n                                        : {\n                                              fontSize:\n                                                  hasValue &&\n                                                  !shouldShowOnlyBottomBorder &&\n                                                  !shouldRemainPlaceholder\n                                                      ? '9px'\n                                                      : `${Number(theme.fontSize)}px`,\n                                          }\n                                }\n                                initial={false}\n                                layout\n                                ref={placeholderRef}\n                                style={{ ...labelPosition }}\n                                transition={{\n                                    type: 'tween',\n                                    duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                                }}\n                            >\n                                <StyledInputLabel\n                                    $color={color?.placeholder}\n                                    $isInvalid={isInvalid}\n                                >\n                                    {placeholder}\n                                </StyledInputLabel>\n                            </StyledMotionInputLabelWrapper>\n                        </StyledInputContent>\n                        {shouldShowClearIcon && (\n                            <StyledMotionInputClearIcon\n                                $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                                $size={size}\n                                animate={{ opacity: hasValue ? 1 : 0 }}\n                                initial={false}\n                                onClick={handleClearIconClick}\n                                transition={{ type: 'tween' }}\n                            >\n                                <Icon\n                                    icons={['fa fa-times']}\n                                    color={isInvalid ? theme.wrong : undefined}\n                                />\n                            </StyledMotionInputClearIcon>\n                        )}\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledInputContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledInput>\n            ),\n            [\n                isDisabled,\n                shouldShowTransparentBackground,\n                backgroundColor,\n                isInvalid,\n                shouldShowBorder,\n                shouldShowOnlyBottomBorder,\n                size,\n                leftElement,\n                internalColor,\n                placeholderWidth,\n                id,\n                onBlur,\n                handleInputFieldChange,\n                onFocus,\n                onKeyDown,\n                onPaste,\n                type,\n                value,\n                shouldUseAutoFocus,\n                inputMode,\n                autoComplete,\n                shouldShowCenteredContent,\n                shouldPreventPlaceholderAnimation,\n                hasValue,\n                shouldRemainPlaceholder,\n                theme.fontSize,\n                theme.wrong,\n                labelPosition,\n                color?.placeholder,\n                placeholder,\n                shouldShowClearIcon,\n                handleClearIconClick,\n                rightElement,\n            ],\n        );\n\n        if (isDisabled && typeof disabledHint === 'string') {\n            return (\n                <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n                    {inputElement}\n                </Tooltip>\n            );\n        }\n\n        return inputElement;\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledInput = styled.div`
     opacity: ${({
   $isDisabled
@@ -90,16 +89,6 @@ export const StyledInputContentWrapper = styled.div`
             border-right: none;
         `;
 }}
-
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            /* Show highlighting when the input field is focused */
-            &:has(input:focus-visible) {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
 `;
 export const StyledInputContent = styled.div`
     display: flex;
@@ -172,15 +161,6 @@ export const StyledMotionInputClearIcon = styled(motion.div)`
     width: ${({
   $size
 }) => $size === 'medium' ? '40px' : '30px'};
-
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
 `;
 export const StyledInputIconWrapper = styled.div`
     align-items: baseline;
@@ -190,24 +170,9 @@ export const StyledInputIconWrapper = styled.div`
     margin-left: 10px;
 `;
 export const StyledInputRightElement = styled.div`
-    flex: 0 0 auto;
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
     overflow: hidden;
-    min-width: 28px;
-    text-align: center;
-
-    ${({
-  $isInline
-}) => !$isInline && css`
-            border-bottom-right-radius: 3px;
-            border-top-right-radius: 3px;
-        `}
-
-    &:has(*:focus-visible) {
-        overflow: visible;
-    }
-
-    .beta-chayns-icon:focus-visible::after {
-        transform: translate(-50%, -50%) scale(0.78);
-    }
+    flex: 0 0 auto;
 `;
 //# sourceMappingURL=Input.styles.js.map