@cfxjs/sirius-next-common 0.0.1 → 0.0.2-zg

package/dist/components/GasPriceDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GasPriceDropdown/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Translation } from 'react-i18next';\nimport { useGasPrice, getTranslations } from '../../store';\nimport { sendRequestGasPrice } from '../../utils/request';\nimport { useInterval } from 'react-use';\n\nimport { fromDripToGdrip } from '../../utils';\nimport { SkeletonContainer } from '../SkeletonContainer';\n\nimport IconGas from '../../images/icon-gas.svg';\nimport IconRefresh from '../../images/refresh.svg';\nimport GasLow from '../../images/gas-low.png';\nimport GasMedian from '../../images/gas-median.png';\nimport GasHigh from '../../images/gas-high.png';\nimport ArrowDown from '../../images/arrowDown.svg';\n\nconst roundNumberWithSuffix = (value: string): string => {\n  if (value === '< 0.001') return value;\n\n  const numericPart = parseFloat(value);\n  if (isNaN(numericPart)) {\n    throw new Error('Invalid number');\n  }\n\n  const roundedNumber = Math.round(numericPart * 10) / 10;\n\n  const suffix = value.replace(/[0-9.-]/g, '');\n\n  const roundedString =\n    roundedNumber % 1 === 0 ? roundedNumber : roundedNumber.toFixed(1);\n\n  return roundedString + suffix;\n};\nconst refreshGasPrice = {\n  init: false,\n};\nexport const GasPriceDropdown = () => {\n  const translations = getTranslations();\n\n  const [showModal, setShowModal] = useState(false);\n  const { gasPriceData, setGasPrice } = useGasPrice();\n  const [isRefreshing, setIsRefreshing] = useState(false);\n\n  const handleOutsideClick = useCallback(\n    (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n      if (showModal && !target.closest('.modal')) {\n        setShowModal(false);\n      }\n    },\n    [showModal],\n  );\n\n  const refreshData = useCallback(async () => {\n    setIsRefreshing(true);\n    const res = await sendRequestGasPrice();\n    if (res) {\n      setGasPrice(res);\n    }\n    setIsRefreshing(false);\n  }, [setGasPrice]);\n\n  useEffect(() => {\n    if (!refreshGasPrice.init) {\n      refreshGasPrice.init = true;\n      refreshData();\n    }\n  }, [refreshData]);\n\n  useInterval(() => {\n    refreshData();\n  }, 20000);\n\n  useEffect(() => {\n    if (showModal) {\n      document.addEventListener('mousedown', handleOutsideClick);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleOutsideClick);\n    };\n  }, [showModal, handleOutsideClick]);\n\n  return (\n    <div className=\"relative\">\n      <div\n        className=\"flex gap-1 text-[#424a71] ml-2.5 cursor-pointer text-[14px]\"\n        onClick={() => setShowModal(true)}\n      >\n        <SkeletonContainer shown={gasPriceData.gasPriceInfo.tp50 === 0}>\n          <img src={IconGas} alt=\"\" />\n          <span className=\"text-[var(--theme-color-primary)]\">\n            {roundNumberWithSuffix(\n              fromDripToGdrip(gasPriceData.gasPriceInfo.tp50, false, {\n                precision: 1,\n              }),\n            )}\n          </span>\n          <span>Gdrip</span>\n        </SkeletonContainer>\n      </div>\n      {showModal && (\n        <div className=\"modal animate-in fade-in w-full min-h-[fit-content] bg-[#FFF] fixed right-0 top-[53px] p-[16px] z-10 shadow-modal md:w-[400px] md:absolute md:top-[35px]\">\n          <div className=\"flex justify-between\">\n            <div className=\"font-bold text-[#20253a] text-[16px] text-[14px]\">\n              <Translation>\n                {t => t(translations.gaspriceDropdown.blockHeight)}\n              </Translation>\n              :\n              <SkeletonContainer shown={gasPriceData.blockHeight === 0}>\n                {gasPriceData.blockHeight}\n              </SkeletonContainer>\n            </div>\n            <img\n              className={\n                'active:scale-75 ' +\n                (isRefreshing\n                  ? 'animate-in spin-in--360 animate-duration-300'\n                  : '')\n              }\n              src={IconRefresh}\n              alt=\"\"\n              onClick={() => refreshData()}\n            />\n          </div>\n          <div className=\"mt-3 flex gap-[8px]\">\n            <div className=\"flex flex-col justify-center items-center flex-1 bg-[#fafbfc] p-2\">\n              <img\n                className=\"w-[29.71px] h-[24.36px] mt-1.5\"\n                src={GasLow}\n                alt=\"\"\n              />\n              <div className=\"font-bold text-[14px] leading-6 text-[14px] mt-1.5\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.low)}\n                </Translation>\n              </div>\n              <div className=\"text-[18px] mt-1.5 leading-5 font-bold text-center text-[#4ca960]\">\n                <SkeletonContainer shown={gasPriceData.gasPriceInfo.min === 0}>\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceInfo.min, false, {\n                      precision: 1,\n                    }),\n                  )}{' '}\n                  Gdrip\n                </SkeletonContainer>\n              </div>\n            </div>\n            <div className=\"flex flex-col justify-center items-center flex-1 bg-[#fafbfc] p-2\">\n              <img\n                className=\"w-[29.71px] h-[24.36px] mt-1.5\"\n                src={GasMedian}\n                alt=\"\"\n              />\n              <div className=\"font-bold text-[14px] leading-6 text-[14px] mt-1.5\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.median)}\n                </Translation>\n              </div>\n              <div className=\"text-[18px] mt-1.5 leading-5 font-bold text-center text-[#395bd4]\">\n                <SkeletonContainer shown={gasPriceData.gasPriceInfo.tp50 === 0}>\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceInfo.tp50, false, {\n                      precision: 1,\n                    }),\n                  )}{' '}\n                  Gdrip\n                </SkeletonContainer>\n              </div>\n            </div>\n            <div className=\"flex flex-col justify-center items-center flex-1 bg-[#fafbfc] p-2\">\n              <img\n                className=\"w-[29.71px] h-[24.36px] mt-1.5\"\n                src={GasHigh}\n                alt=\"\"\n              />\n              <div className=\"font-bold text-[14px] leading-6 text-[14px] mt-1.5\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.high)}\n                </Translation>\n              </div>\n              <div className=\"text-[18px] mt-1.5 leading-5 font-bold text-center text-[#d74841]\">\n                <SkeletonContainer shown={gasPriceData.gasPriceInfo.max === 0}>\n                  {roundNumberWithSuffix(\n                    roundNumberWithSuffix(\n                      fromDripToGdrip(gasPriceData.gasPriceInfo.max, false, {\n                        precision: 1,\n                      }),\n                    ),\n                  )}{' '}\n                  Gdrip\n                </SkeletonContainer>\n              </div>\n            </div>\n          </div>\n          <div className=\"relative\">\n            <div className=\"w-full flex justify-between mt-4 text-[#424a71] text-[14px] font-bold\">\n              <div>\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.market)}\n                </Translation>\n              </div>\n\n              <div className=\"text-[#9b9eac] text-[12px]\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.latest60Blocks)}\n                </Translation>\n              </div>\n            </div>\n            <div className=\"absolute text-[10px] text-[#9b9eac] mt-2 left-[25%]\">\n              <div className=\"fit-content transform -translate-x-1/2 text-center\">\n                {roundNumberWithSuffix(\n                  fromDripToGdrip(gasPriceData.gasPriceMarket.tp25, false, {\n                    precision: 1,\n                  }),\n                )}\n              </div>\n              <img\n                className=\"mt-[-12px]\"\n                src={ArrowDown}\n                alt=\"?\"\n                style={{ transform: 'translateX(-50%)' }}\n              />\n            </div>\n            <div className=\"absolute text-[10px] text-[#9b9eac] mt-2 left-[75%]\">\n              <div className=\"fit-content transform -translate-x-1/2 text-center\">\n                {roundNumberWithSuffix(\n                  fromDripToGdrip(gasPriceData.gasPriceMarket.tp75, false, {\n                    precision: 1,\n                  }),\n                )}\n              </div>\n              <img\n                className=\"mt-[-12px]\"\n                src={ArrowDown}\n                alt=\"?\"\n                style={{ transform: 'translateX(-50%)' }}\n              />\n            </div>\n            <div className=\"mt-[32px] w-full flex gap-0.5\">\n              <div className=\"w-1/4 h-2 bg-[var(--theme-color-gas-price-line-bg)] rounded-l-md\"></div>\n              <div className=\"w-1/2 h-2 bg-[var(--theme-color-primary)]\"></div>\n              <div className=\"w-1/4 h-2 bg-[var(--theme-color-gas-price-line-bg)] rounded-r-md\"></div>\n            </div>\n            <div className=\"w-full flex justify-between mt-1\">\n              <div>\n                <div className=\"text-[12px] text-[14px] text-[#9b9eac]\">\n                  Min\n                </div>\n                <div className=\"text-left text-[12px] font-semibold text-[#424a71]\">\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceMarket.min, false, {\n                      precision: 1,\n                    }),\n                  )}\n                </div>\n              </div>\n              <div className=\"relative\">\n                <div className=\"absolute w-px h-3 bg-[var(--theme-color-primary)] mt-[-10px] left-1/2\"></div>\n                <div className=\"text-[12px] text-[14px] text-[#9b9eac]\">\n                  Mid\n                </div>\n                <div className=\"text-center text-[12px] font-semibold text-[var(--theme-color-primary)]\">\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceMarket.tp50, false, {\n                      precision: 1,\n                    }),\n                  )}\n                </div>\n              </div>\n              <div>\n                <div className=\"text-[12px] text-[14px] text-[#9b9eac]\">\n                  Max\n                </div>\n                <div className=\"text-right text-[12px] font-semibold text-[#424a71]\">\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceMarket.max, false, {\n                      precision: 1,\n                    }),\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n      {showModal && (\n        <div className=\"md:hidden fixed top-[53px] left-0 w-full h-[920px] bg-[#000] bg-opacity-50 flex justify-center items-center z-[-1]\"></div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAgB,UAAU,WAAW,mBAAmB;AACxD,SAAS,mBAAmB;AAG5B,SAAS,mBAAmB;AAK5B,OAAO,aAAa;AACpB,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,OAAO,eAAe;AACtB,OAAO,aAAa;AACpB,OAAO,eAAe;AA2Ed,SACE,KADF;AAzER,IAAM,wBAAwB,CAAC,UAA0B;AACvD,MAAI,UAAU;AAAW,WAAO;AAEhC,QAAM,cAAc,WAAW,KAAK;AACpC,MAAI,MAAM,WAAW,GAAG;AACtB,UAAM,IAAI,MAAM,gBAAgB;AAAA,EAClC;AAEA,QAAM,gBAAgB,KAAK,MAAM,cAAc,EAAE,IAAI;AAErD,QAAM,SAAS,MAAM,QAAQ,YAAY,EAAE;AAE3C,QAAM,gBACJ,gBAAgB,MAAM,IAAI,gBAAgB,cAAc,QAAQ,CAAC;AAEnE,SAAO,gBAAgB;AACzB;AACA,IAAM,kBAAkB;AAAA,EACtB,MAAM;AACR;AACO,IAAM,mBAAmB,MAAM;AACpC,QAAM,eAAe,gBAAgB;AAErC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,cAAc,YAAY,IAAI,YAAY;AAClD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,YAAM,SAAS,MAAM;AACrB,UAAI,aAAa,CAAC,OAAO,QAAQ,QAAQ,GAAG;AAC1C,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,cAAc,YAAY,YAAY;AAC1C,oBAAgB,IAAI;AACpB,UAAM,MAAM,MAAM,oBAAoB;AACtC,QAAI,KAAK;AACP,kBAAY,GAAG;AAAA,IACjB;AACA,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,CAAC,gBAAgB,MAAM;AACzB,sBAAgB,OAAO;AACvB,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,cAAY,MAAM;AAChB,gBAAY;AAAA,EACd,GAAG,GAAK;AAER,YAAU,MAAM;AACd,QAAI,WAAW;AACb,eAAS,iBAAiB,aAAa,kBAAkB;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,WAAW,kBAAkB,CAAC;AAElC,SACE,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,aAAa,IAAI;AAAA,QAEhC,+BAAC,qBAAkB,OAAO,aAAa,aAAa,SAAS,GAC3D;AAAA,8BAAC,SAAI,KAAK,SAAS,KAAI,IAAG;AAAA,UAC1B,oBAAC,UAAK,WAAU,qCACb;AAAA,YACC,gBAAgB,aAAa,aAAa,MAAM,OAAO;AAAA,cACrD,WAAW;AAAA,YACb,CAAC;AAAA,UACH,GACF;AAAA,UACA,oBAAC,UAAK,mBAAK;AAAA,WACb;AAAA;AAAA,IACF;AAAA,IACC,aACC,qBAAC,SAAI,WAAU,4JACb;AAAA,2BAAC,SAAI,WAAU,wBACb;AAAA,6BAAC,SAAI,WAAU,oDACb;AAAA,8BAAC,eACE,iBAAK,EAAE,aAAa,iBAAiB,WAAW,GACnD;AAAA,UAAc;AAAA,UAEd,oBAAC,qBAAkB,OAAO,aAAa,gBAAgB,GACpD,uBAAa,aAChB;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,sBACC,eACG,iDACA;AAAA,YAEN,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,SAAS,MAAM,YAAY;AAAA;AAAA,QAC7B;AAAA,SACF;AAAA,MACA,qBAAC,SAAI,WAAU,uBACb;AAAA,6BAAC,SAAI,WAAU,qEACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,KAAK;AAAA,cACL,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,SAAI,WAAU,sDACb,8BAAC,eACE,iBAAK,EAAE,aAAa,iBAAiB,GAAG,GAC3C,GACF;AAAA,UACA,oBAAC,SAAI,WAAU,qEACb,+BAAC,qBAAkB,OAAO,aAAa,aAAa,QAAQ,GACzD;AAAA;AAAA,cACC,gBAAgB,aAAa,aAAa,KAAK,OAAO;AAAA,gBACpD,WAAW;AAAA,cACb,CAAC;AAAA,YACH;AAAA,YAAG;AAAA,YAAI;AAAA,aAET,GACF;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,qEACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,KAAK;AAAA,cACL,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,SAAI,WAAU,sDACb,8BAAC,eACE,iBAAK,EAAE,aAAa,iBAAiB,MAAM,GAC9C,GACF;AAAA,UACA,oBAAC,SAAI,WAAU,qEACb,+BAAC,qBAAkB,OAAO,aAAa,aAAa,SAAS,GAC1D;AAAA;AAAA,cACC,gBAAgB,aAAa,aAAa,MAAM,OAAO;AAAA,gBACrD,WAAW;AAAA,cACb,CAAC;AAAA,YACH;AAAA,YAAG;AAAA,YAAI;AAAA,aAET,GACF;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,qEACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,KAAK;AAAA,cACL,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,SAAI,WAAU,sDACb,8BAAC,eACE,iBAAK,EAAE,aAAa,iBAAiB,IAAI,GAC5C,GACF;AAAA,UACA,oBAAC,SAAI,WAAU,qEACb,+BAAC,qBAAkB,OAAO,aAAa,aAAa,QAAQ,GACzD;AAAA;AAAA,cACC;AAAA,gBACE,gBAAgB,aAAa,aAAa,KAAK,OAAO;AAAA,kBACpD,WAAW;AAAA,gBACb,CAAC;AAAA,cACH;AAAA,YACF;AAAA,YAAG;AAAA,YAAI;AAAA,aAET,GACF;AAAA,WACF;AAAA,SACF;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,SAAI,WAAU,yEACb;AAAA,8BAAC,SACC,8BAAC,eACE,iBAAK,EAAE,aAAa,iBAAiB,MAAM,GAC9C,GACF;AAAA,UAEA,oBAAC,SAAI,WAAU,8BACb,8BAAC,eACE,iBAAK,EAAE,aAAa,iBAAiB,cAAc,GACtD,GACF;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,uDACb;AAAA,8BAAC,SAAI,WAAU,sDACZ;AAAA,YACC,gBAAgB,aAAa,eAAe,MAAM,OAAO;AAAA,cACvD,WAAW;AAAA,YACb,CAAC;AAAA,UACH,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,KAAK;AAAA,cACL,KAAI;AAAA,cACJ,OAAO,EAAE,WAAW,mBAAmB;AAAA;AAAA,UACzC;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,uDACb;AAAA,8BAAC,SAAI,WAAU,sDACZ;AAAA,YACC,gBAAgB,aAAa,eAAe,MAAM,OAAO;AAAA,cACvD,WAAW;AAAA,YACb,CAAC;AAAA,UACH,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,KAAK;AAAA,cACL,KAAI;AAAA,cACJ,OAAO,EAAE,WAAW,mBAAmB;AAAA;AAAA,UACzC;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,iCACb;AAAA,8BAAC,SAAI,WAAU,oEAAmE;AAAA,UAClF,oBAAC,SAAI,WAAU,6CAA4C;AAAA,UAC3D,oBAAC,SAAI,WAAU,oEAAmE;AAAA,WACpF;AAAA,QACA,qBAAC,SAAI,WAAU,oCACb;AAAA,+BAAC,SACC;AAAA,gCAAC,SAAI,WAAU,0CAAyC,iBAExD;AAAA,YACA,oBAAC,SAAI,WAAU,sDACZ;AAAA,cACC,gBAAgB,aAAa,eAAe,KAAK,OAAO;AAAA,gBACtD,WAAW;AAAA,cACb,CAAC;AAAA,YACH,GACF;AAAA,aACF;AAAA,UACA,qBAAC,SAAI,WAAU,YACb;AAAA,gCAAC,SAAI,WAAU,yEAAwE;AAAA,YACvF,oBAAC,SAAI,WAAU,0CAAyC,iBAExD;AAAA,YACA,oBAAC,SAAI,WAAU,2EACZ;AAAA,cACC,gBAAgB,aAAa,eAAe,MAAM,OAAO;AAAA,gBACvD,WAAW;AAAA,cACb,CAAC;AAAA,YACH,GACF;AAAA,aACF;AAAA,UACA,qBAAC,SACC;AAAA,gCAAC,SAAI,WAAU,0CAAyC,iBAExD;AAAA,YACA,oBAAC,SAAI,WAAU,uDACZ;AAAA,cACC,gBAAgB,aAAa,eAAe,KAAK,OAAO;AAAA,gBACtD,WAAW;AAAA,cACb,CAAC;AAAA,YACH,GACF;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,IAED,aACC,oBAAC,SAAI,WAAU,sHAAqH;AAAA,KAExI;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/GasPriceDropdown/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Translation } from 'react-i18next';\nimport { useGasPrice, getTranslations } from '../../store';\nimport { sendRequestGasPrice } from '../../utils/request';\nimport { useInterval } from 'react-use';\n\nimport { fromDripToGdrip } from '../../utils';\nimport { SkeletonContainer } from '../SkeletonContainer';\n\nimport IconGas from '../../images/icon-gas.svg';\nimport IconRefresh from '../../images/refresh.svg';\nimport GasLow from '../../images/gas-low.png';\nimport GasMedian from '../../images/gas-median.png';\nimport GasHigh from '../../images/gas-high.png';\nimport ArrowDown from '../../images/arrowDown.svg';\n\nconst roundNumberWithSuffix = (value: string): string => {\n  if (value.startsWith('<')) return value;\n\n  const numericPart = parseFloat(value);\n  if (isNaN(numericPart)) {\n    throw new Error('Invalid number');\n  }\n\n  const roundedNumber = Math.round(numericPart * 10) / 10;\n\n  const suffix = value.replace(/[0-9.-]/g, '');\n\n  const roundedString =\n    roundedNumber % 1 === 0 ? roundedNumber : roundedNumber.toFixed(1);\n\n  return roundedString + suffix;\n};\nconst refreshGasPrice = {\n  init: false,\n};\ninterface GasPriceDropdownProps {\n  unit?: string;\n}\n\nexport const GasPriceDropdown: React.FC<GasPriceDropdownProps> = ({\n  unit = 'Gdrip',\n}) => {\n  const translations = getTranslations();\n\n  const [showModal, setShowModal] = useState(false);\n  const { gasPriceData, setGasPrice } = useGasPrice();\n  const [isRefreshing, setIsRefreshing] = useState(false);\n\n  const handleOutsideClick = useCallback(\n    (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n      if (showModal && !target.closest('.modal')) {\n        setShowModal(false);\n      }\n    },\n    [showModal],\n  );\n\n  const refreshData = useCallback(async () => {\n    setIsRefreshing(true);\n    const res = await sendRequestGasPrice();\n    if (res) {\n      setGasPrice(res);\n    }\n    setIsRefreshing(false);\n  }, [setGasPrice]);\n\n  useEffect(() => {\n    if (!refreshGasPrice.init) {\n      refreshGasPrice.init = true;\n      refreshData();\n    }\n  }, [refreshData]);\n\n  useInterval(() => {\n    refreshData();\n  }, 20000);\n\n  useEffect(() => {\n    if (showModal) {\n      document.addEventListener('mousedown', handleOutsideClick);\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleOutsideClick);\n    };\n  }, [showModal, handleOutsideClick]);\n\n  return (\n    <div className=\"relative\">\n      <div\n        className=\"flex gap-1 text-[#424a71] ml-2.5 cursor-pointer text-[14px]\"\n        onClick={() => setShowModal(true)}\n      >\n        <SkeletonContainer shown={gasPriceData.gasPriceInfo.tp50 === 0}>\n          <img src={IconGas} alt=\"\" />\n          <span className=\"text-[var(--theme-color-primary)]\">\n            {roundNumberWithSuffix(\n              fromDripToGdrip(gasPriceData.gasPriceInfo.tp50, false, {\n                precision: 1,\n                minNum: 0.1,\n              }),\n            )}\n          </span>\n          <span>{unit}</span>\n        </SkeletonContainer>\n      </div>\n      {showModal && (\n        <div className=\"modal animate-in fade-in w-full min-h-[fit-content] bg-[#FFF] fixed right-0 top-[53px] p-[16px] z-10 shadow-modal md:w-[400px] md:absolute md:top-[35px]\">\n          <div className=\"flex justify-between\">\n            <div className=\"font-bold text-[#20253a] text-[16px] text-[14px]\">\n              <Translation>\n                {t => t(translations.gaspriceDropdown.blockHeight)}\n              </Translation>\n              :\n              <SkeletonContainer shown={gasPriceData.blockHeight === 0}>\n                {gasPriceData.blockHeight}\n              </SkeletonContainer>\n            </div>\n            <img\n              className={\n                'active:scale-75 ' +\n                (isRefreshing\n                  ? 'animate-in spin-in--360 animate-duration-300'\n                  : '')\n              }\n              src={IconRefresh}\n              alt=\"\"\n              onClick={() => refreshData()}\n            />\n          </div>\n          <div className=\"mt-3 flex gap-[8px]\">\n            <div className=\"flex flex-col justify-center items-center flex-1 bg-[#fafbfc] p-2\">\n              <img\n                className=\"w-[29.71px] h-[24.36px] mt-1.5\"\n                src={GasLow}\n                alt=\"\"\n              />\n              <div className=\"font-bold text-[14px] leading-6 text-[14px] mt-1.5\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.low)}\n                </Translation>\n              </div>\n              <div className=\"text-[18px] mt-1.5 leading-5 font-bold text-center text-[#4ca960]\">\n                <SkeletonContainer shown={gasPriceData.gasPriceInfo.min === 0}>\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceInfo.min, false, {\n                      precision: 1,\n                      minNum: 0.1,\n                    }),\n                  )}{' '}\n                  {unit}\n                </SkeletonContainer>\n              </div>\n            </div>\n            <div className=\"flex flex-col justify-center items-center flex-1 bg-[#fafbfc] p-2\">\n              <img\n                className=\"w-[29.71px] h-[24.36px] mt-1.5\"\n                src={GasMedian}\n                alt=\"\"\n              />\n              <div className=\"font-bold text-[14px] leading-6 text-[14px] mt-1.5\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.median)}\n                </Translation>\n              </div>\n              <div className=\"text-[18px] mt-1.5 leading-5 font-bold text-center text-[#395bd4]\">\n                <SkeletonContainer shown={gasPriceData.gasPriceInfo.tp50 === 0}>\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceInfo.tp50, false, {\n                      precision: 1,\n                      minNum: 0.1,\n                    }),\n                  )}{' '}\n                  {unit}\n                </SkeletonContainer>\n              </div>\n            </div>\n            <div className=\"flex flex-col justify-center items-center flex-1 bg-[#fafbfc] p-2\">\n              <img\n                className=\"w-[29.71px] h-[24.36px] mt-1.5\"\n                src={GasHigh}\n                alt=\"\"\n              />\n              <div className=\"font-bold text-[14px] leading-6 text-[14px] mt-1.5\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.high)}\n                </Translation>\n              </div>\n              <div className=\"text-[18px] mt-1.5 leading-5 font-bold text-center text-[#d74841]\">\n                <SkeletonContainer shown={gasPriceData.gasPriceInfo.max === 0}>\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceInfo.max, false, {\n                      precision: 1,\n                      minNum: 0.1,\n                    }),\n                  )}{' '}\n                  {unit}\n                </SkeletonContainer>\n              </div>\n            </div>\n          </div>\n          <div className=\"relative\">\n            <div className=\"w-full flex justify-between mt-4 text-[#424a71] text-[14px] font-bold\">\n              <div>\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.market)}\n                </Translation>\n              </div>\n\n              <div className=\"text-[#9b9eac] text-[12px]\">\n                <Translation>\n                  {t => t(translations.gaspriceDropdown.latest60Blocks)}\n                </Translation>\n              </div>\n            </div>\n            <div className=\"absolute text-[10px] text-[#9b9eac] mt-2 left-[25%]\">\n              <div className=\"fit-content transform -translate-x-1/2 text-center\">\n                {roundNumberWithSuffix(\n                  fromDripToGdrip(gasPriceData.gasPriceMarket.tp25, false, {\n                    precision: 1,\n                    minNum: 0.1,\n                  }),\n                )}\n              </div>\n              <img\n                className=\"mt-[-12px]\"\n                src={ArrowDown}\n                alt=\"?\"\n                style={{ transform: 'translateX(-50%)' }}\n              />\n            </div>\n            <div className=\"absolute text-[10px] text-[#9b9eac] mt-2 left-[75%]\">\n              <div className=\"fit-content transform -translate-x-1/2 text-center\">\n                {roundNumberWithSuffix(\n                  fromDripToGdrip(gasPriceData.gasPriceMarket.tp75, false, {\n                    precision: 1,\n                    minNum: 0.1,\n                  }),\n                )}\n              </div>\n              <img\n                className=\"mt-[-12px]\"\n                src={ArrowDown}\n                alt=\"?\"\n                style={{ transform: 'translateX(-50%)' }}\n              />\n            </div>\n            <div className=\"mt-[32px] w-full flex gap-0.5\">\n              <div className=\"w-1/4 h-2 bg-[var(--theme-color-gas-price-line-bg)] rounded-l-md\"></div>\n              <div className=\"w-1/2 h-2 bg-[var(--theme-color-primary)]\"></div>\n              <div className=\"w-1/4 h-2 bg-[var(--theme-color-gas-price-line-bg)] rounded-r-md\"></div>\n            </div>\n            <div className=\"w-full flex justify-between mt-1\">\n              <div>\n                <div className=\"text-[12px] text-[14px] text-[#9b9eac]\">\n                  Min\n                </div>\n                <div className=\"text-left text-[12px] font-semibold text-[#424a71]\">\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceMarket.min, false, {\n                      precision: 1,\n                      minNum: 0.1,\n                    }),\n                  )}\n                </div>\n              </div>\n              <div className=\"relative\">\n                <div className=\"absolute w-px h-3 bg-[var(--theme-color-primary)] mt-[-10px] left-1/2\"></div>\n                <div className=\"text-[12px] text-[14px] text-[#9b9eac]\">\n                  Mid\n                </div>\n                <div className=\"text-center text-[12px] font-semibold text-[var(--theme-color-primary)]\">\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceMarket.tp50, false, {\n                      precision: 1,\n                      minNum: 0.1,\n                    }),\n                  )}\n                </div>\n              </div>\n              <div>\n                <div className=\"text-[12px] text-[14px] text-[#9b9eac]\">\n                  Max\n                </div>\n                <div className=\"text-right text-[12px] font-semibold text-[#424a71]\">\n                  {roundNumberWithSuffix(\n                    fromDripToGdrip(gasPriceData.gasPriceMarket.max, false, {\n                      precision: 1,\n                      minNum: 0.1,\n                    }),\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n      {showModal && (\n        <div className=\"md:hidden fixed top-[53px] left-0 w-full h-[920px] bg-[#000] bg-opacity-50 flex justify-center items-center z-[-1]\"></div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/components/IncreasePercent/Icons.d.ts

@@ -0,0 +1,6 @@
+import { SVGAttributes } from 'react';
+
+declare const PositiveArrow: React.FC<SVGAttributes<SVGSVGElement>>;
+declare const NegativeArrow: React.FC<SVGAttributes<SVGSVGElement>>;
+
+export { NegativeArrow, PositiveArrow };

package/dist/components/IncreasePercent/Icons.js

@@ -0,0 +1,9 @@
+import {
+  NegativeArrow,
+  PositiveArrow
+} from "../../chunk-7OAWG2IZ.js";
+export {
+  NegativeArrow,
+  PositiveArrow
+};
+//# sourceMappingURL=Icons.js.map

package/dist/components/IncreasePercent/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/IncreasePercent/index.d.ts

@@ -0,0 +1,20 @@
+import BigNumber from 'bignumber.js';
+
+interface BaseProps {
+    className?: string;
+    /** show + while value is positive */
+    showPlus?: boolean;
+    showArrow?: boolean;
+}
+interface ValueProps {
+    value: string;
+}
+interface CalcProps {
+    base: string | number | BigNumber;
+    prev: string | number | BigNumber;
+    precision?: number;
+}
+type Props = CalcProps | ValueProps;
+declare const IncreasePercent: React.FC<Props & BaseProps>;
+
+export { IncreasePercent };

package/dist/components/IncreasePercent/index.js

@@ -0,0 +1,42 @@
+import {
+  NegativeArrow,
+  PositiveArrow
+} from "../../chunk-7OAWG2IZ.js";
+import {
+  cn,
+  getIncreasePercent
+} from "../../chunk-7SH3YCJ7.js";
+import "../../chunk-3DSBII47.js";
+import "../../chunk-QKQG47IV.js";
+
+// src/components/IncreasePercent/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var isValueProps = (props) => "value" in props;
+var IncreasePercent = ({
+  className,
+  showPlus,
+  showArrow,
+  ...props
+}) => {
+  const value = isValueProps(props) ? props.value : getIncreasePercent(props.base, props.prev, props.precision).percent;
+  const isNegative = value[0] === "-";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center",
+        isNegative ? "text-[#FA5D5D]" : "text-[#4AC2AB]",
+        className
+      ),
+      children: [
+        showArrow && (isNegative ? /* @__PURE__ */ jsx(NegativeArrow, { className: "mr-4px" }) : /* @__PURE__ */ jsx(PositiveArrow, { className: "mr-4px" })),
+        !isNegative && showPlus && "+",
+        value
+      ]
+    }
+  );
+};
+export {
+  IncreasePercent
+};
+//# sourceMappingURL=index.js.map

