@channel.io/bezier-react 2.0.4 → 2.0.6

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.
Files changed (88) hide show
  1. package/dist/cjs/components/AlphaAvatar/Avatar.js +1 -1
  2. package/dist/cjs/components/AlphaAvatar/Avatar.js.map +1 -1
  3. package/dist/cjs/components/AlphaButton/Button.js +18 -10
  4. package/dist/cjs/components/AlphaButton/Button.js.map +1 -1
  5. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js +18 -9
  6. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map +1 -1
  7. package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js +57 -0
  8. package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map +1 -0
  9. package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.js +8 -0
  10. package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.js.map +1 -0
  11. package/dist/cjs/components/AlphaIconButton/IconButton.js +59 -0
  12. package/dist/cjs/components/AlphaIconButton/IconButton.js.map +1 -0
  13. package/dist/cjs/components/AlphaIconButton/IconButton.module.scss.js +8 -0
  14. package/dist/cjs/components/AlphaIconButton/IconButton.module.scss.js.map +1 -0
  15. package/dist/cjs/components/Avatar/Avatar.js +1 -1
  16. package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
  17. package/dist/cjs/components/Emoji/Emoji.js +1 -1
  18. package/dist/cjs/components/Emoji/Emoji.js.map +1 -1
  19. package/dist/cjs/index.js +4 -0
  20. package/dist/cjs/index.js.map +1 -1
  21. package/dist/cjs/styles.css +1 -1
  22. package/dist/esm/components/AlphaAvatar/Avatar.mjs +1 -1
  23. package/dist/esm/components/AlphaAvatar/Avatar.mjs.map +1 -1
  24. package/dist/esm/components/AlphaButton/Button.mjs +18 -10
  25. package/dist/esm/components/AlphaButton/Button.mjs.map +1 -1
  26. package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs +18 -9
  27. package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs.map +1 -1
  28. package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs +55 -0
  29. package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs.map +1 -0
  30. package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.mjs +4 -0
  31. package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.module.scss.mjs.map +1 -0
  32. package/dist/esm/components/AlphaIconButton/IconButton.mjs +57 -0
  33. package/dist/esm/components/AlphaIconButton/IconButton.mjs.map +1 -0
  34. package/dist/esm/components/AlphaIconButton/IconButton.module.scss.mjs +4 -0
  35. package/dist/esm/components/AlphaIconButton/IconButton.module.scss.mjs.map +1 -0
  36. package/dist/esm/components/Avatar/Avatar.mjs +1 -1
  37. package/dist/esm/components/Avatar/Avatar.mjs.map +1 -1
  38. package/dist/esm/components/Emoji/Emoji.mjs +1 -1
  39. package/dist/esm/components/Emoji/Emoji.mjs.map +1 -1
  40. package/dist/esm/index.mjs +2 -0
  41. package/dist/esm/index.mjs.map +1 -1
  42. package/dist/esm/styles.css +1 -1
  43. package/dist/types/components/AlphaButton/Button.d.ts.map +1 -1
  44. package/dist/types/components/AlphaButton/Button.types.d.ts +3 -2
  45. package/dist/types/components/AlphaButton/Button.types.d.ts.map +1 -1
  46. package/dist/types/components/AlphaFloatingButton/FloatingButton.d.ts.map +1 -1
  47. package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts +3 -2
  48. package/dist/types/components/AlphaFloatingButton/FloatingButton.types.d.ts.map +1 -1
  49. package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts +4 -0
  50. package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts.map +1 -0
  51. package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.types.d.ts +37 -0
  52. package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.types.d.ts.map +1 -0
  53. package/dist/types/components/AlphaFloatingIconButton/index.d.ts +3 -0
  54. package/dist/types/components/AlphaFloatingIconButton/index.d.ts.map +1 -0
  55. package/dist/types/components/AlphaIconButton/IconButton.d.ts +4 -0
  56. package/dist/types/components/AlphaIconButton/IconButton.d.ts.map +1 -0
  57. package/dist/types/components/AlphaIconButton/IconButton.types.d.ts +42 -0
  58. package/dist/types/components/AlphaIconButton/IconButton.types.d.ts.map +1 -0
  59. package/dist/types/components/AlphaIconButton/index.d.ts +3 -0
  60. package/dist/types/components/AlphaIconButton/index.d.ts.map +1 -0
  61. package/dist/types/index.d.ts +2 -0
  62. package/dist/types/index.d.ts.map +1 -1
  63. package/package.json +2 -2
  64. package/src/components/AlphaAvatar/Avatar.tsx +1 -1
  65. package/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap +2 -2
  66. package/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +12 -12
  67. package/src/components/AlphaButton/AlphaButton.stories.tsx +2 -2
  68. package/src/components/AlphaButton/Button.tsx +34 -20
  69. package/src/components/AlphaButton/Button.types.ts +4 -2
  70. package/src/components/AlphaFloatingButton/AlphaFloatingButton.stories.tsx +2 -2
  71. package/src/components/AlphaFloatingButton/FloatingButton.tsx +30 -17
  72. package/src/components/AlphaFloatingButton/FloatingButton.types.ts +4 -2
  73. package/src/components/AlphaFloatingIconButton/AlphaFloatingIconButton.stories.tsx +28 -0
  74. package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss +175 -0
  75. package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx +91 -0
  76. package/src/components/AlphaFloatingIconButton/FloatingIconButton.types.ts +64 -0
  77. package/src/components/AlphaFloatingIconButton/index.ts +2 -0
  78. package/src/components/AlphaIconButton/AlphaIconButton.stories.tsx +29 -0
  79. package/src/components/AlphaIconButton/IconButton.module.scss +250 -0
  80. package/src/components/AlphaIconButton/IconButton.tsx +96 -0
  81. package/src/components/AlphaIconButton/IconButton.types.ts +71 -0
  82. package/src/components/AlphaIconButton/index.ts +2 -0
  83. package/src/components/Avatar/Avatar.tsx +1 -1
  84. package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap +2 -2
  85. package/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +12 -12
  86. package/src/components/Emoji/Emoji.tsx +1 -1
  87. package/src/components/Emoji/__snapshots__/Emoji.test.tsx.snap +1 -1
  88. package/src/index.ts +2 -0
