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

package/lib/cjs/components/input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","$shouldShowOnlyBottomBorder","css","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","undefined","StyledMotionInputClearIcon","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,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAKzC,MAAMW,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAqB;AACvD,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AASM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAmD,CAAC,KAC9ED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEG;AAA2C,CAAC,KACpDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,0BAA0B;AACjE,aAAa,CAAC;EAAEJ;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEK;AAA4B,CAAC,KAC9B,CAACA,2BAA2B,IAC5B,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,wBAAwB;EAAEF,2BAA2B;EAAEL;AAAM,CAAC,KAAK;EACpE,IAAIK,2BAA2B,EAAE;IAC7B,OAAO,IAAAC,qBAAG;AACtB;AACA;AACA;AACA;AACA,gCAAgCN,KAAK,CAAC,KAAK,CAAC;AAC5C,aAAa;EACL;EAEA,IAAIO,wBAAwB,EAAE;IAC1B,OAAO,IAAAD,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAIM,MAAME,kBAAkB,GAAAb,OAAA,CAAAa,kBAAA,GAAGZ,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA;AACA,cAAc,CAAC;EAAEQ;AAA4B,CAAC,KACtC,CAACA,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAC3D;AACA,CAAC;AAQM,MAAMI,gBAAgB,GAAAd,OAAA,CAAAc,gBAAA,GAAGb,yBAAM,CAACc,KAA4B;AACnE;AACA;AACA,aAAa,CAAC;EAAEV,KAAK;EAAEG;AAAkC,CAAC,KAClDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACW,IAAI;AAC7C;AACA,aAAa,CAAC;EAAEC;AAAkB,CAAC,KAAK,eAAeA,iBAAiB,KAAK;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAA2B,CAAC,KAC7BA,0BAA0B,IAC1B,IAAAP,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMQ,6BAA6B,GAAAnB,OAAA,CAAAmB,6BAAA,GAAG,IAAAlB,yBAAM,EAACmB,oBAAM,CAACC,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAtB,OAAA,CAAAsB,wBAAA,GAAG,IAAArB,yBAAM,EAACmB,oBAAM,CAAClB,GAAG,CAAC;AAC1D;AACA,CAAC;AAIM,MAAMqB,gBAAgB,GAAAvB,OAAA,CAAAuB,gBAAA,GAAGtB,yBAAM,CAACoB,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEhB,KAAK;EAAEG;AAAkC,CAAC,KAClDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGe,SAAS;AAC5C,CAAC;AAIM,MAAMC,0BAA0B,GAAAzB,OAAA,CAAAyB,0BAAA,GAAG,IAAAxB,yBAAM,EAACmB,oBAAM,CAAClB,GAAG,CAAkC;AAC7F;AACA,mBAAmB,CAAC;EAAEQ;AAA4B,CAAC,KAC3CA,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMgB,sBAAsB,GAAA1B,OAAA,CAAA0B,sBAAA,GAAGzB,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMyB,uBAAuB,GAAA3B,OAAA,CAAA2B,uBAAA,GAAG1B,yBAAM,CAACC,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","$size","css","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","undefined","StyledMotionInputClearIcon","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/cjs/components/search-input/SearchInput.js

@@ -8,7 +8,7 @@ var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
-var _Input = _interopRequireDefault(require("../input/Input"));
+var _Input = _interopRequireWildcard(require("../input/Input"));
 var _SearchInput = require("./SearchInput.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -20,6 +20,7 @@ const SearchInput = ({
   onChange,
   onKeyDown,
   placeholder,
+  size = _Input.InputSize.Medium,
   value
 }) => {
   const [isSearchInputActive, setIsSearchInputActive] = (0, _react.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
@@ -42,7 +43,8 @@ const SearchInput = ({
     }
   }, [isActive]);
   return /*#__PURE__*/_react.default.createElement(_SearchInput.StyledSearchInput, {
-    className: "beta-chayns-search-input"
+    className: "beta-chayns-search-input",
+    $size: size
   }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
@@ -94,6 +96,7 @@ const SearchInput = ({
     placeholder: placeholder,
     ref: inputRef,
     shouldShowClearIcon: true,
+    size: size,
     value: value
   }))));
 };

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

