npm - @chayns-components/core - Versions diffs - 5.0.0-beta.1004 → 5.0.0-beta.1005 - Mend

@chayns-components/core 5.0.0-beta.1004 → 5.0.0-beta.1005

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

Files changed (192) hide show

package/lib/cjs/components/search-box/SearchBox.styles.js CHANGED Viewed

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSearchBoxLeftWrapper = exports.StyledSearchBoxIcon = exports.StyledSearchBox = exports.StyledMotionSearchBoxBody = void 0;
-var _framerMotion = require("framer-motion");
+var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledSearchBox = exports.StyledSearchBox = _styledComponents.default.div``;
-const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_react.motion.div)`
     background: ${({
   theme
 }) => theme['101']};

package/lib/cjs/components/search-box/SearchBox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBox.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","StyledSearchBox","exports","styled","div","StyledMotionSearchBoxBody","motion","theme","$width","$height","$browser","css","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import { motion } from '~~framer-~~motion';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\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: BrowserName;\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\nexport const StyledSearchBoxLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\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;AAIzC,MAAMW,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAQpC,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAF,yBAAM,EAACG,~~oBAAM~~,CAACF,GAAG,CAAiC;AAC3F,kBAAkB,CAAC;EAAEG;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA,kBAAkB,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AACvE;AACA,eAAe,CAAC;EAAEF;AAAsC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC9E;AACA;AACA,MAAM,CAAC;EAAEG,QAAQ;EAAEH;AAAsC,CAAC,KAClDG,QAAQ,KAAK,SAAS,GAChB,IAAAC,qBAAG;AACjB,0CAA0CJ,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAI,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CJ,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMK,mBAAmB,GAAAV,OAAA,CAAAU,mBAAA,GAAGT,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA,CAAC;AAEM,MAAMS,0BAA0B,GAAAX,OAAA,CAAAW,0BAAA,GAAGV,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchBox.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSearchBox","exports","styled","div","StyledMotionSearchBoxBody","motion","theme","$width","$height","$browser","css","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper"],"sources":["../../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\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: BrowserName;\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\nexport const StyledSearchBoxLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,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;AAIzC,MAAMW,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAQpC,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAiC;AAC3F,kBAAkB,CAAC;EAAEG;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA,kBAAkB,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AACvE;AACA,eAAe,CAAC;EAAEF;AAAsC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC9E;AACA;AACA,MAAM,CAAC;EAAEG,QAAQ;EAAEH;AAAsC,CAAC,KAClDG,QAAQ,KAAK,SAAS,GAChB,IAAAC,qBAAG;AACjB,0CAA0CJ,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAI,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CJ,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMK,mBAAmB,GAAAV,OAAA,CAAAU,mBAAA,GAAGT,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA,CAAC;AAEM,MAAMS,0BAA0B,GAAAX,OAAA,CAAAW,0BAAA,GAAGV,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js CHANGED Viewed

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSearchBoxBodyHeadGroupName = exports.StyledSearchBoxBodyHead = exports.StyledSearchBoxBodyContent = exports.StyledMotionSearchBoxBody = void 0;
-var _framerMotion = require("framer-motion");
+var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionSearchBoxBody = exports.StyledMotionSearchBoxBody = (0, _styledComponents.default)(_react.motion.div)`
     background: ${({
   theme
 }) => theme['101']};

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBoxBody.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","StyledMotionSearchBoxBody","exports","styled","motion","div","theme","$width","StyledSearchBoxBodyHead","$hasGroupName","css","$hasScrolled","StyledSearchBoxBodyHeadGroupName","text","StyledSearchBoxBodyContent","$headHeight","$height","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import { motion } from '~~framer-~~motion';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\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\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n $height: number;\n $headHeight: number;\n $browser: BrowserName;\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":";;;;;;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;AAQzC,MAAMW,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,CAAiC;AAC3F,kBAAkB,CAAC;EAAEC;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA;AACA,eAAe,CAAC;EAAED;AAAsC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC9E,CAAC;AAEM,MAAME,uBAAuB,GAAAN,OAAA,CAAAM,uBAAA,GAAGL,yBAAM,CAACE,GAA6B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEI;AAAc,CAAC,KAChBA,aAAa,IACb,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;AAAa,CAAC,KACfA,YAAY,IACZ,IAAAD,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAMM,MAAME,gCAAgC,GAAAV,OAAA,CAAAU,gCAAA,GAAGT,yBAAM,CAACE,GAA8C;AACrG,aAAa,CAAC;EAAEC;AAAiD,CAAC,KAAKA,KAAK,CAACO,IAAI;AACjF;AACA,CAAC;AAQM,MAAMC,0BAA0B,GAAAZ,OAAA,CAAAY,0BAAA,GAAGX,yBAAM,CAACE,GAAoC;AACrF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEU;AAAY,CAAC,KAAK,GAAG,GAAGA,WAAW;AACxD,kBAAkB,CAAC;EAAEC,OAAO;EAAED;AAAY,CAAC,KAAMC,OAAO,GAAGD,WAAW,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAO;AAClG;AACA;AACA,MAAM,CAAC;EAAEE,QAAQ;EAAEX;AAAuC,CAAC,KACnDW,QAAQ,KAAK,SAAS,GAChB,IAAAP,qBAAG;AACjB,0CAA0CJ,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAI,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CJ,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchBoxBody.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionSearchBoxBody","exports","styled","motion","div","theme","$width","StyledSearchBoxBodyHead","$hasGroupName","css","$hasScrolled","StyledSearchBoxBodyHeadGroupName","text","StyledSearchBoxBodyContent","$headHeight","$height","$browser"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\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\ntype StyledSearchBoxBodyHeadGroupNameNameProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxBodyHeadGroupName = styled.div<StyledSearchBoxBodyHeadGroupNameNameProps>`\n color: ${({ theme }: StyledSearchBoxBodyHeadGroupNameNameProps) => theme.text};\n font-weight: bold;\n`;\n\ntype StyledSearchBoxBodyContentProps = WithTheme<{\n $height: number;\n $headHeight: number;\n $browser: BrowserName;\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":"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","ignoreList":[]}

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Input = _interopRequireWildcard(require("../input/Input"));
@@ -23,12 +23,12 @@ const SearchInput = ({
   size = _Input.InputSize.Medium,
   value
 }) => {
-  const [isSearchInputActive, setIsSearchInputActive] = (0, _react.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
-  const inputRef = (0, _react.useRef)(null);
+  const [isSearchInputActive, setIsSearchInputActive] = (0, _react2.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
+  const inputRef = (0, _react2.useRef)(null);
   const theme = (0, _styledComponents.useTheme)();
-  const handleBackIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(false), []);
-  const handleSearchIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(true), []);
-  (0, _react.useEffect)(() => {
+  const handleBackIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(false), []);
+  const handleSearchIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(true), []);
+  (0, _react2.useEffect)(() => {
     if (typeof onActiveChange === 'function') {
       onActiveChange(isSearchInputActive);
     }
@@ -37,17 +37,17 @@ const SearchInput = ({
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     }
   }, [isSearchInputActive, onActiveChange]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (typeof isActive === 'boolean') {
       setIsSearchInputActive(isActive);
     }
   }, [isActive]);
-  return /*#__PURE__*/_react.default.createElement(_SearchInput.StyledSearchInput, {
+  return /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size
-  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
-  }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
+  }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
     },
