@channel.io/bezier-react 4.0.0-next.1 → 4.0.0-next.3
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 +3 -3
- 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 +3 -3
- 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/AlphaFloatingIconButton/FloatingIconButton.js +2 -1
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map +1 -1
- package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.js +1 -1
- package/dist/cjs/components/AlphaIconButton/IconButton.module.scss.js +1 -1
- package/dist/cjs/components/Button/Button.js +5 -4
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/Button/Button.module.scss.js +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 +3 -3
- 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 +3 -3
- 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/AlphaFloatingIconButton/FloatingIconButton.mjs +2 -1
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs.map +1 -1
- package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.mjs +1 -1
- package/dist/esm/components/AlphaIconButton/IconButton.module.scss.mjs +1 -1
- package/dist/esm/components/Button/Button.mjs +5 -4
- package/dist/esm/components/Button/Button.mjs.map +1 -1
- package/dist/esm/components/Button/Button.module.scss.mjs +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/AlphaFloatingIconButton/FloatingIconButton.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/AlphaButton/Button.module.scss +19 -4
- package/src/components/AlphaButton/Button.tsx +3 -3
- package/src/components/AlphaFloatingButton/FloatingButton.module.scss +19 -4
- package/src/components/AlphaFloatingButton/FloatingButton.tsx +3 -3
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss +20 -5
- package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx +1 -0
- package/src/components/AlphaIconButton/IconButton.module.scss +20 -5
- package/src/components/Button/Button.module.scss +30 -6
- package/src/components/Button/Button.tsx +7 -4
|
@@ -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: '
|
|
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: '12',\n s: '13',\n m: '13',\n l: '14',\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":"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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--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","
|
|
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","ButtonIcon":"b-HX6lq","Loader":"b-Y9S8P","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","ButtonLoader":"b-TRaYF","active":"b-Y2foo","ButtonContent":"b-nSti0","loading":"b-rUXJx"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=Button.module.scss.js.map
|
|
@@ -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: '
|
|
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: '12',\n s: '13',\n m: '13',\n l: '14',\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":";;;;;;;;;;;;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,6BAAM,CAACC;GACnB,CAAC,GAEFP,OACD;AACH;AAEA,SAASQ,WAAWA,CAACT,IAAwB,EAAE;EAC7C,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,IAAwB,EAAE;EAC/C,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,cAAc,gBAAGC,gBAAU,CAGtC,SAASC,MAAMA,CACf;AACEC,EAAAA,EAAE,GAAGC,qBAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBzB,EAAAA,IAAI,GAAG,GAAG;EACV0B,MAAM;EACNpB,SAAS;AACTqB,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9B,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB;AACpC,EAAA,MAAMS,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEI,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBzB,IAAAA,SAAS,EAAE6B,aAAU,CACnB5B,6BAAM,CAACS,cAAc,EACrBT,6BAAM,CAAC,QAAQP,IAAI,CAAA,CAAE,CAAC,EACtBO,6BAAM,CAAC,CAAA,QAAA,EAAWkB,OAAO,CAAA,CAAE,CAAC,EAC5BlB,6BAAM,CAAC,CAAA,MAAA,EAASiB,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAInB,6BAAM,CAACmB,MAAM,EACvBpB,SACF,CAAE;AACFsB,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfE,IAAI;AAAAM,IAAAA,QAAA,gBAERH,eAAA,CAAA,KAAA,EAAA;AACE3B,MAAAA,SAAS,EAAE6B,aAAU,CAAC5B,6BAAM,CAAC8B,aAAa,EAAEV,OAAO,IAAIpB,6BAAM,CAACoB,OAAO,CAAE;MAAAS,QAAA,EAAA,cAEvEjC,cAAA,CAACJ,WAAW,EAAA;AACVC,QAAAA,IAAI,EAAES,WAAW,CAACT,IAAI,CAAE;AACxBC,QAAAA,OAAO,EAAEqB;AAAc,OACxB,CAAC,eAGFnB,cAAA,CAACmC,SAAI,EAAA;QACHhC,SAAS,EAAEC,6BAAM,CAACgC,UAAW;AAC7BC,QAAAA,IAAI,EAAEzB,aAAa,CAACf,IAAI,CAAE;AAC1ByC,QAAAA,UAAU,EAAE,GAAI;AAAAL,QAAAA,QAAA,EAEff;AAAI,OACD,CAAC,eAEPlB,cAAA,CAACJ,WAAW,EAAA;AACVC,QAAAA,IAAI,EAAES,WAAW,CAACT,IAAI,CAAE;AACxBC,QAAAA,OAAO,EAAEsB;AAAc,OACxB,CAAC;AAAA,KACC,CAAC,EAELI,OAAO,iBACNxB,cAAA,CAAA,KAAA,EAAA;AACEG,MAAAA,SAAS,EAAE6B,aAAU,CACnB5B,6BAAM,CAACmC,YAAY;AACnB;MACAnC,6BAAM,CAAC,QAAQE,WAAW,CAACT,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAAoC,QAAA,eAEFjC,cAAA,CAACwC,aAAW,EAAA;AACV3C,QAAAA,IAAI,EAAC,GAAG;QACRM,SAAS,EAAEC,6BAAM,CAACqC,MAAO;AACzBnB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CAAC;;;;"}
|
|
@@ -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","
|
|
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","ButtonIcon":"b--zoBE","Loader":"b-xybMi","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","ButtonLoader":"b-cOdoe","active":"b-tMcpZ","ButtonContent":"b-RUr-1","loading":"b-sFtLb"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=FloatingButton.module.scss.js.map
|
|
@@ -41,7 +41,8 @@ const FloatingIconButton = /*#__PURE__*/React.forwardRef(function FloatingIconBu
|
|
|
41
41
|
className: index.default(FloatingIconButton_module.default.ButtonContent, loading && FloatingIconButton_module.default.loading),
|
|
42
42
|
children: bezierIcons.isBezierIcon(content) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
|
|
43
43
|
size: getIconSize(size),
|
|
44
|
-
source: content
|
|
44
|
+
source: content,
|
|
45
|
+
className: FloatingIconButton_module.default.ButtonIcon
|
|
45
46
|
}) : content
|
|
46
47
|
}), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
47
48
|
className: index.default(FloatingIconButton_module.default.ButtonLoader,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './FloatingIconButton.module.scss'\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\nexport const FloatingIconButton = forwardRef<\n HTMLButtonElement,\n AlphaFloatingIconButtonProps\n>(function FloatingIconButton(\n {\n as = BaseButton,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n content,\n loading = false,\n disabled: disabledProp = false,\n className,\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.FloatingIconButton,\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 {isBezierIcon(content) ? (\n <Icon\n size={getIconSize(size)}\n source={content}\n />\n ) : (\n content\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":["getIconSize","size","xs","s","m","l","xl","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,kBAAkB,gBAAGC,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;EACNC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGZ,EAAuB;AACpC,EAAA,MAAMO,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,aAAU,CACnBC,iCAAM,CAAClB,kBAAkB,EACzBkB,iCAAM,CAAC,QAAQxB,IAAI,CAAA,CAAE,CAAC,EACtBwB,iCAAM,CAAC,CAAA,QAAA,EAAWb,OAAO,CAAA,CAAE,CAAC,EAC5Ba,iCAAM,CAAC,CAAA,MAAA,EAASd,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAIY,iCAAM,CAACZ,MAAM,EACvBK,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CAACC,iCAAM,CAACG,aAAa,EAAEb,OAAO,IAAIU,iCAAM,CAACV,OAAO,CAAE;MAAAW,QAAA,EAEtEG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH7B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,QAAAA,MAAM,EAAEjB;
|
|
1
|
+
{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './FloatingIconButton.module.scss'\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\nexport const FloatingIconButton = forwardRef<\n HTMLButtonElement,\n AlphaFloatingIconButtonProps\n>(function FloatingIconButton(\n {\n as = BaseButton,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n content,\n loading = false,\n disabled: disabledProp = false,\n className,\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.FloatingIconButton,\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 {isBezierIcon(content) ? (\n <Icon\n size={getIconSize(size)}\n source={content}\n className={styles.ButtonIcon}\n />\n ) : (\n content\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":["getIconSize","size","xs","s","m","l","xl","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonIcon","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,kBAAkB,gBAAGC,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;EACNC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGZ,EAAuB;AACpC,EAAA,MAAMO,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,aAAU,CACnBC,iCAAM,CAAClB,kBAAkB,EACzBkB,iCAAM,CAAC,QAAQxB,IAAI,CAAA,CAAE,CAAC,EACtBwB,iCAAM,CAAC,CAAA,QAAA,EAAWb,OAAO,CAAA,CAAE,CAAC,EAC5Ba,iCAAM,CAAC,CAAA,MAAA,EAASd,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAIY,iCAAM,CAACZ,MAAM,EACvBK,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CAACC,iCAAM,CAACG,aAAa,EAAEb,OAAO,IAAIU,iCAAM,CAACV,OAAO,CAAE;MAAAW,QAAA,EAEtEG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH7B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,QAAAA,MAAM,EAAEjB,OAAQ;QAChBI,SAAS,EAAEO,iCAAM,CAACO;AAAW,OAC9B,CAAC,GAEFlB;AACD,KACE,CAAC,EAELC,OAAO,iBACNY,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CACnBC,iCAAM,CAACQ,YAAY;AACnB;MACAR,iCAAM,CAAC,QAAQzB,WAAW,CAACC,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAAyB,QAAA,eAEFC,cAAA,CAACO,aAAW,EAAA;AACVjC,QAAAA,IAAI,EAAC,GAAG;QACRiB,SAAS,EAAEO,iCAAM,CAACU,MAAO;AACzBvB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CAAC;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"Icon":"b-76vGa","size-xxxs":"b-m7Pmk","size-xxs":"b-g4122","size-xs":"b-u5Zl3","size-s":"b-3wbJg","size-m":"b-C7fAv","size-l":"b-FwA2i","size-xl":"b-VPiwI","FloatingIconButton":"b-pDR7b","variant-primary":"b-eSXS9","color-blue":"b-6Qpq3","color-cobalt":"b-dIPru","color-red":"b-wZj6M","color-orange":"b-Vb6Hw","color-green":"b-nSxKM","color-pink":"b-4raYA","color-purple":"b-ppJl-","color-dark-grey":"b-3T-00","color-light-grey":"b-lJzxe","variant-secondary":"b-Q-xex","active":"b-9pRbB","ButtonContent":"b-8juuH","loading":"b-w7dD7","ButtonLoader":"b-hkZIN"
|
|
5
|
+
var styles = {"Icon":"b-76vGa","size-xxxs":"b-m7Pmk","size-xxs":"b-g4122","size-xs":"b-u5Zl3","size-s":"b-3wbJg","size-m":"b-C7fAv","size-l":"b-FwA2i","size-xl":"b-VPiwI","FloatingIconButton":"b-pDR7b","ButtonIcon":"b-74Gfe","Loader":"b-t8LIK","variant-primary":"b-eSXS9","color-blue":"b-6Qpq3","color-cobalt":"b-dIPru","color-red":"b-wZj6M","color-orange":"b-Vb6Hw","color-green":"b-nSxKM","color-pink":"b-4raYA","color-purple":"b-ppJl-","color-dark-grey":"b-3T-00","color-light-grey":"b-lJzxe","variant-secondary":"b-Q-xex","active":"b-9pRbB","ButtonContent":"b-8juuH","loading":"b-w7dD7","ButtonLoader":"b-hkZIN"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=FloatingIconButton.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-","
|
|
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","ButtonIcon":"b-Ty8vu","Loader":"b-kjV8d","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-","ButtonLoader":"b-lfx3h","shape-rectangle":"b-hyTqW","shape-circle":"b-03MST","active":"b-P0tkF","ButtonContent":"b-r9mfO","loading":"b--Ij3P"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=IconButton.module.scss.js.map
|
|
@@ -16,10 +16,10 @@ var Icon = require('../Icon/Icon.js');
|
|
|
16
16
|
const BUTTON_TEST_ID = 'bezier-button';
|
|
17
17
|
function getTypography(size) {
|
|
18
18
|
return {
|
|
19
|
-
xs: '
|
|
19
|
+
xs: '12',
|
|
20
20
|
s: '13',
|
|
21
|
-
m: '
|
|
22
|
-
l: '
|
|
21
|
+
m: '13',
|
|
22
|
+
l: '14',
|
|
23
23
|
xl: '18'
|
|
24
24
|
}[size];
|
|
25
25
|
}
|
|
@@ -111,7 +111,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
|
|
|
111
111
|
}), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
112
112
|
className: Button_module.default.ButtonLoader,
|
|
113
113
|
children: /*#__PURE__*/jsxRuntime.jsx(Spinner.Spinner, {
|
|
114
|
-
size: getSpinnerSize(size)
|
|
114
|
+
size: getSpinnerSize(size),
|
|
115
|
+
className: Button_module.default.ButtonSpinner
|
|
115
116
|
})
|
|
116
117
|
})]
|
|
117
118
|
});
|
|
@@ -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: '
|
|
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: '12',\n s: '13',\n m: '13',\n l: '14',\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\n size={getSpinnerSize(size)}\n className={styles.ButtonSpinner}\n />\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","ButtonSpinner"],"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","
|
|
5
|
+
var styles = {"Button":"b-r4Bne","size-xs":"b-4W28r","style-floating":"b-umk26","style-floating-alt":"b-tlipJ","ButtonIcon":"b-36ps8","ButtonSpinner":"b-A5bLX","size-s":"b-jxqYg","size-m":"b-qdkXf","ButtonContent":"b-k-5l5","ButtonText":"b-yjqfZ","size-l":"b-slhsl","size-xl":"b-S6hl0","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","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
|
|
@@ -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": "#B1B6C4"
|
|
1552
1552
|
}),
|
|
1553
1553
|
"color-chart-theme-default-10-hovered": Object.freeze({
|
|
1554
|
-
"value": "#
|
|
1554
|
+
"value": "#bbc1d0ff"
|
|
1555
1555
|
}),
|
|
1556
1556
|
"color-chart-theme-default-01": Object.freeze({
|
|
1557
|
-
"value": "#
|
|
1557
|
+
"value": "#02B3A4"
|
|
1558
1558
|
}),
|
|
1559
1559
|
"color-chart-theme-default-01-hovered": Object.freeze({
|
|
1560
|
-
"value": "#
|
|
1560
|
+
"value": "#02c8b7ff"
|
|
1561
1561
|
}),
|
|
1562
1562
|
"color-chart-theme-default-02": Object.freeze({
|
|
1563
|
-
"value": "#
|
|
1563
|
+
"value": "#1B4EAC"
|
|
1564
1564
|
}),
|
|
1565
1565
|
"color-chart-theme-default-02-hovered": Object.freeze({
|
|
1566
|
-
"value": "#
|
|
1566
|
+
"value": "#1855c4ff"
|
|
1567
1567
|
}),
|
|
1568
1568
|
"color-chart-theme-default-03": Object.freeze({
|
|
1569
|
-
"value": "#
|
|
1569
|
+
"value": "#A56FFF"
|
|
1570
1570
|
}),
|
|
1571
1571
|
"color-chart-theme-default-03-hovered": Object.freeze({
|
|
1572
|
-
"value": "#
|
|
1572
|
+
"value": "#b385ffff"
|
|
1573
1573
|
}),
|
|
1574
1574
|
"color-chart-theme-default-04": Object.freeze({
|
|
1575
|
-
"value": "#
|
|
1575
|
+
"value": "#1D9FF8"
|
|
1576
1576
|
}),
|
|
1577
1577
|
"color-chart-theme-default-04-hovered": Object.freeze({
|
|
1578
|
-
"value": "#
|
|
1578
|
+
"value": "#32a8f9ff"
|
|
1579
1579
|
}),
|
|
1580
1580
|
"color-chart-theme-default-05": Object.freeze({
|
|
1581
|
-
"value": "#
|
|
1581
|
+
"value": "#7B33E2"
|
|
1582
1582
|
}),
|
|
1583
1583
|
"color-chart-theme-default-05-hovered": Object.freeze({
|
|
1584
|
-
"value": "#
|
|
1584
|
+
"value": "#8641eaff"
|
|
1585
1585
|
}),
|
|
1586
1586
|
"color-chart-theme-default-06": Object.freeze({
|
|
1587
|
-
"value": "#
|
|
1587
|
+
"value": "#B1596A"
|
|
1588
1588
|
}),
|
|
1589
1589
|
"color-chart-theme-default-06-hovered": Object.freeze({
|
|
1590
|
-
"value": "#
|
|
1590
|
+
"value": "#be6274ff"
|
|
1591
1591
|
}),
|
|
1592
1592
|
"color-chart-theme-default-07": Object.freeze({
|
|
1593
|
-
"value": "#
|
|
1593
|
+
"value": "#FEBBB3"
|
|
1594
1594
|
}),
|
|
1595
1595
|
"color-chart-theme-default-07-hovered": Object.freeze({
|
|
1596
|
-
"value": "#
|
|
1596
|
+
"value": "#fd5b48ff"
|
|
1597
1597
|
}),
|
|
1598
1598
|
"color-chart-theme-default-08": Object.freeze({
|
|
1599
|
-
"value": "#
|
|
1599
|
+
"value": "#F96C62"
|
|
1600
1600
|
}),
|
|
1601
1601
|
"color-chart-theme-default-08-hovered": Object.freeze({
|
|
1602
|
-
"value": "#
|
|
1602
|
+
"value": "#fa8077ff"
|
|
1603
1603
|
}),
|
|
1604
1604
|
"color-chart-theme-default-09": Object.freeze({
|
|
1605
|
-
"value": "#
|
|
1605
|
+
"value": "#EFB60A"
|
|
1606
1606
|
}),
|
|
1607
1607
|
"color-chart-theme-default-09-hovered": Object.freeze({
|
|
1608
|
-
"value": "#
|
|
1608
|
+
"value": "#f5bf19ff"
|
|
1609
1609
|
})
|
|
1610
1610
|
})
|
|
1611
1611
|
});
|