@@ -100,7 +100,7 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar({
100
100
  "data-testid": AVATAR_WRAPPER_TEST_ID
101
101
  }, rest), /*#__PURE__*/React__default.createElement(SmoothCornersBox, {
102
102
  ref: forwardedRef,
103
- "aria-label": name,
103
+ "aria-description": name,
104
104
  className: classNames(styles.AvatarImage, Number(size) >= 72 && styles['big-size'], showBorder && styles.bordered),
105
105
  disabled: !smoothCorners,
106
106
  borderRadius: AVATAR_BORDER_RADIUS,
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarGroupContext } from '~/src/components/AlphaAvatarGroup/AvatarGroup'\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n const spreadRadius = (() => {\n switch (size) {\n case '90':\n return 3\n case '120':\n return 4\n default:\n return 2\n }\n })()\n\n return {\n spreadRadius,\n color: 'bg-white-high',\n }\n}\n\nexport function useAvatarRadiusToken() {\n // TODO: Replace this with useAlphaTokens\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size: sizeProps = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const avatarGroupContext = useAvatarGroupContext()\n const size = avatarGroupContext?.size ?? sizeProps\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) ||\n (children && !React.isValidElement(children))\n ) {\n return null\n }\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={getStatusSize(size)}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-label={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? getShadow(size) : undefined}\n backgroundColor=\"bg-white-normal\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","avatarGroupContext","useAvatarGroupContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
1
+ {"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarGroupContext } from '~/src/components/AlphaAvatarGroup/AvatarGroup'\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n const spreadRadius = (() => {\n switch (size) {\n case '90':\n return 3\n case '120':\n return 4\n default:\n return 2\n }\n })()\n\n return {\n spreadRadius,\n color: 'bg-white-high',\n }\n}\n\nexport function useAvatarRadiusToken() {\n // TODO: Replace this with useAlphaTokens\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size: sizeProps = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const avatarGroupContext = useAvatarGroupContext()\n const size = avatarGroupContext?.size ?? sizeProps\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) ||\n (children && !React.isValidElement(children))\n ) {\n return null\n }\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={getStatusSize(size)}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? getShadow(size) : undefined}\n backgroundColor=\"bg-white-normal\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","avatarGroupContext","useAvatarGroupContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
@@ -1,11 +1,22 @@
1
1
  import React__default, { forwardRef } from 'react';
2
+ import { isBezierIcon } from '@channel.io/bezier-icons';
2
3
  import classNames from '../../node_modules/classnames/index.mjs';
3
4
  import styles from './Button.module.scss.mjs';
4
- import { Icon } from '../Icon/Icon.mjs';
5
5
  import { Text } from '../Text/Text.mjs';
6
6
  import { Spinner } from '../Spinner/Spinner.mjs';
7
7
  import { BaseButton } from '../BaseButton/BaseButton.mjs';
8
+ import { Icon } from '../Icon/Icon.mjs';
8
9
 
10
+ function SideContent({
11
+ size,
12
+ content
13
+ }) {
14
+ return isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
15
+ source: content,
16
+ size: size,
17
+ className: styles.ButtonIcon
18
+ }) : content;
19
+ }
9
20
  function getIconSize(size) {
10
21
  return {
11
22
  xs: 'xxs',
@@ -36,12 +47,11 @@ function getTypography(size) {
36
47
  const Button = /*#__PURE__*/forwardRef(function Button({
37
48
  as = BaseButton,
38
49
  text,
39
- prefixIcon,
40
- suffixIcon,
50
+ prefixContent,
51
+ suffixContent,
41
52
  color = 'blue',
42
53
  variant = 'primary',
43
54
  size = 'm',
44
- disabled,
45
55
  active,
46
56
  className,
47
57
  loading,
@@ -53,18 +63,16 @@ const Button = /*#__PURE__*/forwardRef(function Button({
53
63
  className: classNames(styles.Button, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], active && styles.active, className)
54
64
  }, rest), /*#__PURE__*/React__default.createElement("div", {
55
65
  className: classNames(styles.ButtonContent, loading && styles.loading)
56
- }, prefixIcon && /*#__PURE__*/React__default.createElement(Icon, {
66
+ }, /*#__PURE__*/React__default.createElement(SideContent, {
57
67
  size: getIconSize(size),
58
- source: prefixIcon,
59
- className: styles.ButtonIcon
68
+ content: prefixContent
60
69
  }), /*#__PURE__*/React__default.createElement(Text, {
61
70
  className: styles.ButtonText,
62
71
  typo: getTypography(size),
63
72
  bold: true
64
- }, text), suffixIcon && /*#__PURE__*/React__default.createElement(Icon, {
73
+ }, text), /*#__PURE__*/React__default.createElement(SideContent, {
65
74
  size: getIconSize(size),
66
- source: suffixIcon,
67
- className: styles.ButtonIcon
75
+ content: suffixContent
68
76
  })), loading && /*#__PURE__*/React__default.createElement("div", {
69
77
  className: styles.ButtonLoader
70
78
  }, /*#__PURE__*/React__default.createElement(Spinner, {
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type ButtonProps } from '~/src/components/AlphaButton/Button.types'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Button.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xxs',\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 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 prefixIcon,\n suffixIcon,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n disabled,\n active,\n className,\n loading,\n ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\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 {...rest}\n >\n <div\n className={classNames(\n styles.ButtonContent,\n loading && styles.loading\n )}\n >\n {prefixIcon && (\n <Icon\n size={getIconSize(size)}\n source={prefixIcon}\n className={styles.ButtonIcon}\n />\n )}\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n bold\n >\n {text}\n </Text>\n\n {suffixIcon && (\n <Icon\n size={getIconSize(size)}\n source={suffixIcon}\n className={styles.ButtonIcon}\n />\n )}\n </div>\n\n {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","getSpinnerSize","getTypography","Button","forwardRef","as","BaseButton","text","prefixIcon","suffixIcon","color","variant","disabled","active","className","loading","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","Icon","source","ButtonIcon","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":";;;;;;;;AAaA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASM,cAAcA,CAACN,IAAgB,EAAE;EACxC,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,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASO,aAAaA,CAACP,IAAgB,EAAE;EACvC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,EAAE,EAAE,IAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;MAEaQ,MAAM,gBAAGC,UAAU,CAC9B,SAASD,MAAMA,CACb;AACEE,EAAAA,EAAE,GAAGC,UAAU;EACfC,IAAI;EACJC,UAAU;EACVC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBhB,EAAAA,IAAI,GAAG,GAAG;EACViB,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB,CAAA;EAEpC,oBACEc,cAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBH,IAAAA,SAAS,EAAEU,UAAU,CACnBC,MAAM,CAACtB,MAAM,EACbsB,MAAM,CAAE,QAAO9B,IAAK,CAAA,CAAC,CAAC,EACtB8B,MAAM,CAAE,CAAA,QAAA,EAAUd,OAAQ,CAAA,CAAC,CAAC,EAC5Bc,MAAM,CAAE,SAAQf,KAAM,CAAA,CAAC,CAAC,EACxBG,MAAM,IAAIY,MAAM,CAACZ,MAAM,EACvBC,SACF,CAAA;AAAE,GAAA,EACEE,IAAI,CAAA,eAERG,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEN,SAAS,EAAEU,UAAU,CACnBC,MAAM,CAACC,aAAa,EACpBX,OAAO,IAAIU,MAAM,CAACV,OACpB,CAAA;AAAE,GAAA,EAEDP,UAAU,iBACTW,cAAA,CAAAC,aAAA,CAACO,IAAI,EAAA;AACHhC,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxBiC,IAAAA,MAAM,EAAEpB,UAAW;IACnBM,SAAS,EAAEW,MAAM,CAACI,UAAAA;AAAW,GAC9B,CACF,eAGDV,cAAA,CAAAC,aAAA,CAACU,IAAI,EAAA;IACHhB,SAAS,EAAEW,MAAM,CAACM,UAAW;AAC7BC,IAAAA,IAAI,EAAE9B,aAAa,CAACP,IAAI,CAAE;IAC1BsC,IAAI,EAAA,IAAA;GAEH1B,EAAAA,IACG,CAAC,EAENE,UAAU,iBACTU,cAAA,CAAAC,aAAA,CAACO,IAAI,EAAA;AACHhC,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxBiC,IAAAA,MAAM,EAAEnB,UAAW;IACnBK,SAAS,EAAEW,MAAM,CAACI,UAAAA;AAAW,GAC9B,CAEA,CAAC,EAGLd,OAAO,iBACNI,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKN,SAAS,EAAEW,MAAM,CAACS,YAAAA;AAAa,GAAA,eAClCf,cAAA,CAAAC,aAAA,CAACe,OAAO,EAAA;IAACxC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["import React, { 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 { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\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: 'xxs',\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 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 ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\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 {...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 bold\n >\n {text}\n </Text>\n\n <SideContent\n size={getIconSize(size)}\n content={suffixContent}\n />\n </div>\n\n {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getSpinnerSize","getTypography","Button","forwardRef","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","rest","forwardedRef","Comp","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":";;;;;;;;;AAgBA,SAASA,WAAWA,CAAC;EACnBC,IAAI;AACJC,EAAAA,OAAAA;AAIF,CAAC,EAAE;EACD,OAAOC,YAAY,CAACD,OAAO,CAAC,gBAC1BE,cAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,MAAM,EAAEL,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXO,SAAS,EAAEC,MAAM,CAACC,UAAAA;GACnB,CAAC,GAEFR,OACD,CAAA;AACH,CAAA;AAEA,SAASS,WAAWA,CAACV,IAAgB,EAAE;EACrC,OACE;AACEW,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASgB,cAAcA,CAAChB,IAAgB,EAAE;EACxC,OACE;AACEW,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASiB,aAAaA,CAACjB,IAAgB,EAAE;EACvC,OACE;AACEW,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,EAAE,EAAE,IAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;MAEakB,MAAM,gBAAGC,UAAU,CAC9B,SAASD,MAAMA,CACb;AACEE,EAAAA,EAAE,GAAGC,UAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnB1B,EAAAA,IAAI,GAAG,GAAG;EACV2B,MAAM;EACNpB,SAAS;EACTqB,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGX,EAAuB,CAAA;EAEpC,oBACEjB,cAAA,CAAAC,aAAA,CAAC2B,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEJ,YAAa;AAClBvB,IAAAA,SAAS,EAAE4B,UAAU,CACnB3B,MAAM,CAACU,MAAM,EACbV,MAAM,CAAE,QAAOR,IAAK,CAAA,CAAC,CAAC,EACtBQ,MAAM,CAAE,CAAA,QAAA,EAAUkB,OAAQ,CAAA,CAAC,CAAC,EAC5BlB,MAAM,CAAE,SAAQiB,KAAM,CAAA,CAAC,CAAC,EACxBE,MAAM,IAAInB,MAAM,CAACmB,MAAM,EACvBpB,SACF,CAAA;AAAE,GAAA,EACEsB,IAAI,CAAA,eAER1B,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEG,SAAS,EAAE4B,UAAU,CACnB3B,MAAM,CAAC4B,aAAa,EACpBR,OAAO,IAAIpB,MAAM,CAACoB,OACpB,CAAA;AAAE,GAAA,eAEFzB,cAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEsB,aAAAA;AAAc,GACxB,CAAC,eAGFpB,cAAA,CAAAC,aAAA,CAACiC,IAAI,EAAA;IACH9B,SAAS,EAAEC,MAAM,CAAC8B,UAAW;AAC7BC,IAAAA,IAAI,EAAEtB,aAAa,CAACjB,IAAI,CAAE;IAC1BwC,IAAI,EAAA,IAAA;AAAA,GAAA,EAEHlB,IACG,CAAC,eAEPnB,cAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEuB,aAAAA;AAAc,GACxB,CACE,CAAC,EAGLI,OAAO,iBACNzB,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKG,SAAS,EAAEC,MAAM,CAACiC,YAAAA;AAAa,GAAA,eAClCtC,cAAA,CAAAC,aAAA,CAACsC,OAAO,EAAA;IAAC1C,IAAI,EAAEgB,cAAc,CAAChB,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
@@ -1,11 +1,22 @@
1
1
  import React__default, { forwardRef } from 'react';
2
+ import { isBezierIcon } from '@channel.io/bezier-icons';
2
3
  import classNames from '../../node_modules/classnames/index.mjs';
3
4
  import styles from './FloatingButton.module.scss.mjs';
4
- import { Icon } from '../Icon/Icon.mjs';
5
5
  import { Text } from '../Text/Text.mjs';
6
6
  import { Spinner } from '../Spinner/Spinner.mjs';
7
7
  import { BaseButton } from '../BaseButton/BaseButton.mjs';
8
+ import { Icon } from '../Icon/Icon.mjs';
8
9
 
10
+ function SideContent({
11
+ size,
12
+ content
13
+ }) {
14
+ return isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
15
+ source: content,
16
+ size: size,
17
+ className: styles.ButtonIcon
18
+ }) : content;
19
+ }
9
20
  function getIconSize(size) {
10
21
  return {
11
22
  xs: 'xxs',
@@ -36,8 +47,8 @@ function getTypography(size) {
36
47
  const FloatingButton = /*#__PURE__*/forwardRef(function Button({
37
48
  as = BaseButton,
38
49
  text,
39
- prefixIcon,
40
- suffixIcon,
50
+ prefixContent,
51
+ suffixContent,
41
52
  color = 'blue',
42
53
  variant = 'primary',
43
54
  size = 'm',
@@ -52,18 +63,16 @@ const FloatingButton = /*#__PURE__*/forwardRef(function Button({
52
63
  className: classNames(styles.FloatingButton, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], active && styles.active, className)
53
64
  }, rest), /*#__PURE__*/React__default.createElement("div", {
54
65
  className: classNames(styles.ButtonContent, loading && styles.loading)
55
- }, prefixIcon && /*#__PURE__*/React__default.createElement(Icon, {
66
+ }, /*#__PURE__*/React__default.createElement(SideContent, {
56
67
  size: getIconSize(size),
57
- source: prefixIcon,
58
- className: styles.ButtonIcon
68
+ content: prefixContent
59
69
  }), /*#__PURE__*/React__default.createElement(Text, {
60
70
  className: styles.ButtonText,
61
71
  typo: getTypography(size),
62
72
  bold: true
63
- }, text), suffixIcon && /*#__PURE__*/React__default.createElement(Icon, {
73
+ }, text), /*#__PURE__*/React__default.createElement(SideContent, {
64
74
  size: getIconSize(size),
65
- source: suffixIcon,
66
- className: styles.ButtonIcon
75
+ content: suffixContent
67
76
  })), loading && /*#__PURE__*/React__default.createElement("div", {
68
77
  className: styles.ButtonLoader
69
78
  }, /*#__PURE__*/React__default.createElement(Spinner, {
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingButton.mjs","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n type FloatingButtonProps,\n type FloatingButtonSize,\n} from '~/src/components/AlphaFloatingButton/FloatingButton.types'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './FloatingButton.module.scss'\n\nfunction getIconSize(size: FloatingButtonSize) {\n return (\n {\n xs: 'xxs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: FloatingButtonSize) {\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 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 prefixIcon,\n suffixIcon,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n className,\n loading,\n ...rest\n },\n forwardedRef\n) {\n const Comp = as as typeof BaseButton\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 {...rest}\n >\n <div\n className={classNames(styles.ButtonContent, loading && styles.loading)}\n >\n {prefixIcon && (\n <Icon\n size={getIconSize(size)}\n source={prefixIcon}\n className={styles.ButtonIcon}\n />\n )}\n\n {/* TODO: use AlphaText later, add typo */}\n <Text\n className={styles.ButtonText}\n typo={getTypography(size)}\n bold\n >\n {text}\n </Text>\n\n {suffixIcon && (\n <Icon\n size={getIconSize(size)}\n source={suffixIcon}\n className={styles.ButtonIcon}\n />\n )}\n </div>\n\n {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","getSpinnerSize","getTypography","FloatingButton","forwardRef","Button","as","BaseButton","text","prefixIcon","suffixIcon","color","variant","active","className","loading","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","Icon","source","ButtonIcon","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":"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"}
1
+ {"version":3,"file":"FloatingButton.mjs","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["import React, { 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 { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\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: 'xxs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: FloatingButtonSize) {\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 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,\n ...rest\n },\n forwardedRef\n) {\n const Comp = as as typeof BaseButton\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 {...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 bold\n >\n {text}\n </Text>\n\n <SideContent\n size={getIconSize(size)}\n content={suffixContent}\n />\n </div>\n\n {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n})\n"],"names":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getSpinnerSize","getTypography","FloatingButton","forwardRef","Button","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","rest","forwardedRef","Comp","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":";;;;;;;;;AAgBA,SAASA,WAAWA,CAAC;EACnBC,IAAI;AACJC,EAAAA,OAAAA;AAIF,CAAC,EAAE;EACD,OAAOC,YAAY,CAACD,OAAO,CAAC,gBAC1BE,cAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,MAAM,EAAEL,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXO,SAAS,EAAEC,MAAM,CAACC,UAAAA;GACnB,CAAC,GAEFR,OACD,CAAA;AACH,CAAA;AAEA,SAASS,WAAWA,CAACV,IAAwB,EAAE;EAC7C,OACE;AACEW,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASgB,cAAcA,CAAChB,IAAwB,EAAE;EAChD,OACE;AACEW,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASiB,aAAaA,CAACjB,IAAwB,EAAE;EAC/C,OACE;AACEW,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,EAAE,EAAE,IAAA;GACL,CACDf,IAAI,CAAC,CAAA;AACT,CAAA;MAEakB,cAAc,gBAAGC,UAAU,CAGtC,SAASC,MAAMA,CACf;AACEC,EAAAA,EAAE,GAAGC,UAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnB3B,EAAAA,IAAI,GAAG,GAAG;EACV4B,MAAM;EACNrB,SAAS;EACTsB,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGX,EAAuB,CAAA;EAEpC,oBACElB,cAAA,CAAAC,aAAA,CAAC4B,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEJ,YAAa;AAClBxB,IAAAA,SAAS,EAAE6B,UAAU,CACnB5B,MAAM,CAACU,cAAc,EACrBV,MAAM,CAAE,QAAOR,IAAK,CAAA,CAAC,CAAC,EACtBQ,MAAM,CAAE,CAAA,QAAA,EAAUmB,OAAQ,CAAA,CAAC,CAAC,EAC5BnB,MAAM,CAAE,SAAQkB,KAAM,CAAA,CAAC,CAAC,EACxBE,MAAM,IAAIpB,MAAM,CAACoB,MAAM,EACvBrB,SACF,CAAA;AAAE,GAAA,EACEuB,IAAI,CAAA,eAER3B,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEG,SAAS,EAAE6B,UAAU,CAAC5B,MAAM,CAAC6B,aAAa,EAAER,OAAO,IAAIrB,MAAM,CAACqB,OAAO,CAAA;AAAE,GAAA,eAEvE1B,cAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEuB,aAAAA;AAAc,GACxB,CAAC,eAGFrB,cAAA,CAAAC,aAAA,CAACkC,IAAI,EAAA;IACH/B,SAAS,EAAEC,MAAM,CAAC+B,UAAW;AAC7BC,IAAAA,IAAI,EAAEvB,aAAa,CAACjB,IAAI,CAAE;IAC1ByC,IAAI,EAAA,IAAA;AAAA,GAAA,EAEHlB,IACG,CAAC,eAEPpB,cAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEwB,aAAAA;AAAc,GACxB,CACE,CAAC,EAGLI,OAAO,iBACN1B,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKG,SAAS,EAAEC,MAAM,CAACkC,YAAAA;AAAa,GAAA,eAClCvC,cAAA,CAAAC,aAAA,CAACuC,OAAO,EAAA;IAAC3C,IAAI,EAAEgB,cAAc,CAAChB,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
@@ -0,0 +1,55 @@
1
+ import React__default, { forwardRef } from 'react';
2
+ import { isBezierIcon } from '@channel.io/bezier-icons';
3
+ import classNames from '../../node_modules/classnames/index.mjs';
4
+ import styles from './FloatingIconButton.module.scss.mjs';
5
+ import { Icon } from '../Icon/Icon.mjs';
6
+ import { Spinner } from '../Spinner/Spinner.mjs';
7
+ import { BaseButton } from '../BaseButton/BaseButton.mjs';
8
+
9
+ function getIconSize(size) {
10
+ return {
11
+ xs: 'xxs',
12
+ s: 'xs',
13
+ m: 's',
14
+ l: 's',
15
+ xl: 'm'
16
+ }[size];
17
+ }
18
+ function getSpinnerSize(size) {
19
+ return {
20
+ xs: 'xs',
21
+ s: 'xs',
22
+ m: 's',
23
+ l: 's',
24
+ xl: 's'
25
+ }[size];
26
+ }
27
+ const FloatingIconButton = /*#__PURE__*/forwardRef(function FloatingIconButton({
28
+ as = BaseButton,
29
+ color = 'blue',
30
+ variant = 'primary',
31
+ size = 'm',
32
+ active,
33
+ content,
34
+ loading,
35
+ className,
36
+ ...rest
37
+ }, forwardedRef) {
38
+ const Comp = as;
39
+ return /*#__PURE__*/React__default.createElement(Comp, Object.assign({
40
+ ref: forwardedRef,
41
+ className: classNames(styles.FloatingIconButton, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], active && styles.active, className)
42
+ }, rest), /*#__PURE__*/React__default.createElement("div", {
43
+ className: classNames(styles.ButtonContent, loading && styles.loading)
44
+ }, isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
45
+ size: getIconSize(size),
46
+ source: content
47
+ }) : content), loading && /*#__PURE__*/React__default.createElement("div", {
48
+ className: styles.ButtonLoader
49
+ }, /*#__PURE__*/React__default.createElement(Spinner, {
50
+ size: getSpinnerSize(size)
51
+ })));
52
+ });
53
+
54
+ export { FloatingIconButton };
55
+ //# sourceMappingURL=FloatingIconButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FloatingIconButton.mjs","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\n\nimport styles from './FloatingIconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xxs',\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\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,\n className,\n ...rest\n },\n forwardedRef\n) {\n const Comp = as as typeof BaseButton\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 {...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 {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","getSpinnerSize","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","className","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","isBezierIcon","Icon","source","ButtonLoader","Spinner"],"mappings":";;;;;;;;AAaA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASM,cAAcA,CAACN,IAAgB,EAAE;EACxC,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,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;MAEaO,kBAAkB,gBAAGC,UAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,UAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBZ,EAAAA,IAAI,GAAG,GAAG;EACVa,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGV,EAAuB,CAAA;EAEpC,oBACEW,cAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,UAAU,CACnBC,MAAM,CAACnB,kBAAkB,EACzBmB,MAAM,CAAE,QAAO1B,IAAK,CAAA,CAAC,CAAC,EACtB0B,MAAM,CAAE,CAAA,QAAA,EAAUd,OAAQ,CAAA,CAAC,CAAC,EAC5Bc,MAAM,CAAE,SAAQf,KAAM,CAAA,CAAC,CAAC,EACxBE,MAAM,IAAIa,MAAM,CAACb,MAAM,EACvBG,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,UAAU,CAACC,MAAM,CAACC,aAAa,EAAEZ,OAAO,IAAIW,MAAM,CAACX,OAAO,CAAA;GAEpEa,EAAAA,YAAY,CAACd,OAAO,CAAC,gBACpBM,cAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;AACH7B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,IAAAA,MAAM,EAAEhB,OAAAA;GACT,CAAC,GAEFA,OAEC,CAAC,EAGLC,OAAO,iBACNK,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,MAAM,CAACK,YAAAA;AAAa,GAAA,eAClCX,cAAA,CAAAC,aAAA,CAACW,OAAO,EAAA;IAAChC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
@@ -0,0 +1,4 @@
1
+ var styles = {"FloatingIconButton":"b-pDR7b","size-xs":"b-u5Zl3","size-s":"b-3wbJg","size-m":"b-C7fAv","size-l":"b-FwA2i","size-xl":"b-VPiwI","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","ButtonLoader":"b-hkZIN","ButtonContent":"b-8juuH","loading":"b-w7dD7"};
2
+
3
+ export { styles as default };
4
+ //# sourceMappingURL=FloatingIconButton.module.scss.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FloatingIconButton.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,57 @@
1
+ import React__default, { forwardRef } from 'react';
2
+ import { isBezierIcon } from '@channel.io/bezier-icons';
3
+ import classNames from '../../node_modules/classnames/index.mjs';
4
+ import styles from './IconButton.module.scss.mjs';
5
+ import { Icon } from '../Icon/Icon.mjs';
6
+ import { Spinner } from '../Spinner/Spinner.mjs';
7
+ import { BaseButton } from '../BaseButton/BaseButton.mjs';
8
+
9
+ function getIconSize(size) {
10
+ return {
11
+ xs: 'xxs',
12
+ s: 'xs',
13
+ m: 's',
14
+ l: 's',
15
+ xl: 'm'
16
+ }[size];
17
+ }
18
+ function getSpinnerSize(size) {
19
+ return {
20
+ xs: 'xs',
21
+ s: 'xs',
22
+ m: 's',
23
+ l: 's',
24
+ xl: 's'
25
+ }[size];
26
+ }
27
+ const IconButton = /*#__PURE__*/forwardRef(function IconButton({
28
+ as = BaseButton,
29
+ color = 'blue',
30
+ variant = 'primary',
31
+ size = 'm',
32
+ active,
33
+ shape = 'rectangle',
34
+ content,
35
+ loading,
36
+ className,
37
+ ...rest
38
+ }, forwardedRef) {
39
+ const Comp = as;
40
+ return /*#__PURE__*/React__default.createElement(Comp, Object.assign({
41
+ ref: forwardedRef,
42
+ className: classNames(styles.IconButton, styles[`size-${size}`], styles[`variant-${variant}`], styles[`color-${color}`], styles[`shape-${shape}`], active && styles.active, className)
43
+ }, rest), /*#__PURE__*/React__default.createElement("div", {
44
+ className: classNames(styles.ButtonContent, loading && styles.loading)
45
+ }, isBezierIcon(content) ? /*#__PURE__*/React__default.createElement(Icon, {
46
+ size: getIconSize(size),
47
+ source: content,
48
+ className: styles.ButtonIcon
49
+ }) : content), loading && /*#__PURE__*/React__default.createElement("div", {
50
+ className: styles.ButtonLoader
51
+ }, /*#__PURE__*/React__default.createElement(Spinner, {
52
+ size: getSpinnerSize(size)
53
+ })));
54
+ });
55
+
56
+ export { IconButton };
57
+ //# sourceMappingURL=IconButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.mjs","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { Spinner } from '~/src/components/Spinner'\n\nimport styles from './IconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xxs',\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\nexport const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(\n function IconButton(\n {\n as = BaseButton,\n color = 'blue',\n variant = 'primary',\n size = 'm',\n active,\n shape = 'rectangle',\n content,\n loading,\n className,\n ...rest\n },\n forwardedRef\n ) {\n const Comp = as as typeof BaseButton\n\n return (\n <Comp\n ref={forwardedRef}\n className={classNames(\n styles.IconButton,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n styles[`color-${color}`],\n styles[`shape-${shape}`],\n active && styles.active,\n className\n )}\n {...rest}\n >\n <div\n className={classNames(\n styles.ButtonContent,\n loading && styles.loading\n )}\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 {/* TODO: use AlphaSpinner */}\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","getSpinnerSize","IconButton","forwardRef","as","BaseButton","color","variant","active","shape","content","loading","className","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","isBezierIcon","Icon","source","ButtonIcon","ButtonLoader","Spinner"],"mappings":";;;;;;;;AAaA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,KAAK;AACTC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASM,cAAcA,CAACN,IAAgB,EAAE;EACxC,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,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;MAEaO,UAAU,gBAAGC,UAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,UAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBZ,EAAAA,IAAI,GAAG,GAAG;EACVa,MAAM;AACNC,EAAAA,KAAK,GAAG,WAAW;EACnBC,OAAO;EACPC,OAAO;EACPC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGX,EAAuB,CAAA;EAEpC,oBACEY,cAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,UAAU,CACnBC,MAAM,CAACpB,UAAU,EACjBoB,MAAM,CAAE,CAAO3B,KAAAA,EAAAA,IAAK,EAAC,CAAC,EACtB2B,MAAM,CAAE,CAAA,QAAA,EAAUf,OAAQ,CAAC,CAAA,CAAC,EAC5Be,MAAM,CAAE,CAAQhB,MAAAA,EAAAA,KAAM,EAAC,CAAC,EACxBgB,MAAM,CAAE,CAAA,MAAA,EAAQb,KAAM,CAAC,CAAA,CAAC,EACxBD,MAAM,IAAIc,MAAM,CAACd,MAAM,EACvBI,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,UAAU,CACnBC,MAAM,CAACC,aAAa,EACpBZ,OAAO,IAAIW,MAAM,CAACX,OACpB,CAAA;GAECa,EAAAA,YAAY,CAACd,OAAO,CAAC,gBACpBM,cAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;AACH9B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,IAAAA,MAAM,EAAEhB,OAAQ;IAChBE,SAAS,EAAEU,MAAM,CAACK,UAAAA;GACnB,CAAC,GAEFjB,OAEC,CAAC,EAGLC,OAAO,iBACNK,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,MAAM,CAACM,YAAAA;AAAa,GAAA,eAClCZ,cAAA,CAAAC,aAAA,CAACY,OAAO,EAAA;IAAClC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
@@ -0,0 +1,4 @@
1
+ var styles = {"IconButton":"b-xyUBm","size-xs":"b-mWKOx","size-s":"b-8N-9n","size-m":"b-pDYUy","size-l":"b-YJw65","size-xl":"b-tjHwL","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","variant-secondary":"b-ucRsW","variant-tertiary":"b-WHAB-","ButtonIcon":"b-Ty8vu","color-white":"b--tIjF","shape-rectangle":"b-hyTqW","shape-circle":"b-03MST","active":"b-P0tkF","ButtonLoader":"b-lfx3h","ButtonContent":"b-r9mfO","loading":"b--Ij3P"};
2
+
3
+ export { styles as default };
4
+ //# sourceMappingURL=IconButton.module.scss.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -84,7 +84,7 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar({
84
84
  "data-testid": AVATAR_WRAPPER_TEST_ID
85
85
  }, rest), /*#__PURE__*/React__default.createElement(SmoothCornersBox, {
86
86
  ref: forwardedRef,
87
- "aria-label": name,
87
+ "aria-description": name,
88
88
  className: classNames(styles.AvatarImage, Number(size) >= 72 && styles['big-size'], showBorder && styles.bordered),
89
89
  disabled: !smoothCorners,
90
90
  borderRadius: AVATAR_BORDER_RADIUS,
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'bg-white-high',\n}\n\nexport function useAvatarRadiusToken() {\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) ||\n (children && !React.isValidElement(children))\n ) {\n return null\n }\n\n const statusSize: StatusSize = (() => {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n })()\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={statusSize}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-label={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? shadow : undefined}\n backgroundColor=\"bg-white-normal\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["shadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","statusSize","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
1
+ {"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'bg-white-high',\n}\n\nexport function useAvatarRadiusToken() {\n return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) ||\n (children && !React.isValidElement(children))\n ) {\n return null\n }\n\n const statusSize: StatusSize = (() => {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n })()\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={statusSize}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? shadow : undefined}\n backgroundColor=\"bg-white-normal\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["shadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","statusSize","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":";;;;;;;;;;AAmBA,MAAMA,MAAuC,GAAG;AAC9CC,EAAAA,YAAY,EAAE,CAAC;AACfC,EAAAA,KAAK,EAAE,eAAA;AACT,CAAC,CAAA;AAEM,SAASC,oBAAoBA,GAAG;EACrC,OAAOC,SAAS,EAAE,CAACC,MAAM,CAACC,MAAM,CAAC,aAAa,CAAC,CAAA;AACjD,CAAA;AAEO,MAAMC,sBAAsB,GAAG,wBAAuB;AACtD,MAAMC,cAAc,GAAG,gBAAe;AACtC,MAAMC,sBAAsB,GAAG,wBAAuB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,UAAU,CAA8B,SAASD,MAAMA,CAC3E;AACEE,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,WAAW,GAAGC,gBAAgB;AAC9BC,EAAAA,IAAI,GAAG,IAAI;EACXC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACR,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,eAAe,GAAGC,mBAAmB,CAACd,SAAS,EAAEC,WAAW,CAAC,CAAA;AACnE,EAAA,MAAMc,oBAAoB,GAAGxB,oBAAoB,EAAE,CAAA;AAEnD,EAAA,MAAMyB,eAAe,GAAGC,OAAO,CAAC,MAAM;AACpC,IAAA,IACGC,OAAO,CAACR,QAAQ,CAAC,IAAI,CAACF,MAAM,IAC5BE,QAAQ,IAAI,eAACS,cAAK,CAACC,cAAc,CAACV,QAAQ,CAAE,EAC7C;AACA,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;IAEA,MAAMW,UAAsB,GAAG,CAAC,MAAM;AACpC,MAAA,QAAQlB,IAAI;AACV,QAAA,KAAK,IAAI,CAAA;AACT,QAAA,KAAK,KAAK;AACR,UAAA,OAAO,GAAG,CAAA;AACZ,QAAA;AACE,UAAA,OAAO,GAAG,CAAA;AACd,OAAA;AACF,KAAC,GAAG,CAAA;IAEJ,MAAMmB,QAAQ,GAAG,CAAC,MAAM;AACtB,MAAA,IAAIZ,QAAQ,EAAE;AACZ,QAAA,OAAOA,QAAQ,CAAA;AACjB,OAAA;AACA,MAAA,IAAIF,MAAM,EAAE;AACV,QAAA,oBACEW,cAAA,CAAAI,aAAA,CAACC,MAAM,EAAA;AACLC,UAAAA,IAAI,EAAEjB,MAAO;AACbL,UAAAA,IAAI,EAAEkB,UAAAA;AAAW,SAClB,CAAC,CAAA;AAEN,OAAA;AACA,MAAA,OAAO,IAAI,CAAA;AACb,KAAC,GAAG,CAAA;AAEJ,IAAA,OACEC,QAAQ,iBACNH,cAAA,CAAAI,aAAA,CAAA,KAAA,EAAA;MACEd,SAAS,EAAEiB,MAAM,CAACC,aAAc;MAChC,aAAa9B,EAAAA,sBAAAA;AAAuB,KAAA,EAEnCyB,QACE,CACN,CAAA;GAEJ,EAAE,CAACd,MAAM,EAAEL,IAAI,EAAEO,QAAQ,CAAC,CAAC,CAAA;AAE5B,EAAA,oBACES,cAAA,CAAAI,aAAA,CAAAK,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;IACEpB,SAAS,EAAEqB,UAAU,CACnBJ,MAAM,CAAC5B,MAAM,EACb4B,MAAM,CAAE,CAAA,KAAA,EAAOvB,IAAK,CAAC,CAAA,CAAC,EACtBE,QAAQ,IAAIqB,MAAM,CAACrB,QAAQ,EAC3BI,SACF,CAAE;AACF,IAAA,eAAA,EAAeJ,QAAS;IACxB,aAAaV,EAAAA,sBAAAA;AAAuB,GAAA,EAChCgB,IAAI,CAERQ,eAAAA,cAAA,CAAAI,aAAA,CAACQ,gBAAgB,EAAA;AACfC,IAAAA,GAAG,EAAEpB,YAAa;AAClB,IAAA,kBAAA,EAAkBR,IAAK;IACvBK,SAAS,EAAEqB,UAAU,CACnBJ,MAAM,CAACO,WAAW,EAClBC,MAAM,CAAC/B,IAAI,CAAC,IAAI,EAAE,IAAIuB,MAAM,CAAC,UAAU,CAAC,EACxCpB,UAAU,IAAIoB,MAAM,CAACS,QACvB,CAAE;IACF9B,QAAQ,EAAE,CAACE,aAAc;AACzB6B,IAAAA,YAAY,EAAErB,oBAAqB;AACnC3B,IAAAA,MAAM,EAAEkB,UAAU,GAAGlB,MAAM,GAAGiD,SAAU;AACxCC,IAAAA,eAAe,EAAC,iBAAiB;AACjCC,IAAAA,eAAe,EAAE1B,eAAgB;IACjC,aAAajB,EAAAA,cAAAA;GAEZoB,EAAAA,eACe,CACf,CAAC,CAAA;AAEV,CAAC;;;;"}
@@ -27,7 +27,7 @@ const Emoji = /*#__PURE__*/forwardRef(function Emoji({
27
27
  return /*#__PURE__*/React__default.createElement("div", Object.assign({
28
28
  ref: forwardedRef,
29
29
  role: "img",
30
- "aria-label": name,
30
+ "aria-description": name,
31
31
  style: {
32
32
  '--b-emoji-background-image': cssUrl(imageUrl),
33
33
  ...style
@@ -1 +1 @@
1
- {"version":3,"file":"Emoji.mjs","sources":["../../../../src/components/Emoji/Emoji.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssUrl } from '~/src/utils/style'\n\nimport { type EmojiProps } from './Emoji.types'\n\nimport styles from './Emoji.module.scss'\n\nexport const EMOJI_TEST_ID = 'bezier-emoji'\n\n/**\n * `Emoji` is a component for representing emoji with variant size.\n * @example\n * ```tsx\n * <Emoji\n * name=\"A\"\n * imageUrl=\"https://cf.exp.channel.io/asset/emoji/images/80/a.png\"\n * size=\"20\"\n * />\n * ```\n */\nexport const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(\n { style, imageUrl, className, name, size = '24', ...rest },\n forwardedRef\n) {\n return (\n <div\n ref={forwardedRef}\n role=\"img\"\n aria-label={name}\n style={\n {\n '--b-emoji-background-image': cssUrl(imageUrl),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Emoji, styles[`size-${size}`], className)}\n data-testid={EMOJI_TEST_ID}\n {...rest}\n />\n )\n})\n"],"names":["EMOJI_TEST_ID","Emoji","forwardRef","style","imageUrl","className","name","size","rest","forwardedRef","React","createElement","Object","assign","ref","role","cssUrl","classNames","styles"],"mappings":";;;;;AAUO,MAAMA,aAAa,GAAG,eAAc;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,KAAK,gBAAGC,UAAU,CAA6B,SAASD,KAAKA,CACxE;EAAEE,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,IAAI;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAC1DC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBM,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYT,IAAK;AACjBH,IAAAA,KAAK,EACH;AACE,MAAA,4BAA4B,EAAEa,MAAM,CAACZ,QAAQ,CAAC;MAC9C,GAAGD,KAAAA;KAEN;AACDE,IAAAA,SAAS,EAAEY,UAAU,CAACC,MAAM,CAACjB,KAAK,EAAEiB,MAAM,CAAE,QAAOX,IAAK,CAAA,CAAC,CAAC,EAAEF,SAAS,CAAE;IACvE,aAAaL,EAAAA,aAAAA;GACTQ,EAAAA,IAAI,CACT,CAAC,CAAA;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"Emoji.mjs","sources":["../../../../src/components/Emoji/Emoji.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssUrl } from '~/src/utils/style'\n\nimport { type EmojiProps } from './Emoji.types'\n\nimport styles from './Emoji.module.scss'\n\nexport const EMOJI_TEST_ID = 'bezier-emoji'\n\n/**\n * `Emoji` is a component for representing emoji with variant size.\n * @example\n * ```tsx\n * <Emoji\n * name=\"A\"\n * imageUrl=\"https://cf.exp.channel.io/asset/emoji/images/80/a.png\"\n * size=\"20\"\n * />\n * ```\n */\nexport const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(\n { style, imageUrl, className, name, size = '24', ...rest },\n forwardedRef\n) {\n return (\n <div\n ref={forwardedRef}\n role=\"img\"\n aria-description={name}\n style={\n {\n '--b-emoji-background-image': cssUrl(imageUrl),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Emoji, styles[`size-${size}`], className)}\n data-testid={EMOJI_TEST_ID}\n {...rest}\n />\n )\n})\n"],"names":["EMOJI_TEST_ID","Emoji","forwardRef","style","imageUrl","className","name","size","rest","forwardedRef","React","createElement","Object","assign","ref","role","cssUrl","classNames","styles"],"mappings":";;;;;AAUO,MAAMA,aAAa,GAAG,eAAc;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,KAAK,gBAAGC,UAAU,CAA6B,SAASD,KAAKA,CACxE;EAAEE,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,IAAI;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAC1DC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBM,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,kBAAA,EAAkBT,IAAK;AACvBH,IAAAA,KAAK,EACH;AACE,MAAA,4BAA4B,EAAEa,MAAM,CAACZ,QAAQ,CAAC;MAC9C,GAAGD,KAAAA;KAEN;AACDE,IAAAA,SAAS,EAAEY,UAAU,CAACC,MAAM,CAACjB,KAAK,EAAEiB,MAAM,CAAE,QAAOX,IAAK,CAAA,CAAC,CAAC,EAAEF,SAAS,CAAE;IACvE,aAAaL,EAAAA,aAAAA;GACTQ,EAAAA,IAAI,CACT,CAAC,CAAA;AAEN,CAAC;;;;"}
@@ -5,6 +5,8 @@ export { AvatarGroup as AlphaAvatarGroup } from './components/AlphaAvatarGroup/A
5
5
  export { Button as AlphaButton } from './components/AlphaButton/Button.mjs';
6
6
  export { DialogPrimitive as AlphaDialogPrimitive, DialogPrimitiveClose as AlphaDialogPrimitiveClose, DialogPrimitiveContent as AlphaDialogPrimitiveContent, DialogPrimitiveDescription as AlphaDialogPrimitiveDescription, DialogPrimitiveOverlay as AlphaDialogPrimitiveOverlay, DialogPrimitivePortal as AlphaDialogPrimitivePortal, DialogPrimitiveTitle as AlphaDialogPrimitiveTitle, DialogPrimitiveTrigger as AlphaDialogPrimitiveTrigger } from './components/AlphaDialogPrimitive/DialogPrimitive.mjs';
7
7
  export { FloatingButton as AlphaFloatingButton } from './components/AlphaFloatingButton/FloatingButton.mjs';
8
+ export { FloatingIconButton as AlphaFloatingIconButton } from './components/AlphaFloatingIconButton/FloatingIconButton.mjs';
9
+ export { IconButton as AlphaIconButton } from './components/AlphaIconButton/IconButton.mjs';
8
10
  export { TooltipPrimitive as AlphaTooltipPrimitive, TooltipPrimitiveArrow as AlphaTooltipPrimitiveArrow, TooltipPrimitiveContent as AlphaTooltipPrimitiveContent, TooltipPrimitivePortal as AlphaTooltipPrimitivePortal, TooltipPrimitiveProvider as AlphaTooltipPrimitiveProvider, TooltipPrimitiveTrigger as AlphaTooltipPrimitiveTrigger } from './components/AlphaTooltipPrimitive/TooltipPrimitive.mjs';
9
11
  export { AppProvider } from './components/AppProvider/AppProvider.mjs';
10
12
  export { AutoFocus } from './components/AutoFocus/AutoFocus.mjs';
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}