@@ -63,14 +63,14 @@ const SearchInput = ({
       duration: 0.3
     },
     id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     color: iconColor,
     icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
     onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
     size: 18
-  })))), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  })))), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
-  }, isSearchInputActive && /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
+  }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
     animate: {
       opacity: 1,
       width: '100%'
@@ -87,8 +87,8 @@ const SearchInput = ({
     transition: {
       duration: 0.3
     }
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    leftElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react2.default.createElement(_Input.default, {
+    leftElement: /*#__PURE__*/_react2.default.createElement(_Icon.default, {
       color: theme.text,
       icons: ['far fa-search']
     }),

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

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
-var _framerMotion = require("framer-motion");
+var _react = require("motion/react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
@@ -17,13 +17,13 @@ const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.
     justify-content: flex-end;
     width: 100%;
 `;
-const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_react.motion.div)`
     overflow: hidden;
 `;
 const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
     width: 18px;
 `;
-const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_react.motion.div)`
     display: flex;
 `;
 //# sourceMappingURL=SearchInput.styles.js.map

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

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

package/lib/cjs/components/slider/Slider.styles.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = void 0;
-var _framerMotion = require("framer-motion");
+var _react = require("motion/react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
@@ -23,7 +23,7 @@ const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
 `;
-const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_framerMotion.motion.input).attrs(({
+const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_react.motion.input).attrs(({
   $isInterval,
   $value,
   $thumbWidth,

package/lib/cjs/components/slider/Slider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.styles.js","names":["~~_framerMotion~~","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","$isDisabled","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from '~~framer-~~motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n width: 100%;\n height: 30px;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 56 : 48}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,~~aAAA~~,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAsB;AACzD;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AAUM,MAAMC,iBAAiB,GAAAJ,OAAA,CAAAI,iBAAA,GAAG,IAAAH,yBAAM,EAACI,~~oBAAM~~,CAACC,KAAK,CAAC,CAACC,KAAK,CACvD,CAAC;EAAEC,WAAW;EAAEC,MAAM;EAAEC,WAAW;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAM,CAAC,MAAM;EAC1DC,KAAK,EAAE;IACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CQ,KAAK,EAAE,eAAeN,WAAW,KAAK;IACtCO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,iBAAiB,GAAAnB,OAAA,CAAAmB,iBAAA,GAAGlB,yBAAM,CAACC,GAAG,CAACK,KAAK,CAC7C,CAAC;EAAEa,SAAS;EAAEC;AAAa,CAAC,MAAM;EAC9BP,KAAK,EAAE;IACHQ,IAAI,EAAE,GAAGF,SAAS,IAAI;IACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;EACpC;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMG,sBAAsB,GAAAxB,OAAA,CAAAwB,sBAAA,GAAGvB,yBAAM,CAACwB,IAAI,CAAClB,KAAK,CACnD,CAAC;EAAEa,SAAS;EAAEC,YAAY;EAAEK;AAAO,CAAC,MAAM;EACtCZ,KAAK,EAAE;IACHa,QAAQ,EAAE,GAAGD,MAAM,IAAI;IACvBE,GAAG,EAAE,IAAIP,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;IACnCC,IAAI,EAAE,GAAGF,SAAS;EACtB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,CAAC;EAAEA;AAAU,CAAC,KAAKA,SAAS,GAAG,CAAC,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Slider.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","$isDisabled","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n width: 100%;\n height: 30px;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 56 : 48}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider-button/SliderButton.js CHANGED Viewed

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _useElementSize = require("../../hooks/useElementSize");
 var _calculate = require("../../utils/calculate");
 var _sliderButton = require("../../utils/sliderButton");
@@ -22,27 +22,27 @@ const SliderButton = ({
   items,
   onChange
 }) => {
-  const [dragRange, setDragRange] = (0, _react.useState)({
+  const [dragRange, setDragRange] = (0, _react2.useState)({
     left: 0,
     right: 0
   });
-  const [shownItemsCount, setShownItemsCount] = (0, _react.useState)(items.length);
-  const [sliderSize, setSliderSize] = (0, _react.useState)({
+  const [shownItemsCount, setShownItemsCount] = (0, _react2.useState)(items.length);
+  const [sliderSize, setSliderSize] = (0, _react2.useState)({
     width: 0
   });
-  const [currentId, setCurrentId] = (0, _react.useState)('');
-  const [currentPopupId, setCurrentPopupId] = (0, _react.useState)('');
-  const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
-  const sliderButtonRef = (0, _react.useRef)(null);
-  const sliderButtonWrapperRef = (0, _react.useRef)(null);
-  const popupRef = (0, _react.useRef)(null);
-  const [scope, animate] = (0, _framerMotion.useAnimate)();
-  const initialItemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
+  const [currentId, setCurrentId] = (0, _react2.useState)('');
+  const [currentPopupId, setCurrentPopupId] = (0, _react2.useState)('');
+  const [currentIndex, setCurrentIndex] = (0, _react2.useState)(0);
+  const sliderButtonRef = (0, _react2.useRef)(null);
+  const sliderButtonWrapperRef = (0, _react2.useRef)(null);
+  const popupRef = (0, _react2.useRef)(null);
+  const [scope, animate] = (0, _react.useAnimate)();
+  const initialItemWidth = (0, _react2.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
   const elementSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (elementSize) setSliderSize(elementSize);
   }, [elementSize]);
-  const setPopupId = (0, _react.useCallback)(selectedId => {
+  const setPopupId = (0, _react2.useCallback)(selectedId => {
     const ids = items.slice(shownItemsCount - 1).map(({
       id
     }) => id);
@@ -54,8 +54,8 @@ const SliderButton = ({
     }
     setCurrentId(selectedId);
   }, [items, shownItemsCount]);
-  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1, [initialItemWidth, items.length, sliderSize]);
-  const maxShownItemsCount = (0, _react.useMemo)(() => {
+  const isSliderBigger = (0, _react2.useMemo)(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1, [initialItemWidth, items.length, sliderSize]);
+  const maxShownItemsCount = (0, _react2.useMemo)(() => {
     let totalWidth = 0;
     let count = 0;
     while (count < items.length) {
@@ -67,13 +67,13 @@ const SliderButton = ({
     }
     return count;
   }, [items, sliderSize.width]);
-  const itemWidth = (0, _react.useMemo)(() => {
+  const itemWidth = (0, _react2.useMemo)(() => {
     const sliderWidth = (sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width) || 0;
     const itemCount = items.length || 1;
     setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);
     return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
   }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
       const count = Math.floor(sliderSize.width / itemWidth);
@@ -83,7 +83,7 @@ const SliderButton = ({
       });
     }
   }, [isSliderBigger, itemWidth, items.length, sliderSize]);
-  const animation = (0, _react.useCallback)(async x => {
+  const animation = (0, _react2.useCallback)(async x => {
     await animate(scope.current, {
       x
     }, {
@@ -91,11 +91,11 @@ const SliderButton = ({
       duration: 0.2
     });
   }, [animate, scope]);
-  const setItemPosition = (0, _react.useCallback)(index => {
+  const setItemPosition = (0, _react2.useCallback)(index => {
     setCurrentIndex(index);
     void animation(itemWidth * index);
   }, [animation, itemWidth]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (typeof selectedButtonId === 'string') {
       let index = items.findIndex(({
         id
@@ -110,7 +110,7 @@ const SliderButton = ({
       }
     }
   }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, setPopupId, shownItemsCount]);
-  const handleClick = (0, _react.useCallback)((id, index) => {
+  const handleClick = (0, _react2.useCallback)((id, index) => {
     if (isDisabled) {
       return;
     }
@@ -127,14 +127,14 @@ const SliderButton = ({
     }
     setItemPosition(index);
   }, [isDisabled, onChange, setItemPosition, setPopupId]);
-  const buttons = (0, _react.useMemo)(() => {
+  const buttons = (0, _react2.useMemo)(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
       const otherItems = items.slice(shownItemsCount - 1);
       const elements = newItems.map(({
         id,
         text
-      }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      }, index) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
         $width: itemWidth,
         key: `slider-button-${id}`,
         onClick: () => handleClick(id, index)
@@ -142,19 +142,19 @@ const SliderButton = ({
       const popupContent = otherItems.map(({
         id,
         text
-      }) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonPopupContentItem, {
+      }) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonPopupContentItem, {
         key: `slider-button-${id}`,
         onClick: () => handleClick(id, newItems.length),
         $isSelected: id === currentPopupId
       }, text));
       const id = 'more';
-      elements.push(/*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      elements.push(/*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
         $width: itemWidth,
         key: `slider-button-${id}`
-      }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
+      }, /*#__PURE__*/_react2.default.createElement(_Popup.default, {
         ref: popupRef,
-        content: /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonPopupContent, null, popupContent)
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        content: /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonPopupContent, null, popupContent)
+      }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
         icons: ['fa fa-ellipsis'],
         color: "white"
       }))));
@@ -163,28 +163,28 @@ const SliderButton = ({
     return items.map(({
       id,
       text
-    }) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+    }) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
       $width: itemWidth,
       key: `slider-button-${id}`
     }, text));
   }, [currentPopupId, handleClick, itemWidth, items, shownItemsCount]);
-  const pseudoButtons = (0, _react.useMemo)(() => {
+  const pseudoButtons = (0, _react2.useMemo)(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
       const elements = newItems.map(({
         id,
         text
-      }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      }, index) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
         $width: itemWidth,
         key: `pseudo-slider-button-${id}`,
         onClick: () => handleClick(id, index)
       }, text));
       const id = 'more';
-      elements.push(/*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      elements.push(/*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
         $width: itemWidth,
         key: `pseudo-slider-button-${id}`,
         onClick: () => handleClick(id, newItems.length)
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
         icons: ['fa fa-ellipsis']
       })));
       return elements;
@@ -192,7 +192,7 @@ const SliderButton = ({
     return items.map(({
       id,
       text
-    }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+    }, index) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
       $width: itemWidth,
       key: `pseudo-slider-button-${id}`,
       onClick: () => handleClick(id, index)
@@ -202,17 +202,17 @@ const SliderButton = ({
   /**
    * Creates an array with the snap points relative to the width of the items
    */
-  const snapPoints = (0, _react.useMemo)(() => {
+  const snapPoints = (0, _react2.useMemo)(() => {
     const points = [0];
     for (let i = 1; i < items.length; i++) {
       points.push(itemWidth * i);
     }
     return points;
   }, [itemWidth, items.length]);
-  const handleDragStart = (0, _react.useCallback)(() => {
+  const handleDragStart = (0, _react2.useCallback)(() => {
     void (0, _chaynsApi.setRefreshScrollEnabled)(false);
   }, []);
-  const handleDragEnd = (0, _react.useCallback)(() => {
+  const handleDragEnd = (0, _react2.useCallback)(() => {
     void (0, _chaynsApi.setRefreshScrollEnabled)(true);
     const position = (0, _sliderButton.getThumbPosition)({
       scope,
@@ -269,12 +269,12 @@ const SliderButton = ({
       }
     }
   }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButton, {
+  return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButton, {
     $isDisabled: isDisabled,
     ref: sliderButtonRef
-  }, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, {
+  }, /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, {
     $isInvisible: true
-  }, pseudoButtons), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
+  }, pseudoButtons), /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
     ref: scope,
     drag: isDisabled ? false : 'x',
     dragElastic: 0,
@@ -288,11 +288,11 @@ const SliderButton = ({
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart,
     onClick: () => handleClick(currentId, currentIndex)
-  }), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
+  }), /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
     $isDisabled: isDisabled,
     $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
     ref: sliderButtonWrapperRef
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, currentId, currentIndex, dragRange, handleClick, handleDragEnd, handleDragStart, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, null, /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, currentId, currentIndex, dragRange, handleClick, handleDragEnd, handleDragStart, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
 };
 SliderButton.displayName = 'SliderButton';
 var _default = exports.default = SliderButton;