npm - @chayns-components/core - Versions diffs - 5.0.0-beta.573 → 5.0.0-beta.574 - Mend

@chayns-components/core 5.0.0-beta.573 → 5.0.0-beta.574

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

package/lib/api/image/post.d.ts CHANGED Viewed

@@ -6,9 +6,10 @@ export interface PostImageResult {
 }
 interface PostImageOptions {
     file: File;
+    shouldUploadImageToSite?: boolean;
 }
 /**
  * Uploads an image to the tsimg cloud service
  */
-export declare const postImage: ({ file, }: PostImageOptions) => Promise<PostImageResult | undefined>;
+export declare const postImage: ({ file, shouldUploadImageToSite, }: PostImageOptions) => Promise<PostImageResult | undefined>;
 export {};

package/lib/api/image/post.js CHANGED Viewed

@@ -1,19 +1,29 @@
-import { getAccessToken, getUser } from 'chayns-api';
+import { getAccessToken, getSite, getUser } from 'chayns-api';
 import { getFileAsArrayBuffer } from '../../utils/fileDialog';
 /**
  * Uploads an image to the tsimg cloud service
  */
 export const postImage = async _ref => {
   let {
-    file
+    file,
+    shouldUploadImageToSite
   } = _ref;
   const {
     accessToken
   } = await getAccessToken();
   const user = getUser();
+  const site = getSite();
   if (!accessToken || !user?.personId) {
     return undefined;
   }
+  let head = {
+    'X-Person-Id': user.personId
+  };
+  if (shouldUploadImageToSite && site.id) {
+    head = {
+      'X-Site-Id': site.id
+    };
+  }
   const body = await getFileAsArrayBuffer(file);
   const response = await fetch('https://api.tsimg.cloud/image', {
     body,
@@ -21,7 +31,7 @@ export const postImage = async _ref => {
       Accept: 'application/json',
       Authorization: `bearer ${accessToken}`,
       'Content-Type': 'image/*',
-      'X-Person-Id': user.personId
+      ...head
     },
     method: 'POST'
   });

package/lib/api/image/post.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"post.js","names":["getAccessToken","getUser","getFileAsArrayBuffer","postImage","_ref","file","accessToken","user","personId","undefined","body","response","fetch","headers","Accept","Authorization","method","ok","json","Error","status"],"sources":["../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getUser } from 'chayns-api';\nimport type { Meta } from '../../types/file';\nimport { getFileAsArrayBuffer } from '../../utils/fileDialog';\n\nexport interface PostImageResult {\n key: string;\n base: string;\n meta?: Meta;\n}\n\ninterface PostImageOptions {\n file: File;\n}\n\n/*\n Uploads an image to the tsimg cloud service\n /\nexport const postImage = async ({\n file,\n}: PostImageOptions): Promise<PostImageResult \| undefined> => {\n const { accessToken } = await getAccessToken();\n const user = getUser();\n\n if (!accessToken \|\| !user?.personId) {\n return undefined;\n }\n\n const body = await getFileAsArrayBuffer(file);\n\n const response = await fetch('https://api.tsimg.cloud/image', {\n body,\n headers: {\n Accept: 'application/json',\n Authorization: `bearer ${accessToken}`,\n 'Content-Type': 'image/',\n ~~'X-Person-Id': user.personId~~,\n },\n method: 'POST',\n });\n\n if (response.ok) {\n return (await response.json()) as PostImageResult;\n }\n\n throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,QAAQ,YAAY;~~AAEpD~~,SAASC,oBAAoB,QAAQ,wBAAwB;~~AAY7D~~;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAC,IAAA,~~IAEqC~~;EAAA,~~IAF9B~~;IAC5BC;EACc,CAAC,~~GAAAD~~,IAAA;EACf,MAAM;~~IAAEE~~;EAAY,CAAC,GAAG,~~MAAMN~~,cAAc,CAAC,CAAC;EAC9C,~~MAAMO~~,IAAI,~~GAAGN~~,OAAO,CAAC,CAAC;EAEtB,IAAI,~~CAACK~~,WAAW,IAAI,CAACC,IAAI,~~EAAEC~~,QAAQ,EAAE;IACjC,OAAOC,SAAS;EACpB;EAEA,MAAMC,IAAI,GAAG,~~MAAMR~~,oBAAoB,CAACG,IAAI,CAAC;EAE7C,~~MAAMM~~,QAAQ,GAAG,MAAMC,KAAK,CAAC,+BAA+B,EAAE;IAC1DF,IAAI;IACJG,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAG,~~UAAST~~,WAAY,EAAC;MACtC,cAAc,EAAE,SAAS;MACzB,~~aAAa,EAAEC,IAAI,CAACC~~;~~IACxB~~,CAAC;IACDQ,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"post.js","names":["getAccessToken","getSite","getUser","getFileAsArrayBuffer","postImage","_ref","file","shouldUploadImageToSite","accessToken","user","site","personId","undefined","head","id","body","response","fetch","headers","Accept","Authorization","method","ok","json","Error","status"],"sources":["../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getSite, getUser } from 'chayns-api';\nimport type { Meta } from '../../types/file';\nimport { getFileAsArrayBuffer } from '../../utils/fileDialog';\n\nexport interface PostImageResult {\n key: string;\n base: string;\n meta?: Meta;\n}\n\ninterface PostImageOptions {\n file: File;\n shouldUploadImageToSite?: boolean;\n}\n\n/*\n Uploads an image to the tsimg cloud service\n /\nexport const postImage = async ({\n file,\n shouldUploadImageToSite,\n}: PostImageOptions): Promise<PostImageResult \| undefined> => {\n const { accessToken } = await getAccessToken();\n const user = getUser();\n const site = getSite();\n\n if (!accessToken \|\| !user?.personId) {\n return undefined;\n }\n\n let head: { [key: string]: string } = { 'X-Person-Id': user.personId };\n\n if (shouldUploadImageToSite && site.id) {\n head = { 'X-Site-Id': site.id };\n }\n\n const body = await getFileAsArrayBuffer(file);\n\n const response = await fetch('https://api.tsimg.cloud/image', {\n body,\n headers: {\n Accept: 'application/json',\n Authorization: `bearer ${accessToken}`,\n 'Content-Type': 'image/',\n ...head,\n },\n method: 'POST',\n });\n\n if (response.ok) {\n return (await response.json()) as PostImageResult;\n }\n\n throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,wBAAwB;AAa7D;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAC,IAAA,IAGqC;EAAA,IAH9B;IAC5BC,IAAI;IACJC;EACc,CAAC,GAAAF,IAAA;EACf,MAAM;IAAEG;EAAY,CAAC,GAAG,MAAMR,cAAc,CAAC,CAAC;EAC9C,MAAMS,IAAI,GAAGP,OAAO,CAAC,CAAC;EACtB,MAAMQ,IAAI,GAAGT,OAAO,CAAC,CAAC;EAEtB,IAAI,CAACO,WAAW,IAAI,CAACC,IAAI,EAAEE,QAAQ,EAAE;IACjC,OAAOC,SAAS;EACpB;EAEA,IAAIC,IAA+B,GAAG;IAAE,aAAa,EAAEJ,IAAI,CAACE;EAAS,CAAC;EAEtE,IAAIJ,uBAAuB,IAAIG,IAAI,CAACI,EAAE,EAAE;IACpCD,IAAI,GAAG;MAAE,WAAW,EAAEH,IAAI,CAACI;IAAG,CAAC;EACnC;EAEA,MAAMC,IAAI,GAAG,MAAMZ,oBAAoB,CAACG,IAAI,CAAC;EAE7C,MAAMU,QAAQ,GAAG,MAAMC,KAAK,CAAC,+BAA+B,EAAE;IAC1DF,IAAI;IACJG,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAG,UAASZ,WAAY,EAAC;MACtC,cAAc,EAAE,SAAS;MACzB,GAAGK;IACP,CAAC;IACDQ,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC","ignoreList":[]}

package/lib/components/amount-control/AmountControl.js CHANGED Viewed

@@ -35,6 +35,7 @@ const AmountControl = _ref => {
         setDisplayState('default');
     }
   }, [amountValue, maxAmount]);
+  const hasFocus = useMemo(() => displayState !== 'default', [displayState]);
   /**
    * Function that sets the amountValue to the amount
@@ -168,6 +169,7 @@ const AmountControl = _ref => {
   }, leftIcon)), /*#__PURE__*/React.createElement(StyledAmountControlInput, {
     $displayState: displayState,
     $shouldShowIcon: shouldShowIcon,
+    $hasFocus: hasFocus,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     value: displayState === 'default' && label ? label : inputValue,

package/lib/components/amount-control/AmountControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","maxAmount","onChange","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","$displayState","$shouldShowIcon","onBlur","displayName"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n maxAmount,\n onChange,\n}) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /\n Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const valueBeforeCheck = Number(event.target.value);\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Number(event.target.value),\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-trash']} size={25} />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledAmountControlInput\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n type={amountValue === 0 ? 'text' : 'number'}\n />\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","maxAmount","onChange","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","hasFocus","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'delete' \| 'normal' \| 'maxAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n A Text that should be displayed, if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n /\n maxAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n maxAmount,\n onChange,\n}) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /\n Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const valueBeforeCheck = Number(event.target.value);\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Number(event.target.value),\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement \| null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-trash']} size={25} />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState, icon]);\n\n const shouldShowLeftIcon = useMemo(() => {\n if (shouldShowIcon) {\n return true;\n }\n\n return !(displayState === 'default' && !shouldShowIcon);\n }, [displayState, shouldShowIcon]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <AnimatePresence initial={false}>\n {shouldShowLeftIcon && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledAmountControlInput\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n type={amountValue === 0 ? 'text' : 'number'}\n />\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/amount-control/AmountControl.styles.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export declare const StyledAmountControl: import("styled-components").IStyledCom
 type StyledAmountControlInputProps = WithTheme<{
     $displayState: DisplayState;
     $shouldShowIcon: boolean;
+    $hasFocus: boolean;
 }>;
 export declare const StyledAmountControlInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledAmountControlInputProps>>;
 type StyledAmountControlButtonProps = WithTheme<{

package/lib/components/amount-control/AmountControl.styles.js CHANGED Viewed

@@ -22,26 +22,32 @@ export const StyledAmountControlInput = styled.input`
     height: 28px;
     width: 95px;
     text-align: center;
-    ${_ref3 => {
+    cursor: ${_ref3 => {
   let {
-    $displayState
+    $hasFocus
   } = _ref3;
+  return $hasFocus ? 'text' : 'pointer';
+}};
+    ${_ref4 => {
+  let {
+    $displayState
+  } = _ref4;
   return $displayState !== 'normal' && css`
             border-bottom-right-radius: 3px;
             border-top-right-radius: 3px;
         `;
 }}
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     $displayState,
     $shouldShowIcon
-  } = _ref4;
+  } = _ref5;
   return $displayState === 'default' && !$shouldShowIcon && css`
             border-bottom-left-radius: 3px;
             border-top-left-radius: 3px;
         `;
-}}
+}};
 `;
 export const StyledMotionAmountControlButton = styled(motion.button)`
     overflow: hidden;
@@ -49,10 +55,10 @@ export const StyledMotionAmountControlButton = styled(motion.button)`
     height: 28px;
     width: 40px;
-    ${_ref5 => {
+    ${_ref6 => {
   let {
     $isDisabled
-  } = _ref5;
+  } = _ref6;
   return $isDisabled && css`
             opacity: 0.5;
         `;

package/lib/components/amount-control/AmountControl.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","$~~displayState~~","_ref4","$shouldShowIcon","StyledMotionAmountControlButton","button","~~_ref5~~","$isDisabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n $displayState: DisplayState;\n $shouldShowIcon: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n border: none;\n height: 28px;\n width: 95px;\n text-align: center;\n ${({ $displayState }) =>\n $displayState !== 'normal' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n\n ${({ $displayState, $shouldShowIcon }) =>\n $displayState === 'default' &&\n !$shouldShowIcon &&\n css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n overflow: hidden;\n background-color: rgba(255, 255, 255, 0.2);\n height: 28px;\n width: 40px;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;~~AAOD~~,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,~~MAAMI~~,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,~~IAC1BT~~,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV~~;AACA~~,~~MAAMU~~,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,~~IAChBX~~,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAMD,OAAO,~~MAAMY~~,+BAA+B,~~GAAGb~~,MAAM,CACjDD,MAAM,~~CAACe~~,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,~~IACXf~~,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","$hasFocus","_ref4","$displayState","_ref5","$shouldShowIcon","StyledMotionAmountControlButton","button","_ref6","$isDisabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n $displayState: DisplayState;\n $shouldShowIcon: boolean;\n $hasFocus: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n border: none;\n height: 28px;\n width: 95px;\n text-align: center;\n cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n ${({ $displayState }) =>\n $displayState !== 'normal' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n ${({ $displayState, $shouldShowIcon }) =>\n $displayState === 'default' &&\n !$shouldShowIcon &&\n css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n `};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n overflow: hidden;\n background-color: rgba(255, 255, 255, 0.2);\n height: 28px;\n width: 40px;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,cAAcI,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAE;AAClE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BX,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,MAAMY,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBb,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAMD,OAAO,MAAMc,+BAA+B,GAAGf,MAAM,CACjDD,MAAM,CAACiB,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXjB,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC","ignoreList":[]}

package/lib/components/button/Button.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { useTheme } from 'styled-components';
 import Icon from '../icon/Icon';
-import SmallWaitCursor, { SmallWaitCursorSize } from '../small-wait-cursor/SmallWaitCursor';
+import SmallWaitCursor from '../small-wait-cursor/SmallWaitCursor';
 import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
 const Button = _ref => {
   let {
@@ -66,7 +66,7 @@ const Button = _ref => {
   }, /*#__PURE__*/React.createElement(SmallWaitCursor, {
     color: "white",
     shouldHideBackground: true,
-    size: SmallWaitCursorSize.Small
+    size: 26
   })), !shouldShowWaitCursor && children && /*#__PURE__*/React.createElement(StyledMotionChildrenWrapper, {
     animate: {
       opacity: 1,

package/lib/components/button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useTheme","Icon","SmallWaitCursor","~~SmallWaitCursorSize","~~StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","theme","createElement","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","whileTap","backgroundColor","whileHover","initial","color","icons","animate","opacity","width","exit","key","style","overflow","transition","duration","shouldHideBackground","size","~~Small","~~displayName"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport SmallWaitCursor, ~~{ SmallWaitCursorSize }~~ from '../small-wait-cursor/SmallWaitCursor';\nimport {\n StyledIconWrapper,\n StyledMotionButton,\n StyledMotionChildrenWrapper,\n StyledMotionWaitCursorWrapper,\n} from './Button.styles';\n\nexport type ButtonProps = {\n /*\n The label of the button\n /\n children?: ReactNode;\n /\n Additional class names for the button element\n /\n className?: string;\n /\n An icon that is displayed on the left-hand side of the button text\n /\n icon?: string;\n /\n Disables the button so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Displays the button in the secondary style\n /\n isSecondary?: boolean;\n /\n Function to be executed when the button is clicked\n /\n onClick: MouseEventHandler<HTMLButtonElement>;\n /\n Shows a wait cursor instead of button text\n /\n shouldShowWaitCursor?: boolean;\n /\n Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Button: FC<ButtonProps> = ({\n children,\n className,\n icon,\n isDisabled,\n isSecondary,\n onClick,\n shouldShowWaitCursor,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n onClick(event);\n };\n\n const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n const theme: Theme = useTheme();\n\n return (\n <StyledMotionButton\n className={buttonClasses}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $hasChildren={!!children}\n $hasIcon={typeof icon === 'string' && icon !== ''}\n $isSecondary={isSecondary}\n onClick={handleClick}\n whileTap={\n isDisabled ? {} : { backgroundColor: isSecondary ? theme['201'] : theme['407'] }\n }\n whileHover={\n isDisabled ? {} : { backgroundColor: isSecondary ? theme['203'] : theme['409'] }\n }\n >\n <AnimatePresence initial={false}>\n {icon && (\n <StyledIconWrapper>\n <Icon color=\"white\" icons={[icon]} />\n </StyledIconWrapper>\n )}\n {shouldShowWaitCursor && (\n <StyledMotionWaitCursorWrapper\n animate={{ opacity: 1, width: 40 }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"wait-cursor\"\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n <SmallWaitCursor\n color=\"white\"\n shouldHideBackground\n size={~~SmallWaitCursorSize.Small~~}\n />\n </StyledMotionWaitCursorWrapper>\n )}\n {!shouldShowWaitCursor && children && (\n <StyledMotionChildrenWrapper\n animate={{ opacity: 1, width: 'auto' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"children\"\n // style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionChildrenWrapper>\n )}\n </AnimatePresence>\n </StyledMotionButton>\n );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,MAA4C,OAAO;AAC/D,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,eAAe,~~IAAIC~~,~~mBAAmB,QAAQ,~~sCAAsC;~~AAC3F~~,SACIC,iBAAiB,EACjBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,6BAA6B,QAC1B,iBAAiB;AAqCxB,MAAMC,MAAuB,GAAGC,IAAA,IAS1B;EAAA,IAT2B;IAC7BC,QAAQ;IACRC,SAAS;IACTC,IAAI;IACJC,UAAU;IACVC,WAAW;IACXC,OAAO;IACPC,oBAAoB;IACpBC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAMS,WAAiD,GAAIC,KAAK,IAAK;IACjE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEAL,OAAO,CAACI,KAAK,CAAC;EAClB,CAAC;EAED,MAAME,aAAa,~~GAAGxB~~,IAAI,CAAC,6BAA6B,~~EAAEc~~,SAAS,CAAC;EAEpE,MAAMW,KAAY,~~GAAGtB~~,QAAQ,CAAC,CAAC;EAE/B,oBACID,KAAA,~~CAAAwB~~,aAAA,CAAClB,kBAAkB;IACfM,SAAS,EAAEU,aAAc;IACzBG,QAAQ,EAAEX,UAAW;IACrBY,WAAW,EAAEZ,UAAW;IACxBa,YAAY,EAAE,CAAC,CAAChB,QAAS;IACzBiB,QAAQ,EAAE,OAAOf,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAG;IAClDgB,YAAY,EAAEd,WAAY;IAC1BC,OAAO,EAAEG,WAAY;IACrBW,QAAQ,EACJhB,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEiB,eAAe,EAAEhB,WAAW,GAAGQ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK;IAAE,CAClF;IACDS,UAAU,EACNlB,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEiB,eAAe,EAAEhB,WAAW,GAAGQ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK;IAAE;EAClF,~~gBAEDvB~~,KAAA,~~CAAAwB~~,aAAA,~~CAACzB~~,eAAe;~~IAACkC~~,OAAO,EAAE;EAAM,GAC3BpB,IAAI,~~iBACDb~~,KAAA,~~CAAAwB~~,aAAA,CAACnB,iBAAiB,~~qBACdL~~,KAAA,~~CAAAwB~~,aAAA,~~CAACtB~~,IAAI;~~IAACgC~~,KAAK,EAAC,OAAO;IAACC,KAAK,EAAE,CAACtB,IAAI;EAAE,CAAE,CACrB,CACtB,EACAI,oBAAoB,~~iBACjBjB~~,KAAA,~~CAAAwB~~,aAAA,CAAChB,6BAA6B;IAC1B4B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAG,CAAE;IACnCC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAC/BL,OAAO,EAAE;MAAEI,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC,aAAa;IACjBC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAS,CAAE;IAC9BC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,~~gBAE9B5C~~,KAAA,~~CAAAwB~~,aAAA,~~CAACrB~~,eAAe;~~IACZ+B~~,KAAK,EAAC,OAAO;~~IACbW~~,oBAAoB;~~IACpBC~~,IAAI,~~EAAE1C,mBAAmB,CAAC2C~~;~~EAAM~~,~~CACnC~~,~~CAC0B~~,CAClC,EACA,~~CAAC9B~~,oBAAoB,IAAIN,QAAQ,~~iBAC9BX~~,KAAA,~~CAAAwB~~,aAAA,CAACjB,2BAA2B;IACxB6B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAO,CAAE;IACvCC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAC/BL,OAAO,EAAE;MAAEI,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC;IACJ;IAAA;IACAG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BjC,QACwB,CAEpB,CACD,CAAC;AAE7B,CAAC;AAEDF,MAAM,~~CAACuC~~,WAAW,GAAG,QAAQ;AAE7B,~~eAAevC~~,MAAM","ignoreList":[]}
1	+ {"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useTheme","Icon","SmallWaitCursor","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","theme","createElement","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","whileTap","backgroundColor","whileHover","initial","color","icons","animate","opacity","width","exit","key","style","overflow","transition","duration","shouldHideBackground","size","displayName"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport SmallWaitCursor from '../small-wait-cursor/SmallWaitCursor';\nimport {\n StyledIconWrapper,\n StyledMotionButton,\n StyledMotionChildrenWrapper,\n StyledMotionWaitCursorWrapper,\n} from './Button.styles';\n\nexport type ButtonProps = {\n /*\n The label of the button\n /\n children?: ReactNode;\n /\n Additional class names for the button element\n /\n className?: string;\n /\n An icon that is displayed on the left-hand side of the button text\n /\n icon?: string;\n /\n Disables the button so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Displays the button in the secondary style\n /\n isSecondary?: boolean;\n /\n Function to be executed when the button is clicked\n /\n onClick: MouseEventHandler<HTMLButtonElement>;\n /\n Shows a wait cursor instead of button text\n /\n shouldShowWaitCursor?: boolean;\n /\n Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Button: FC<ButtonProps> = ({\n children,\n className,\n icon,\n isDisabled,\n isSecondary,\n onClick,\n shouldShowWaitCursor,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n onClick(event);\n };\n\n const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n const theme: Theme = useTheme();\n\n return (\n <StyledMotionButton\n className={buttonClasses}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $hasChildren={!!children}\n $hasIcon={typeof icon === 'string' && icon !== ''}\n $isSecondary={isSecondary}\n onClick={handleClick}\n whileTap={\n isDisabled ? {} : { backgroundColor: isSecondary ? theme['201'] : theme['407'] }\n }\n whileHover={\n isDisabled ? {} : { backgroundColor: isSecondary ? theme['203'] : theme['409'] }\n }\n >\n <AnimatePresence initial={false}>\n {icon && (\n <StyledIconWrapper>\n <Icon color=\"white\" icons={[icon]} />\n </StyledIconWrapper>\n )}\n {shouldShowWaitCursor && (\n <StyledMotionWaitCursorWrapper\n animate={{ opacity: 1, width: 40 }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"wait-cursor\"\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n <SmallWaitCursor color=\"white\" shouldHideBackground size={26} />\n </StyledMotionWaitCursorWrapper>\n )}\n {!shouldShowWaitCursor && children && (\n <StyledMotionChildrenWrapper\n animate={{ opacity: 1, width: 'auto' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"children\"\n // style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionChildrenWrapper>\n )}\n </AnimatePresence>\n </StyledMotionButton>\n );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/filter-buttons/filter-button/FilterButton.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react';
-import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
+import type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
 export type FilterButtonProps = {
     color?: CSSProperties['color'];
     icons?: string[];

package/lib/components/filter-buttons/filter-button/FilterButton.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo } from 'react';
-import { FilterButtonSize } from '../../../types/filterButtons';
 import Icon from '../../icon/Icon';
 import { StyledFilterButtonItem, StyledFilterButtonItemBorder, StyledFilterButtonItemLabel, StyledFilterButtonItemLabelCount, StyledFilterButtonItemLabelText, StyledMotionFilterButtonItemBackground } from './FilterButton.styles';
 const FilterButton = _ref => {
@@ -23,7 +22,7 @@ const FilterButton = _ref => {
     onClick: handleClick
   }, /*#__PURE__*/React.createElement(StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/React.createElement(Icon, {
     icons: icons,
-    size: size === FilterButtonSize.Normal ? 15 : 10
+    size: 15
   }), /*#__PURE__*/React.createElement(StyledFilterButtonItemLabelText, null, text), count && /*#__PURE__*/React.createElement(StyledFilterButtonItemLabelCount, null, count)), /*#__PURE__*/React.createElement(StyledFilterButtonItemBorder, {
     $isSelected: isSelected,
     $shape: shape,

package/lib/components/filter-buttons/filter-button/FilterButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","~~FilterButtonSize","~~Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","_ref","icons","size","shape","text","color","count","isSelected","id","onSelect","handleClick","createElement","$isSelected","$size","onClick","~~Normal","~~$shape","$color","displayName"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n onSelect,\n}) => {\n const handleClick = useCallback(() => {\n onSelect(id);\n }, [id, onSelect]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem $isSelected={isSelected} $size={size} onClick={handleClick}>\n <StyledFilterButtonItemLabel>\n {icons && ~~(\n~~ <Icon icons={icons} size={~~size === FilterButtonSize.Normal ?~~ 15 ~~: 10~~} ~~/>\n )~~}\n <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n {count && (\n <StyledFilterButtonItemLabelCount>{count}</StyledFilterButtonItemLabelCount>\n )}\n </StyledFilterButtonItemLabel>\n <StyledFilterButtonItemBorder\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n <StyledMotionFilterButtonItemBackground\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n </StyledFilterButtonItem>\n ),\n [color, count, handleClick, icons, isSelected, shape, size, text],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;~~AACtE~~,~~SAAgCC,gBAAgB,QAAQ,8BAA8B;AACtF,~~OAAOC,IAAI,MAAM,iBAAiB;AAClC,SACIC,sBAAsB,EACtBC,4BAA4B,EAC5BC,2BAA2B,EAC3BC,gCAAgC,EAChCC,+BAA+B,EAC/BC,sCAAsC,QACnC,uBAAuB;AAc9B,MAAMC,YAAmC,GAAGC,IAAA,IAUtC;EAAA,IAVuC;IACzCC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,EAAE;IACFC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAAW,~~GAAGrB~~,WAAW,CAAC,MAAM;~~IAClCoB~~,QAAQ,CAACD,EAAE,CAAC;EAChB,CAAC,EAAE,CAACA,EAAE,EAAEC,QAAQ,CAAC,CAAC;EAElB,~~OAAOnB~~,OAAO,CACV,mBACIF,KAAA,~~CAAAuB~~,aAAA,CAAClB,sBAAsB;IAACmB,WAAW,EAAEL,UAAW;IAACM,KAAK,EAAEX,IAAK;IAACY,OAAO,EAAEJ;EAAY,gBAC/~~EtB~~,KAAA,~~CAAAuB~~,aAAA,CAAChB,2BAA2B,QACvBM,KAAK,~~iBACFb~~,KAAA,~~CAAAuB~~,aAAA,CAACnB,IAAI;IAACS,KAAK,EAAEA,KAAM;IAACC,IAAI,~~EAAEA,IAAI,KAAKX,gBAAgB,CAACwB,MAAM,GAAG,~~EAAE~~,GAAG~~;EAAG,CAAE,~~CAC1E~~,~~eACD3B~~,KAAA,~~CAAAuB~~,aAAA,CAACd,+BAA+B,QAAEO,IAAsC,CAAC,EACxEE,KAAK,~~iBACFlB~~,KAAA,~~CAAAuB~~,aAAA,CAACf,gCAAgC,QAAEU,KAAwC,CAEtD,CAAC,~~eAC9BlB~~,KAAA,~~CAAAuB~~,aAAA,CAACjB,4BAA4B;IACzBkB,WAAW,EAAEL,UAAW;~~IACxBS~~,MAAM,~~EAAEb~~,KAAM;~~IACdc~~,MAAM,~~EAAEZ~~;EAAM,CACjB,CAAC,~~eACFjB~~,KAAA,~~CAAAuB~~,aAAA,CAACb,sCAAsC;IACnCc,WAAW,EAAEL,UAAW;~~IACxBS~~,MAAM,~~EAAEb~~,KAAM;~~IACdc~~,MAAM,~~EAAEZ~~;EAAM,CACjB,CACmB,CAC3B,EACD,CAACA,KAAK,EAAEC,KAAK,EAAEI,WAAW,EAAET,KAAK,EAAEM,UAAU,EAAEJ,KAAK,EAAED,IAAI,EAAEE,IAAI,CACpE,CAAC;AACL,CAAC;AAEDL,YAAY,~~CAACmB~~,WAAW,GAAG,cAAc;AAEzC,~~eAAenB~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","_ref","icons","size","shape","text","color","count","isSelected","id","onSelect","handleClick","createElement","$isSelected","$size","onClick","$shape","$color","displayName"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n onSelect,\n}) => {\n const handleClick = useCallback(() => {\n onSelect(id);\n }, [id, onSelect]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem $isSelected={isSelected} $size={size} onClick={handleClick}>\n <StyledFilterButtonItemLabel>\n {icons && <Icon icons={icons} size={15} />}\n <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n {count && (\n <StyledFilterButtonItemLabelCount>{count}</StyledFilterButtonItemLabelCount>\n )}\n </StyledFilterButtonItemLabel>\n <StyledFilterButtonItemBorder\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n <StyledMotionFilterButtonItemBackground\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n </StyledFilterButtonItem>\n ),\n [color, count, handleClick, icons, isSelected, shape, size, text],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEtE,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SACIC,sBAAsB,EACtBC,4BAA4B,EAC5BC,2BAA2B,EAC3BC,gCAAgC,EAChCC,+BAA+B,EAC/BC,sCAAsC,QACnC,uBAAuB;AAc9B,MAAMC,YAAmC,GAAGC,IAAA,IAUtC;EAAA,IAVuC;IACzCC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,EAAE;IACFC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAAW,GAAGpB,WAAW,CAAC,MAAM;IAClCmB,QAAQ,CAACD,EAAE,CAAC;EAChB,CAAC,EAAE,CAACA,EAAE,EAAEC,QAAQ,CAAC,CAAC;EAElB,OAAOlB,OAAO,CACV,mBACIF,KAAA,CAAAsB,aAAA,CAAClB,sBAAsB;IAACmB,WAAW,EAAEL,UAAW;IAACM,KAAK,EAAEX,IAAK;IAACY,OAAO,EAAEJ;EAAY,gBAC/ErB,KAAA,CAAAsB,aAAA,CAAChB,2BAA2B,QACvBM,KAAK,iBAAIZ,KAAA,CAAAsB,aAAA,CAACnB,IAAI;IAACS,KAAK,EAAEA,KAAM;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,eAC1Cb,KAAA,CAAAsB,aAAA,CAACd,+BAA+B,QAAEO,IAAsC,CAAC,EACxEE,KAAK,iBACFjB,KAAA,CAAAsB,aAAA,CAACf,gCAAgC,QAAEU,KAAwC,CAEtD,CAAC,eAC9BjB,KAAA,CAAAsB,aAAA,CAACjB,4BAA4B;IACzBkB,WAAW,EAAEL,UAAW;IACxBQ,MAAM,EAAEZ,KAAM;IACda,MAAM,EAAEX;EAAM,CACjB,CAAC,eACFhB,KAAA,CAAAsB,aAAA,CAACb,sCAAsC;IACnCc,WAAW,EAAEL,UAAW;IACxBQ,MAAM,EAAEZ,KAAM;IACda,MAAM,EAAEX;EAAM,CACjB,CACmB,CAC3B,EACD,CAACA,KAAK,EAAEC,KAAK,EAAEI,WAAW,EAAET,KAAK,EAAEM,UAAU,EAAEJ,KAAK,EAAED,IAAI,EAAEE,IAAI,CACpE,CAAC;AACL,CAAC;AAEDL,YAAY,CAACkB,WAAW,GAAG,cAAc;AAEzC,eAAelB,YAAY","ignoreList":[]}

package/lib/components/filter-buttons/filter-button/FilterButton.styles.js CHANGED Viewed

@@ -3,15 +3,19 @@ import styled, { css } from 'styled-components';
 import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
 export const StyledFilterButtonItem = styled.div`
     position: relative;
-    font-size: ${_ref => {
+    font-size: 15px;
+    line-height: 1em;
+    cursor: pointer;
+    user-select: none;
+    padding: ${_ref => {
   let {
     $size
   } = _ref;
-  return $size === FilterButtonSize.Normal ? 15 : 12;
-}}px;
-    cursor: pointer;
-    user-select: none;
-    padding: 3px 14px;
+  return $size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px';
+}};
+    display: flex;
+    align-items: center;
     &:hover > div:last-child {
         ${_ref2 => {

package/lib/components/filter-buttons/filter-button/FilterButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","_ref","$size","Normal","_ref2","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemLabelCount","_ref4","StyledFilterButtonItemBorder","_ref5","$shape","Round","_ref6","$color","headline","StyledMotionFilterButtonItemBackground","_ref7","_ref8","_ref9"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{ $size: FilterButtonSize; $isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n font-size: ${({ $size }) => ($size === FilterButtonSize.Normal ? 15 : 12)}px;\n ~~cursor~~: ~~pointer~~;\n ~~user~~-~~select~~: ~~none~~;\n ~~padding: 3px 14px;\n~~\n &:hover > div:last-child {\n ${({ $isSelected }) =>\n !$isSelected &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAKtF,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACK,GAAiC;AAC9E;AACA,~~iBAAiBC~~,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAKJ,gBAAgB,CAACK,MAAM,GAAG,~~EAAE~~,GAAG,~~EAAE~~;AAAA,CAAE;~~AAC9E~~;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACd,CAACC,WAAW,IACZT,GAAI;AAChB;AACA,aAAa;AAAA,CAAC;AACd;AACA,CAAC;AAED,OAAO,MAAMU,2BAA2B,GAAGX,MAAM,CAACK,GAAI;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,+BAA+B,GAAGZ,MAAM,CAACa,CAAwC;AAC9F,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAC7E;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGjB,MAAM,CAACa,CAAyC;AAChG,aAAaK,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACC,IAAI;AAAA,CAAC;AAC7E;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,4BAA4B,GAAGnB,MAAM,CAACK,GAAuC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBe,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACxF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAET,KAAK;IAAEL;EAA+C,CAAC,GAAAa,KAAA;EAAA,OAChE,CAACb,WAAW,IACZT,GAAI;AACZ;AACA;AACA,4BAA4BuB,MAAM,IAAIT,KAAK,CAACU,QAAS;AACrD,SAAS;AAAA,CAAC;AACV,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAG1B,MAAM,CACxDD,MAAM,CAACM,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,eAAesB,KAAA;EAAA,IAAC;IAAEjB;EAAY,CAAC,GAAAiB,KAAA;EAAA,OAAMjB,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA,qBAAqBkB,KAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,KAAA;EAAA,OAAMP,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACxF,wBAAwBO,KAAA;EAAA,IAAC;IAAEL,MAAM;IAAET;EAA6C,CAAC,GAAAc,KAAA;EAAA,OACzEL,MAAM,IAAIT,KAAK,CAACU,QAAQ;AAAA,CAAC;AACjC,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","_ref","$size","Normal","_ref2","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemLabelCount","_ref4","StyledFilterButtonItemBorder","_ref5","$shape","Round","_ref6","$color","headline","StyledMotionFilterButtonItemBackground","_ref7","_ref8","_ref9"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{ $size: FilterButtonSize; $isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n font-size: 15px;\n line-height: 1em;\n cursor: pointer;\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n &:hover > div:last-child {\n ${({ $isSelected }) =>\n !$isSelected &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAKtF,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACK,GAAiC;AAC9E;AACA;AACA;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAKJ,gBAAgB,CAACK,MAAM,GAAG,UAAU,GAAG,SAAS;AAAA,CAAE;AAC3F;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACd,CAACC,WAAW,IACZT,GAAI;AAChB;AACA,aAAa;AAAA,CAAC;AACd;AACA,CAAC;AAED,OAAO,MAAMU,2BAA2B,GAAGX,MAAM,CAACK,GAAI;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,+BAA+B,GAAGZ,MAAM,CAACa,CAAwC;AAC9F,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAC7E;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGjB,MAAM,CAACa,CAAyC;AAChG,aAAaK,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACC,IAAI;AAAA,CAAC;AAC7E;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,4BAA4B,GAAGnB,MAAM,CAACK,GAAuC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBe,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACxF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAET,KAAK;IAAEL;EAA+C,CAAC,GAAAa,KAAA;EAAA,OAChE,CAACb,WAAW,IACZT,GAAI;AACZ;AACA;AACA,4BAA4BuB,MAAM,IAAIT,KAAK,CAACU,QAAS;AACrD,SAAS;AAAA,CAAC;AACV,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAG1B,MAAM,CACxDD,MAAM,CAACM,GACX,CAAyC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,eAAesB,KAAA;EAAA,IAAC;IAAEjB;EAAY,CAAC,GAAAiB,KAAA;EAAA,OAAMjB,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA,qBAAqBkB,KAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,KAAA;EAAA,OAAMP,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACxF,wBAAwBO,KAAA;EAAA,IAAC;IAAEL,MAAM;IAAET;EAA6C,CAAC,GAAAc,KAAA;EAAA,OACzEL,MAAM,IAAIT,KAAK,CAACU,QAAQ;AAAA,CAAC;AACjC,CAAC","ignoreList":[]}

package/lib/components/small-wait-cursor/SmallWaitCursor.d.ts CHANGED Viewed

@@ -21,7 +21,7 @@ export type SmallWaitCursorProps = {
     /**
      * The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.
      */
-    size?: SmallWaitCursorSize;
+    size?: SmallWaitCursorSize | number;
     /**
      * The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.
      */

package/lib/components/small-wait-cursor/SmallWaitCursor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SmallWaitCursor.js","names":["React","StyledSmallWaitCursor","StyledSmallWaitCursorBackground","StyledSmallWaitCursorWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","SmallWaitCursor","_ref","color","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","createElement","$shouldShowWaitCursor","$size","$color","$speed","displayName"],"sources":["../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { CSSProperties, FC } from 'react';\nimport {\n StyledSmallWaitCursor,\n StyledSmallWaitCursorBackground,\n StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n Small = 16,\n Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n Slow = 1.5,\n Medium = 1,\n Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n color?: CSSProperties['color'];\n /*\n Specifies whether the wait cursor should be displayed with a background.\n /\n shouldHideBackground?: boolean;\n /\n Specifies whether the wait cursor should be displayed.\n /\n shouldHideWaitCursor?: boolean;\n /\n The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.\n /\n size?: SmallWaitCursorSize;\n /\n The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n */\n speed?: SmallWaitCursorSpeed;\n};\n\nconst SmallWaitCursor: FC<SmallWaitCursorProps> = ({\n color,\n shouldHideBackground = false,\n shouldHideWaitCursor = false,\n size = SmallWaitCursorSize.Medium,\n speed = SmallWaitCursorSpeed.Medium,\n}) => (\n <StyledSmallWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor} $size={size}>\n <StyledSmallWaitCursorWaitCursor $color={color} $size={size} $speed={speed} />\n {!shouldHideBackground && <StyledSmallWaitCursorBackground />}\n </StyledSmallWaitCursor>\n);\n\nSmallWaitCursor.displayName = 'SmallWaitCursor';\n\nexport default SmallWaitCursor;\n"],"mappings":"AAAA;;AAEA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SACIC,qBAAqB,EACrBC,+BAA+B,EAC/BC,+BAA+B,QAC5B,0BAA0B;AAEjC,WAAYC,mBAAmB,0BAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;AAK/B,WAAYC,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AA0BhC,MAAMC,eAAyC,GAAGC,IAAA;EAAA,IAAC;IAC/CC,KAAK;IACLC,oBAAoB,GAAG,KAAK;IAC5BC,oBAAoB,GAAG,KAAK;IAC5BC,IAAI,GAAGP,mBAAmB,CAACQ,MAAM;IACjCC,KAAK,GAAGR,oBAAoB,CAACO;EACjC,CAAC,GAAAL,IAAA;EAAA,oBACGP,KAAA,CAAAc,aAAA,CAACb,qBAAqB;IAACc,qBAAqB,EAAE,CAACL,oBAAqB;IAACM,KAAK,EAAEL;EAAK,gBAC7EX,KAAA,CAAAc,aAAA,CAACX,+BAA+B;IAACc,MAAM,EAAET,KAAM;IAACQ,KAAK,EAAEL,IAAK;IAACO,MAAM,EAAEL;EAAM,CAAE,CAAC,EAC7E,CAACJ,oBAAoB,iBAAIT,KAAA,CAAAc,aAAA,CAACZ,+BAA+B,MAAE,CACzC,CAAC;AAAA,CAC3B;AAEDI,eAAe,CAACa,WAAW,GAAG,iBAAiB;AAE/C,eAAeb,eAAe","ignoreList":[]}
1	+ {"version":3,"file":"SmallWaitCursor.js","names":["React","StyledSmallWaitCursor","StyledSmallWaitCursorBackground","StyledSmallWaitCursorWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","SmallWaitCursor","_ref","color","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","createElement","$shouldShowWaitCursor","$size","$color","$speed","displayName"],"sources":["../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { CSSProperties, FC } from 'react';\nimport {\n StyledSmallWaitCursor,\n StyledSmallWaitCursorBackground,\n StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n Small = 16,\n Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n Slow = 1.5,\n Medium = 1,\n Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n color?: CSSProperties['color'];\n /*\n Specifies whether the wait cursor should be displayed with a background.\n /\n shouldHideBackground?: boolean;\n /\n Specifies whether the wait cursor should be displayed.\n /\n shouldHideWaitCursor?: boolean;\n /\n The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.\n /\n size?: SmallWaitCursorSize \| number;\n /\n The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n */\n speed?: SmallWaitCursorSpeed;\n};\n\nconst SmallWaitCursor: FC<SmallWaitCursorProps> = ({\n color,\n shouldHideBackground = false,\n shouldHideWaitCursor = false,\n size = SmallWaitCursorSize.Medium,\n speed = SmallWaitCursorSpeed.Medium,\n}) => (\n <StyledSmallWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor} $size={size}>\n <StyledSmallWaitCursorWaitCursor $color={color} $size={size} $speed={speed} />\n {!shouldHideBackground && <StyledSmallWaitCursorBackground />}\n </StyledSmallWaitCursor>\n);\n\nSmallWaitCursor.displayName = 'SmallWaitCursor';\n\nexport default SmallWaitCursor;\n"],"mappings":"AAAA;;AAEA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SACIC,qBAAqB,EACrBC,+BAA+B,EAC/BC,+BAA+B,QAC5B,0BAA0B;AAEjC,WAAYC,mBAAmB,0BAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;AAK/B,WAAYC,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AA0BhC,MAAMC,eAAyC,GAAGC,IAAA;EAAA,IAAC;IAC/CC,KAAK;IACLC,oBAAoB,GAAG,KAAK;IAC5BC,oBAAoB,GAAG,KAAK;IAC5BC,IAAI,GAAGP,mBAAmB,CAACQ,MAAM;IACjCC,KAAK,GAAGR,oBAAoB,CAACO;EACjC,CAAC,GAAAL,IAAA;EAAA,oBACGP,KAAA,CAAAc,aAAA,CAACb,qBAAqB;IAACc,qBAAqB,EAAE,CAACL,oBAAqB;IAACM,KAAK,EAAEL;EAAK,gBAC7EX,KAAA,CAAAc,aAAA,CAACX,+BAA+B;IAACc,MAAM,EAAET,KAAM;IAACQ,KAAK,EAAEL,IAAK;IAACO,MAAM,EAAEL;EAAM,CAAE,CAAC,EAC7E,CAACJ,oBAAoB,iBAAIT,KAAA,CAAAc,aAAA,CAACZ,+BAA+B,MAAE,CACzC,CAAC;AAAA,CAC3B;AAEDI,eAAe,CAACa,WAAW,GAAG,iBAAiB;AAE/C,eAAeb,eAAe","ignoreList":[]}

package/lib/components/small-wait-cursor/SmallWaitCursor.styles.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { SmallWaitCursorProps, SmallWaitCursorSize, SmallWaitCursorSpeed } from './SmallWaitCursor';
 type StyledSmallWaitCursorProps = WithTheme<{
     $shouldShowWaitCursor: boolean;
-    $size: SmallWaitCursorSize;
+    $size: SmallWaitCursorSize | number;
 }>;
 export declare const StyledSmallWaitCursor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSmallWaitCursorProps>>;
 export declare const StyledSmallWaitCursorBackground: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
@@ -11,7 +11,7 @@ export declare const StyledSmallWaitCursorBackground: import("styled-components"
 }>>;
 type StyledSmallWaitCursorWaitCursorProps = WithTheme<{
     $color: SmallWaitCursorProps['color'];
-    $size: SmallWaitCursorSize;
+    $size: SmallWaitCursorSize | number;
     $speed: SmallWaitCursorSpeed;
 }>;
 export declare const StyledSmallWaitCursorWaitCursor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSmallWaitCursorWaitCursorProps>>;

package/lib/components/small-wait-cursor/SmallWaitCursor.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SmallWaitCursor.styles.js","names":["styled","keyframes","StyledSmallWaitCursor","div","_ref","$size","_ref2","_ref3","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","StyledSmallWaitCursorWaitCursor","_ref4","$color","theme","headline","_ref5","_ref6","_ref7","$speed"],"sources":["../../../src/components/small-wait-cursor/SmallWaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type {\n SmallWaitCursorProps,\n SmallWaitCursorSize,\n SmallWaitCursorSpeed,\n} from './SmallWaitCursor';\n\ntype StyledSmallWaitCursorProps = WithTheme<{\n $shouldShowWaitCursor: boolean;\n $size: SmallWaitCursorSize;\n}>;\n\nexport const StyledSmallWaitCursor = styled.div<StyledSmallWaitCursorProps>`\n position: relative;\n height: ${({ $size }) => $size}px;\n width: ${({ $size }) => $size}px;\n opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledSmallWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledSmallWaitCursorBackground = styled.div<StyledSmallWaitCursorBackgroundProps>`\n background-color: white;\n border-radius: 50%;\n height: 100%;\n width: 100%;\n position: relative;\n z-index: 1;\n box-shadow:\n 0 4px 12px 0 rgba(0, 0, 0, 0.2),\n 0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledSmallWaitCursorWaitCursorProps = WithTheme<{\n $color: SmallWaitCursorProps['color'];\n $size: SmallWaitCursorSize;\n $speed: SmallWaitCursorSpeed;\n}>;\n\nconst spin = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledSmallWaitCursorWaitCursor = styled.div<StyledSmallWaitCursorWaitCursorProps>`\n position: absolute;\n top: 5px;\n left: 5px;\n z-index: 2;\n border-style: solid;\n border-width: 3px;\n border-color: ${({ $color, theme }: StyledSmallWaitCursorWaitCursorProps) =>\n $color ?? theme.headline};\n height: ${({ $size }) => `${$size - 10}px`};\n width: ${({ $size }) => `${$size - 10}px`};\n border-radius: 50%;\n display: inline-block;\n border-top: 3px solid transparent;\n\n animation: ${spin} ${({ $speed }) => $speed}s linear infinite;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAarD,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAAgC;AAC5E;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACnC,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA,CAAC;AAClC,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AAC9E,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGT,MAAM,CAACG,GAA0C;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,MAAMO,IAAI,GAAGT,SAAU;AACvB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,+BAA+B,GAAGX,MAAM,CAACG,GAA0C;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBS,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC;EAA4C,CAAC,GAAAF,KAAA;EAAA,OACpEC,MAAM,IAAIC,KAAK,CAACC,QAAQ;AAAA,CAAC;AACjC,cAAcC,KAAA;EAAA,IAAC;IAAEX;EAAM,CAAC,GAAAW,KAAA;EAAA,OAAM,GAAEX,KAAK,GAAG,EAAG,IAAG;AAAA,CAAC;AAC/C,aAAaY,KAAA;EAAA,IAAC;IAAEZ;EAAM,CAAC,GAAAY,KAAA;EAAA,OAAM,GAAEZ,KAAK,GAAG,EAAG,IAAG;AAAA,CAAC;AAC9C;AACA;AACA;AACA;AACA,iBAAiBK,IAAK,IAAGQ,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAChD,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SmallWaitCursor.styles.js","names":["styled","keyframes","StyledSmallWaitCursor","div","_ref","$size","_ref2","_ref3","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","StyledSmallWaitCursorWaitCursor","_ref4","$color","theme","headline","_ref5","_ref6","_ref7","$speed"],"sources":["../../../src/components/small-wait-cursor/SmallWaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type {\n SmallWaitCursorProps,\n SmallWaitCursorSize,\n SmallWaitCursorSpeed,\n} from './SmallWaitCursor';\n\ntype StyledSmallWaitCursorProps = WithTheme<{\n $shouldShowWaitCursor: boolean;\n $size: SmallWaitCursorSize \| number;\n}>;\n\nexport const StyledSmallWaitCursor = styled.div<StyledSmallWaitCursorProps>`\n position: relative;\n height: ${({ $size }) => $size}px;\n width: ${({ $size }) => $size}px;\n opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledSmallWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledSmallWaitCursorBackground = styled.div<StyledSmallWaitCursorBackgroundProps>`\n background-color: white;\n border-radius: 50%;\n height: 100%;\n width: 100%;\n position: relative;\n z-index: 1;\n box-shadow:\n 0 4px 12px 0 rgba(0, 0, 0, 0.2),\n 0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledSmallWaitCursorWaitCursorProps = WithTheme<{\n $color: SmallWaitCursorProps['color'];\n $size: SmallWaitCursorSize \| number;\n $speed: SmallWaitCursorSpeed;\n}>;\n\nconst spin = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledSmallWaitCursorWaitCursor = styled.div<StyledSmallWaitCursorWaitCursorProps>`\n position: absolute;\n top: 5px;\n left: 5px;\n z-index: 2;\n border-style: solid;\n border-width: 3px;\n border-color: ${({ $color, theme }: StyledSmallWaitCursorWaitCursorProps) =>\n $color ?? theme.headline};\n height: ${({ $size }) => `${$size - 10}px`};\n width: ${({ $size }) => `${$size - 10}px`};\n border-radius: 50%;\n display: inline-block;\n border-top: 3px solid transparent;\n\n animation: ${spin} ${({ $speed }) => $speed}s linear infinite;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAarD,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAAgC;AAC5E;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACnC,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA,CAAC;AAClC,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AAC9E,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGT,MAAM,CAACG,GAA0C;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,MAAMO,IAAI,GAAGT,SAAU;AACvB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,+BAA+B,GAAGX,MAAM,CAACG,GAA0C;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBS,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC;EAA4C,CAAC,GAAAF,KAAA;EAAA,OACpEC,MAAM,IAAIC,KAAK,CAACC,QAAQ;AAAA,CAAC;AACjC,cAAcC,KAAA;EAAA,IAAC;IAAEX;EAAM,CAAC,GAAAW,KAAA;EAAA,OAAM,GAAEX,KAAK,GAAG,EAAG,IAAG;AAAA,CAAC;AAC/C,aAAaY,KAAA;EAAA,IAAC;IAAEZ;EAAM,CAAC,GAAAY,KAAA;EAAA,OAAM,GAAEZ,KAAK,GAAG,EAAG,IAAG;AAAA,CAAC;AAC9C;AACA;AACA;AACA;AACA,iBAAiBK,IAAK,IAAGQ,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AAChD,CAAC","ignoreList":[]}

package/lib/utils/uploadFile.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import type { Image, InternalFileItem, Video } from '../types/file';
 interface UploadFilesOptions {
     fileToUpload: InternalFileItem;
     callback: (UploadedFile: Video | Image) => void;
+    shouldUploadImageToSite?: boolean;
 }
-export declare const uploadFile: ({ fileToUpload, callback }: UploadFilesOptions) => Promise<void>;
+export declare const uploadFile: ({ fileToUpload, callback, shouldUploadImageToSite, }: UploadFilesOptions) => Promise<void>;
 export {};

package/lib/utils/uploadFile.js CHANGED Viewed

@@ -3,7 +3,8 @@ import { postVideo } from '../api/video/post';
 export const uploadFile = async _ref => {
   let {
     fileToUpload,
-    callback
+    callback,
+    shouldUploadImageToSite
   } = _ref;
   if (!fileToUpload || fileToUpload.state !== 'none') {
     return;
@@ -21,7 +22,8 @@ export const uploadFile = async _ref => {
   }
   if (fileToUpload.file?.type.includes('image/')) {
     const uploadedImage = await postImage({
-      file: fileToUpload.file
+      file: fileToUpload.file,
+      shouldUploadImageToSite
     });
     if (uploadedImage) {
       callback({

package/lib/utils/uploadFile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","_ref","fileToUpload","callback","state","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta"],"sources":["../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video \| Image) => void;\n}\n\nexport const uploadFile = async ({ fileToUpload, callback }: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload \|\| fileToUpload.state !== 'none') {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n });\n }\n }\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,mBAAmB;~~AAQ7C~~,OAAO,MAAMC,UAAU,GAAG,MAAAC,IAAA,~~IAAyE~~;EAAA,~~IAAlE~~;~~IAAEC~~,YAAY;~~IAAEC~~;~~EAA6B~~,CAAC,~~GAAAF~~,IAAA;~~EAC3E~~,IAAI,CAACC,YAAY,IAAIA,YAAY,~~CAACE~~,KAAK,KAAK,MAAM,EAAE;IAChD;EACJ;EAEA,~~IAAIF~~,YAAY,~~CAACG~~,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,~~MAAMT~~,SAAS,CAAC;~~MAAEM~~,IAAI,~~EAAEH~~,YAAY,~~CAACG~~;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;~~MACfL~~,QAAQ,CAAC;QACL,~~GAAGK~~,aAAa;QAChBC,EAAE,EAAED,aAAa,CAACC,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,~~IAAIR~~,YAAY,~~CAACG~~,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMI,aAAa,GAAG,~~MAAMb~~,SAAS,CAAC;~~MAAEO~~,IAAI,~~EAAEH~~,YAAY,~~CAACG~~;~~IAAK~~,CAAC,CAAC;~~IAElE~~,~~IAAIM~~,aAAa,EAAE;~~MACfR~~,QAAQ,CAAC;~~QACLS~~,GAAG,EAAG,GAAED,aAAa,CAACE,IAAK,IAAGF,aAAa,CAACG,GAAI,EAAC;QACjDL,EAAE,EAAEE,aAAa,CAACG,GAAG;QACrBC,IAAI,EAAEJ,aAAa,CAACI;MACxB,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","_ref","fileToUpload","callback","shouldUploadImageToSite","state","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta"],"sources":["../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video \| Image) => void;\n shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n fileToUpload,\n callback,\n shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload \|\| fileToUpload.state !== 'none') {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n });\n }\n }\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,mBAAmB;AAS7C,OAAO,MAAMC,UAAU,GAAG,MAAAC,IAAA,IAIe;EAAA,IAJR;IAC7BC,YAAY;IACZC,QAAQ;IACRC;EACgB,CAAC,GAAAH,IAAA;EACjB,IAAI,CAACC,YAAY,IAAIA,YAAY,CAACG,KAAK,KAAK,MAAM,EAAE;IAChD;EACJ;EAEA,IAAIH,YAAY,CAACI,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAMV,SAAS,CAAC;MAAEO,IAAI,EAAEJ,YAAY,CAACI;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfN,QAAQ,CAAC;QACL,GAAGM,aAAa;QAChBC,EAAE,EAAED,aAAa,CAACC,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,IAAIT,YAAY,CAACI,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMI,aAAa,GAAG,MAAMd,SAAS,CAAC;MAAEQ,IAAI,EAAEJ,YAAY,CAACI,IAAI;MAAEF;IAAwB,CAAC,CAAC;IAE3F,IAAIQ,aAAa,EAAE;MACfT,QAAQ,CAAC;QACLU,GAAG,EAAG,GAAED,aAAa,CAACE,IAAK,IAAGF,aAAa,CAACG,GAAI,EAAC;QACjDL,EAAE,EAAEE,aAAa,CAACG,GAAG;QACrBC,IAAI,EAAEJ,aAAa,CAACI;MACxB,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","ignoreList":[]}

package/package.json CHANGED Viewed

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