@chayns-components/core 5.0.0-beta.7 → 5.0.0-beta.701

package/lib/esm/components/search-box/SearchBox.styles.js

@@ -0,0 +1,75 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledSearchBox = styled.div``;
+export const StyledMotionSearchBoxBody = styled(motion.div)`
+    background: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['101'];
+}};
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-top: none;
+    cursor: pointer;
+    width: ${_ref2 => {
+  let {
+    $width
+  } = _ref2;
+  return $width;
+}}px;
+    max-height: 300px;
+    overflow-y: ${_ref3 => {
+  let {
+    $height
+  } = _ref3;
+  return $height <= 300 ? 'hidden' : 'auto';
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+
+    // Styles for custom scrollbar
+    ${_ref5 => {
+  let {
+    $browser,
+    theme
+  } = _ref5;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+export const StyledSearchBoxIcon = styled.div`
+    cursor: pointer;
+    padding: 0 10px;
+`;
+//# sourceMappingURL=SearchBox.styles.js.map

package/lib/esm/components/search-box/SearchBox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser","StyledSearchBoxIcon"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    $height: number;\n    $width: number;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    width: ${({ $width }) => $width}px;\n    max-height: 300px;\n    overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\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: 5px;\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                  }\n              `}\n`;\n\nexport const StyledSearchBoxIcon = styled.div`\n    cursor: pointer;\n    padding: 0 10px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAQ3C,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkBE,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAC;AACvE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA;AAC9E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBZ,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMQ,mBAAmB,GAAGd,MAAM,CAACG,GAAG;AAC7C;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/search-box/group-name/GroupName.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyledGroupName } from './GroupName.styles';
+const GroupName = _ref => {
+  let {
+    name
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledGroupName, {
+    $groupName: name,
+    "data-isgroupname": "true",
+    id: `${name}`
+  }, name);
+};
+GroupName.displayName = 'GroupName';
+export default GroupName;
+//# sourceMappingURL=GroupName.js.map

package/lib/esm/components/search-box/group-name/GroupName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupName.js","names":["React","StyledGroupName","GroupName","_ref","name","createElement","$groupName","id","displayName"],"sources":["../../../../../src/components/search-box/group-name/GroupName.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyledGroupName } from './GroupName.styles';\n\nexport type GroupNameProps = {\n    name: string;\n};\n\nconst GroupName: FC<GroupNameProps> = ({ name }) => (\n    <StyledGroupName $groupName={name} data-isgroupname=\"true\" id={`${name}`}>\n        {name}\n    </StyledGroupName>\n);\n\nGroupName.displayName = 'GroupName';\n\nexport default GroupName;\n"],"mappings":"AAAC,OAAOA,KAAK,MAAc,OAAO;AAClC,SAASC,eAAe,QAAQ,oBAAoB;AAMpD,MAAMC,SAA6B,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAK,CAAC,GAAAD,IAAA;EAAA,oBAC3CH,KAAA,CAAAK,aAAA,CAACJ,eAAe;IAACK,UAAU,EAAEF,IAAK;IAAC,oBAAiB,MAAM;IAACG,EAAE,EAAE,GAAGH,IAAI;EAAG,GACpEA,IACY,CAAC;AAAA,CACrB;AAEDF,SAAS,CAACM,WAAW,GAAG,WAAW;AAEnC,eAAeN,SAAS","ignoreList":[]}

package/lib/esm/components/search-box/group-name/GroupName.styles.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+export const StyledGroupName = styled.span`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    font-weight: bold;
+
+    padding: 4px 10px;
+    ${_ref2 => {
+  let {
+    $groupName
+  } = _ref2;
+  return !$groupName && css`
+            border: 1px ${_ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return theme['103'];
+  }} solid;
+            padding: 0;
+        `;
+}}
+    cursor: default;
+`;
+//# sourceMappingURL=GroupName.styles.js.map

