{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/color/ColorScales/index.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\n\nimport type { ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\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  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Flexbox gap={2}>\n          <Flexbox horizontal align={'center'} gap={2} key=\"scale-title\">\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          </Flexbox>\n          <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n          <ScaleRow key=\"lightA\" name={name} scale={scale.lightA} title=\"lightA\" />\n          <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n          <ScaleRow key=\"darkA\" name={name} scale={scale.darkA} title=\"darkA\" />\n        </Flexbox>\n      </div>\n      <ToastHost />\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;AA0BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;EAAvD,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,kBAAkB;GACvC,UAAA,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACE,qBAACA,mBAAD;MAAS,YAAA;MAAW,OAAO;MAAU,KAAK;MAA1C,UAAA,CACE,oBAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,WAAW,OAAO;MAAgC,GAAb,WAAa,GACtF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC,CACxC,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU;OACjB,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;OAExC,MAAM,iBAAiB,iBAAiB;OAExC,OACE,oBAAC,OAAD;QAAK,WAAW,OAAO;QACrB,UAAA,oBAAC,OAAD;SAAK,WAAW,OAAO;SACrB,UAAA,oBAACA,mBAAD;UACE,YAAA;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;UACX;UAEC,UAAA;SACM,CAAA;QACN,CAAA;OACF,GAfiC,MAAM,OAevC;MAET,CAAC,CACI;KA5BwC,GAAA,aA4BxC;KACT,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD;KACrE,oBAAC,UAAD;MAA6B;MAAM,OAAO,MAAM;MAAQ,OAAM;KAAU,GAA1D,QAA0D;KACxE,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;KAAQ,GAApD,MAAoD;KAClE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD;IAC9D;;EACN,CAAA,GACL,oBAAC,WAAD,CAAY,CAAA,CACL;;AAEb,CAAC"}