npm - @chayns-components/core - Versions diffs - 5.0.0-beta.1000 → 5.0.0-beta.1003 - Mend

@chayns-components/core 5.0.0-beta.1000 → 5.0.0-beta.1003

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 (14) hide show

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Input = _interopRequireWildcard(require("../input/Input"));
 var _SearchInput = require("./SearchInput.styles");
@@ -24,6 +25,7 @@ const SearchInput = ({
 }) => {
   const [isSearchInputActive, setIsSearchInputActive] = (0, _react.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = (0, _react.useRef)(null);
+  const theme = (0, _styledComponents.useTheme)();
   const handleBackIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(true), []);
   (0, _react.useEffect)(() => {
@@ -43,7 +45,30 @@ const SearchInput = ({
   return /*#__PURE__*/_react.default.createElement(_SearchInput.StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    },
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
     animate: {
@@ -63,6 +88,10 @@ const SearchInput = ({
       duration: 0.3
     }
   }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    leftElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
     onChange: onChange,
     onKeyDown: onKeyDown,
     placeholder: placeholder,
@@ -70,27 +99,6 @@ const SearchInput = ({
     shouldShowClearIcon: true,
     size: size,
     value: value
-  })), /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
-    animate: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0,
-      position: 'absolute'
-    },
-    initial: {
-      opacity: 0
-    },
-    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
-    transition: {
-      duration: 0.3
-    },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    color: iconColor,
-    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
   }))));
 };
 SearchInput.displayName = 'SearchInput';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","onClick","displayName","_default","exports"],"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 Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\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 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 <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 onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\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 id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","key","transition","duration","id","color","icons","onClick","StyledMotionSearchInputContentWrapper","width","leftElement","text","ref","shouldShowClearIcon","displayName","_default","exports"],"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 id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\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/cjs/components/search-input/SearchInput.styles.js CHANGED Viewed

@@ -3,33 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputContentWrapper = void 0;
+exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
-    display: flex;
     align-items: center;
-    justify-content: center;
-    aspect-ratio: 1;
-    border-radius: 3px;
+    display: flex;
+    gap: 8px;
     height: ${({
   $size
 }) => $size === 'medium' ? '42px' : '32px'};
-    &:hover {
-        background-color: ${({
-  theme
-}) => theme[103]};
-    }
+    justify-content: flex-end;
+    width: 100%;
 `;
 const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
-    position: absolute;
-    top: 0;
-    right: 0;
     overflow: hidden;
 `;
+const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
+    width: 18px;
+`;
 const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
     display: flex;
 `;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","~~theme~~","~~StyledMotionSearchInputContentWrapper~~","~~motion~~","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, ~~WithTheme~~ } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = ~~WithTheme<~~{\n $size: InputSize;\n}~~>;\~~n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n ~~display: flex;\n~~ align-items: center;\n ~~justify-content~~: ~~center~~;\n ~~aspect-ratio~~: 1;\n ~~border-radius: 3px;\n\n~~ height: ${({ $size }~~: StyledSearchInputProps~~) => ($size === 'medium' ? '42px' : '32px')};\n\n ~~&:hover {\n background~~-~~color~~: ~~${({ theme }: StyledSearchInputProps) => theme[103]}~~;\n }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n ~~position~~: ~~absolute~~;\n ~~top: 0;\~~n ~~right:~~ ~~0;\~~n ~~overflow~~: ~~hidden~~;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA~~;AACA;AACA;AACA~~,cAAc,CAAC;EAAEC;~~AAA8B~~,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;~~AAC3F~~;AACA;AACA,~~4BAA4B,~~CAAC;~~EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAAC,GAAG,CAAC;AAC7E;AACA,CAAC;~~AAEM,MAAMC,qCAAqC,~~GAAAL~~,OAAA,~~CAAAK~~,qCAAA,GAAG,~~IAAAJ~~,yBAAM,~~EAACK~~,oBAAM,~~CAACJ~~,GAAG,CAAqB;AAC3F;AACA;~~AACA~~;~~AACA~~;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,~~EAACK~~,oBAAM,~~CAACJ~~,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","StyledMotionSearchInputContentWrapper","motion","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 display: flex;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAJ,OAAA,CAAAI,qCAAA,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAqB;AAC3F;AACA,CAAC;AAEM,MAAMI,kCAAkC,GAAAN,OAAA,CAAAM,kCAAA,GAAGL,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}

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

@@ -31,6 +31,7 @@ const StyledTextAreaContentWrapper = exports.StyledTextAreaContentWrapper = _sty
     display: flex;
 `;
 const StyledTextAreaContent = exports.StyledTextAreaContent = _styledComponents.default.div`
