@channel.io/bezier-react 3.6.6 → 4.0.0-next.0
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.
- package/dist/cjs/components/AlphaButton/Button.js +1 -1
- package/dist/cjs/components/AlphaButton/Button.js.map +1 -1
- package/dist/cjs/components/AlphaButton/Button.module.scss.js +1 -1
- package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js +1 -1
- package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map +1 -1
- package/dist/cjs/components/AlphaFloatingButton/FloatingButton.module.scss.js +1 -1
- package/dist/cjs/components/AlphaIconButton/IconButton.module.scss.js +1 -1
- package/dist/cjs/components/Button/Button.js +1 -1
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/Button/Button.module.scss.js +1 -1
- package/dist/cjs/components/Text/Text.js +2 -0
- package/dist/cjs/components/Text/Text.js.map +1 -1
- package/dist/cjs/packages/bezier-tokens/dist/beta/esm/darkTheme.js +20 -20
- package/dist/cjs/packages/bezier-tokens/dist/beta/esm/darkTheme.js.map +1 -1
- package/dist/cjs/packages/bezier-tokens/dist/beta/esm/lightTheme.js +20 -20
- package/dist/cjs/packages/bezier-tokens/dist/beta/esm/lightTheme.js.map +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/esm/components/AlphaButton/Button.mjs +1 -1
- package/dist/esm/components/AlphaButton/Button.mjs.map +1 -1
- package/dist/esm/components/AlphaButton/Button.module.scss.mjs +1 -1
- package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs +1 -1
- package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs.map +1 -1
- package/dist/esm/components/AlphaFloatingButton/FloatingButton.module.scss.mjs +1 -1
- package/dist/esm/components/AlphaIconButton/IconButton.module.scss.mjs +1 -1
- package/dist/esm/components/Button/Button.mjs +1 -1
- package/dist/esm/components/Button/Button.mjs.map +1 -1
- package/dist/esm/components/Button/Button.module.scss.mjs +1 -1
- package/dist/esm/components/Text/Text.mjs +2 -0
- package/dist/esm/components/Text/Text.mjs.map +1 -1
- package/dist/esm/packages/bezier-tokens/dist/beta/esm/darkTheme.mjs +20 -20
- package/dist/esm/packages/bezier-tokens/dist/beta/esm/darkTheme.mjs.map +1 -1
- package/dist/esm/packages/bezier-tokens/dist/beta/esm/lightTheme.mjs +20 -20
- package/dist/esm/packages/bezier-tokens/dist/beta/esm/lightTheme.mjs.map +1 -1
- package/dist/esm/styles.css +1 -1
- package/dist/types/components/Text/Text.d.ts.map +1 -1
- package/dist/types/components/Text/Text.types.d.ts +8 -0
- package/dist/types/components/Text/Text.types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/AlphaButton/Button.module.scss +49 -18
- package/src/components/AlphaButton/Button.tsx +1 -1
- package/src/components/AlphaFloatingButton/FloatingButton.module.scss +38 -5
- package/src/components/AlphaFloatingButton/FloatingButton.tsx +1 -1
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss +21 -0
- package/src/components/AlphaIconButton/IconButton.module.scss +44 -13
- package/src/components/Button/Button.module.scss +61 -25
- package/src/components/Button/Button.tsx +1 -1
- package/src/components/Text/Text.module.scss +3 -2
- package/src/components/Text/Text.test.tsx +13 -0
- package/src/components/Text/Text.tsx +2 -0
- package/src/components/Text/Text.types.ts +8 -0
|
@@ -67,7 +67,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
|
|
|
67
67
|
}), /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
|
|
68
68
|
className: Button_module.default.ButtonText,
|
|
69
69
|
typo: getTypography(size),
|
|
70
|
-
|
|
70
|
+
fontWeight: 500,
|
|
71
71
|
children: text
|
|
72
72
|
}), /*#__PURE__*/jsxRuntime.jsx(SideContent, {
|
|
73
73
|
size: getIconSize(size),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n type ButtonProps,\n type ButtonSize,\n} from '~/src/components/AlphaButton/Button.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Button.module.scss'\n\nfunction SideContent({\n size,\n content,\n}: {\n size: IconSize\n content?: ButtonProps['prefixContent']\n}) {\n return isBezierIcon(content) ? (\n <Icon\n source={content}\n size={size}\n className={styles.ButtonIcon}\n />\n ) : (\n content\n )\n}\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getTypography(size: ButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n as = BaseButton,\n text,\n prefixContent,\n suffixContent,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n className,\n loading,\n disabled: disabledProp,\n ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\n\n const disabled = loading || disabledProp\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.Button,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n active && styles.active,\n className\n )}\n disabled={disabled}\n {...rest}\n >\n <div\n className={classNames(\n styles.ButtonContent,\n loading && styles.loading\n )}\n >\n <SideContent\n size={getIconSize(size)}\n content={prefixContent}\n />\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n type ButtonProps,\n type ButtonSize,\n} from '~/src/components/AlphaButton/Button.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Button.module.scss'\n\nfunction SideContent({\n size,\n content,\n}: {\n size: IconSize\n content?: ButtonProps['prefixContent']\n}) {\n return isBezierIcon(content) ? (\n <Icon\n source={content}\n size={size}\n className={styles.ButtonIcon}\n />\n ) : (\n content\n )\n}\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getTypography(size: ButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n as = BaseButton,\n text,\n prefixContent,\n suffixContent,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n className,\n loading,\n disabled: disabledProp,\n ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\n\n const disabled = loading || disabledProp\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.Button,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n active && styles.active,\n className\n )}\n disabled={disabled}\n {...rest}\n >\n <div\n className={classNames(\n styles.ButtonContent,\n loading && styles.loading\n )}\n >\n <SideContent\n size={getIconSize(size)}\n content={prefixContent}\n />\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n fontWeight={500}\n >\n {text}\n </Text>\n\n <SideContent\n size={getIconSize(size)}\n content={suffixContent}\n />\n </div>\n\n {loading && (\n <div\n className={classNames(\n styles.ButtonLoader,\n // NOTE: Loader size is the same as icon size\n styles[`size-${getIconSize(size)}`]\n )}\n >\n <AlphaLoader\n size=\"s\"\n className={styles.Loader}\n variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["SideContent","size","content","isBezierIcon","_jsx","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getTypography","Button","forwardRef","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","disabled","disabledProp","rest","forwardedRef","Comp","_jsxs","ref","classNames","children","ButtonContent","Text","ButtonText","typo","fontWeight","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;;AAkBA,SAASA,WAAWA,CAAC;EACnBC,IAAI;AACJC,EAAAA;AAIF,CAAC,EAAE;AACD,EAAA,OAAOC,wBAAY,CAACD,OAAO,CAAC,gBAC1BE,cAAA,CAACC,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEJ,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXM,SAAS,EAAEC,qBAAM,CAACC;GACnB,CAAC,GAEFP,OACD;AACH;AAEA,SAASQ,WAAWA,CAACT,IAAgB,EAAE;EACrC,OACE;AACEU,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDd,IAAI,CAAC;AACT;AAEA,SAASe,aAAaA,CAACf,IAAgB,EAAE;EACvC,OACE;AACEU,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,EAAE,EAAE;GACL,CACDd,IAAI,CAAC;AACT;MAEagB,MAAM,gBAAGC,gBAAU,CAC9B,SAASD,MAAMA,CACb;AACEE,EAAAA,EAAE,GAAGC,qBAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBxB,EAAAA,IAAI,GAAG,GAAG;EACVyB,MAAM;EACNnB,SAAS;EACToB,OAAO;AACPC,EAAAA,QAAQ,EAAEC,YAAY;EACtB,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB;AAEpC,EAAA,MAAMS,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEI,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBxB,IAAAA,SAAS,EAAE4B,aAAU,CACnB3B,qBAAM,CAACS,MAAM,EACbT,qBAAM,CAAC,QAAQP,IAAI,CAAA,CAAE,CAAC,EACtBO,qBAAM,CAAC,CAAA,QAAA,EAAWiB,OAAO,CAAA,CAAE,CAAC,EAC5BjB,qBAAM,CAAC,CAAA,MAAA,EAASgB,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAIlB,qBAAM,CAACkB,MAAM,EACvBnB,SACF,CAAE;AACFqB,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfE,IAAI;AAAAM,IAAAA,QAAA,gBAERH,eAAA,CAAA,KAAA,EAAA;AACE1B,MAAAA,SAAS,EAAE4B,aAAU,CACnB3B,qBAAM,CAAC6B,aAAa,EACpBV,OAAO,IAAInB,qBAAM,CAACmB,OACpB,CAAE;MAAAS,QAAA,EAAA,cAEFhC,cAAA,CAACJ,WAAW,EAAA;AACVC,QAAAA,IAAI,EAAES,WAAW,CAACT,IAAI,CAAE;AACxBC,QAAAA,OAAO,EAAEoB;AAAc,OACxB,CAAC,eAGFlB,cAAA,CAACkC,SAAI,EAAA;QACH/B,SAAS,EAAEC,qBAAM,CAAC+B,UAAW;AAC7BC,QAAAA,IAAI,EAAExB,aAAa,CAACf,IAAI,CAAE;AAC1BwC,QAAAA,UAAU,EAAE,GAAI;AAAAL,QAAAA,QAAA,EAEff;AAAI,OACD,CAAC,eAEPjB,cAAA,CAACJ,WAAW,EAAA;AACVC,QAAAA,IAAI,EAAES,WAAW,CAACT,IAAI,CAAE;AACxBC,QAAAA,OAAO,EAAEqB;AAAc,OACxB,CAAC;AAAA,KACC,CAAC,EAELI,OAAO,iBACNvB,cAAA,CAAA,KAAA,EAAA;AACEG,MAAAA,SAAS,EAAE4B,aAAU,CACnB3B,qBAAM,CAACkC,YAAY;AACnB;MACAlC,qBAAM,CAAC,QAAQE,WAAW,CAACT,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAAmC,QAAA,eAEFhC,cAAA,CAACuC,aAAW,EAAA;AACV1C,QAAAA,IAAI,EAAC,GAAG;QACRM,SAAS,EAAEC,qBAAM,CAACoC,MAAO;AACzBnB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CACF;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Icon":"b--FZGN","size-xxxs":"b-o9swE","size-xxs":"b-xlhxz","size-xs":"b-dMl6r","size-s":"b-FZTyp","size-m":"b-Tenxe","size-l":"b-IJLB6","size-xl":"b-xKsUH","Button":"b-Bu63w","ButtonText":"b-Xr8t8","variant-primary":"b-ohV3j","color-blue":"b-EL8PY","color-cobalt":"b--YAo9","color-red":"b-EAdoN","color-orange":"b-k-FfG","color-green":"b-REP7x","color-pink":"b-dkbxj","color-purple":"b-k3Z8M","color-dark-grey":"b-BudYM","color-light-grey":"b-eO-XU","color-white-absolute":"b-RsMAO","variant-secondary":"b-l8-bH","variant-tertiary":"b-PB-TW","ButtonIcon":"b-HX6lq","
|
|
5
|
+
var styles = {"Icon":"b--FZGN","size-xxxs":"b-o9swE","size-xxs":"b-xlhxz","size-xs":"b-dMl6r","size-s":"b-FZTyp","size-m":"b-Tenxe","size-l":"b-IJLB6","size-xl":"b-xKsUH","Button":"b-Bu63w","ButtonText":"b-Xr8t8","variant-primary":"b-ohV3j","color-blue":"b-EL8PY","color-cobalt":"b--YAo9","color-red":"b-EAdoN","color-orange":"b-k-FfG","color-green":"b-REP7x","color-pink":"b-dkbxj","color-purple":"b-k3Z8M","color-dark-grey":"b-BudYM","color-light-grey":"b-eO-XU","color-white-absolute":"b-RsMAO","variant-secondary":"b-l8-bH","variant-tertiary":"b-PB-TW","ButtonIcon":"b-HX6lq","ButtonLoader":"b-TRaYF","active":"b-Y2foo","ButtonContent":"b-nSti0","loading":"b-rUXJx","Loader":"b-Y9S8P"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=Button.module.scss.js.map
|
|
@@ -67,7 +67,7 @@ const FloatingButton = /*#__PURE__*/React.forwardRef(function Button({
|
|
|
67
67
|
}), /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
|
|
68
68
|
className: FloatingButton_module.default.ButtonText,
|
|
69
69
|
typo: getTypography(size),
|
|
70
|
-
|
|
70
|
+
fontWeight: 500,
|
|
71
71
|
children: text
|
|
72
72
|
}), /*#__PURE__*/jsxRuntime.jsx(SideContent, {
|
|
73
73
|
size: getIconSize(size),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingButton.js","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n type FloatingButtonProps,\n type FloatingButtonSize,\n} from '~/src/components/AlphaFloatingButton/FloatingButton.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './FloatingButton.module.scss'\n\nfunction SideContent({\n size,\n content,\n}: {\n size: IconSize\n content?: FloatingButtonProps['prefixContent']\n}) {\n return isBezierIcon(content) ? (\n <Icon\n source={content}\n size={size}\n className={styles.ButtonIcon}\n />\n ) : (\n content\n )\n}\n\nfunction getIconSize(size: FloatingButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getTypography(size: FloatingButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nexport const FloatingButton = forwardRef<\n HTMLButtonElement,\n FloatingButtonProps\n>(function Button(\n {\n as = BaseButton,\n text,\n prefixContent,\n suffixContent,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n className,\n loading = false,\n disabled: disabledProp = false,\n ...rest\n },\n forwardedRef\n) {\n const Comp = as as typeof BaseButton\n const disabled = loading || disabledProp\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.FloatingButton,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n active && styles.active,\n className\n )}\n disabled={disabled}\n {...rest}\n >\n <div\n className={classNames(styles.ButtonContent, loading && styles.loading)}\n >\n <SideContent\n size={getIconSize(size)}\n content={prefixContent}\n />\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n
|
|
1
|
+
{"version":3,"file":"FloatingButton.js","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n type FloatingButtonProps,\n type FloatingButtonSize,\n} from '~/src/components/AlphaFloatingButton/FloatingButton.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './FloatingButton.module.scss'\n\nfunction SideContent({\n size,\n content,\n}: {\n size: IconSize\n content?: FloatingButtonProps['prefixContent']\n}) {\n return isBezierIcon(content) ? (\n <Icon\n source={content}\n size={size}\n className={styles.ButtonIcon}\n />\n ) : (\n content\n )\n}\n\nfunction getIconSize(size: FloatingButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getTypography(size: FloatingButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nexport const FloatingButton = forwardRef<\n HTMLButtonElement,\n FloatingButtonProps\n>(function Button(\n {\n as = BaseButton,\n text,\n prefixContent,\n suffixContent,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n className,\n loading = false,\n disabled: disabledProp = false,\n ...rest\n },\n forwardedRef\n) {\n const Comp = as as typeof BaseButton\n const disabled = loading || disabledProp\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.FloatingButton,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n active && styles.active,\n className\n )}\n disabled={disabled}\n {...rest}\n >\n <div\n className={classNames(styles.ButtonContent, loading && styles.loading)}\n >\n <SideContent\n size={getIconSize(size)}\n content={prefixContent}\n />\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n fontWeight={500}\n >\n {text}\n </Text>\n\n <SideContent\n size={getIconSize(size)}\n content={suffixContent}\n />\n </div>\n\n {loading && (\n <div\n className={classNames(\n styles.ButtonLoader,\n // NOTE: Loader size is the same as icon size\n styles[`size-${getIconSize(size)}`]\n )}\n >\n <AlphaLoader\n size=\"s\"\n className={styles.Loader}\n variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n />\n </div>\n )}\n </Comp>\n )\n})\n"],"names":["SideContent","size","content","isBezierIcon","_jsx","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getTypography","FloatingButton","forwardRef","Button","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","disabled","disabledProp","rest","forwardedRef","Comp","_jsxs","ref","classNames","children","ButtonContent","Text","ButtonText","typo","fontWeight","ButtonLoader","AlphaLoader","Loader"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Icon":"b-N1oNZ","size-xxxs":"b-SmyZ3","size-xxs":"b-f9TeV","size-xs":"b-QsWAB","size-s":"b-XpD2O","size-m":"b-o-cLI","size-l":"b-Hk5nU","size-xl":"b-k3y4r","FloatingButton":"b-bYve2","ButtonText":"b-alAiF","variant-primary":"b-QmpYs","color-blue":"b-Us2nD","color-cobalt":"b-HbgqQ","color-red":"b-KNnPg","color-orange":"b-BuR0o","color-green":"b-e5qII","color-pink":"b-R5OJT","color-purple":"b-Qst2f","color-dark-grey":"b-s325E","color-light-grey":"b-88I-7","variant-secondary":"b-yEZ4V","ButtonIcon":"b--zoBE","active":"b-tMcpZ","ButtonContent":"b-RUr-1","loading":"b-sFtLb","
|
|
5
|
+
var styles = {"Icon":"b-N1oNZ","size-xxxs":"b-SmyZ3","size-xxs":"b-f9TeV","size-xs":"b-QsWAB","size-s":"b-XpD2O","size-m":"b-o-cLI","size-l":"b-Hk5nU","size-xl":"b-k3y4r","FloatingButton":"b-bYve2","ButtonText":"b-alAiF","variant-primary":"b-QmpYs","color-blue":"b-Us2nD","color-cobalt":"b-HbgqQ","color-red":"b-KNnPg","color-orange":"b-BuR0o","color-green":"b-e5qII","color-pink":"b-R5OJT","color-purple":"b-Qst2f","color-dark-grey":"b-s325E","color-light-grey":"b-88I-7","variant-secondary":"b-yEZ4V","ButtonIcon":"b--zoBE","ButtonLoader":"b-cOdoe","active":"b-tMcpZ","ButtonContent":"b-RUr-1","loading":"b-sFtLb","Loader":"b-xybMi"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=FloatingButton.module.scss.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Icon":"b-cK83D","size-xxxs":"b-ATSdQ","size-xxs":"b-506kS","size-xs":"b-mWKOx","size-s":"b-8N-9n","size-m":"b-pDYUy","size-l":"b-YJw65","size-xl":"b-tjHwL","IconButton":"b-xyUBm","variant-primary":"b-Ff2Fz","color-blue":"b-ne4OD","color-cobalt":"b-5zudh","color-red":"b-plyr-","color-orange":"b-h5y75","color-green":"b-Tnm-7","color-pink":"b-uZ0LR","color-purple":"b-5-tPX","color-dark-grey":"b-BN6Xk","color-light-grey":"b-paZDh","color-white-absolute":"b-4O2E3","variant-secondary":"b-ucRsW","variant-tertiary":"b-WHAB-","ButtonIcon":"b-Ty8vu","shape-rectangle":"b-hyTqW","shape-circle":"b-03MST","active":"b-P0tkF","
|
|
5
|
+
var styles = {"Icon":"b-cK83D","size-xxxs":"b-ATSdQ","size-xxs":"b-506kS","size-xs":"b-mWKOx","size-s":"b-8N-9n","size-m":"b-pDYUy","size-l":"b-YJw65","size-xl":"b-tjHwL","IconButton":"b-xyUBm","variant-primary":"b-Ff2Fz","color-blue":"b-ne4OD","color-cobalt":"b-5zudh","color-red":"b-plyr-","color-orange":"b-h5y75","color-green":"b-Tnm-7","color-pink":"b-uZ0LR","color-purple":"b-5-tPX","color-dark-grey":"b-BN6Xk","color-light-grey":"b-paZDh","color-white-absolute":"b-4O2E3","variant-secondary":"b-ucRsW","variant-tertiary":"b-WHAB-","ButtonIcon":"b-Ty8vu","ButtonLoader":"b-lfx3h","shape-rectangle":"b-hyTqW","shape-circle":"b-03MST","active":"b-P0tkF","ButtonContent":"b-r9mfO","loading":"b--Ij3P","Loader":"b-kjV8d"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=IconButton.module.scss.js.map
|
|
@@ -102,7 +102,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
|
|
|
102
102
|
}), text && /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
|
|
103
103
|
className: Button_module.default.ButtonText,
|
|
104
104
|
typo: getTypography(size),
|
|
105
|
-
|
|
105
|
+
fontWeight: 500,
|
|
106
106
|
children: text
|
|
107
107
|
}), /*#__PURE__*/jsxRuntime.jsx(ButtonSideContent, {
|
|
108
108
|
size: size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useCallback } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon, isIconName } from '~/src/components/LegacyIcon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport type { ButtonProps, ButtonSize, SideContent } from './Button.types'\n\nimport styles from './Button.module.scss'\n\nexport const BUTTON_TEST_ID = 'bezier-button'\n\nfunction getTypography(size: ButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 's',\n } as const\n )[size]\n}\n\nfunction ButtonSideContent({\n size,\n children,\n}: {\n size: ButtonSize\n children: SideContent\n}) {\n if (isIconName(children)) {\n warn(\n 'Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.',\n 'Button.IconName'\n )\n return (\n <LegacyIcon\n className={styles.ButtonIcon}\n name={children}\n size={getIconSize(size)}\n />\n )\n }\n\n if (isBezierIcon(children)) {\n return (\n <Icon\n className={styles.ButtonIcon}\n source={children}\n size={getIconSize(size)}\n />\n )\n }\n\n return <>{children}</>\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n as = BaseButton,\n className,\n text,\n loading = false,\n disabled: disabledProp = false,\n active = false,\n size = 'm',\n styleVariant = 'primary',\n colorVariant = 'blue',\n leftContent,\n rightContent,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\n\n const disabled = loading || disabledProp\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n (event) => {\n if (!disabled) {\n onClick?.(event)\n }\n },\n [onClick, disabled]\n )\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.Button,\n styles[`size-${size}`],\n styles[`style-${styleVariant}`],\n styles[`color-${colorVariant}`],\n active && styles.active,\n className\n )}\n disabled={disabled}\n onClick={handleClick}\n data-testid={BUTTON_TEST_ID}\n data-bezier-component=\"Button\"\n {...rest}\n >\n <div\n className={classNames(\n styles.ButtonContent,\n loading && styles.loading\n )}\n >\n <ButtonSideContent size={size}>{leftContent}</ButtonSideContent>\n\n {text && (\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useCallback } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon, isIconName } from '~/src/components/LegacyIcon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport type { ButtonProps, ButtonSize, SideContent } from './Button.types'\n\nimport styles from './Button.module.scss'\n\nexport const BUTTON_TEST_ID = 'bezier-button'\n\nfunction getTypography(size: ButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 's',\n } as const\n )[size]\n}\n\nfunction ButtonSideContent({\n size,\n children,\n}: {\n size: ButtonSize\n children: SideContent\n}) {\n if (isIconName(children)) {\n warn(\n 'Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.',\n 'Button.IconName'\n )\n return (\n <LegacyIcon\n className={styles.ButtonIcon}\n name={children}\n size={getIconSize(size)}\n />\n )\n }\n\n if (isBezierIcon(children)) {\n return (\n <Icon\n className={styles.ButtonIcon}\n source={children}\n size={getIconSize(size)}\n />\n )\n }\n\n return <>{children}</>\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n as = BaseButton,\n className,\n text,\n loading = false,\n disabled: disabledProp = false,\n active = false,\n size = 'm',\n styleVariant = 'primary',\n colorVariant = 'blue',\n leftContent,\n rightContent,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\n\n const disabled = loading || disabledProp\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n (event) => {\n if (!disabled) {\n onClick?.(event)\n }\n },\n [onClick, disabled]\n )\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.Button,\n styles[`size-${size}`],\n styles[`style-${styleVariant}`],\n styles[`color-${colorVariant}`],\n active && styles.active,\n className\n )}\n disabled={disabled}\n onClick={handleClick}\n data-testid={BUTTON_TEST_ID}\n data-bezier-component=\"Button\"\n {...rest}\n >\n <div\n className={classNames(\n styles.ButtonContent,\n loading && styles.loading\n )}\n >\n <ButtonSideContent size={size}>{leftContent}</ButtonSideContent>\n\n {text && (\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n fontWeight={500}\n >\n {text}\n </Text>\n )}\n\n <ButtonSideContent size={size}>{rightContent}</ButtonSideContent>\n </div>\n\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["BUTTON_TEST_ID","getTypography","size","xs","s","m","l","xl","getIconSize","getSpinnerSize","ButtonSideContent","children","isIconName","warn","_jsx","LegacyIcon","className","styles","ButtonIcon","name","isBezierIcon","Icon","source","_Fragment","Button","forwardRef","as","BaseButton","text","loading","disabled","disabledProp","active","styleVariant","colorVariant","leftContent","rightContent","onClick","rest","forwardedRef","Comp","handleClick","useCallback","event","_jsxs","ref","classNames","ButtonContent","Text","ButtonText","typo","fontWeight","ButtonLoader","Spinner"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Button":"b-r4Bne","size-xs":"b-4W28r","style-floating":"b-umk26","style-floating-alt":"b-tlipJ","size-s":"b-jxqYg","size-m":"b-qdkXf","size-l":"b-slhsl","size-xl":"b-S6hl0","ButtonText":"b-yjqfZ","ButtonContent":"b-k-5l5","style-primary":"b-7LGGu","color-blue":"b-4obXj","active":"b-xlaoi","color-red":"b-WxHla","color-green":"b-2wMO2","color-cobalt":"b-AJ0jC","color-orange":"b-Ty-t9","color-pink":"b-stvkM","color-purple":"b-tmVZx","color-monochrome":"b-Uru6O","color-monochrome-light":"b-aD9Wf","color-monochrome-dark":"b-zQNHH","
|
|
5
|
+
var styles = {"Button":"b-r4Bne","size-xs":"b-4W28r","style-floating":"b-umk26","style-floating-alt":"b-tlipJ","size-s":"b-jxqYg","size-m":"b-qdkXf","size-l":"b-slhsl","size-xl":"b-S6hl0","ButtonText":"b-yjqfZ","ButtonContent":"b-k-5l5","style-primary":"b-7LGGu","color-blue":"b-4obXj","active":"b-xlaoi","color-red":"b-WxHla","color-green":"b-2wMO2","color-cobalt":"b-AJ0jC","color-orange":"b-Ty-t9","color-pink":"b-stvkM","color-purple":"b-tmVZx","color-monochrome":"b-Uru6O","color-monochrome-light":"b-aD9Wf","color-monochrome-dark":"b-zQNHH","ButtonIcon":"b-36ps8","ButtonLoader":"b-Dj6LT","style-secondary":"b-q7Rq7","style-tertiary":"b-decJd","loading":"b-6NIiF"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=Button.module.scss.js.map
|
|
@@ -31,6 +31,7 @@ const Text = /*#__PURE__*/React.forwardRef(function Text(props, forwardedRef) {
|
|
|
31
31
|
typo = '15',
|
|
32
32
|
color,
|
|
33
33
|
bold,
|
|
34
|
+
fontWeight,
|
|
34
35
|
italic,
|
|
35
36
|
truncated,
|
|
36
37
|
align,
|
|
@@ -41,6 +42,7 @@ const Text = /*#__PURE__*/React.forwardRef(function Text(props, forwardedRef) {
|
|
|
41
42
|
ref: forwardedRef,
|
|
42
43
|
style: {
|
|
43
44
|
'--b-text-color': style.colorTokenCssVar(color),
|
|
45
|
+
'--b-text-font-weight': fontWeight,
|
|
44
46
|
'--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
|
|
45
47
|
...marginStyles.style,
|
|
46
48
|
...style$1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/**\n * `Text` is a component for representing the typography of a design system.\n * @example\n *\n * ```tsx\n * <Text\n * typo=\"15\"\n * color=\"text-neutral\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': colorTokenCssVar(color),\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","colorTokenCssVar","undefined","classNames","styles"],"mappings":";;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC;AACL,GAAC,
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/**\n * `Text` is a component for representing the typography of a design system.\n * @example\n *\n * ```tsx\n * <Text\n * typo=\"15\"\n * color=\"text-neutral\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n fontWeight,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': colorTokenCssVar(color),\n '--b-text-font-weight': fontWeight,\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","fontWeight","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","colorTokenCssVar","undefined","classNames","styles"],"mappings":";;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,UAAU;IACVC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGf,UAAU;EACd,MAAMgB,oBAAoB,GAAGC,aAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC;EAElE,oBAAOK,mBAAa,CAClBX,EAAE,EACF;AACEY,IAAAA,GAAG,EAAErB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEe,sBAAgB,CAACX,KAAK,CAAC;AACzC,MAAA,sBAAsB,EAAEE,UAAU;AAClC,MAAA,qBAAqB,EAAEK,oBAAoB,GAAGH,SAAS,GAAGQ,SAAS;MACnE,GAAGnB,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEgB,aAAU,CACnBC,mBAAM,CAAC5B,IAAI,EACX4B,mBAAM,CAAC,CAAA,KAAA,EAAQf,IAAI,CAAA,CAAE,CAAC,EACtBE,IAAI,IAAIa,mBAAM,CAACb,IAAI,EACnBE,MAAM,IAAIW,mBAAM,CAACX,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdU,mBAAM,CAACV,SAAS,GAChBG,oBAAoB,IAAIO,mBAAM,CAAC,sBAAsB,CAAC,EAC1DT,KAAK,IAAIS,mBAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCZ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,aAAa;IAC5B,GAAGS;GACJ,EACDX,QACF,CAAC;AACH,CACF;;;;"}
|
|
@@ -1548,64 +1548,64 @@ var darkTheme = Object.freeze({
|
|
|
1548
1548
|
"value": "#ededed2f"
|
|
1549
1549
|
}),
|
|
1550
1550
|
"color-chart-theme-default-10": Object.freeze({
|
|
1551
|
-
"value": "#
|
|
1551
|
+
"value": "#C0C0C2"
|
|
1552
1552
|
}),
|
|
1553
1553
|
"color-chart-theme-default-10-hovered": Object.freeze({
|
|
1554
|
-
"value": "#
|
|
1554
|
+
"value": "#cbcbcdff"
|
|
1555
1555
|
}),
|
|
1556
1556
|
"color-chart-theme-default-01": Object.freeze({
|
|
1557
|
-
"value": "#
|
|
1557
|
+
"value": "#2E62C1"
|
|
1558
1558
|
}),
|
|
1559
1559
|
"color-chart-theme-default-01-hovered": Object.freeze({
|
|
1560
|
-
"value": "#
|
|
1560
|
+
"value": "#2f6ad5ff"
|
|
1561
1561
|
}),
|
|
1562
1562
|
"color-chart-theme-default-02": Object.freeze({
|
|
1563
|
-
"value": "#
|
|
1563
|
+
"value": "#02B3A4"
|
|
1564
1564
|
}),
|
|
1565
1565
|
"color-chart-theme-default-02-hovered": Object.freeze({
|
|
1566
|
-
"value": "#
|
|
1566
|
+
"value": "#02c8b7ff"
|
|
1567
1567
|
}),
|
|
1568
1568
|
"color-chart-theme-default-03": Object.freeze({
|
|
1569
|
-
"value": "#
|
|
1569
|
+
"value": "#C68EDB"
|
|
1570
1570
|
}),
|
|
1571
1571
|
"color-chart-theme-default-03-hovered": Object.freeze({
|
|
1572
|
-
"value": "#
|
|
1572
|
+
"value": "#d09ce4ff"
|
|
1573
1573
|
}),
|
|
1574
1574
|
"color-chart-theme-default-04": Object.freeze({
|
|
1575
|
-
"value": "#
|
|
1575
|
+
"value": "#F58518"
|
|
1576
1576
|
}),
|
|
1577
1577
|
"color-chart-theme-default-04-hovered": Object.freeze({
|
|
1578
|
-
"value": "#
|
|
1578
|
+
"value": "#f6902dff"
|
|
1579
1579
|
}),
|
|
1580
1580
|
"color-chart-theme-default-05": Object.freeze({
|
|
1581
|
-
"value": "#
|
|
1581
|
+
"value": "#F8BD3B"
|
|
1582
1582
|
}),
|
|
1583
1583
|
"color-chart-theme-default-05-hovered": Object.freeze({
|
|
1584
|
-
"value": "#
|
|
1584
|
+
"value": "#f9c450ff"
|
|
1585
1585
|
}),
|
|
1586
1586
|
"color-chart-theme-default-06": Object.freeze({
|
|
1587
|
-
"value": "#
|
|
1587
|
+
"value": "#9D755E"
|
|
1588
1588
|
}),
|
|
1589
1589
|
"color-chart-theme-default-06-hovered": Object.freeze({
|
|
1590
|
-
"value": "#
|
|
1590
|
+
"value": "#ac7f65ff"
|
|
1591
1591
|
}),
|
|
1592
1592
|
"color-chart-theme-default-07": Object.freeze({
|
|
1593
|
-
"value": "#
|
|
1593
|
+
"value": "#9D755E"
|
|
1594
1594
|
}),
|
|
1595
1595
|
"color-chart-theme-default-07-hovered": Object.freeze({
|
|
1596
|
-
"value": "#
|
|
1596
|
+
"value": "#ac7f65ff"
|
|
1597
1597
|
}),
|
|
1598
1598
|
"color-chart-theme-default-08": Object.freeze({
|
|
1599
|
-
"value": "#
|
|
1599
|
+
"value": "#FEBBB3"
|
|
1600
1600
|
}),
|
|
1601
1601
|
"color-chart-theme-default-08-hovered": Object.freeze({
|
|
1602
|
-
"value": "#
|
|
1602
|
+
"value": "#fd5b48ff"
|
|
1603
1603
|
}),
|
|
1604
1604
|
"color-chart-theme-default-09": Object.freeze({
|
|
1605
|
-
"value": "#
|
|
1605
|
+
"value": "#F96C62"
|
|
1606
1606
|
}),
|
|
1607
1607
|
"color-chart-theme-default-09-hovered": Object.freeze({
|
|
1608
|
-
"value": "#
|
|
1608
|
+
"value": "#fa8077ff"
|
|
1609
1609
|
})
|
|
1610
1610
|
})
|
|
1611
1611
|
});
|