npm - @chayns-components/core - Versions diffs - 5.0.0-beta.695 → 5.0.0-beta.698 - Mend

@chayns-components/core 5.0.0-beta.695 → 5.0.0-beta.698

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

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

@@ -4,6 +4,11 @@ import { useElementSize } from '../../hooks/useElementSize';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import Icon from '../icon/Icon';
 import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
+export let InputSize = /*#__PURE__*/function (InputSize) {
+  InputSize["Small"] = "small";
+  InputSize["Medium"] = "medium";
+  return InputSize;
+}({});
 const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     leftElement,
@@ -19,6 +24,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     shouldRemainPlaceholder = false,
     shouldShowClearIcon = false,
     shouldShowCenteredContent = false,
+    size = InputSize.Medium,
     type = 'text',
     value,
     shouldUseAutoFocus = false,
@@ -72,14 +78,14 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
         right: 3,
         top: -1.5
       } : {
-        bottom: -10,
+        bottom: size === InputSize.Small ? -4 : -10,
         right: -6
       };
     }
     return {
       left: -1
     };
-  }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
+  }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
   return /*#__PURE__*/React.createElement(StyledInput, {
     className: "beta-chayns-input",
     $isDisabled: isDisabled
@@ -87,7 +93,8 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     $shouldChangeColor: shouldChangeColor,
     $isInvalid: isInvalid,
     $shouldRoundRightCorners: shouldShowBorder,
-    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size
   }, leftElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, leftElement), /*#__PURE__*/React.createElement(StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/React.createElement(StyledInputField, {
@@ -123,6 +130,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size,
     animate: {
       opacity: hasValue ? 1 : 0
     },

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

	@@ -1 +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","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\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';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n 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 a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\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 If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n Input type set for 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 placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\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 const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\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 }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: -1 };\n }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
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","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\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';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n 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 a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\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 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 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 placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\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 const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\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 }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

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

@@ -40,19 +40,29 @@ export const StyledInputContentWrapper = styled.div`
     ${_ref5 => {
   let {
-    $shouldShowOnlyBottomBorder
+    $size
   } = _ref5;
-  return !$shouldShowOnlyBottomBorder && css`
-            min-height: 42px;
+  return $size === 'small' && css`
+            height: 32px;
         `;
 }}
     ${_ref6 => {
+  let {
+    $shouldShowOnlyBottomBorder,
+    $size
+  } = _ref6;
+  return !$shouldShowOnlyBottomBorder && css`
+            min-height: ${$size === 'medium' ? '42px' : '32px'};
+        `;
+}}
+    ${_ref7 => {
   let {
     $shouldRoundRightCorners,
     $shouldShowOnlyBottomBorder,
     theme
-  } = _ref6;
+  } = _ref7;
   if ($shouldShowOnlyBottomBorder) {
     return css`
                 border-top: none;
@@ -78,10 +88,10 @@ export const StyledInputContent = styled.div`
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
-    margin: ${_ref7 => {
+    margin: ${_ref8 => {
   let {
     $shouldShowOnlyBottomBorder
-  } = _ref7;
+  } = _ref8;
   return !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0';
 }};
     position: relative;
@@ -89,26 +99,26 @@ export const StyledInputContent = styled.div`
 export const StyledInputField = styled.input`
     background: none;
     border: none;
-    color: ${_ref8 => {
+    color: ${_ref9 => {
   let {
     theme,
     $isInvalid
-  } = _ref8;
+  } = _ref9;
   return $isInvalid ? theme.wrong : theme.text;
 }};
     padding: 0;
-    width: ${_ref9 => {
+    width: ${_ref10 => {
   let {
     $placeholderWidth
-  } = _ref9;
+  } = _ref10;
   return `calc(100% - ${$placeholderWidth}px)`;
 }};
     line-height: 1em;
-    ${_ref10 => {
+    ${_ref11 => {
   let {
     $shouldShowCenteredContent
-  } = _ref10;
+  } = _ref11;
   return $shouldShowCenteredContent && css`
             text-align: center;
         `;
@@ -135,28 +145,38 @@ export const StyledInputLabel = styled.label`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: ${_ref11 => {
+    color: ${_ref12 => {
   let {
     theme,
     $isInvalid
-  } = _ref11;
+  } = _ref12;
   return $isInvalid ? theme.wrong : undefined;
 }};
 `;
 export const StyledMotionInputClearIcon = styled(motion.div)`
     align-items: center;
-    border-left: ${_ref12 => {
+    border-left: ${_ref13 => {
   let {
     $shouldShowOnlyBottomBorder
-  } = _ref12;
+  } = _ref13;
   return $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)';
 }};
     cursor: pointer;
     display: flex;
     flex: 0 0 auto;
-    height: 40px;
+    height: ${_ref14 => {
+  let {
+    $size
+  } = _ref14;
+  return $size === 'medium' ? '40px' : '30px';
+}};
     justify-content: center;
-    width: 40px;
+    width: ${_ref15 => {
+  let {
+    $size
+  } = _ref15;
+  return $size === 'medium' ? '40px' : '30px';
+}};
 `;
 export const StyledInputIconWrapper = styled.div`
     align-items: baseline;

package/lib/esm/components/input/Input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$~~shouldShowOnlyBottomBorder~~","_ref6","$shouldRoundRightCorners","StyledInputContent","~~_ref7~~","StyledInputField","input","~~_ref8~~","text","~~_ref9~~","$placeholderWidth","~~_ref10~~","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","~~_ref11~~","undefined","StyledMotionInputClearIcon","~~_ref12~~","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: 42px;\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAK~~/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,GAAqB;AACvD,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,CAAC;~~AASD~~,OAAO,MAAMC,yBAAyB,GAAGN,MAAM,CAACG,GAAmC;AACnF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAmD,CAAC,GAAAF,KAAA;EAAA,OAC9EC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA,UAAUG,KAAA;EAAA,IAAC;IAAEH,KAAK;IAAEI;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpDC,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,0BAA0B;AAAA;AACjE,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,KAAK,CAAC;AAAA;AACxE;AACA;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;~~EAA4B~~,CAAC,GAAAD,KAAA;EAAA,~~OAC9B~~,~~CAACC~~,~~2BAA2B~~,~~IAC5Bf~~,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMgB,KAAA,IAAsE;EAAA,IAArE;IAAEC,wBAAwB;IAAEF,2BAA2B;~~IAAER~~;EAAM,CAAC,~~GAAAS~~,KAAA;EAC/D,IAAID,2BAA2B,EAAE;IAC7B,~~OAAOf~~,GAAG;AACtB;AACA;AACA;AACA;AACA,gCAAgCO,KAAK,CAAC,KAAK,CAAC;AAC5C,aAAa;EACL;EAEA,~~IAAIU~~,wBAAwB,EAAE;IAC1B,~~OAAOjB~~,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,~~MAAMkB~~,kBAAkB,~~GAAGnB~~,MAAM,CAACG,GAA4B;AACrE;AACA;AACA;AACA,~~cAAciB~~,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OACtC,CAACJ,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAAA;AAC3D;AACA,CAAC;AAQD,OAAO,MAAMK,gBAAgB,~~GAAGrB~~,MAAM,~~CAACsB~~,KAA4B;AACnE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;~~IAAEf~~,KAAK;IAAEI;EAAkC,CAAC,~~GAAAW~~,KAAA;EAAA,~~OAClDX~~,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,~~CAACgB~~,IAAI;AAAA;AAC7C;AACA,aAAaC,~~KAAA~~;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,~~KAAA~~;EAAA,OAAK,eAAeC,iBAAiB,KAAK;AAAA;AAC7E;AACA;AACA,MAAMC,MAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,MAAA;EAAA,OAC7BC,0BAA0B,~~IAC1B3B~~,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,~~MAAM4B~~,6BAA6B,~~GAAG7B~~,MAAM,CAACD,MAAM,~~CAAC+B~~,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,~~GAAG/B~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC1D;AACA,CAAC;AAID,OAAO,~~MAAM6B~~,gBAAgB,~~GAAGhC~~,MAAM,~~CAAC8B~~,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,MAAA;EAAA,IAAC;~~IAAEzB~~,KAAK;IAAEI;EAAkC,CAAC,~~GAAAqB~~,MAAA;EAAA,~~OAClDrB~~,UAAU,GAAGJ,KAAK,CAACK,KAAK,~~GAAGqB~~,SAAS;AAAA;AAC5C,CAAC;~~AAID~~,OAAO,MAAMC,0BAA0B,~~GAAGnC~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC7F;AACA,~~mBAAmBiC~~,MAAA;EAAA,IAAC;IAAEpB;EAA4B,CAAC,GAAAoB,MAAA;EAAA,OAC3CpB,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AAAA;AACnF;AACA;AACA;AACA;~~AACA~~;~~AACA~~;AACA,CAAC;AAED,OAAO,~~MAAMqB~~,sBAAsB,~~GAAGrC~~,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMmC~~,uBAAuB,~~GAAGtC~~,MAAM,CAACG,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$size","_ref6","$shouldShowOnlyBottomBorder","_ref7","$shouldRoundRightCorners","StyledInputContent","_ref8","StyledInputField","input","_ref9","text","_ref10","$placeholderWidth","_ref11","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref12","undefined","StyledMotionInputClearIcon","_ref13","_ref14","_ref15","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 import Icon from '../icon/Icon';
-import Input from '../input/Input';
+import Input, { InputSize } from '../input/Input';
 import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
 const SearchInput = _ref => {
   let {
@@ -12,6 +12,7 @@ const SearchInput = _ref => {
     onChange,
     onKeyDown,
     placeholder,
+    size = InputSize.Medium,
     value
   } = _ref;
   const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
@@ -33,7 +34,8 @@ const SearchInput = _ref => {
     }
   }, [isActive]);
   return /*#__PURE__*/React.createElement(StyledSearchInput, {
-    className: "beta-chayns-search-input"
+    className: "beta-chayns-search-input",
+    $size: size
   }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
@@ -85,6 +87,7 @@ const SearchInput = _ref => {
     placeholder: placeholder,
     ref: inputRef,
     shouldShowClearIcon: true,
+    size: size,
     value: value
   }))));
 };

package/lib/esm/components/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","useTheme","Icon","Input","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","initial","animate","opacity","exit","position","key","transition","duration","color","icons","onClick","~~size","~~width","leftElement","text","ref","shouldShowClearIcon","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\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 a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\">\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n onClick={\n isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n }\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAIRC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,KAAK,~~MAAoB~~,gBAAgB;~~AAChD~~,SACIC,qCAAqC,EACrCC,kCAAkC,EAClCC,yCAAyC,EACzCC,iBAAiB,QACd,sBAAsB;~~AAiC7B~~,MAAMC,WAAiC,GAAGC,IAAA,~~IAQpC~~;EAAA,~~IARqC~~;IACvCC,SAAS;IACTC,QAAQ;IACRC,cAAc;IACdC,QAAQ;IACRC,SAAS;IACTC,WAAW;IACXC;EACJ,CAAC,~~GAAAP~~,IAAA;EACG,MAAM,~~CAACQ~~,mBAAmB,EAAEC,sBAAsB,CAAC,~~GAAGlB~~,QAAQ,~~CAC1DW~~,QAAQ,KAAK,~~OAAOK~~,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACG,IAAI,CAAC,CAAC,KAAK,EAAE,CACjE,CAAC;EAED,MAAMC,QAAQ,~~GAAGrB~~,MAAM,CAAW,IAAI,CAAC;EAEvC,~~MAAMsB~~,KAAK,~~GAAGpB~~,QAAQ,CAAC,CAAU;EAEjC,~~MAAMqB~~,mBAAmB,~~GAAGzB~~,WAAW,CAAC,~~MAAMqB~~,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMK,qBAAqB,~~GAAG1B~~,WAAW,CAAC,~~MAAMqB~~,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;~~EAEjFpB~~,SAAS,CAAC,MAAM;IACZ,IAAI,~~OAAOc~~,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,~~CAACK~~,mBAAmB,CAAC;IACvC;IAEA,IAAIA,mBAAmB,EAAE;MACrBG,QAAQ,CAACI,OAAO,EAAEC,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACR,mBAAmB,~~EAAEL~~,cAAc,CAAC,CAAC;~~EAEzCd~~,SAAS,CAAC,MAAM;IACZ,IAAI,~~OAAOa~~,QAAQ,KAAK,SAAS,EAAE;MAC/BO,sBAAsB,~~CAACP~~,QAAQ,CAAC;IACpC;EACJ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,~~oBACIf~~,KAAA,~~CAAA8B~~,aAAA,~~CAACnB~~,iBAAiB;~~IAACoB~~,SAAS,EAAC;~~EAA0B~~,~~gBACnD/B~~,KAAA,~~CAAA8B~~,aAAA,~~CAACrB~~,kCAAkC,qBAC/BT,KAAA,~~CAAA8B~~,aAAA,~~CAAC/B~~,eAAe;~~IAACiC~~,OAAO,EAAE;EAAM,~~gBAC5BhC~~,KAAA,~~CAAA8B~~,aAAA,~~CAACpB~~,yCAAyC;~~IACtCuB~~,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,IAAI,EAAE;MAAED,OAAO,EAAE,CAAC;MAAEE,QAAQ,EAAE;IAAW,CAAE;IAC3CJ,OAAO,EAAE;MAAEE,OAAO,EAAE;IAAE,CAAE;IACxBG,GAAG,~~EAAEhB~~,mBAAmB,GAAG,UAAU,GAAG,YAAa;~~IACrDiB~~,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,~~gBAE9BvC~~,KAAA,~~CAAA8B~~,aAAA,~~CAACxB~~,IAAI;~~IACDkC~~,KAAK,~~EAAE1B~~,SAAU;~~IACjB2B~~,KAAK,~~EAAEpB~~,mBAAmB,GAAG,CAAC,kBAAkB,CAAC,GAAG,CAAC,cAAc,CAAE;~~IACrEqB~~,OAAO,~~EACHrB~~,mBAAmB,GAAGK,mBAAmB,GAAGC,qBAC/C;~~IACDgB~~,IAAI,EAAE;EAAG,CACZ,CACsC,CAC9B,CACe,CAAC,~~eACrC3C~~,KAAA,~~CAAA8B~~,aAAA,~~CAAC/B~~,eAAe;~~IAACiC~~,OAAO,EAAE;EAAM,~~GAC3BX~~,mBAAmB,~~iBAChBrB~~,KAAA,~~CAAA8B~~,aAAA,~~CAACtB~~,qCAAqC;~~IAClCyB~~,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;~~MAAEU~~,KAAK,EAAE;IAAO,CAAE;~~IACvCT~~,IAAI,EAAE;MAAED,OAAO,EAAE,CAAC;~~MAAEU~~,KAAK,EAAE;IAAE,CAAE;IAC/BZ,OAAO,EAAE;MAAEE,OAAO,EAAE,CAAC;~~MAAEU~~,KAAK,EAAE;IAAE,CAAE;~~IAClCP~~,GAAG,EAAC,2BAA2B;IAC/BC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,~~gBAE9BvC~~,KAAA,~~CAAA8B~~,aAAA,~~CAACvB~~,KAAK;~~IACFsC~~,WAAW,~~eAAE7C~~,KAAA,~~CAAA8B~~,aAAA,~~CAACxB~~,IAAI;~~MAACkC~~,KAAK,~~EAAEf~~,KAAK,CAACqB,IAAK;~~MAACL~~,KAAK,EAAE,CAAC,eAAe;IAAE,CAAE,CAAE;~~IACnExB~~,QAAQ,EAAEA,QAAS;IACnBC,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;~~IACzB4B~~,GAAG,EAAEvB,QAAS;IACdwB,mBAAmB;~~IACnB5B~~,KAAK,EAAEA;EAAM,CAChB,CACkC,CAE9B,CACF,CAAC;AAE5B,CAAC;~~AAEDR~~,WAAW,~~CAACqC~~,WAAW,GAAG,aAAa;AAEvC,~~eAAerC~~,WAAW","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","useTheme","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","exit","position","key","transition","duration","color","icons","onClick","width","leftElement","text","ref","shouldShowClearIcon","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\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 a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n onClick={\n isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n }\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.styles.js CHANGED Viewed

@@ -4,7 +4,12 @@ export const StyledSearchInput = styled.div`
     align-items: center;
     display: flex;
     gap: 8px;
-    height: 42px;
+    height: ${_ref => {
+  let {
+    $size
+  } = _ref;
+  return $size === 'medium' ? '42px' : '32px';
+}};
     justify-content: flex-end;
     width: 100%;
 `;

package/lib/esm/components/search-input/SearchInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchInput = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n height: 42px;\n justify-content: flex-end;\n width: 100%;\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n width: 18px;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;~~AAGtC~~,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,~~GAAG~~;~~AAC3C~~;AACA;AACA;AACA;~~AACA~~;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,~~GAAGH~~,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA,CAAC;AAED,OAAO,~~MAAME~~,kCAAkC,~~GAAGJ~~,MAAM,CAACE,GAAG;AAC5D;AACA,CAAC;AAED,OAAO,~~MAAMG~~,yCAAyC,~~GAAGL~~,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB,EAAE","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = {\n $size: InputSize;\n};\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n align-items: center;\n display: flex;\n gap: 8px;\n height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n justify-content: flex-end;\n width: 100%;\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n width: 18px;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACnE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGL,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA,CAAC;AAED,OAAO,MAAMI,kCAAkC,GAAGN,MAAM,CAACE,GAAG;AAC5D;AACA,CAAC;AAED,OAAO,MAAMK,yCAAyC,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB,EAAE","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.styles.js CHANGED Viewed

@@ -35,6 +35,7 @@ export const StyledTextAreaInput = styled.textarea`
   } = _ref3;
   return theme.text;
 }};
+    background: none;
     border: none;
     resize: none;
     overflow-y: ${_ref4 => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","_ref","$isDisabled","StyledTextAreaContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","StyledTextAreaContent","StyledTextAreaInput","textarea","_ref3","text","_ref4","$isOverflowing","_ref5","$maxHeight","_ref6","$minHeight","_ref7","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref8","_ref9"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{ $shouldChangeColor: boolean }>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $isOverflowing: boolean;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n color: ${({ theme }: StyledTextAreaLabelProps) => theme['006']};\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGN,MAAM,CAACG,GAAsC;AACzF,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAsD,CAAC,GAAAF,KAAA;EAAA,OACjFC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,qBAAqB,GAAGX,MAAM,CAACG,GAAG;AAC/C;AACA;AACA,CAAC;AASD,OAAO,MAAMS,mBAAmB,GAAGZ,MAAM,CAACa,QAAkC;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAgC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AAChE;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAChF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEf;EAAgC,CAAC,GAAAc,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBtB,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMgB,0BAA0B,GAAGxB,MAAM,CAACyB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAG1B,MAAM,CAACyB,KAA+B;AACzE,kBAAkBE,KAAA;EAAA,IAAC;IAAEnB;EAAgC,CAAC,GAAAmB,KAAA;EAAA,OAAKnB,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,aAAaoB,KAAA;EAAA,IAAC;IAAEpB;EAAgC,CAAC,GAAAoB,KAAA;EAAA,OAAKpB,KAAK,CAAC,KAAK,CAAC;AAAA;AAClE,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","_ref","$isDisabled","StyledTextAreaContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","StyledTextAreaContent","StyledTextAreaInput","textarea","_ref3","text","_ref4","$isOverflowing","_ref5","$maxHeight","_ref6","$minHeight","_ref7","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref8","_ref9"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{ $shouldChangeColor: boolean }>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $isOverflowing: boolean;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n background: none;\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n color: ${({ theme }: StyledTextAreaLabelProps) => theme['006']};\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGN,MAAM,CAACG,GAAsC;AACzF,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAsD,CAAC,GAAAF,KAAA;EAAA,OACjFC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,qBAAqB,GAAGX,MAAM,CAACG,GAAG;AAC/C;AACA;AACA,CAAC;AASD,OAAO,MAAMS,mBAAmB,GAAGZ,MAAM,CAACa,QAAkC;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAgC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AAChE;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAChF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEf;EAAgC,CAAC,GAAAc,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBtB,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMgB,0BAA0B,GAAGxB,MAAM,CAACyB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAG1B,MAAM,CAACyB,KAA+B;AACzE,kBAAkBE,KAAA;EAAA,IAAC;IAAEnB;EAAgC,CAAC,GAAAmB,KAAA;EAAA,OAAKnB,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,aAAaoB,KAAA;EAAA,IAAC;IAAEpB;EAAgC,CAAC,GAAAoB,KAAA;EAAA,OAAKpB,KAAK,CAAC,KAAK,CAAC;AAAA;AAClE,CAAC","ignoreList":[]}

package/lib/esm/utils/isTobitEmployee.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { UacServiceClient } from '@chayns/uac-service';
-import { getAccessToken, getSite, getUser } from 'chayns-api';
+import { getAccessToken, getLanguage, getSite, getUser } from 'chayns-api';
 const client = new UacServiceClient({
   getToken: async () => (await getAccessToken()).accessToken || '',
   getDefaultSiteId: () => getSite().id,
-  getDefaultPersonId: () => getUser()?.personId || ''
+  getDefaultPersonId: () => getUser()?.personId || '',
+  getLanguage: () => getLanguage().active
 });
 export const isTobitEmployee = async () => {
   const siteInfos = await client.getMembershipSites({

package/lib/esm/utils/isTobitEmployee.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"isTobitEmployee.js","names":["UacServiceClient","getAccessToken","getSite","getUser","client","getToken","accessToken","getDefaultSiteId","id","getDefaultPersonId","personId","isTobitEmployee","siteInfos","getMembershipSites","groupId","isEmployee","forEach","_ref","siteId"],"sources":["../../../src/utils/isTobitEmployee.ts"],"sourcesContent":["import { UacServiceClient } from '@chayns/uac-service';\nimport { getAccessToken, getSite, getUser } from 'chayns-api';\n\nconst client = new UacServiceClient({\n getToken: async () => (await getAccessToken()).accessToken \|\| '',\n getDefaultSiteId: () => getSite().id,\n getDefaultPersonId: () => getUser()?.personId \|\| '',\n});\n\nexport const isTobitEmployee = async () => {\n const siteInfos = await client.getMembershipSites({ groupId: 8255 });\n\n let isEmployee = false;\n\n siteInfos.forEach(({ siteId }) => {\n isEmployee = siteId === '60038-22141';\n });\n\n return isEmployee;\n};\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,cAAc,EAAEC,OAAO,EAAEC,OAAO,QAAQ,YAAY;~~AAE7D~~,MAAMC,MAAM,GAAG,~~IAAIJ~~,gBAAgB,CAAC;~~EAChCK~~,QAAQ,EAAE,MAAAA,CAAA,KAAY,CAAC,~~MAAMJ~~,cAAc,CAAC,CAAC,~~EAAEK~~,WAAW,IAAI,EAAE;EAChEC,gBAAgB,EAAEA,CAAA,KAAML,OAAO,CAAC,CAAC,CAACM,EAAE;EACpCC,kBAAkB,EAAEA,CAAA,KAAMN,OAAO,CAAC,CAAC,EAAEO,QAAQ,IAAI;~~AACrD~~,CAAC,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,MAAMC,SAAS,GAAG,~~MAAMR~~,MAAM,~~CAACS~~,kBAAkB,CAAC;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC;EAEpE,IAAIC,UAAU,GAAG,KAAK;EAEtBH,SAAS,CAACI,OAAO,CAACC,IAAA,IAAgB;IAAA,IAAf;MAAEC;IAAO,CAAC,GAAAD,IAAA;IACzBF,UAAU,GAAGG,MAAM,KAAK,aAAa;EACzC,CAAC,CAAC;EAEF,OAAOH,UAAU;AACrB,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"isTobitEmployee.js","names":["UacServiceClient","getAccessToken","getLanguage","getSite","getUser","client","getToken","accessToken","getDefaultSiteId","id","getDefaultPersonId","personId","active","isTobitEmployee","siteInfos","getMembershipSites","groupId","isEmployee","forEach","_ref","siteId"],"sources":["../../../src/utils/isTobitEmployee.ts"],"sourcesContent":["import { UacServiceClient } from '@chayns/uac-service';\nimport { getAccessToken, getLanguage, getSite, getUser } from 'chayns-api';\n\nconst client = new UacServiceClient({\n getToken: async () => (await getAccessToken()).accessToken \|\| '',\n getDefaultSiteId: () => getSite().id,\n getDefaultPersonId: () => getUser()?.personId \|\| '',\n getLanguage: () => getLanguage().active,\n});\n\nexport const isTobitEmployee = async () => {\n const siteInfos = await client.getMembershipSites({ groupId: 8255 });\n\n let isEmployee = false;\n\n siteInfos.forEach(({ siteId }) => {\n isEmployee = siteId === '60038-22141';\n });\n\n return isEmployee;\n};\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,cAAc,EAAEC,WAAW,EAAEC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAE1E,MAAMC,MAAM,GAAG,IAAIL,gBAAgB,CAAC;EAChCM,QAAQ,EAAE,MAAAA,CAAA,KAAY,CAAC,MAAML,cAAc,CAAC,CAAC,EAAEM,WAAW,IAAI,EAAE;EAChEC,gBAAgB,EAAEA,CAAA,KAAML,OAAO,CAAC,CAAC,CAACM,EAAE;EACpCC,kBAAkB,EAAEA,CAAA,KAAMN,OAAO,CAAC,CAAC,EAAEO,QAAQ,IAAI,EAAE;EACnDT,WAAW,EAAEA,CAAA,KAAMA,WAAW,CAAC,CAAC,CAACU;AACrC,CAAC,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,MAAMC,SAAS,GAAG,MAAMT,MAAM,CAACU,kBAAkB,CAAC;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC;EAEpE,IAAIC,UAAU,GAAG,KAAK;EAEtBH,SAAS,CAACI,OAAO,CAACC,IAAA,IAAgB;IAAA,IAAf;MAAEC;IAAO,CAAC,GAAAD,IAAA;IACzBF,UAAU,GAAGG,MAAM,KAAK,aAAa;EACzC,CAAC,CAAC;EAEF,OAAOH,UAAU;AACrB,CAAC","ignoreList":[]}

package/lib/types/components/accordion/Accordion.d.ts CHANGED Viewed

@@ -74,10 +74,6 @@ export type AccordionProps = {
      * Content to be displayed on the right side in the head of the Accordion
      */
     rightElement?: ReactNode;
-    /**
-     * Icon to be displayed on the right side in the search input
-     */
-    searchIcon?: string[];
     /**
      * The placeholder to be used for the search
      */

package/lib/types/components/accordion/accordion-head/AccordionHead.d.ts CHANGED Viewed

@@ -9,7 +9,6 @@ export type AccordionHeadProps = {
     onClick: MouseEventHandler<HTMLDivElement>;
     onSearchChange?: ChangeEventHandler<HTMLInputElement>;
     rightElement?: ReactNode;
-    searchIcon?: string[];
     searchPlaceholder?: string;
     searchValue?: string;
     shouldRotateIcon?: boolean;