+    position: relative;
     display: flex;
     width: 100%;
 `;

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

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

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

@@ -1,8 +1,9 @@
 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, { InputSize } from '../input/Input';
-import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
 const SearchInput = _ref => {
   let {
     iconColor,
@@ -16,6 +17,7 @@ const SearchInput = _ref => {
   } = _ref;
   const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = useRef(null);
+  const theme = useTheme();
   const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
   useEffect(() => {
@@ -34,7 +36,30 @@ const SearchInput = _ref => {
   return /*#__PURE__*/React.createElement(StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size
-  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    },
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     animate: {
@@ -54,6 +79,10 @@ const SearchInput = _ref => {
       duration: 0.3
     }
   }, /*#__PURE__*/React.createElement(Input, {
+    leftElement: /*#__PURE__*/React.createElement(Icon, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
     onChange: onChange,
     onKeyDown: onKeyDown,
     placeholder: placeholder,
@@ -61,27 +90,6 @@ const SearchInput = _ref => {
     shouldShowClearIcon: true,
     size: size,
     value: value
-  })), /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
-    animate: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0,
-      position: 'absolute'
-    },
-    initial: {
-      opacity: 0
-    },
-    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
-    transition: {
-      duration: 0.3
-    },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    color: iconColor,
-    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
   }))));
 };
 SearchInput.displayName = 'SearchInput';

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","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","~~width~~","~~exit~~","key","transition","duration","~~ref~~","~~shouldShowClearIcon~~","~~position~~","id","~~color~~","~~icons~~","~~onClick~~","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 Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\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 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 <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 ~~onChange~~={~~onChange~~}\n ~~onKeyDown~~={~~onKeyDown~~}\n ~~placeholder~~={~~placeholder}~~\n ~~ref={inputRef}~~\n ~~shouldShowClearIcon~~\n size={~~size~~}\n ~~value={value}\n~~ />\n </~~StyledMotionSearchInputContentWrapper~~>\n )}\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 ~~id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n~~ >\n <~~Icon~~\n color={~~iconColor~~}\n icons={~~isSearchInputActive ?~~ ['fa fa-~~xmark'] : ['fa fa-~~search']}\n ~~onClick~~={~~isSearchInputActive ? handleBackIconClick : handleSearchIconClick~~}\n size={18}\n />\n </~~StyledMotionSearchInputIconWrapperContent~~>\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,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,KAAK,IAAcC,SAAS,QAAQ,gBAAgB;AAC3D,SACIC,qCAAqC,EACrCC,yCAAyC,EACzCC,iBAAiB,QACd,sBAAsB;AAqC7B,MAAMC,WAAiC,GAAGC,IAAA,IASpC;EAAA,IATqC;IACvCC,SAAS;IACTC,QAAQ;IACRC,cAAc;IACdC,QAAQ;IACRC,SAAS;IACTC,WAAW;IACXC,IAAI,~~GAAGZ~~,SAAS,~~CAACa~~,MAAM;IACvBC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,mBAAmB,EAAEC,sBAAsB,CAAC,~~GAAGnB~~,QAAQ,~~CAC1DU~~,QAAQ,KAAK,OAAOO,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACG,IAAI,CAAC,CAAC,KAAK,EAAE,CACjE,CAAC;EAED,MAAMC,QAAQ,~~GAAGtB~~,MAAM,CAAW,IAAI,CAAC;EAEvC,~~MAAMuB~~,mBAAmB,~~GAAGzB~~,WAAW,CAAC,~~MAAMsB~~,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAEhF,~~MAAMI~~,qBAAqB,~~GAAG1B~~,WAAW,CAAC,~~MAAMsB~~,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;~~EAEjFrB~~,SAAS,CAAC,MAAM;IACZ,IAAI,~~OAAOa~~,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACO,mBAAmB,CAAC;IACvC;IAEA,IAAIA,mBAAmB,EAAE;MACrBG,QAAQ,~~CAACG~~,OAAO,EAAEC,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC,EAAE,~~CAACP~~,mBAAmB,EAAEP,cAAc,CAAC,CAAC;~~EAEzCb~~,SAAS,CAAC,MAAM;IACZ,IAAI,~~OAAOY~~,QAAQ,KAAK,SAAS,EAAE;MAC/BS,sBAAsB,CAACT,QAAQ,CAAC;IACpC;EACJ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,~~oBACId~~,KAAA,~~CAAA8B~~,aAAA,~~CAACpB~~,iBAAiB;~~IAACqB~~,SAAS,EAAC,0BAA0B;IAACC,KAAK,~~EAAEb~~;EAAK,~~gBAChEnB~~,KAAA,~~CAAA8B~~,aAAA,~~CAAC~~/B,eAAe;~~IAACkC~~,OAAO,EAAE;EAAM,~~GAC3BX~~,~~mBAAmB,iBAChBtB,~~KAAA,~~CAAA8B~~,aAAA,CAACtB,~~qCAAqC~~;~~IAClC0B~~,OAAO,EAAE;MAAEC,OAAO,EAAE~~,CAAC~~;~~MAAEC~~,~~KAAK,EAAE;IAAO,~~CAAE;~~IACvCC~~,IAAI,EAAE;~~MAAEF~~,OAAO,EAAE,CAAC;~~MAAEC~~,~~KAAK~~,EAAE;~~IAAE~~,CAAE;~~IAC/BH~~,OAAO,EAAE;MAAEE,OAAO,EAAE~~,CAAC~~;~~MAAEC,KAAK,EAAE;~~IAAE,CAAE;~~IAClCE~~,GAAG,~~EAAC~~,~~2BAA2B~~;~~IAC/BC~~,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,~~gBAE9BxC~~,KAAA,~~CAAA8B~~,aAAA,~~CAACxB~~,~~KAAK~~;~~IACFU~~,~~QAAQ~~,~~EAAEA~~,~~QAAS~~;~~IACnBC~~,~~SAAS~~,~~EAAEA~~,~~SAAU;IACrBC~~,~~WAAW~~,~~EAAEA~~,~~WAAY;IACzBuB~~,GAAG,~~EAAEhB~~,~~QAAS~~;~~IACdiB~~,mBAAmB;~~IACnBvB~~,IAAI,~~EAAEA~~,~~IAAK~~;~~IACXE~~,~~KAAK~~,~~EAAEA~~;EAAM,~~CAChB~~,~~CACkC~~,~~CAC1C~~,~~eACDrB,~~KAAA,~~CAAA8B~~,aAAA,~~CAACrB~~,~~yCAAyC~~;~~IACtCyB~~,OAAO,EAAE;MAAEC,OAAO,EAAE;~~IAAE~~,CAAE;~~IACxBE~~,IAAI,EAAE;~~MAAEF~~,OAAO,EAAE,CAAC;~~MAAEQ~~,~~QAAQ~~,EAAE;~~IAAW~~,CAAE;~~IAC3CV~~,OAAO,EAAE;MAAEE,OAAO,EAAE;IAAE,CAAE;~~IACxBG~~,GAAG,~~EAAEhB~~,~~mBAAmB,GAAG,UAAU,GAAG,YAAa~~;~~IACrDiB~~,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI~~,CAAE~~;~~IAC9BI,~~EAAE,~~EAAEtB~~,~~mBAAmB~~,~~GAAG~~,~~uBAAuB~~,~~GAAG~~;~~EAA0B~~,~~gBAE9EtB~~,KAAA,~~CAAA8B~~,aAAA,~~CAACzB~~,IAAI;~~IACDwC~~,KAAK,~~EAAEhC~~,~~SAAU~~;~~IACjBiC~~,KAAK,~~EAAExB~~,~~mBAAmB~~,~~GAAG~~,~~CAAC~~,~~aAAa~~,~~CAAC~~,~~GAAG~~,~~CAAC~~,~~cAAc~~,~~CAAE~~;~~IAChEyB~~,~~OAAO~~,~~EAAEzB~~,~~mBAAmB~~,~~GAAGI~~,~~mBAAmB~~,~~GAAGC~~,~~qBAAsB~~;~~IAC3ER~~,IAAI,~~EAAE~~;~~EAAG~~,~~CACZ~~,~~CACsC~~,~~CAC9B~~,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","id","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 id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\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

@@ -1,34 +1,24 @@
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 export const StyledSearchInput = styled.div`
-    display: flex;
     align-items: center;