package/lib/esm/components/search-box/group-name/GroupName.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupName.styles.js","names":["styled","css","StyledGroupName","span","_ref","theme","text","_ref2","$groupName","_ref3"],"sources":["../../../../../src/components/search-box/group-name/GroupName.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupNameProps = WithTheme<{ $groupName?: string }>;\n\nexport const StyledGroupName = styled.span<StyledGroupNameProps>`\n    color: ${({ theme }: StyledGroupNameProps) => theme.text};\n    font-weight: bold;\n\n    padding: 4px 10px;\n    ${({ $groupName }) =>\n        !$groupName &&\n        css`\n            border: 1px ${({ theme }: StyledGroupNameProps) => theme['103']} solid;\n            padding: 0;\n        `}\n    cursor: default;\n`;\n"],"mappings":"AAAC,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAKhD,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,IAA0B;AAChE,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AAC5D;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACb,CAACC,UAAU,IACXP,GAAG;AACX,0BAA0BQ,KAAA;IAAA,IAAC;MAAEJ;IAA4B,CAAC,GAAAI,KAAA;IAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;EAAA;AAC3E;AACA,SAAS;AAAA;AACT;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.js

@@ -0,0 +1,85 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useElementSize } from '../../../hooks/useElementSize';
+import { useUuid } from '../../../hooks/uuid';
+import { getCurrentGroupName } from '../../../utils/searchBox';
+import FilterButtons from '../../filter-buttons/FilterButtons';
+import { StyledMotionSearchBoxBody, StyledSearchBoxBodyContent, StyledSearchBoxBodyHead, StyledSearchBoxBodyHeadGroupName } from './SearchBoxBody.styles';
+const SearchBoxBody = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    filterbuttons,
+    coordinates,
+    selectedGroups,
+    width,
+    browser,
+    height,
+    children,
+    onGroupSelect
+  } = _ref;
+  const [hasScrolled, setHasScrolled] = useState(false);
+  const [currentGroupName, setCurrentGroupName] = useState('');
+  const headRef = useRef(null);
+  const headSize = useElementSize(headRef);
+  const uuid = useUuid();
+  const headHeight = useMemo(() => headSize?.height ? headSize.height + 15 : 0, [headSize?.height]);
+  useEffect(() => {
+    const element = document.getElementById(`searchbox-content__${uuid}`);
+    if (element && (selectedGroups?.length === 1 && selectedGroups[0] === 'all' || selectedGroups?.length !== 1)) {
+      setCurrentGroupName(getCurrentGroupName(element));
+    } else {
+      setCurrentGroupName('');
+    }
+  }, [uuid, children, selectedGroups]);
+  const handleScroll = useCallback(event => {
+    const {
+      scrollTop
+    } = event.target;
+    setHasScrolled(scrollTop > 1);
+    if (selectedGroups?.length === 1 && selectedGroups[0] === 'all' || selectedGroups?.length !== 1) {
+      setCurrentGroupName(getCurrentGroupName(event.target));
+    }
+  }, [selectedGroups]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledMotionSearchBoxBody, {
+    $width: width,
+    style: {
+      left: coordinates.x,
+      top: coordinates.y
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    animate: {
+      height: 'fit-content',
+      opacity: 1
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    }
+  }, filterbuttons && filterbuttons?.length > 1 && /*#__PURE__*/React.createElement(StyledSearchBoxBodyHead, {
+    ref: headRef,
+    $hasScrolled: hasScrolled,
+    $hasGroupName: !!currentGroupName
+  }, /*#__PURE__*/React.createElement(FilterButtons, {
+    items: filterbuttons,
+    size: 0,
+    onSelect: onGroupSelect,
+    selectedItemIds: selectedGroups
+  }), /*#__PURE__*/React.createElement(StyledSearchBoxBodyHeadGroupName, null, currentGroupName)), /*#__PURE__*/React.createElement(StyledSearchBoxBodyContent, {
+    $height: height,
+    $headHeight: headHeight,
+    key: "content",
+    id: `searchbox-content__${uuid}`,
+    $browser: browser,
+    ref: ref,
+    tabIndex: 0,
+    onScroll: handleScroll
+  }, children)), [browser, children, coordinates.x, coordinates.y, currentGroupName, filterbuttons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, uuid, width]);
+});
+SearchBoxBody.displayName = 'SearchBoxBody';
+export default SearchBoxBody;
+//# sourceMappingURL=SearchBoxBody.js.map

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxBody.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useUuid","getCurrentGroupName","FilterButtons","StyledMotionSearchBoxBody","StyledSearchBoxBodyContent","StyledSearchBoxBodyHead","StyledSearchBoxBodyHeadGroupName","SearchBoxBody","_ref","ref","filterbuttons","coordinates","selectedGroups","width","browser","height","children","onGroupSelect","hasScrolled","setHasScrolled","currentGroupName","setCurrentGroupName","headRef","headSize","uuid","headHeight","element","document","getElementById","length","handleScroll","event","scrollTop","target","createElement","$width","style","left","x","top","y","initial","opacity","exit","animate","transition","duration","type","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","$height","$headHeight","key","id","$browser","tabIndex","onScroll","displayName"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport React, {\n    forwardRef,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledMotionSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterbuttons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n    onGroupSelect?: (keys: string[]) => void;\n    coordinates: { x: number; y: number };\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    (\n        {\n            filterbuttons,\n            coordinates,\n            selectedGroups,\n            width,\n            browser,\n            height,\n            children,\n            onGroupSelect,\n        },\n        ref,\n    ) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchbox-content__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledMotionSearchBoxBody\n                    $width={width}\n                    style={{ left: coordinates.x, top: coordinates.y }}\n                    initial={{ height: 0, opacity: 0 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'fit-content', opacity: 1 }}\n                    transition={{\n                        duration: 0.2,\n                        type: 'tween',\n                    }}\n                >\n                    {filterbuttons && filterbuttons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            <FilterButtons\n                                items={filterbuttons}\n                                size={0}\n                                onSelect={onGroupSelect}\n                                selectedItemIds={selectedGroups}\n                            />\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchbox-content__${uuid}`}\n                        $browser={browser}\n                        ref={ref}\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledMotionSearchBoxBody>\n            ),\n            [\n                browser,\n                children,\n                coordinates.x,\n                coordinates.y,\n                currentGroupName,\n                filterbuttons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                uuid,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js

