{"version":3,"file":"index.mjs","names":["Flexbox","VarRow"],"sources":["../../../src/color/CssVar/index.tsx"],"sourcesContent":["'use client';\n\nimport { Space } from 'antd';\nimport { useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { type ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\nimport VarRow from './VarRow';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  const { isDarkMode } = useThemeMode();\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Space direction={'vertical'} size={2}>\n          <Space key=\"scale-title\" size={2}>\n            <Flexbox horizontal align={'center'} className={styles.scaleRowTitle} key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        className={styles.scaleItem}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Space>\n          <VarRow name={name} />\n          {isDarkMode ? (\n            <>\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n            </>\n          ) : (\n            <>\n              {' '}\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n            </>\n          )}\n        </Space>\n      </div>\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,MAAM,EAAE,eAAe,cAAc;AACrC,QACE,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;YACrD,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,mBAAmB;aACxC,qBAAC,OAAD;IAAO,WAAW;IAAY,MAAM;cAApC;KACE,qBAAC,OAAD;MAAyB,MAAM;gBAA/B,CACE,oBAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,WAAW,OAAO;OAAiC,EAAd,YAAc,EACvF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,QAAQ,CAAC,CACxC,KAAK,GAAG,CACR,KAAK,GAAG,UAAU;AACjB,WAAI,UAAU,KAAK,UAAU,GAAI,QAAO;OAExC,MAAM,iBAAiB,iBAAiB;AAExC,cACE,oBAAC,OAAD;QAAK,WAAW,OAAO;kBACrB,oBAAC,OAAD;SAAK,WAAW,OAAO;mBACrB,oBAACA,mBAAD;UACE,YAAA;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;WACV;oBAEA;UACO,CAAA;SACN,CAAA;QACF,EAfgC,MAAM,QAetC;QAER,CACE;QA5BG,cA4BH;KACR,oBAACC,YAAD,EAAc,MAAQ,CAAA;KACrB,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;MAAS,EAArD,OAAqD,EACnE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;MAAU,EAAxD,QAAwD,CACrE,EAAA,CAAA,GAEH,qBAAA,YAAA,EAAA,UAAA;MACG;MACD,oBAAC,UAAD;OAA4B;OAAM,OAAO,MAAM;OAAO,OAAM;OAAU,EAAxD,QAAwD;MACtE,oBAAC,UAAD;OAA2B;OAAM,OAAO,MAAM;OAAM,OAAM;OAAS,EAArD,OAAqD;MAClE,EAAA,CAAA;KAEC;;GACJ,CAAA;EACE,CAAA;EAEZ"}