-    justify-content: center;
-    aspect-ratio: 1;
-    border-radius: 3px;
+    display: flex;
+    gap: 8px;
     height: ${_ref => {
   let {
     $size
   } = _ref;
   return $size === 'medium' ? '42px' : '32px';
 }};
-    &:hover {
-        background-color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme[103];
-}};
-    }
+    justify-content: flex-end;
+    width: 100%;
 `;
 export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
-    position: absolute;
-    top: 0;
-    right: 0;
     overflow: hidden;
 `;
+export const StyledMotionSearchInputIconWrapper = styled.div`
+    width: 18px;
+`;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
 `;

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","_ref","$size","~~_ref2~~","~~theme~~","~~StyledMotionSearchInputContentWrapper","~~StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, ~~WithTheme~~ } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = ~~WithTheme<~~{\n $size: InputSize;\n}~~>;\~~n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n ~~display: flex;\n~~ align-items: center;\n ~~justify-content~~: ~~center~~;\n ~~aspect-ratio~~: 1;\n ~~border-radius: 3px;\n\n~~ height: ${({ $size }~~: StyledSearchInputProps~~) => ($size === 'medium' ? '42px' : '32px')};\n\n ~~&:hover {\n background~~-~~color~~: ~~${({ theme }: StyledSearchInputProps) => theme[103]}~~;\n }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n ~~position~~: ~~absolute~~;\n ~~top: 0;\~~n ~~right:~~ ~~0;\~~n ~~overflow~~: ~~hidden~~;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA~~;AACA;AACA;AACA~~,cAAcC,IAAA;EAAA,IAAC;IAAEC;~~EAA8B~~,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;~~AAC3F~~;AACA;AACA,~~4BAA4BC,KAAA~~;~~EAAA~~,~~IAAC;IAAEC;EAA8B~~,~~CAAC~~,~~GAAAD~~,~~KAAA;EAAA~~,~~OAAKC~~,~~KAAK~~,~~CAAC~~,GAAG,~~CAAC~~;~~AAAA~~;~~AAC7E;~~AACA,CAAC;AAED,OAAO,~~MAAMC~~,~~qCAAqC~~,~~GAAGP~~,MAAM,~~CAACD~~,~~MAAM,CAACG,~~GAAG~~,CAAqB~~;~~AAC3F~~;AACA~~;AACA;AACA;AACA~~,CAAC;AAED,OAAO,~~MAAMM~~,yCAAyC,~~GAAGR~~,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","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 display: flex;\n`;\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;AAC/F;AACA,CAAC","ignoreList":[]}

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