@@ -1 +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","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","key","transition","duration","color","icons","onClick","size","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 } 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":"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","ignoreList":[]}
+{"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","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                    >\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

@@ -11,7 +11,9 @@ const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.
     align-items: center;
     display: flex;
     gap: 8px;
-    height: 42px;
+    height: ${({
+  $size
+}) => $size === 'medium' ? '42px' : '32px'};
     justify-content: flex-end;
     width: 100%;
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","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';\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,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;AAGhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAH,OAAA,CAAAG,qCAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAqB;AAC3F;AACA,CAAC;AAEM,MAAMG,kCAAkC,GAAAL,OAAA,CAAAK,kCAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC;AAEM,MAAMI,yCAAyC,GAAAN,OAAA,CAAAM,yCAAA,GAAG,IAAAL,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAqB,EAAE","ignoreList":[]}
+{"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"],"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,EAAE","ignoreList":[]}

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

@@ -34,6 +34,7 @@ const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.defa
     color: ${({
   theme
 }) => theme.text};
+    background: none;
     border: none;
     resize: none;
     overflow-y: ${({

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

@@ -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","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\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":"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","ignoreList":[]}
+{"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","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\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":"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","ignoreList":[]}

package/lib/cjs/utils/isTobitEmployee.js

@@ -12,7 +12,8 @@ const client = new _uacService.UacServiceClient({
   getDefaultPersonId: () => {
     var _getUser;
     return ((_getUser = (0, _chaynsApi.getUser)()) === null || _getUser === void 0 ? void 0 : _getUser.personId) || '';
-  }
+  },
+  getLanguage: () => (0, _chaynsApi.getLanguage)().active
 });
 const isTobitEmployee = async () => {
   const siteInfos = await client.getMembershipSites({

package/lib/cjs/utils/isTobitEmployee.js.map

@@ -1 +1 @@
-{"version":3,"file":"isTobitEmployee.js","names":["_uacService","require","_chaynsApi","client","UacServiceClient","getToken","getAccessToken","accessToken","getDefaultSiteId","getSite","id","getDefaultPersonId","_getUser","getUser","personId","isTobitEmployee","siteInfos","getMembershipSites","groupId","isEmployee","forEach","siteId","exports"],"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,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEA,MAAME,MAAM,GAAG,IAAIC,4BAAgB,CAAC;EAChCC,QAAQ,EAAE,MAAAA,CAAA,KAAY,CAAC,MAAM,IAAAC,yBAAc,EAAC,CAAC,EAAEC,WAAW,IAAI,EAAE;EAChEC,gBAAgB,EAAEA,CAAA,KAAM,IAAAC,kBAAO,EAAC,CAAC,CAACC,EAAE;EACpCC,kBAAkB,EAAEA,CAAA;IAAA,IAAAC,QAAA;IAAA,OAAM,EAAAA,QAAA,OAAAC,kBAAO,EAAC,CAAC,cAAAD,QAAA,uBAATA,QAAA,CAAWE,QAAQ,KAAI,EAAE;EAAA;AACvD,CAAC,CAAC;AAEK,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,MAAMC,SAAS,GAAG,MAAMb,MAAM,CAACc,kBAAkB,CAAC;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC;EAEpE,IAAIC,UAAU,GAAG,KAAK;EAEtBH,SAAS,CAACI,OAAO,CAAC,CAAC;IAAEC;EAAO,CAAC,KAAK;IAC9BF,UAAU,GAAGE,MAAM,KAAK,aAAa;EACzC,CAAC,CAAC;EAEF,OAAOF,UAAU;AACrB,CAAC;AAACG,OAAA,CAAAP,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"file":"isTobitEmployee.js","names":["_uacService","require","_chaynsApi","client","UacServiceClient","getToken","getAccessToken","accessToken","getDefaultSiteId","getSite","id","getDefaultPersonId","_getUser","getUser","personId","getLanguage","active","isTobitEmployee","siteInfos","getMembershipSites","groupId","isEmployee","forEach","siteId","exports"],"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,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEA,MAAME,MAAM,GAAG,IAAIC,4BAAgB,CAAC;EAChCC,QAAQ,EAAE,MAAAA,CAAA,KAAY,CAAC,MAAM,IAAAC,yBAAc,EAAC,CAAC,EAAEC,WAAW,IAAI,EAAE;EAChEC,gBAAgB,EAAEA,CAAA,KAAM,IAAAC,kBAAO,EAAC,CAAC,CAACC,EAAE;EACpCC,kBAAkB,EAAEA,CAAA;IAAA,IAAAC,QAAA;IAAA,OAAM,EAAAA,QAAA,OAAAC,kBAAO,EAAC,CAAC,cAAAD,QAAA,uBAATA,QAAA,CAAWE,QAAQ,KAAI,EAAE;EAAA;EACnDC,WAAW,EAAEA,CAAA,KAAM,IAAAA,sBAAW,EAAC,CAAC,CAACC;AACrC,CAAC,CAAC;AAEK,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,MAAMC,SAAS,GAAG,MAAMf,MAAM,CAACgB,kBAAkB,CAAC;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC;EAEpE,IAAIC,UAAU,GAAG,KAAK;EAEtBH,SAAS,CAACI,OAAO,CAAC,CAAC;IAAEC;EAAO,CAAC,KAAK;IAC9BF,UAAU,GAAGE,MAAM,KAAK,aAAa;EACzC,CAAC,CAAC;EAEF,OAAOF,UAAU;AACrB,CAAC;AAACG,OAAA,CAAAP,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/esm/components/accordion/Accordion.js

@@ -27,7 +27,6 @@ const Accordion = _ref => {
     onOpen,
     onSearchChange,
     rightElement,
-    searchIcon,
     searchPlaceholder,
     searchValue,
     shouldForceBackground = false,
@@ -151,7 +150,6 @@ const Accordion = _ref => {
     onClick: handleHeadClick,
     onSearchChange: onSearchChange,
     rightElement: rightElement,
-    searchIcon: searchIcon,
     searchPlaceholder: searchPlaceholder,
     searchValue: searchValue,
     shouldRotateIcon: shouldRotateIcon,

package/lib/esm/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the accordion is no longer hovered.\n     */\n    onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the accordion is hovered.\n     */\n    onHoverStart?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * title changes. When this function is given, the search field is displayed\n     * as the Accordion title.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * The props of the title Input.\n     */\n    titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onHoverEnd,\n    onHoverStart,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    onTitleInputChange,\n    titleInputProps,\n}) => {\n    const {\n        isWrapped: groupIsWrapped,\n        openAccordionUuid,\n        accordionGroupUuid,\n        accordionUuids,\n        updateOpenAccordionUuid,\n    } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n\n    const isWrapped = useMemo(\n        () => groupIsWrapped ?? contextIsWrapped,\n        [contextIsWrapped, groupIsWrapped],\n    );\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    const isLastAccordion = useMemo(\n        () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n        [accordionUuids, uuid],\n    );\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n    const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n    return (\n        <StyledAccordion\n            data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $shouldShowLines={!isLastAccordion}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n            onMouseEnter={onHoverStart}\n            onMouseLeave={onHoverEnd}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        uuid={uuid}\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                        onTitleInputChange={onTitleInputChange}\n                        titleInputProps={titleInputProps}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AccordionWrappedContext.Provider\n                                    value={accordionWrappedContextProviderValue}\n                                >\n                                    <AreaContext.Provider value={areaContextProviderValue}>\n                                        {children}\n                                    </AreaContext.Provider>\n                                </AccordionWrappedContext.Provider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the accordion is no longer hovered.\n     */\n    onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the accordion is hovered.\n     */\n    onHoverStart?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * title changes. When this function is given, the search field is displayed\n     * as the Accordion title.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * The props of the title Input.\n     */\n    titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onHoverEnd,\n    onHoverStart,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    onTitleInputChange,\n    titleInputProps,\n}) => {\n    const {\n        isWrapped: groupIsWrapped,\n        openAccordionUuid,\n        accordionGroupUuid,\n        accordionUuids,\n        updateOpenAccordionUuid,\n    } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n\n    const isWrapped = useMemo(\n        () => groupIsWrapped ?? contextIsWrapped,\n        [contextIsWrapped, groupIsWrapped],\n    );\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    const isLastAccordion = useMemo(\n        () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n        [accordionUuids, uuid],\n    );\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n    const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n    return (\n        <StyledAccordion\n            data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $shouldShowLines={!isLastAccordion}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n            onMouseEnter={onHoverStart}\n            onMouseLeave={onHoverEnd}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        uuid={uuid}\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                        onTitleInputChange={onTitleInputChange}\n                        titleInputProps={titleInputProps}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AccordionWrappedContext.Provider\n                                    value={accordionWrappedContextProviderValue}\n                                >\n                                    <AreaContext.Provider value={areaContextProviderValue}>\n                                        {children}\n                                    </AreaContext.Provider>\n                                </AccordionWrappedContext.Provider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.js

@@ -6,8 +6,9 @@ import { useElementSize } from '../../../hooks/useElementSize';
 import { getAccordionHeadHeight } from '../../../utils/accordion';
 import { AreaContext } from '../../area-provider/AreaContextProvider';
 import Icon from '../../icon/Icon';
-import Input from '../../input/Input';
-import { StyledAccordionIcon, StyledMotionAccordionHead, StyledMotionContentWrapper, StyledMotionIconWrapper, StyledMotionRightElementWrapper, StyledMotionRightInput, StyledMotionRightInputIconWrapper, StyledMotionTitle, StyledMotionTitleElementWrapper, StyledMotionTitleWrapper, StyledRightWrapper } from './AccordionHead.styles';
+import Input, { InputSize } from '../../input/Input';
+import SearchInput from '../../search-input/SearchInput';
+import { StyledAccordionIcon, StyledMotionAccordionHead, StyledMotionContentWrapper, StyledMotionIconWrapper, StyledMotionRightElementWrapper, StyledMotionSearchWrapper, StyledMotionTitle, StyledMotionTitleElementWrapper, StyledMotionTitleWrapper, StyledRightWrapper } from './AccordionHead.styles';
 const AccordionHead = _ref => {
   let {
     icon,
@@ -18,7 +19,6 @@ const AccordionHead = _ref => {
     onClick,
     onSearchChange,
     rightElement,
-    searchIcon,
     searchPlaceholder,
     searchValue,
     shouldRotateIcon,
@@ -38,7 +38,6 @@ const AccordionHead = _ref => {
   const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {
     shouldUseChildElement: true
   });
-  const hasSearchIcon = Array.isArray(searchIcon);
   useEffect(() => {
     if (typeof onTitleInputChange === 'function') {
       setHeadHeight({
@@ -154,27 +153,7 @@ const AccordionHead = _ref => {
   }, titleElement))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/React.createElement(StyledRightWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false,
     key: `accordionRightWrapper--${uuid}`
-  }, typeof onSearchChange === 'function' && isOpen ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionRightInput, {
-    animate: {
-      opacity: 1,
-      width: '165px'
-    },
-    autoComplete: "off",
-    exit: {
-      opacity: 0,
-      width: 0
-    },
-    $hasIcon: hasSearchIcon,
-    initial: {
-      opacity: 0,
-      width: 0
-    },
-    key: `rightInput--${uuid}`,
-    onChange: onSearchChange,
-    placeholder: searchPlaceholder,
-    type: "text",
-    value: searchValue
-  }), hasSearchIcon && /*#__PURE__*/React.createElement(StyledMotionRightInputIconWrapper, {
+  }, typeof onSearchChange === 'function' && isOpen && /*#__PURE__*/React.createElement(StyledMotionSearchWrapper, {
     animate: {
       opacity: 1
     },
@@ -184,10 +163,13 @@ const AccordionHead = _ref => {
     initial: {
       opacity: 0
     },
-    key: `rightInputIcon-${uuid}`
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icons: searchIcon
-  }))) : /*#__PURE__*/React.createElement(StyledMotionRightElementWrapper, {
+    key: `searchWrapper--${uuid}`
+  }, /*#__PURE__*/React.createElement(SearchInput, {
+    onChange: onSearchChange,
+    placeholder: searchPlaceholder,
+    size: InputSize.Small,
+    value: searchValue
+  })), rightElement && /*#__PURE__*/React.createElement(StyledMotionRightElementWrapper, {
     animate: {
       opacity: 1
     },

package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","StyledMotionRightInputIconWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","titleElementChildrenSize","shouldUseChildElement","hasSearchIcon","Array","isArray","width","current","clientWidth","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","Provider","value","shouldChangeColor","_extends","onFocus","event","onBlur","onChange","scale","exit","$isOpen","$isWrapped","transition","duration","layout","Fragment","autoComplete","$hasIcon","placeholder","type","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { type InputProps } from '../../input/Input';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionRightInput,\n    StyledMotionRightInputIconWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchIcon?: string[];\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n\n    const hasSearchIcon = Array.isArray(searchIcon);\n\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen ? (\n                            <>\n                                <StyledMotionRightInput\n                                    animate={{ opacity: 1, width: '165px' }}\n                                    autoComplete=\"off\"\n                                    exit={{ opacity: 0, width: 0 }}\n                                    $hasIcon={hasSearchIcon}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key={`rightInput--${uuid}`}\n                                    onChange={onSearchChange}\n                                    placeholder={searchPlaceholder}\n                                    type=\"text\"\n                                    value={searchValue}\n                                />\n                                {hasSearchIcon && (\n                                    <StyledMotionRightInputIconWrapper\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0 }}\n                                        initial={{ opacity: 0 }}\n                                        key={`rightInputIcon-${uuid}`}\n                                    >\n                                        <Icon icons={searchIcon} />\n                                    </StyledMotionRightInputIconWrapper>\n                                )}\n                            </>\n                        ) : (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","titleElementChildrenSize","shouldUseChildElement","width","current","clientWidth","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","Provider","value","shouldChangeColor","_extends","onFocus","event","onBlur","onChange","scale","exit","$isOpen","$isWrapped","transition","duration","layout","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={onSearchChange}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={searchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js

@@ -115,18 +115,20 @@ export const StyledMotionTitleElementWrapper = styled(motion.div)`
     margin-left: 8px;
 `;
 export const StyledRightWrapper = styled.div`
-    display: grid;
+    display: flex;
     flex: 0 0 auto;
-    grid-template-areas: 'right';
+    gap: 8px;
     margin-right: 5px;
     overflow: hidden;
     position: relative;
 `;
+export const StyledMotionSearchWrapper = styled(motion.div)`
+    align-items: center;
+    display: flex;
+`;
 export const StyledMotionRightElementWrapper = styled(motion.div)`
     align-items: center;
     display: flex;
-    grid-area: header;
-    justify-content: flex-end;
 `;
 export const StyledMotionRightInput = styled(motion.input)`
     background-color: transparent;

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","StyledMotionTitleWrapper","StyledMotionTitle","_ref6","$isOpen","$isWrapped","undefined","_ref7","_ref8","_ref9","_ref10","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref11","_ref12","_ref13","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n    $isOpen: boolean;\n    $isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped }) => ($isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: grid;\n    flex: 0 0 auto;\n    grid-template-areas: 'right';\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    grid-area: header;\n    justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","StyledMotionTitleWrapper","StyledMotionTitle","_ref6","$isOpen","$isWrapped","undefined","_ref7","_ref8","_ref9","_ref10","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref11","_ref12","_ref13","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n    $isOpen: boolean;\n    $isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped }) => ($isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AACtE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGP,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AAC7E;AACA,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAM,OAAOC,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGV,MAAM,CAACW,CAA2B;AACrE;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEP;EAAgC,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAACQ,QAAQ;AAAA;AACpE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAK,MAAMC,KAAK,GAAG;AAAA;AAChD;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGhB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AAChF;AACA,cAAcc,KAAA;EAAA,IAAC;IAAER;EAAQ,CAAC,GAAAQ,KAAA;EAAA,OAAM,OAAOR,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,wBAAwB,GAAGlB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AAC9E;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMgB,iBAAiB,GAAGnB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAyB;AAC3E,iBAAiBiB,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAAF,KAAA;EAAA,OAAMC,OAAO,IAAI,CAACC,UAAU,GAAG,QAAQ,GAAGC,SAAS;AAAA,CAAC;AAC7F,mBAAmBC,KAAA;EAAA,IAAC;IAAEH,OAAO;IAAEC;EAAW,CAAC,GAAAE,KAAA;EAAA,OAAMH,OAAO,IAAIC,UAAU,GAAG,GAAG,GAAG,QAAQ;AAAA,CAAC;AACxF;AACA,cAAcG,KAAA;EAAA,IAAC;IAAEH;EAAW,CAAC,GAAAG,KAAA;EAAA,OAAMH,UAAU,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAC;AACnE;AACA;AACA;AACA;AACA,mBAAmBG,KAAA;EAAA,IAAC;IAAEL,OAAO;IAAEC;EAAW,CAAC,GAAAI,KAAA;EAAA,OAAML,OAAO,IAAI,CAACC,UAAU,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAC9F;AACA,MAAMK,MAAA;EAAA,IAAC;IAAEL;EAAW,CAAC,GAAAK,MAAA;EAAA,OACbL,UAAU,IACVrB,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAM2B,+BAA+B,GAAG5B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AACrF;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM0B,kBAAkB,GAAG7B,MAAM,CAACG,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,yBAAyB,GAAG9B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AAC/E;AACA;AACA,CAAC;AAED,OAAO,MAAM4B,+BAA+B,GAAG/B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AACrF;AACA;AACA,CAAC;AAMD,OAAO,MAAM6B,sBAAsB,GAAGhC,MAAM,CAACD,MAAM,CAACkC,KAAK,CAA8B;AACvF;AACA;AACA;AACA,UAAUC,MAAA;EAAA,IAAC;IAAE7B;EAAmC,CAAC,GAAA6B,MAAA;EAAA,OAAK7B,KAAK,CAAC,cAAc,CAAC;AAAA;AAC3E;AACA;AACA,aAAa8B,MAAA;EAAA,IAAC;IAAE9B;EAAmC,CAAC,GAAA8B,MAAA;EAAA,OAAK9B,KAAK,CAACC,IAAI;AAAA;AACnE;AACA,eAAe8B,MAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,MAAA;EAAA,OAAMC,QAAQ,GAAG,kBAAkB,GAAG,SAAS;AAAA,CAAC;AAC5E,CAAC;AAED,OAAO,MAAMC,iCAAiC,GAAGtC,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}