@@ -0,0 +1,108 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledMotionSearchBoxBody = styled(motion.div)`
+    background: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['101'];
+}};
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-top: none;
+    width: ${_ref2 => {
+  let {
+    $width
+  } = _ref2;
+  return $width - 2;
+}}px;
+    max-height: 300px;
+    box-shadow: 0 0 0 1px
+        rgba(${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+`;
+export const StyledSearchBoxBodyHead = styled.div`
+    padding: 10px 10px 5px;
+    display: flex;
+    flex-direction: column;
+
+    ${_ref4 => {
+  let {
+    $hasGroupName
+  } = _ref4;
+  return $hasGroupName && css`
+            gap: 15px;
+        `;
+}}
+
+    ${_ref5 => {
+  let {
+    $hasScrolled
+  } = _ref5;
+  return $hasScrolled && css`
+            box-shadow: 0 1px 4px #0000001a;
+        `;
+}}
+`;
+export const StyledSearchBoxBodyHeadGroupName = styled.div`
+    font-weight: bold;
+`;
+export const StyledSearchBoxBodyContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    width: 100%;
+    max-height: ${_ref6 => {
+  let {
+    $headHeight
+  } = _ref6;
+  return 300 - $headHeight;
+}}px;
+    overflow-y: ${_ref7 => {
+  let {
+    $height,
+    $headHeight
+  } = _ref7;
+  return $height + $headHeight <= 300 ? 'hidden' : 'auto';
+}};
+
+    // Styles for custom scrollbar
+    ${_ref8 => {
+  let {
+    $browser,
+    theme
+  } = _ref8;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=SearchBoxBody.styles.js.map

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxBody.styles.js","names":["motion","styled","css","StyledMotionSearchBoxBody","div","_ref","theme","_ref2","$width","_ref3","StyledSearchBoxBodyHead","_ref4","$hasGroupName","_ref5","$hasScrolled","StyledSearchBoxBodyHeadGroupName","StyledSearchBoxBodyContent","_ref6","$headHeight","_ref7","$height","_ref8","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    $width: number;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['101']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    width: ${({ $width }) => $width - 2}px;\n    max-height: 300px;\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n`;\n\nexport const StyledSearchBoxBodyHead = styled.div<StyledSearchBoxHeadProps>`\n    padding: 10px 10px 5px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $hasGroupName }) =>\n        $hasGroupName &&\n        css`\n            gap: 15px;\n        `}\n\n    ${({ $hasScrolled }) =>\n        $hasScrolled &&\n        css`\n            box-shadow: 0 1px 4px #0000001a;\n        `}\n`;\n\ntype StyledSearchBoxHeadProps = WithTheme<{ $hasScrolled: boolean; $hasGroupName: boolean }>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div`\n    font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n    $height: number;\n    $headHeight: number;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledSearchBoxBodyContent = styled.div<StyledSearchBoxBodyContentProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    max-height: ${({ $headHeight }) => 300 - $headHeight}px;\n    overflow-y: ${({ $height, $headHeight }) => ($height + $headHeight <= 300 ? 'hidden' : 'auto')};\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledSearchBoxBodyContentProps) =>\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: 5px;\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                  }\n              `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM,GAAG,CAAC;AAAA;AACvC;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,SAAS,CAAC;AAAA;AAC9E,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGT,MAAM,CAACG,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,IACbV,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMW,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZZ,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMa,gCAAgC,GAAGd,MAAM,CAACG,GAAG;AAC1D;AACA,CAAC;AAQD,OAAO,MAAMY,0BAA0B,GAAGf,MAAM,CAACG,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkBa,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAG,GAAGC,WAAW;AAAA;AACxD,kBAAkBC,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEF;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMC,OAAO,GAAGF,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAC;AAClG;AACA;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEhB;EAAuC,CAAC,GAAAe,KAAA;EAAA,OACnDC,QAAQ,KAAK,SAAS,GAChBpB,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/search-box/search-box-item/SearchBoxItem.js

@@ -0,0 +1,33 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyledSearchBoxItem, StyledSearchBoxItemImage, StyledSearchBoxItemText } from './SearchBoxItem.styles';
+const SearchBoxItem = _ref => {
+  let {
+    id,
+    text,
+    imageUrl,
+    shouldShowRoundImage,
+    onSelect,
+    groupName
+  } = _ref;
+  const handleClick = useCallback(() => {
+    onSelect({
+      id,
+      text,
+      imageUrl
+    }, groupName);
+  }, [onSelect, id, text, imageUrl, groupName]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxItem, {
+    id: `search-box-item__${id}_${groupName ?? ''}`,
+    onClick: handleClick
+  }, imageUrl && /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
+    src: imageUrl,
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), /*#__PURE__*/React.createElement(StyledSearchBoxItemText, {
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  })), [groupName, handleClick, id, imageUrl, shouldShowRoundImage, text]);
+};
+SearchBoxItem.displayName = 'SearchBoxItem';
+export default SearchBoxItem;
+//# sourceMappingURL=SearchBoxItem.js.map

package/lib/esm/components/search-box/search-box-item/SearchBoxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxItem.js","names":["React","useCallback","useMemo","StyledSearchBoxItem","StyledSearchBoxItemImage","StyledSearchBoxItemText","SearchBoxItem","_ref","id","text","imageUrl","shouldShowRoundImage","onSelect","groupName","handleClick","createElement","onClick","src","$shouldShowRoundImage","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem, groupName?: ISearchBoxItems['groupName']) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowRoundImage?: boolean;\n    groupName?: ISearchBoxItems['groupName'];\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowRoundImage,\n    onSelect,\n    groupName,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text, imageUrl }, groupName);\n    }, [onSelect, id, text, imageUrl, groupName]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem\n                id={`search-box-item__${id}_${groupName ?? ''}`}\n                onClick={handleClick}\n            >\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText dangerouslySetInnerHTML={{ __html: text }} />\n            </StyledSearchBoxItem>\n        ),\n        [groupName, handleClick, id, imageUrl, shouldShowRoundImage, text],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEvD,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,uBAAuB,QACpB,wBAAwB;AAW/B,MAAMC,aAAqC,GAAGC,IAAA,IAOxC;EAAA,IAPyC;IAC3CC,EAAE;IACFC,IAAI;IACJC,QAAQ;IACRC,oBAAoB;IACpBC,QAAQ;IACRC;EACJ,CAAC,GAAAN,IAAA;EACG,MAAMO,WAAW,GAAGb,WAAW,CAAC,MAAM;IAClCW,QAAQ,CAAC;MAAEJ,EAAE;MAAEC,IAAI;MAAEC;IAAS,CAAC,EAAEG,SAAS,CAAC;EAC/C,CAAC,EAAE,CAACD,QAAQ,EAAEJ,EAAE,EAAEC,IAAI,EAAEC,QAAQ,EAAEG,SAAS,CAAC,CAAC;EAE7C,OAAOX,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,mBAAmB;IAChBK,EAAE,EAAE,oBAAoBA,EAAE,IAAIK,SAAS,IAAI,EAAE,EAAG;IAChDG,OAAO,EAAEF;EAAY,GAEpBJ,QAAQ,iBACLV,KAAA,CAAAe,aAAA,CAACX,wBAAwB;IACrBa,GAAG,EAAEP,QAAS;IACdQ,qBAAqB,EAAEP;EAAqB,CAC/C,CACJ,eACDX,KAAA,CAAAe,aAAA,CAACV,uBAAuB;IAACc,uBAAuB,EAAE;MAAEC,MAAM,EAAEX;IAAK;EAAE,CAAE,CACpD,CACxB,EACD,CAACI,SAAS,EAAEC,WAAW,EAAEN,EAAE,EAAEE,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,CACrE,CAAC;AACL,CAAC;AAEDH,aAAa,CAACe,WAAW,GAAG,eAAe;AAE3C,eAAef,aAAa","ignoreList":[]}

package/lib/esm/components/search-box/search-box-item/SearchBoxItem.styles.js

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components';
+export const StyledSearchBoxItem = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+
+    &:hover {
+        background: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['secondary-102'];
+}};
+    }
+
+    &:focus {
+        background: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['secondary-102'];
+}};
+    }
+`;
+export const StyledSearchBoxItemImage = styled.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${_ref4 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref4;
+  return $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+`;
+export const StyledSearchBoxItemText = styled.p`
+    color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.text;
+}};
+    margin: 5px 0 !important;
+
+    b {
+        color: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.headline;
+}};
+    }
+`;
+//# sourceMappingURL=SearchBoxItem.styles.js.map

package/lib/esm/components/search-box/search-box-item/SearchBoxItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBoxItem.styles.js","names":["styled","css","StyledSearchBoxItem","div","_ref","theme","_ref2","StyledSearchBoxItemImage","img","_ref3","_ref4","$shouldShowRoundImage","StyledSearchBoxItemText","p","_ref5","text","_ref6","headline"],"sources":["../../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\n    }\n\n    &:focus {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-102']};\n    }\n`;\n\ntype StyledSearchBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledSearchBoxItemImage = styled.img<StyledSearchBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledSearchBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    margin: 5px 0 !important;\n\n    b {\n        color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.headline};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA;AACrF;AACA;AACA;AACA,sBAAsBC,KAAA;EAAA,IAAC;IAAED;EAAgC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,eAAe,CAAC;AAAA;AACrF;AACA,CAAC;AAID,OAAO,MAAME,wBAAwB,GAAGP,MAAM,CAACQ,GAAkC;AACjF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA;AAC7E;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBV,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMW,uBAAuB,GAAGZ,MAAM,CAACa,CAA+B;AAC7E,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAoC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACU,IAAI;AAAA;AACpE;AACA;AACA;AACA,iBAAiBC,KAAA;EAAA,IAAC;IAAEX;EAAoC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAACY,QAAQ;AAAA;AAC5E;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,96 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import Icon from '../icon/Icon';
+import Input, { InputSize } from '../input/Input';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
+const SearchInput = _ref => {
+  let {
+    iconColor,
+    isActive,
+    onActiveChange,
+    onChange,
+    onKeyDown,
+    placeholder,
+    size = InputSize.Medium,
+    value
+  } = _ref;
+  const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
+  const inputRef = useRef(null);
+  const theme = useTheme();
+  const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
+  const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
+  useEffect(() => {
+    if (typeof onActiveChange === 'function') {
+      onActiveChange(isSearchInputActive);
+    }
+    if (isSearchInputActive) {
+      inputRef.current?.focus();
+    }
+  }, [isSearchInputActive, onActiveChange]);
+  useEffect(() => {
+    if (typeof isActive === 'boolean') {
+      setIsSearchInputActive(isActive);
+    }
+  }, [isActive]);
+  return /*#__PURE__*/React.createElement(StyledSearchInput, {
+    className: "beta-chayns-search-input",
+    $size: size
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
+  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
+    animate: {
+      opacity: 1,
+      width: '100%'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "searchInputContentWrapper",
+    transition: {
+      duration: 0.3
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    leftElement: /*#__PURE__*/React.createElement(Icon, {
+      color: theme.text,
+      icons: ['far fa-search']
+    }),
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: inputRef,
+    shouldShowClearIcon: true,
+    size: size,
+    value: value
+  }))));
+};
+SearchInput.displayName = 'SearchInput';
+export default SearchInput;
+//# sourceMappingURL=SearchInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","useTheme","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","exit","position","key","transition","duration","color","icons","onClick","width","leftElement","text","ref","shouldShowClearIcon","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    size = InputSize.Medium,\n    value,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    return (\n        <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n            <StyledMotionSearchInputIconWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchInputIconWrapperContent\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0, position: 'absolute' }}\n                        initial={{ opacity: 0 }}\n                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Icon\n                            color={iconColor}\n                            icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n                            onClick={\n                                isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n                            }\n                            size={18}\n                        />\n                    </StyledMotionSearchInputIconWrapperContent>\n                </AnimatePresence>\n            </StyledMotionSearchInputIconWrapper>\n            <AnimatePresence initial={false}>\n                {isSearchInputActive && (\n                    <StyledMotionSearchInputContentWrapper\n                        animate={{ opacity: 1, width: '100%' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"searchInputContentWrapper\"\n                        transition={{ duration: 0.3 }}\n                    >\n                        <Input\n                            leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\n                            onChange={onChange}\n                            onKeyDown={onKeyDown}\n                            placeholder={placeholder}\n                            ref={inputRef}\n                            shouldShowClearIcon\n                            size={size}\n                            value={value}\n                        />\n                    </StyledMotionSearchInputContentWrapper>\n                )}\n            </AnimatePresence>\n        </StyledSearchInput>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,23 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledSearchInput = styled.div`
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    height: ${_ref => {
+  let {
+    $size
+  } = _ref;
+  return $size === 'medium' ? '42px' : '32px';
+}};
+    justify-content: flex-end;
+    width: 100%;
+`;
+export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
+    overflow: hidden;
+`;
+export const StyledMotionSearchInputIconWrapper = styled.div`
+    width: 18px;
+`;
+export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)``;
+//# sourceMappingURL=SearchInput.styles.js.map

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

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