@@ -32,6 +32,7 @@ export const StyledTextAreaContentWrapper = styled.div`
     display: flex;
 `;
 export const StyledTextAreaContent = styled.div`
+    position: relative;
     display: flex;
     width: 100%;
 `;

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","_ref3","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","_ref4","text","_ref5","$isOverflowing","_ref6","$maxHeight","_ref7","$minHeight","_ref8","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref9"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $browser: BrowserName;\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/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;AAOD,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,UAAUG,KAAA;EAAA,IAAC;IAAEH,KAAK;IAAEI;EAA8C,CAAC,GAAAD,KAAA;EAAA,OACvDC,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,0BAA0B;AAAA;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGd,MAAM,CAACG,GAAG;AAC/C;AACA;AACA,CAAC;AAUD,OAAO,MAAMY,mBAAmB,GAAGf,MAAM,CAACgB,QAAkC;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAET,KAAK;IAAEI;EAAqC,CAAC,GAAAK,KAAA;EAAA,OACrDL,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACU,IAAI;AAAA;AAC7C;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;IAAElB;EAAgC,CAAC,GAAAiB,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBzB,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,MAAMmB,0BAA0B,GAAG3B,MAAM,CAAC4B,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAG7B,MAAM,CAAC4B,KAA+B;AACzE,aAAaE,KAAA;EAAA,IAAC;IAAEtB,KAAK;IAAEI;EAAqC,CAAC,GAAAkB,KAAA;EAAA,OACrDlB,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,QAAQL,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","_ref","$isDisabled","StyledTextAreaContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","_ref4","text","_ref5","$isOverflowing","_ref6","$maxHeight","_ref7","$minHeight","_ref8","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref9"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $browser: BrowserName;\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/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;AAOD,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,UAAUG,KAAA;EAAA,IAAC;IAAEH,KAAK;IAAEI;EAA8C,CAAC,GAAAD,KAAA;EAAA,OACvDC,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,0BAA0B;AAAA;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGd,MAAM,CAACG,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMY,mBAAmB,GAAGf,MAAM,CAACgB,QAAkC;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAET,KAAK;IAAEI;EAAqC,CAAC,GAAAK,KAAA;EAAA,OACrDL,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACU,IAAI;AAAA;AAC7C;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;IAAElB;EAAgC,CAAC,GAAAiB,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBzB,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,MAAMmB,0BAA0B,GAAG3B,MAAM,CAAC4B,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAG7B,MAAM,CAAC4B,KAA+B;AACzE,aAAaE,KAAA;EAAA,IAAC;IAAEtB,KAAK;IAAEI;EAAqC,CAAC,GAAAkB,KAAA;EAAA,OACrDlB,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,QAAQL,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/types/components/search-input/SearchInput.styles.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { InputSize } from '../input/Input';
-type StyledSearchInputProps = WithTheme<{
+type StyledSearchInputProps = {
     $size: InputSize;
-}>;
+};
 export declare const StyledSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSearchInputProps>> & string;
 export declare const StyledMotionSearchInputContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
@@ -270,6 +269,7 @@ export declare const StyledMotionSearchInputContentWrapper: import("styled-compo
 }, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMotionSearchInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledMotionSearchInputIconWrapperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1000",
+    "version": "5.0.0-beta.1003",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d456c0b87862a3be7d764ba0f16e0b96b22ac2a8"
+    "gitHead": "afec8c706e8484aea963cb6da1759f7fb3b5539a"
 }