package/dist/components/IncreasePercent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/IncreasePercent/index.tsx"],"sourcesContent":["import BigNumber from 'bignumber.js';\nimport { cn, getIncreasePercent } from 'src/utils';\nimport { NegativeArrow, PositiveArrow } from './Icons';\n\nconst isValueProps = (props: unknown): props is ValueProps =>\n  'value' in (props as ValueProps);\n\ninterface BaseProps {\n  className?: string;\n  /** show + while value is positive */\n  showPlus?: boolean;\n  showArrow?: boolean;\n}\n\ninterface ValueProps {\n  value: string;\n}\ninterface CalcProps {\n  base: string | number | BigNumber;\n  prev: string | number | BigNumber;\n  precision?: number;\n}\n\ntype Props = CalcProps | ValueProps;\n\nexport const IncreasePercent: React.FC<Props & BaseProps> = ({\n  className,\n  showPlus,\n  showArrow,\n  ...props\n}) => {\n  const value = isValueProps(props)\n    ? props.value\n    : getIncreasePercent(props.base, props.prev, props.precision).percent;\n  const isNegative = value[0] === '-';\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center',\n        isNegative ? 'text-[#FA5D5D]' : 'text-[#4AC2AB]',\n        className,\n      )}\n    >\n      {showArrow &&\n        (isNegative ? (\n          <NegativeArrow className=\"mr-4px\" />\n        ) : (\n          <PositiveArrow className=\"mr-4px\" />\n        ))}\n      {!isNegative && showPlus && '+'}\n      {value}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAoCI,SASM,KATN;AAhCJ,IAAM,eAAe,CAAC,UACpB,WAAY;AAoBP,IAAM,kBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,aAAa,KAAK,IAC5B,MAAM,QACN,mBAAmB,MAAM,MAAM,MAAM,MAAM,MAAM,SAAS,EAAE;AAChE,QAAM,aAAa,MAAM,CAAC,MAAM;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,aAAa,mBAAmB;AAAA,QAChC;AAAA,MACF;AAAA,MAEC;AAAA,sBACE,aACC,oBAAC,iBAAc,WAAU,UAAS,IAElC,oBAAC,iBAAc,WAAU,UAAS;AAAA,QAErC,CAAC,cAAc,YAAY;AAAA,QAC3B;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/InfoIconWithTooltip/index.js

@@ -3,8 +3,11 @@ import {
 } from "../../chunk-C2OQXICS.js";
 import {
   Tooltip
-} from "../../chunk-YVIZX6QJ.js";
-import "../../chunk-5IEZKHNQ.js";
+} from "../../chunk-CQLD2WE7.js";
+import "../../chunk-LRCAKRPK.js";
+import "../../chunk-NDCMVJNJ.js";
+import "../../chunk-ADPYV4OL.js";
+import "../../chunk-HRW4BUP4.js";
 
 // src/components/InfoIconWithTooltip/index.tsx
 import clsx from "clsx";

package/dist/components/InfoIconWithTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/InfoIconWithTooltip/index.tsx"],"sourcesContent":["import React from 'react';\nimport { InfoIcon } from './InfoIcon';\nimport { Tooltip } from '../Tooltip';\nimport clsx from 'clsx';\n\nexport const InfoIconWithTooltip = ({\n  info,\n  size = 14,\n  children = null,\n}: {\n  info: React.ReactNode;\n  size?: number;\n  children?: React.ReactNode;\n}) => {\n  const title =\n    typeof info === 'string' ? info.split('\\n').map(i => <div>{i}</div>) : info;\n  return (\n    <span className={clsx('inline-flex items-center')}>\n      {children ? <span className=\"mr-0.2857rem\">{children}</span> : null}\n      <Tooltip title={title}>\n        <span>\n          <InfoIcon size={size} />\n        </span>\n      </Tooltip>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;AAGA,OAAO,UAAU;AAYwC,cAErD,YAFqD;AAVlD,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AACb,MAIM;AACJ,QAAM,QACJ,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,EAAE,IAAI,OAAK,oBAAC,SAAK,aAAE,CAAM,IAAI;AACzE,SACE,qBAAC,UAAK,WAAW,KAAK,0BAA0B,GAC7C;AAAA,eAAW,oBAAC,UAAK,WAAU,gBAAgB,UAAS,IAAU;AAAA,IAC/D,oBAAC,WAAQ,OACP,8BAAC,UACC,8BAAC,YAAS,MAAY,GACxB,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/InfoIconWithTooltip/index.tsx"],"sourcesContent":["import React from 'react';\nimport { InfoIcon } from './InfoIcon';\nimport { Tooltip } from '../Tooltip';\nimport clsx from 'clsx';\n\nexport const InfoIconWithTooltip = ({\n  info,\n  size = 14,\n  children = null,\n}: {\n  info: React.ReactNode;\n  size?: number;\n  children?: React.ReactNode;\n}) => {\n  const title =\n    typeof info === 'string' ? info.split('\\n').map(i => <div>{i}</div>) : info;\n  return (\n    <span className={clsx('inline-flex items-center')}>\n      {children ? <span className=\"mr-0.2857rem\">{children}</span> : null}\n      <Tooltip title={title}>\n        <span>\n          <InfoIcon size={size} />\n        </span>\n      </Tooltip>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAGA,OAAO,UAAU;AAYwC,cAErD,YAFqD;AAVlD,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AACb,MAIM;AACJ,QAAM,QACJ,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,EAAE,IAAI,OAAK,oBAAC,SAAK,aAAE,CAAM,IAAI;AACzE,SACE,qBAAC,UAAK,WAAW,KAAK,0BAA0B,GAC7C;AAAA,eAAW,oBAAC,UAAK,WAAU,gBAAgB,UAAS,IAAU;AAAA,IAC/D,oBAAC,WAAQ,OACP,8BAAC,UACC,8BAAC,YAAS,MAAY,GACxB,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/Link/index.js

@@ -1,7 +1,7 @@
 import {
   Link
-} from "../../chunk-ZSP5VMHE.js";
-import "../../chunk-IM77KPX5.js";
+} from "../../chunk-IEPHKAPT.js";
+import "../../chunk-CFRPDLWO.js";
 export {
   Link
 };

package/dist/components/List/index.js

@@ -1,9 +1,6 @@
 import {
   Skeleton
 } from "../../chunk-H3V3K4DD.js";
-import {
-  useBreakpoint
-} from "../../chunk-FXBVUGRI.js";
 import {
   Description
 } from "../../chunk-N6B5ZKDM.js";
@@ -11,6 +8,9 @@ import {
   Card
 } from "../../chunk-O6NJ56NA.js";
 import "../../chunk-XCKMXAL2.js";
+import {
+  useBreakpoint
+} from "../../chunk-TOKKKTFG.js";
 
 // src/components/List/index.tsx
 import clsx from "clsx";

package/dist/components/List/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/List/index.tsx"],"sourcesContent":["/**\n *\n * List\n *\n */\nimport React from 'react';\nimport { useBreakpoint } from '../../utils/media';\nimport { Skeleton } from '../Skeleton';\nimport { Card } from '../Card';\nimport { Description, DescriptionProps } from '../Description';\nimport clsx from 'clsx';\n\ninterface ListProps {\n  list: Array<DescriptionProps | null>;\n  className?: string;\n}\n\nexport const List: React.FC<ListProps> = ({ list, className }) => {\n  const bp = useBreakpoint();\n  const isS = bp === 's';\n\n  const noBorder = (index: number) => {\n    const length = list.length;\n    // mobile one column\n    if (isS && index === length - 1) {\n      return true;\n    }\n    // pc\n    if (index % 2 === 0) {\n      if (index === length - 1 || index === length - 2) {\n        return true;\n      }\n    } else {\n      if (index === length - 1) {\n        return true;\n      }\n    }\n    return false;\n  };\n\n  return (\n    <div>\n      <Card\n        className={clsx('sirius-list-card', className)}\n        contentClassName=\"flex flex-wrap justify-between\"\n      >\n        {list.map((item, index) => (\n          <Description\n            key={`desc_${index}`}\n            size=\"small\"\n            className={clsx(\n              'w-48% lt-sm:w-full',\n              item == null && 'lt-sm:hidden',\n            )}\n            title={item != null ? item.title : ''}\n            noBorder={item != null ? noBorder(index) : true}\n          >\n            {item != null ? item.children || <Skeleton /> : null}\n          </Description>\n        ))}\n      </Card>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAUA,OAAO,UAAU;AA+C4B;AAxCtC,IAAM,OAA4B,CAAC,EAAE,MAAM,UAAU,MAAM;AAChE,QAAM,KAAK,cAAc;AACzB,QAAM,MAAM,OAAO;AAEnB,QAAM,WAAW,CAAC,UAAkB;AAClC,UAAM,SAAS,KAAK;AAEpB,QAAI,OAAO,UAAU,SAAS,GAAG;AAC/B,aAAO;AAAA,IACT;AAEA,QAAI,QAAQ,MAAM,GAAG;AACnB,UAAI,UAAU,SAAS,KAAK,UAAU,SAAS,GAAG;AAChD,eAAO;AAAA,MACT;AAAA,IACF,OAAO;AACL,UAAI,UAAU,SAAS,GAAG;AACxB,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,oBAAoB,SAAS;AAAA,MAC7C,kBAAiB;AAAA,MAEhB,eAAK,IAAI,CAAC,MAAM,UACf;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,WAAW;AAAA,YACT;AAAA,YACA,QAAQ,QAAQ;AAAA,UAClB;AAAA,UACA,OAAO,QAAQ,OAAO,KAAK,QAAQ;AAAA,UACnC,UAAU,QAAQ,OAAO,SAAS,KAAK,IAAI;AAAA,UAE1C,kBAAQ,OAAO,KAAK,YAAY,oBAAC,YAAS,IAAK;AAAA;AAAA,QAT3C,QAAQ,KAAK;AAAA,MAUpB,CACD;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/List/index.tsx"],"sourcesContent":["/**\n *\n * List\n *\n */\nimport React from 'react';\nimport { useBreakpoint } from '../../utils/media';\nimport { Skeleton } from '../Skeleton';\nimport { Card } from '../Card';\nimport { Description, DescriptionProps } from '../Description';\nimport clsx from 'clsx';\n\ninterface ListProps {\n  list: Array<DescriptionProps | null>;\n  className?: string;\n}\n\nexport const List: React.FC<ListProps> = ({ list, className }) => {\n  const bp = useBreakpoint();\n  const isS = bp === 's';\n\n  const noBorder = (index: number) => {\n    const length = list.length;\n    // mobile one column\n    if (isS && index === length - 1) {\n      return true;\n    }\n    // pc\n    if (index % 2 === 0) {\n      if (index === length - 1 || index === length - 2) {\n        return true;\n      }\n    } else {\n      if (index === length - 1) {\n        return true;\n      }\n    }\n    return false;\n  };\n\n  return (\n    <div>\n      <Card\n        className={clsx('sirius-list-card', className)}\n        contentClassName=\"flex flex-wrap justify-between\"\n      >\n        {list.map((item, index) => (\n          <Description\n            key={`desc_${index}`}\n            size=\"small\"\n            className={clsx(\n              'w-48% lt-sm:w-full',\n              item == null && 'lt-sm:hidden',\n            )}\n            title={item != null ? item.title : ''}\n            noBorder={item != null ? noBorder(index) : true}\n          >\n            {item != null ? item.children || <Skeleton /> : null}\n          </Description>\n        ))}\n      </Card>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAUA,OAAO,UAAU;AA+C4B;AAxCtC,IAAM,OAA4B,CAAC,EAAE,MAAM,UAAU,MAAM;AAChE,QAAM,KAAK,cAAc;AACzB,QAAM,MAAM,OAAO;AAEnB,QAAM,WAAW,CAAC,UAAkB;AAClC,UAAM,SAAS,KAAK;AAEpB,QAAI,OAAO,UAAU,SAAS,GAAG;AAC/B,aAAO;AAAA,IACT;AAEA,QAAI,QAAQ,MAAM,GAAG;AACnB,UAAI,UAAU,SAAS,KAAK,UAAU,SAAS,GAAG;AAChD,eAAO;AAAA,MACT;AAAA,IACF,OAAO;AACL,UAAI,UAAU,SAAS,GAAG;AACxB,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,oBAAoB,SAAS;AAAA,MAC7C,kBAAiB;AAAA,MAEhB,eAAK,IAAI,CAAC,MAAM,UACf;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,WAAW;AAAA,YACT;AAAA,YACA,QAAQ,QAAQ;AAAA,UAClB;AAAA,UACA,OAAO,QAAQ,OAAO,KAAK,QAAQ;AAAA,UACnC,UAAU,QAAQ,OAAO,SAAS,KAAK,IAAI;AAAA,UAE1C,kBAAQ,OAAO,KAAK,YAAY,oBAAC,YAAS,IAAK;AAAA;AAAA,QAT3C,QAAQ;AAAA,MAUf,CACD;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/components/Modal/index.js

@@ -1,9 +1,10 @@
 import {
   Modal
-} from "../../chunk-R5ECXT74.js";
+} from "../../chunk-XKKCZHHP.js";
 import "../../chunk-XCKMXAL2.js";
-import "../../chunk-AGOKIWZZ.js";
-import "../../chunk-CJQCVR64.js";
+import "../../chunk-NDCMVJNJ.js";
+import "../../chunk-ADPYV4OL.js";
+import "../../chunk-HRW4BUP4.js";
 export {
   Modal
 };

package/dist/components/Price/index.js

@@ -1,11 +1,12 @@
-import {
-  formatPrice
-} from "../../chunk-AGOKIWZZ.js";
-import "../../chunk-CJQCVR64.js";
 import {
   Tooltip
-} from "../../chunk-YVIZX6QJ.js";
-import "../../chunk-5IEZKHNQ.js";
+} from "../../chunk-CQLD2WE7.js";
+import "../../chunk-LRCAKRPK.js";
+import {
+  formatPrice
+} from "../../chunk-NDCMVJNJ.js";
+import "../../chunk-ADPYV4OL.js";
+import "../../chunk-HRW4BUP4.js";
 
 // src/components/Price/index.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/components/Price/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Price/index.tsx"],"sourcesContent":["/**\n *\n * Footer\n *\n */\nimport React from 'react';\nimport { formatPrice } from '../../utils';\nimport { Tooltip } from '../Tooltip';\n\nexport const Price = ({\n  children,\n  showTooltip = true,\n}: {\n  children: string | number;\n  showTooltip?: boolean;\n}) => {\n  if (['NaN', 'undefined', 'null'].includes(String(children))) {\n    return <span>--</span>;\n  }\n\n  const [fPrice, fullPrice] = formatPrice(children);\n\n  return fullPrice && showTooltip ? (\n    <Tooltip\n      title={\n        <span\n          style={{\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {fullPrice}\n        </span>\n      }\n    >\n      <span>{fPrice}</span>\n    </Tooltip>\n  ) : (\n    <span>{fPrice}</span>\n  );\n};\n"],"mappings":";;;;;;;;;;AAiBW;AARJ,IAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA,cAAc;AAChB,MAGM;AACJ,MAAI,CAAC,OAAO,aAAa,MAAM,EAAE,SAAS,OAAO,QAAQ,CAAC,GAAG;AAC3D,WAAO,oBAAC,UAAK,gBAAE;AAAA,EACjB;AAEA,QAAM,CAAC,QAAQ,SAAS,IAAI,YAAY,QAAQ;AAEhD,SAAO,aAAa,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,OACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAGF,8BAAC,UAAM,kBAAO;AAAA;AAAA,EAChB,IAEA,oBAAC,UAAM,kBAAO;AAElB;","names":[]}
+{"version":3,"sources":["../../../src/components/Price/index.tsx"],"sourcesContent":["/**\n *\n * Footer\n *\n */\nimport React from 'react';\nimport { formatPrice } from '../../utils';\nimport { Tooltip } from '../Tooltip';\n\nexport const Price = ({\n  children,\n  showTooltip = true,\n}: {\n  children: string | number;\n  showTooltip?: boolean;\n}) => {\n  if (['NaN', 'undefined', 'null'].includes(String(children))) {\n    return <span>--</span>;\n  }\n\n  const [fPrice, fullPrice] = formatPrice(children);\n\n  return fullPrice && showTooltip ? (\n    <Tooltip\n      title={\n        <span\n          style={{\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {fullPrice}\n        </span>\n      }\n    >\n      <span>{fPrice}</span>\n    </Tooltip>\n  ) : (\n    <span>{fPrice}</span>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAiBW;AARJ,IAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA,cAAc;AAChB,MAGM;AACJ,MAAI,CAAC,OAAO,aAAa,MAAM,EAAE,SAAS,OAAO,QAAQ,CAAC,GAAG;AAC3D,WAAO,oBAAC,UAAK,gBAAE;AAAA,EACjB;AAEA,QAAM,CAAC,QAAQ,SAAS,IAAI,YAAY,QAAQ;AAEhD,SAAO,aAAa,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,OACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAGF,8BAAC,UAAM,kBAAO;AAAA;AAAA,EAChB,IAEA,oBAAC,UAAM,kBAAO;AAElB;","names":[]}

package/dist/components/Remark/index.js

@@ -1,6 +1,6 @@
 import {
   useI18n
-} from "../../chunk-25QWXIAS.js";
+} from "../../chunk-HRW4BUP4.js";
 
 // src/components/Remark/index.tsx
 import { useTranslation } from "react-i18next";

package/dist/components/Select/index.d.ts

@@ -4,10 +4,12 @@ interface SelectProps {
     className?: string;
     disableMatchWidth?: boolean;
     size?: 'small' | 'medium' | 'large';
-    value: string;
+    value?: string;
     onChange: (value: string) => void;
     width?: string | number;
     children: React__default.ReactNode;
+    lable?: string;
+    disabled?: boolean;
 }
 interface OptionProps {
     className?: string;

package/dist/components/Select/index.js

@@ -5,26 +5,30 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "../../chunk-GKAPQ7LN.js";
+} from "../../chunk-KTFYV3XJ.js";
+import "../../chunk-LRCAKRPK.js";
 import {
   cn
-} from "../../chunk-AGOKIWZZ.js";
-import "../../chunk-CJQCVR64.js";
-import "../../chunk-5IEZKHNQ.js";
+} from "../../chunk-NDCMVJNJ.js";
+import "../../chunk-ADPYV4OL.js";
+import "../../chunk-HRW4BUP4.js";
 
 // src/components/Select/index.tsx
-import React, { useMemo } from "react";
+import React, { useMemo, useState, useEffect } from "react";
+import { debounce } from "lodash";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Select2 = ({
-  className,
-  disableMatchWidth,
+  className = "",
+  disableMatchWidth = true,
   size = "medium",
-  value,
+  value = "",
   onChange,
   width = "auto",
   children,
+  lable = "",
   ...props
 }) => {
+  const [open, setOpen] = useState(false);
   const selectedText = useMemo(() => {
     let text = "Select an option...";
     React.Children.forEach(children, (child) => {
@@ -34,43 +38,69 @@ var Select2 = ({
     });
     return text;
   }, [value, children]);
-  console.log(children);
-  return /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
-    /* @__PURE__ */ jsx(
-      SelectTrigger,
-      {
-        className: cn(
-          "bg-[rgba(30, 61, 228, 0.04)] hover:bg-[rgba(30, 61, 228, 0.08)]",
-          size === "small" && "h-8 text-xs",
-          size === "medium" && "h-10 text-sm",
-          size === "large" && "h-12 text-lg",
-          className
-        ),
-        style: { width },
-        ...props,
-        children: /* @__PURE__ */ jsx(SelectValue, { children: selectedText })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      SelectContent,
-      {
-        className: cn(
-          "relative z-50 max-h-96 overflow-hidden rounded-md bg-[#FFF] shadow-md",
-          !disableMatchWidth && "w-full"
+  const handleValueChange = debounce((value2) => {
+    onChange(value2);
+  }, 300);
+  const wheel = () => {
+    setOpen(false);
+  };
+  useEffect(() => {
+    if (open) {
+      document.body.removeAttribute("data-scroll-locked");
+      window.addEventListener("wheel", wheel, { passive: false });
+      window.addEventListener("touchmove", wheel, { passive: false });
+    } else {
+      window.removeEventListener("wheel", wheel);
+      window.removeEventListener("touchmove", wheel);
+    }
+    return () => {
+      window.removeEventListener("wheel", wheel);
+      window.removeEventListener("touchmove", wheel);
+    };
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value,
+      onValueChange: handleValueChange,
+      open,
+      onOpenChange: setOpen,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            className: cn(
+              "bg-blue-04 hover:bg-blue-08",
+              size === "small" && "h-8 text-xs",
+              size === "medium" && "h-10 text-sm",
+              size === "large" && "h-12 text-lg",
+              className
+            ),
+            style: { width },
+            ...props,
+            children: lable ? lable : /* @__PURE__ */ jsx(SelectValue, { children: selectedText })
+          }
         ),
-        children: /* @__PURE__ */ jsx(SelectGroup, { children: React.Children.map(children, (child) => {
-          console.log(child);
-          if (React.isValidElement(child)) {
-            const props2 = child.props;
-            return /* @__PURE__ */ jsx(Option, { ...props2, children: child });
+        /* @__PURE__ */ jsx(
+          SelectContent,
+          {
+            className: cn(
+              "relative z-50 max-h-96 overflow-hidden rounded-md bg-[#FFF] shadow-md",
+              !disableMatchWidth && "w-full"
+            ),
+            children: /* @__PURE__ */ jsx(SelectGroup, { children })
           }
-          return null;
-        }) })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
-var Option = React.forwardRef(({ className, children, value, ...props }, ref) => /* @__PURE__ */ jsx(SelectItem, { ref, value, className: cn("", className), ...props, children }));
+var Option = ({
+  className = "",
+  children,
+  value,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectItem, { value, className, ...props, children });
 Option.displayName = "Option";
 Select2.Option = Option;
 export {

package/dist/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  Select as RadixUISelect,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n} from './select';\nimport { cn } from '../../utils';\n\ninterface SelectProps {\n  className?: string;\n  disableMatchWidth?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  value: string;\n  onChange: (value: string) => void;\n  width?: string | number;\n  children: React.ReactNode;\n}\n\ninterface OptionProps {\n  className?: string;\n  children: React.ReactNode;\n  value: string;\n}\n\nconst Select: React.FC<SelectProps> & { Option: React.FC<OptionProps> } = ({\n  className,\n  disableMatchWidth,\n  size = 'medium',\n  value,\n  onChange,\n  width = 'auto',\n  children,\n  ...props\n}) => {\n  const selectedText = useMemo(() => {\n    let text = 'Select an option...';\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child) && child.props.value === value) {\n        text = child.props.children;\n      }\n    });\n    return text;\n  }, [value, children]);\n  console.log(children);\n  return (\n    <RadixUISelect value={value} onValueChange={onChange}>\n      <SelectTrigger\n        className={cn(\n          'bg-[rgba(30, 61, 228, 0.04)] hover:bg-[rgba(30, 61, 228, 0.08)]',\n          size === 'small' && 'h-8 text-xs',\n          size === 'medium' && 'h-10 text-sm',\n          size === 'large' && 'h-12 text-lg',\n          className,\n        )}\n        style={{ width }}\n        {...props}\n      >\n        <SelectValue>{selectedText}</SelectValue>\n      </SelectTrigger>\n      <SelectContent\n        className={cn(\n          'relative z-50 max-h-96 overflow-hidden rounded-md bg-[#FFF] shadow-md',\n          !disableMatchWidth && 'w-full',\n        )}\n      >\n        <SelectGroup>\n          {React.Children.map(children, child => {\n            console.log(child);\n            if (React.isValidElement(child)) {\n              const props = child.props;\n              return <Option {...props}>{child}</Option>;\n            }\n            return null;\n          })}\n        </SelectGroup>\n      </SelectContent>\n    </RadixUISelect>\n  );\n};\n\nconst Option: React.FC<OptionProps> = React.forwardRef<\n  HTMLDivElement,\n  OptionProps\n>(({ className, children, value, ...props }, ref) => (\n  <SelectItem ref={ref} value={value} className={cn('', className)} {...props}>\n    {children}\n  </SelectItem>\n));\n\nOption.displayName = 'Option';\n\nSelect.Option = Option;\n\nexport { Select };\n"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,SAAS,eAAe;AAgD3B,SAYI,KAZJ;AArBJ,IAAMA,UAAoE,CAAC;AAAA,EACzE;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,OAAO;AACX,UAAM,SAAS,QAAQ,UAAU,WAAS;AACxC,UAAI,MAAM,eAAe,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAC9D,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,QAAQ,CAAC;AACpB,UAAQ,IAAI,QAAQ;AACpB,SACE,qBAAC,UAAc,OAAc,eAAe,UAC1C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,SAAS,YAAY;AAAA,UACrB,SAAS,WAAW;AAAA,UACpB;AAAA,QACF;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACd,GAAG;AAAA,QAEJ,8BAAC,eAAa,wBAAa;AAAA;AAAA,IAC7B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,CAAC,qBAAqB;AAAA,QACxB;AAAA,QAEA,8BAAC,eACE,gBAAM,SAAS,IAAI,UAAU,WAAS;AACrC,kBAAQ,IAAI,KAAK;AACjB,cAAI,MAAM,eAAe,KAAK,GAAG;AAC/B,kBAAMC,SAAQ,MAAM;AACpB,mBAAO,oBAAC,UAAQ,GAAGA,QAAQ,iBAAM;AAAA,UACnC;AACA,iBAAO;AAAA,QACT,CAAC,GACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAM,SAAgC,MAAM,WAG1C,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,MAAM,GAAG,QAC3C,oBAAC,cAAW,KAAU,OAAc,WAAW,GAAG,IAAI,SAAS,GAAI,GAAG,OACnE,UACH,CACD;AAED,OAAO,cAAc;AAErBD,QAAO,SAAS;","names":["Select","props"]}
+{"version":3,"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from 'react';\nimport {\n  Select as RadixUISelect,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SelectGroup,\n} from './select';\nimport { cn } from '../../utils';\nimport { debounce } from 'lodash';\n\ninterface SelectProps {\n  className?: string;\n  disableMatchWidth?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  value?: string;\n  onChange: (value: string) => void;\n  width?: string | number;\n  children: React.ReactNode;\n  lable?: string;\n  disabled?: boolean;\n}\n\ninterface OptionProps {\n  className?: string;\n  children: React.ReactNode;\n  value: string;\n}\nconst Select: React.FC<SelectProps> & { Option: React.FC<OptionProps> } = ({\n  className = '',\n  disableMatchWidth = true,\n  size = 'medium',\n  value = '',\n  onChange,\n  width = 'auto',\n  children,\n  lable = '',\n  ...props\n}) => {\n  const [open, setOpen] = useState(false);\n\n  const selectedText = useMemo(() => {\n    let text = 'Select an option...';\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child) && child.props.value === value) {\n        text = child.props.children;\n      }\n    });\n    return text;\n  }, [value, children]);\n\n  const handleValueChange = debounce(value => {\n    onChange(value);\n  }, 300);\n\n  const wheel = () => {\n    setOpen(false);\n  };\n\n  useEffect(() => {\n    if (open) {\n      document.body.removeAttribute('data-scroll-locked');\n      window.addEventListener('wheel', wheel, { passive: false });\n      window.addEventListener('touchmove', wheel, { passive: false });\n    } else {\n      window.removeEventListener('wheel', wheel);\n      window.removeEventListener('touchmove', wheel);\n    }\n\n    return () => {\n      window.removeEventListener('wheel', wheel);\n      window.removeEventListener('touchmove', wheel);\n    };\n  }, [open, setOpen]);\n\n  return (\n    <RadixUISelect\n      value={value}\n      onValueChange={handleValueChange}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <SelectTrigger\n        className={cn(\n          'bg-blue-04 hover:bg-blue-08',\n          size === 'small' && 'h-8 text-xs',\n          size === 'medium' && 'h-10 text-sm',\n          size === 'large' && 'h-12 text-lg',\n          className,\n        )}\n        style={{ width }}\n        {...props}\n      >\n        {lable ? lable : <SelectValue>{selectedText}</SelectValue>}\n      </SelectTrigger>\n\n      <SelectContent\n        className={cn(\n          'relative z-50 max-h-96 overflow-hidden rounded-md bg-[#FFF] shadow-md',\n          !disableMatchWidth && 'w-full',\n        )}\n      >\n        <SelectGroup>{children}</SelectGroup>\n      </SelectContent>\n    </RadixUISelect>\n  );\n};\n\nconst Option: React.FC<OptionProps> = ({\n  className = '',\n  children,\n  value,\n  ...props\n}: OptionProps) => (\n  <SelectItem value={value} className={className} {...props}>\n    {children}\n  </SelectItem>\n);\nOption.displayName = 'Option';\n\nSelect.Option = Option;\n\nexport { Select };\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,SAAS,SAAS,UAAU,iBAAyB;AAU5D,SAAS,gBAAgB;AAmErB,SAiBqB,KAjBrB;AAhDJ,IAAMA,UAAoE,CAAC;AAAA,EACzE,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,OAAO;AACX,UAAM,SAAS,QAAQ,UAAU,WAAS;AACxC,UAAI,MAAM,eAAe,KAAK,KAAK,MAAM,MAAM,UAAU,OAAO;AAC9D,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,QAAM,oBAAoB,SAAS,CAAAC,WAAS;AAC1C,aAASA,MAAK;AAAA,EAChB,GAAG,GAAG;AAEN,QAAM,QAAQ,MAAM;AAClB,YAAQ,KAAK;AAAA,EACf;AAEA,YAAU,MAAM;AACd,QAAI,MAAM;AACR,eAAS,KAAK,gBAAgB,oBAAoB;AAClD,aAAO,iBAAiB,SAAS,OAAO,EAAE,SAAS,MAAM,CAAC;AAC1D,aAAO,iBAAiB,aAAa,OAAO,EAAE,SAAS,MAAM,CAAC;AAAA,IAChE,OAAO;AACL,aAAO,oBAAoB,SAAS,KAAK;AACzC,aAAO,oBAAoB,aAAa,KAAK;AAAA,IAC/C;AAEA,WAAO,MAAM;AACX,aAAO,oBAAoB,SAAS,KAAK;AACzC,aAAO,oBAAoB,aAAa,KAAK;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA,cAAc;AAAA,MAEd;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,WAAW;AAAA,cACpB,SAAS,YAAY;AAAA,cACrB,SAAS,WAAW;AAAA,cACpB;AAAA,YACF;AAAA,YACA,OAAO,EAAE,MAAM;AAAA,YACd,GAAG;AAAA,YAEH,kBAAQ,QAAQ,oBAAC,eAAa,wBAAa;AAAA;AAAA,QAC9C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,qBAAqB;AAAA,YACxB;AAAA,YAEA,8BAAC,eAAa,UAAS;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,SAAgC,CAAC;AAAA,EACrC,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,cAAW,OAAc,WAAuB,GAAG,OACjD,UACH;AAEF,OAAO,cAAc;AAErBD,QAAO,SAAS;","names":["Select","value"]}

package/dist/components/Select/select.d.ts

@@ -5,11 +5,10 @@ declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/Select/select.js

@@ -5,14 +5,14 @@ import {
   SelectItem,
   SelectLabel,
   SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
   SelectValue
-} from "../../chunk-GKAPQ7LN.js";
-import "../../chunk-AGOKIWZZ.js";
-import "../../chunk-CJQCVR64.js";
-import "../../chunk-5IEZKHNQ.js";
+} from "../../chunk-KTFYV3XJ.js";
+import "../../chunk-LRCAKRPK.js";
+import "../../chunk-NDCMVJNJ.js";
+import "../../chunk-ADPYV4OL.js";
+import "../../chunk-HRW4BUP4.js";
 export {
   Select,
   SelectContent,
@@ -20,7 +20,6 @@ export {
   SelectItem,
   SelectLabel,
   SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
   SelectValue

package/dist/components/Skeleton/index.d.ts

@@ -13,4 +13,4 @@ type NativeAttrs = Omit<React__default.HTMLAttributes<any>, keyof SkeletonBasePr
 type SkeletonProps = React__default.PropsWithChildren<SkeletonBaseProps & NativeAttrs>;
 declare const Skeleton: React__default.FC<SkeletonProps>;
 
-export { Skeleton, type SkeletonProps };
+export { Skeleton, SkeletonProps };

package/dist/components/SkeletonContainer/index.d.ts

@@ -10,4 +10,4 @@ type NativeAttrs = Omit<React__default.HTMLAttributes<any>, keyof SkeletonContai
 declare type Props = SkeletonContainerProps & NativeAttrs;
 declare const SkeletonContainer: ({ children, shown, style, }: Props) => react_jsx_runtime.JSX.Element;
 
-export { type Props, SkeletonContainer };
+export { Props, SkeletonContainer };

package/dist/components/Text/index.d.ts

@@ -11,8 +11,9 @@ type TextProps = {
     hoverValueMaxCount?: number;
     tag?: 'p' | 'span';
     type?: NormalTypes;
+    hideTooltip?: boolean;
 };
 type NativeAttrs = Omit<React__default.HTMLAttributes<any>, keyof TextProps>;
-declare const Text: React__default.MemoExoticComponent<({ className, children, maxWidth, maxCount, hoverValue, hoverValueMaxCount: outerHoverValueMaxCount, tag, type, ...props }: NativeAttrs & TextProps) => React__default.FunctionComponentElement<TooltipProps>>;
+declare const Text: React__default.MemoExoticComponent<({ className, children, maxWidth, maxCount, hoverValue, hoverValueMaxCount: outerHoverValueMaxCount, tag, type, hideTooltip, ...props }: NativeAttrs & TextProps) => React__default.FunctionComponentElement<TooltipProps>>;
 
 export { Text };

package/dist/components/Text/index.js

@@ -1,11 +1,12 @@
 import {
   Text
-} from "../../chunk-4V4K4OJ4.js";
-import "../../chunk-FXBVUGRI.js";
-import "../../chunk-AGOKIWZZ.js";
-import "../../chunk-CJQCVR64.js";
-import "../../chunk-YVIZX6QJ.js";
-import "../../chunk-5IEZKHNQ.js";
+} from "../../chunk-RD7ICJJF.js";
+import "../../chunk-TOKKKTFG.js";
+import "../../chunk-CQLD2WE7.js";
+import "../../chunk-LRCAKRPK.js";
+import "../../chunk-NDCMVJNJ.js";
+import "../../chunk-ADPYV4OL.js";
+import "../../chunk-HRW4BUP4.js";
 export {
   Text
 };

package/dist/components/Tooltip/index.d.ts

@@ -2,10 +2,11 @@ import React__default, { ComponentProps, HTMLAttributes } from 'react';
 import _Tooltip from '@cfx-kit/ui-components/dist/Tooltip';
 
 interface TooltipProps extends Omit<ComponentProps<typeof _Tooltip>, 'trigger' | 'containerClassName'> {
-    title: React__default.ReactNode;
+    title?: React__default.ReactNode;
     children?: React__default.ReactNode;
     triggerProps?: HTMLAttributes<HTMLElement>;
+    className?: string;
 }
 declare const Tooltip: React__default.FC<TooltipProps>;
 
-export { Tooltip, type TooltipProps };
+export { Tooltip, TooltipProps };

package/dist/components/Tooltip/index.js

@@ -1,7 +1,10 @@
 import {
   Tooltip
-} from "../../chunk-YVIZX6QJ.js";
-import "../../chunk-5IEZKHNQ.js";
+} from "../../chunk-CQLD2WE7.js";
+import "../../chunk-LRCAKRPK.js";
+import "../../chunk-NDCMVJNJ.js";
+import "../../chunk-ADPYV4OL.js";
+import "../../chunk-HRW4BUP4.js";
 export {
   Tooltip
 };