@channel.io/bezier-react 2.0.6 → 2.0.7

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 (156) hide show
  1. package/dist/cjs/components/AlphaAvatar/Avatar.js.map +1 -1
  2. package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.js.map +1 -1
  3. package/dist/cjs/components/AlphaButton/Button.js.map +1 -1
  4. package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map +1 -1
  5. package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map +1 -1
  6. package/dist/cjs/components/AlphaIconButton/IconButton.js.map +1 -1
  7. package/dist/cjs/components/AlphaSpinner/Spinner.js +38 -0
  8. package/dist/cjs/components/AlphaSpinner/Spinner.js.map +1 -0
  9. package/dist/cjs/components/AlphaSpinner/Spinner.module.scss.js +8 -0
  10. package/dist/cjs/components/AlphaSpinner/Spinner.module.scss.js.map +1 -0
  11. package/dist/cjs/components/AutoFocus/AutoFocus.js +2 -1
  12. package/dist/cjs/components/AutoFocus/AutoFocus.js.map +1 -1
  13. package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
  14. package/dist/cjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
  15. package/dist/cjs/components/Banner/Banner.js.map +1 -1
  16. package/dist/cjs/components/BaseTagBadge/BaseTagBadge.js +3 -2
  17. package/dist/cjs/components/BaseTagBadge/BaseTagBadge.js.map +1 -1
  18. package/dist/cjs/components/Box/Box.js.map +1 -1
  19. package/dist/cjs/components/Button/Button.js.map +1 -1
  20. package/dist/cjs/components/Center/Center.js.map +1 -1
  21. package/dist/cjs/components/CheckableAvatar/CheckableAvatar.js.map +1 -1
  22. package/dist/cjs/components/Emoji/Emoji.js.map +1 -1
  23. package/dist/cjs/components/FeatureProvider/FeatureProvider.js +2 -1
  24. package/dist/cjs/components/FeatureProvider/FeatureProvider.js.map +1 -1
  25. package/dist/cjs/components/FeatureProvider/SmoothCornersFeature/smoothCornersScript.js.map +1 -1
  26. package/dist/cjs/components/FormControl/FormControl.js.map +1 -1
  27. package/dist/cjs/components/LegacyStack/LegacyStack/LegacyStack.js.map +1 -1
  28. package/dist/cjs/components/LegacyStack/LegacyStackItem/LegacyStackItem.js.map +1 -1
  29. package/dist/cjs/components/LegacyTooltip/utils.js.map +1 -1
  30. package/dist/cjs/components/ListItem/ListItem.js.map +1 -1
  31. package/dist/cjs/components/Modal/Modal.js.map +1 -1
  32. package/dist/cjs/components/NavGroup/NavGroup.js.map +1 -1
  33. package/dist/cjs/components/OutlineItem/OutlineItem.js.map +1 -1
  34. package/dist/cjs/components/Overlay/Overlay.js +3 -2
  35. package/dist/cjs/components/Overlay/Overlay.js.map +1 -1
  36. package/dist/cjs/components/Overlay/utils.js.map +1 -1
  37. package/dist/cjs/components/ProgressBar/ProgressBar.js.map +1 -1
  38. package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map +1 -1
  39. package/dist/cjs/components/Slider/Slider.js.map +1 -1
  40. package/dist/cjs/components/SmoothCornersBox/SmoothCornersBox.js.map +1 -1
  41. package/dist/cjs/components/Spinner/Spinner.js.map +1 -1
  42. package/dist/cjs/components/Stack/Stack.js.map +1 -1
  43. package/dist/cjs/components/Status/Status.js.map +1 -1
  44. package/dist/cjs/components/Switch/Switch.js.map +1 -1
  45. package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
  46. package/dist/cjs/components/Text/Text.js.map +1 -1
  47. package/dist/cjs/components/TextArea/TextArea.js +2 -1
  48. package/dist/cjs/components/TextArea/TextArea.js.map +1 -1
  49. package/dist/cjs/components/TextField/TextField.js.map +1 -1
  50. package/dist/cjs/components/Toast/Toast.js +3 -2
  51. package/dist/cjs/components/Toast/Toast.js.map +1 -1
  52. package/dist/cjs/hooks/useIsomorphicLayoutEffect.js +13 -0
  53. package/dist/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  54. package/dist/cjs/hooks/useMergeRefs.js.map +1 -1
  55. package/dist/cjs/index.js +4 -2
  56. package/dist/cjs/index.js.map +1 -1
  57. package/dist/cjs/styles.css +1 -1
  58. package/dist/cjs/types/props-helpers.js.map +1 -1
  59. package/dist/cjs/utils/react.js.map +1 -1
  60. package/dist/cjs/utils/string.js.map +1 -1
  61. package/dist/cjs/utils/style.js.map +1 -1
  62. package/dist/esm/components/AlphaAvatar/Avatar.mjs.map +1 -1
  63. package/dist/esm/components/AlphaAvatarGroup/AvatarGroup.mjs.map +1 -1
  64. package/dist/esm/components/AlphaButton/Button.mjs.map +1 -1
  65. package/dist/esm/components/AlphaFloatingButton/FloatingButton.mjs.map +1 -1
  66. package/dist/esm/components/AlphaFloatingIconButton/FloatingIconButton.mjs.map +1 -1
  67. package/dist/esm/components/AlphaIconButton/IconButton.mjs.map +1 -1
  68. package/dist/esm/components/AlphaSpinner/Spinner.mjs +35 -0
  69. package/dist/esm/components/AlphaSpinner/Spinner.mjs.map +1 -0
  70. package/dist/esm/components/AlphaSpinner/Spinner.module.scss.mjs +4 -0
  71. package/dist/esm/components/AlphaSpinner/Spinner.module.scss.mjs.map +1 -0
  72. package/dist/esm/components/AutoFocus/AutoFocus.mjs +3 -2
  73. package/dist/esm/components/AutoFocus/AutoFocus.mjs.map +1 -1
  74. package/dist/esm/components/Avatar/Avatar.mjs.map +1 -1
  75. package/dist/esm/components/AvatarGroup/AvatarGroup.mjs.map +1 -1
  76. package/dist/esm/components/Banner/Banner.mjs.map +1 -1
  77. package/dist/esm/components/BaseTagBadge/BaseTagBadge.mjs +3 -2
  78. package/dist/esm/components/BaseTagBadge/BaseTagBadge.mjs.map +1 -1
  79. package/dist/esm/components/Box/Box.mjs.map +1 -1
  80. package/dist/esm/components/Button/Button.mjs.map +1 -1
  81. package/dist/esm/components/Center/Center.mjs.map +1 -1
  82. package/dist/esm/components/CheckableAvatar/CheckableAvatar.mjs.map +1 -1
  83. package/dist/esm/components/Emoji/Emoji.mjs.map +1 -1
  84. package/dist/esm/components/FeatureProvider/FeatureProvider.mjs +3 -2
  85. package/dist/esm/components/FeatureProvider/FeatureProvider.mjs.map +1 -1
  86. package/dist/esm/components/FeatureProvider/SmoothCornersFeature/smoothCornersScript.mjs.map +1 -1
  87. package/dist/esm/components/FormControl/FormControl.mjs.map +1 -1
  88. package/dist/esm/components/LegacyStack/LegacyStack/LegacyStack.mjs.map +1 -1
  89. package/dist/esm/components/LegacyStack/LegacyStackItem/LegacyStackItem.mjs.map +1 -1
  90. package/dist/esm/components/LegacyTooltip/utils.mjs.map +1 -1
  91. package/dist/esm/components/ListItem/ListItem.mjs.map +1 -1
  92. package/dist/esm/components/Modal/Modal.mjs.map +1 -1
  93. package/dist/esm/components/NavGroup/NavGroup.mjs.map +1 -1
  94. package/dist/esm/components/OutlineItem/OutlineItem.mjs.map +1 -1
  95. package/dist/esm/components/Overlay/Overlay.mjs +4 -3
  96. package/dist/esm/components/Overlay/Overlay.mjs.map +1 -1
  97. package/dist/esm/components/Overlay/utils.mjs.map +1 -1
  98. package/dist/esm/components/ProgressBar/ProgressBar.mjs.map +1 -1
  99. package/dist/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
  100. package/dist/esm/components/Slider/Slider.mjs.map +1 -1
  101. package/dist/esm/components/SmoothCornersBox/SmoothCornersBox.mjs.map +1 -1
  102. package/dist/esm/components/Spinner/Spinner.mjs.map +1 -1
  103. package/dist/esm/components/Stack/Stack.mjs.map +1 -1
  104. package/dist/esm/components/Status/Status.mjs.map +1 -1
  105. package/dist/esm/components/Switch/Switch.mjs.map +1 -1
  106. package/dist/esm/components/Tabs/Tabs.mjs.map +1 -1
  107. package/dist/esm/components/Text/Text.mjs.map +1 -1
  108. package/dist/esm/components/TextArea/TextArea.mjs +3 -2
  109. package/dist/esm/components/TextArea/TextArea.mjs.map +1 -1
  110. package/dist/esm/components/TextField/TextField.mjs.map +1 -1
  111. package/dist/esm/components/Toast/Toast.mjs +3 -2
  112. package/dist/esm/components/Toast/Toast.mjs.map +1 -1
  113. package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs +11 -0
  114. package/dist/esm/hooks/useIsomorphicLayoutEffect.mjs.map +1 -0
  115. package/dist/esm/hooks/useMergeRefs.mjs.map +1 -1
  116. package/dist/esm/index.mjs +1 -0
  117. package/dist/esm/index.mjs.map +1 -1
  118. package/dist/esm/styles.css +1 -1
  119. package/dist/esm/types/props-helpers.mjs.map +1 -1
  120. package/dist/esm/utils/react.mjs.map +1 -1
  121. package/dist/esm/utils/string.mjs.map +1 -1
  122. package/dist/esm/utils/style.mjs.map +1 -1
  123. package/dist/types/components/AlphaSpinner/Spinner.d.ts +5 -0
  124. package/dist/types/components/AlphaSpinner/Spinner.d.ts.map +1 -0
  125. package/dist/types/components/AlphaSpinner/Spinner.types.d.ts +13 -0
  126. package/dist/types/components/AlphaSpinner/Spinner.types.d.ts.map +1 -0
  127. package/dist/types/components/AlphaSpinner/index.d.ts +3 -0
  128. package/dist/types/components/AlphaSpinner/index.d.ts.map +1 -0
  129. package/dist/types/components/AutoFocus/AutoFocus.d.ts.map +1 -1
  130. package/dist/types/components/BaseTagBadge/BaseTagBadge.d.ts.map +1 -1
  131. package/dist/types/components/FeatureProvider/FeatureProvider.d.ts.map +1 -1
  132. package/dist/types/components/Icon/Icon.types.d.ts +1 -1
  133. package/dist/types/components/Overlay/Overlay.d.ts.map +1 -1
  134. package/dist/types/components/TextArea/TextArea.d.ts.map +1 -1
  135. package/dist/types/components/Toast/Toast.d.ts.map +1 -1
  136. package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts +8 -0
  137. package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  138. package/dist/types/index.d.ts +1 -0
  139. package/dist/types/index.d.ts.map +1 -1
  140. package/package.json +1 -1
  141. package/src/components/AlphaSpinner/AlphaSpinner.stories.tsx +23 -0
  142. package/src/components/AlphaSpinner/Spinner.module.scss +66 -0
  143. package/src/components/AlphaSpinner/Spinner.test.tsx +34 -0
  144. package/src/components/AlphaSpinner/Spinner.tsx +50 -0
  145. package/src/components/AlphaSpinner/Spinner.types.ts +21 -0
  146. package/src/components/AlphaSpinner/index.ts +2 -0
  147. package/src/components/AutoFocus/AutoFocus.tsx +3 -2
  148. package/src/components/BaseTagBadge/BaseTagBadge.tsx +2 -1
  149. package/src/components/FeatureProvider/FeatureProvider.tsx +3 -2
  150. package/src/components/Icon/Icon.types.ts +1 -1
  151. package/src/components/Overlay/Overlay.tsx +3 -3
  152. package/src/components/TextArea/TextArea.tsx +3 -2
  153. package/src/components/Toast/Toast.module.scss +1 -1
  154. package/src/components/Toast/Toast.tsx +1 -2
  155. package/src/hooks/useIsomorphicLayoutEffect.ts +9 -0
  156. package/src/index.ts +1 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","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
+ {"version":3,"file":"Avatar.js","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 +1 @@
1
- {"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { createContext } from '~/src/utils/react'\nimport { px } from '~/src/utils/style'\n\nimport {\n type AlphaAvatarProps,\n type AlphaAvatarSize,\n useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type AvatarGroupContextValue,\n type AvatarGroupProps,\n} from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst [AvatarGroupContextProvider, useAvatarGroupContext] = createContext<\n AvatarGroupContextValue | undefined\n>(undefined)\n\nexport { useAvatarGroupContext }\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n 'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n const restCount = count - max\n return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(size: AlphaAvatarSize) {\n return (\n {\n 16: 'xxs',\n 20: 'xxs',\n 24: 'xs',\n 30: 's',\n 36: 'm',\n 42: 'm',\n 48: 'l',\n 72: 'l',\n 90: 'l',\n 120: 'l',\n } as const\n )[size]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(size: AlphaAvatarSize) {\n return (\n {\n 16: '12',\n 20: '12',\n 24: '13',\n 30: '15',\n 36: '16',\n 42: '18',\n 48: '24',\n 72: '24',\n 90: '24',\n 120: '24',\n } as const\n )[size]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n * max={2}\n * size=\"24\"\n * spacing={4}\n * ellipsisType=\"icon\"\n * >\n * <Avatar />\n * <Avatar />\n * <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n function AvatarGroup(\n {\n max = 5,\n size = '24',\n spacing = AVATAR_GROUP_DEFAULT_SPACING,\n ellipsisType = 'icon',\n style,\n className,\n children,\n ...rest\n },\n forwardedRef\n ) {\n const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()\n const avatarListCount = React.Children.count(children)\n\n const renderAvatarElement = useCallback(\n (avatar: React.ReactElement<AlphaAvatarProps>) => {\n const key =\n avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0\n const showBorder = avatar.props.showBorder || shouldShowBorder\n return React.cloneElement(avatar, { key, showBorder })\n },\n [avatarListCount, max, spacing]\n )\n\n const AvatarListComponent = useMemo(() => {\n return React.Children.toArray(children)\n .slice(0, max)\n .map((avatar, index, arr) => {\n if (!React.isValidElement<AlphaAvatarProps>(avatar)) {\n return null\n }\n\n const AvatarElement = renderAvatarElement(avatar)\n\n if (!isLastIndex(arr, index) || avatarListCount <= max) {\n return AvatarElement\n }\n\n if (ellipsisType === 'icon') {\n return (\n <div\n key=\"ellipsis\"\n className={styles.AvatarEllipsisIconWrapper}\n data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n >\n <SmoothCornersBox\n borderRadius={AVATAR_BORDER_RADIUS}\n backgroundColor=\"bgtxt-absolute-black-lightest\"\n className={styles.AvatarEllipsisIcon}\n >\n <Icon\n source={MoreIcon}\n size={getProperIconSize(size)}\n color=\"bgtxt-absolute-white-dark\"\n />\n </SmoothCornersBox>\n {AvatarElement}\n </div>\n )\n }\n\n if (ellipsisType === 'count') {\n return (\n <React.Fragment key=\"ellipsis\">\n {AvatarElement}\n <div\n style={\n {\n '--b-avatar-group-ellipsis-ml': px(\n Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n ),\n } as React.CSSProperties\n }\n className={classNames(styles.AvatarEllipsisCountWrapper)}\n >\n <Text\n typo={getProperTypoSize(size)}\n color=\"txt-black-dark\"\n className={styles.AvatarEllipsisCount}\n >\n {getRestAvatarListCountText(avatarListCount, max)}\n </Text>\n </div>\n </React.Fragment>\n )\n }\n\n return null\n })\n }, [\n avatarListCount,\n max,\n children,\n renderAvatarElement,\n ellipsisType,\n AVATAR_BORDER_RADIUS,\n size,\n spacing,\n ])\n\n return (\n <AvatarGroupContextProvider\n value={useMemo(\n () => ({\n size,\n }),\n [size]\n )}\n >\n <div\n role=\"group\"\n ref={forwardedRef}\n className={classNames(\n styles.AvatarGroup,\n styles[`size-${size}`],\n className\n )}\n style={\n {\n '--b-avatar-group-spacing': px(spacing),\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n >\n {AvatarListComponent}\n </div>\n </AvatarGroupContextProvider>\n )\n }\n)\n"],"names":["AvatarGroupContextProvider","useAvatarGroupContext","createContext","undefined","MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","size","getProperTypoSize","AvatarGroup","forwardRef","spacing","ellipsisType","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAlphaAvatarRadiusToken","avatarListCount","React","Children","renderAvatarElement","useCallback","avatar","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","value","Object","assign","role","ref"],"mappings":";;;;;;;;;;;;;;AAyBM,MAAA,CAACA,0BAA0B,EAAEC,qBAAqB,CAAC,GAAGC,mBAAa,CAEvEC,SAAS,EAAC;AAIZ,MAAMC,qBAAqB,GAAG,EAAE,CAAA;AAChC,MAAMC,4BAA4B,GAAG,CAAC,CAAA;AAC/B,MAAMC,kCAAkC,GAC7C,oCAAmC;AAErC,SAASC,0BAA0BA,CAACC,KAAa,EAAEC,GAAW,EAAE;AAC9D,EAAA,MAAMC,SAAS,GAAGF,KAAK,GAAGC,GAAG,CAAA;EAC7B,OAAQ,CAAA,CAAA,EAAGC,SAAS,GAAGN,qBAAqB,GAAGA,qBAAqB,GAAGM,SAAU,CAAC,CAAA,CAAA;AACpF,CAAA;;AAEA;AACA,SAASC,iBAAiBA,CAACC,IAAqB,EAAE;EAChD,OACE;AACE,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,GAAG,EAAE,GAAA;GACN,CACDA,IAAI,CAAC,CAAA;AACT,CAAA;;AAEA;AACA,SAASC,iBAAiBA,CAACD,IAAqB,EAAE;EAChD,OACE;AACE,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,GAAG,EAAE,IAAA;GACN,CACDA,IAAI,CAAC,CAAA;AACT,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaE,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;AACEL,EAAAA,GAAG,GAAG,CAAC;AACPG,EAAAA,IAAI,GAAG,IAAI;AACXI,EAAAA,OAAO,GAAGX,4BAA4B;AACtCY,EAAAA,YAAY,GAAG,MAAM;SACrBC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACR,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,oBAAoB,GAAGC,2BAAyB,EAAE,CAAA;EACxD,MAAMC,eAAe,GAAGC,KAAK,CAACC,QAAQ,CAACnB,KAAK,CAACY,QAAQ,CAAC,CAAA;AAEtD,EAAA,MAAMQ,mBAAmB,GAAGC,iBAAW,CACpCC,MAA4C,IAAK;AAChD,IAAA,MAAMC,GAAG,GACPD,MAAM,CAACC,GAAG,IAAK,GAAED,MAAM,CAACE,KAAK,CAACC,IAAK,CAAGH,CAAAA,EAAAA,MAAM,CAACE,KAAK,CAACE,SAAU,CAAC,CAAA,CAAA;AAChE,IAAA,MAAMC,gBAAgB,GAAG1B,GAAG,GAAG,CAAC,IAAIgB,eAAe,GAAG,CAAC,IAAIT,OAAO,GAAG,CAAC,CAAA;IACtE,MAAMoB,UAAU,GAAGN,MAAM,CAACE,KAAK,CAACI,UAAU,IAAID,gBAAgB,CAAA;AAC9D,IAAA,oBAAOT,KAAK,CAACW,YAAY,CAACP,MAAM,EAAE;MAAEC,GAAG;AAAEK,MAAAA,UAAAA;AAAW,KAAC,CAAC,CAAA;GACvD,EACD,CAACX,eAAe,EAAEhB,GAAG,EAAEO,OAAO,CAChC,CAAC,CAAA;AAED,EAAA,MAAMsB,mBAAmB,GAAGC,aAAO,CAAC,MAAM;IACxC,OAAOb,KAAK,CAACC,QAAQ,CAACa,OAAO,CAACpB,QAAQ,CAAC,CACpCqB,KAAK,CAAC,CAAC,EAAEhC,GAAG,CAAC,CACbiC,GAAG,CAAC,CAACZ,MAAM,EAAEa,OAAK,EAAEC,GAAG,KAAK;AAC3B,MAAA,IAAI,eAAClB,KAAK,CAACmB,cAAc,CAAmBf,MAAM,CAAC,EAAE;AACnD,QAAA,OAAO,IAAI,CAAA;AACb,OAAA;AAEA,MAAA,MAAMgB,aAAa,GAAGlB,mBAAmB,CAACE,MAAM,CAAC,CAAA;MAEjD,IAAI,CAACiB,iBAAW,CAACH,GAAG,EAAED,OAAK,CAAC,IAAIlB,eAAe,IAAIhB,GAAG,EAAE;AACtD,QAAA,OAAOqC,aAAa,CAAA;AACtB,OAAA;MAEA,IAAI7B,YAAY,KAAK,MAAM,EAAE;QAC3B,oBACES,KAAA,CAAAsB,aAAA,CAAA,KAAA,EAAA;AACEjB,UAAAA,GAAG,EAAC,UAAU;UACdZ,SAAS,EAAE8B,0BAAM,CAACC,yBAA0B;UAC5C,aAAa5C,EAAAA,kCAAAA;AAAmC,SAAA,eAEhDoB,KAAA,CAAAsB,aAAA,CAACG,iCAAgB,EAAA;AACfC,UAAAA,YAAY,EAAE7B,oBAAqB;AACnC8B,UAAAA,eAAe,EAAC,+BAA+B;UAC/ClC,SAAS,EAAE8B,0BAAM,CAACK,kBAAAA;AAAmB,SAAA,eAErC5B,KAAA,CAAAsB,aAAA,CAACO,SAAI,EAAA;AACHC,UAAAA,MAAM,EAAEC,oBAAS;AACjB7C,UAAAA,IAAI,EAAED,iBAAiB,CAACC,IAAI,CAAE;AAC9B8C,UAAAA,KAAK,EAAC,2BAAA;AAA2B,SAClC,CACe,CAAC,EAClBZ,aACE,CAAC,CAAA;AAEV,OAAA;MAEA,IAAI7B,YAAY,KAAK,OAAO,EAAE;AAC5B,QAAA,oBACES,KAAA,CAAAsB,aAAA,CAACtB,KAAK,CAACiC,QAAQ,EAAA;AAAC5B,UAAAA,GAAG,EAAC,UAAA;AAAU,SAAA,EAC3Be,aAAa,eACdpB,KAAA,CAAAsB,aAAA,CAAA,KAAA,EAAA;AACE9B,UAAAA,KAAK,EACH;YACE,8BAA8B,EAAE0C,QAAE,CAChCC,IAAI,CAACpD,GAAG,CAACO,OAAO,EAAEX,4BAA4B,CAChD,CAAA;WAEH;AACDc,UAAAA,SAAS,EAAE2C,aAAU,CAACb,0BAAM,CAACc,0BAA0B,CAAA;AAAE,SAAA,eAEzDrC,KAAA,CAAAsB,aAAA,CAACgB,SAAI,EAAA;AACHC,UAAAA,IAAI,EAAEpD,iBAAiB,CAACD,IAAI,CAAE;AAC9B8C,UAAAA,KAAK,EAAC,gBAAgB;UACtBvC,SAAS,EAAE8B,0BAAM,CAACiB,mBAAAA;SAEjB3D,EAAAA,0BAA0B,CAACkB,eAAe,EAAEhB,GAAG,CAC5C,CACH,CACS,CAAC,CAAA;AAErB,OAAA;AAEA,MAAA,OAAO,IAAI,CAAA;AACb,KAAC,CAAC,CAAA;AACN,GAAC,EAAE,CACDgB,eAAe,EACfhB,GAAG,EACHW,QAAQ,EACRQ,mBAAmB,EACnBX,YAAY,EACZM,oBAAoB,EACpBX,IAAI,EACJI,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEU,KAAA,CAAAsB,aAAA,CAAChD,0BAA0B,EAAA;IACzBmE,KAAK,EAAE5B,aAAO,CACZ,OAAO;AACL3B,MAAAA,IAAAA;AACF,KAAC,CAAC,EACF,CAACA,IAAI,CACP,CAAA;AAAE,GAAA,eAEFc,KAAA,CAAAsB,aAAA,CAAAoB,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZC,IAAAA,GAAG,EAAEjD,YAAa;AAClBH,IAAAA,SAAS,EAAE2C,aAAU,CACnBb,0BAAM,CAACnC,WAAW,EAClBmC,0BAAM,CAAE,QAAOrC,IAAK,CAAA,CAAC,CAAC,EACtBO,SACF,CAAE;AACFD,IAAAA,KAAK,EACH;AACE,MAAA,0BAA0B,EAAE0C,QAAE,CAAC5C,OAAO,CAAC;MACvC,GAAGE,OAAAA;AACL,KAAA;AACD,GAAA,EACGG,IAAI,CAAA,EAEPiB,mBACE,CACqB,CAAC,CAAA;AAEjC,CACF;;;;;;"}
1
+ {"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { createContext } from '~/src/utils/react'\nimport { px } from '~/src/utils/style'\n\nimport {\n type AlphaAvatarProps,\n type AlphaAvatarSize,\n useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type AvatarGroupContextValue,\n type AvatarGroupProps,\n} from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst [AvatarGroupContextProvider, useAvatarGroupContext] = createContext<\n AvatarGroupContextValue | undefined\n>(undefined)\n\nexport { useAvatarGroupContext }\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n 'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n const restCount = count - max\n return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(size: AlphaAvatarSize) {\n return (\n {\n 16: 'xxs',\n 20: 'xxs',\n 24: 'xs',\n 30: 's',\n 36: 'm',\n 42: 'm',\n 48: 'l',\n 72: 'l',\n 90: 'l',\n 120: 'l',\n } as const\n )[size]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(size: AlphaAvatarSize) {\n return (\n {\n 16: '12',\n 20: '12',\n 24: '13',\n 30: '15',\n 36: '16',\n 42: '18',\n 48: '24',\n 72: '24',\n 90: '24',\n 120: '24',\n } as const\n )[size]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n * max={2}\n * size=\"24\"\n * spacing={4}\n * ellipsisType=\"icon\"\n * >\n * <Avatar />\n * <Avatar />\n * <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n function AvatarGroup(\n {\n max = 5,\n size = '24',\n spacing = AVATAR_GROUP_DEFAULT_SPACING,\n ellipsisType = 'icon',\n style,\n className,\n children,\n ...rest\n },\n forwardedRef\n ) {\n const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()\n const avatarListCount = React.Children.count(children)\n\n const renderAvatarElement = useCallback(\n (avatar: React.ReactElement<AlphaAvatarProps>) => {\n const key =\n avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0\n const showBorder = avatar.props.showBorder || shouldShowBorder\n return React.cloneElement(avatar, { key, showBorder })\n },\n [avatarListCount, max, spacing]\n )\n\n const AvatarListComponent = useMemo(() => {\n return React.Children.toArray(children)\n .slice(0, max)\n .map((avatar, index, arr) => {\n if (!React.isValidElement<AlphaAvatarProps>(avatar)) {\n return null\n }\n\n const AvatarElement = renderAvatarElement(avatar)\n\n if (!isLastIndex(arr, index) || avatarListCount <= max) {\n return AvatarElement\n }\n\n if (ellipsisType === 'icon') {\n return (\n <div\n key=\"ellipsis\"\n className={styles.AvatarEllipsisIconWrapper}\n data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n >\n <SmoothCornersBox\n borderRadius={AVATAR_BORDER_RADIUS}\n backgroundColor=\"bgtxt-absolute-black-lightest\"\n className={styles.AvatarEllipsisIcon}\n >\n <Icon\n source={MoreIcon}\n size={getProperIconSize(size)}\n color=\"bgtxt-absolute-white-dark\"\n />\n </SmoothCornersBox>\n {AvatarElement}\n </div>\n )\n }\n\n if (ellipsisType === 'count') {\n return (\n <React.Fragment key=\"ellipsis\">\n {AvatarElement}\n <div\n style={\n {\n '--b-avatar-group-ellipsis-ml': px(\n Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n ),\n } as React.CSSProperties\n }\n className={classNames(styles.AvatarEllipsisCountWrapper)}\n >\n <Text\n typo={getProperTypoSize(size)}\n color=\"txt-black-dark\"\n className={styles.AvatarEllipsisCount}\n >\n {getRestAvatarListCountText(avatarListCount, max)}\n </Text>\n </div>\n </React.Fragment>\n )\n }\n\n return null\n })\n }, [\n avatarListCount,\n max,\n children,\n renderAvatarElement,\n ellipsisType,\n AVATAR_BORDER_RADIUS,\n size,\n spacing,\n ])\n\n return (\n <AvatarGroupContextProvider\n value={useMemo(\n () => ({\n size,\n }),\n [size]\n )}\n >\n <div\n role=\"group\"\n ref={forwardedRef}\n className={classNames(\n styles.AvatarGroup,\n styles[`size-${size}`],\n className\n )}\n style={\n {\n '--b-avatar-group-spacing': px(spacing),\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n >\n {AvatarListComponent}\n </div>\n </AvatarGroupContextProvider>\n )\n }\n)\n"],"names":["AvatarGroupContextProvider","useAvatarGroupContext","createContext","undefined","MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","size","getProperTypoSize","AvatarGroup","forwardRef","spacing","ellipsisType","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAlphaAvatarRadiusToken","avatarListCount","React","Children","renderAvatarElement","useCallback","avatar","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","value","Object","assign","role","ref"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","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":"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"}
1
+ {"version":3,"file":"Button.js","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,wBAAY,CAACD,OAAO,CAAC,gBAC1BE,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEL,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXO,SAAS,EAAEC,qBAAM,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,gBAAU,CAC9B,SAASD,MAAMA,CACb;AACEE,EAAAA,EAAE,GAAGC,qBAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;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,KAAA,CAAAC,aAAA,CAAC2B,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEJ,YAAa;AAClBvB,IAAAA,SAAS,EAAE4B,aAAU,CACnB3B,qBAAM,CAACU,MAAM,EACbV,qBAAM,CAAC,QAAQR,IAAI,CAAA,CAAE,CAAC,EACtBQ,qBAAM,CAAC,CAAA,QAAA,EAAWkB,OAAO,CAAA,CAAE,CAAC,EAC5BlB,qBAAM,CAAC,SAASiB,KAAK,CAAA,CAAE,CAAC,EACxBE,MAAM,IAAInB,qBAAM,CAACmB,MAAM,EACvBpB,SACF,CAAA;AAAE,GAAA,EACEsB,IAAI,CAAA,eAER1B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEG,SAAS,EAAE4B,aAAU,CACnB3B,qBAAM,CAAC4B,aAAa,EACpBR,OAAO,IAAIpB,qBAAM,CAACoB,OACpB,CAAA;AAAE,GAAA,eAEFzB,KAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEsB,aAAAA;AAAc,GACxB,CAAC,eAGFpB,KAAA,CAAAC,aAAA,CAACiC,SAAI,EAAA;IACH9B,SAAS,EAAEC,qBAAM,CAAC8B,UAAW;AAC7BC,IAAAA,IAAI,EAAEtB,aAAa,CAACjB,IAAI,CAAE;IAC1BwC,IAAI,EAAA,IAAA;AAAA,GAAA,EAEHlB,IACG,CAAC,eAEPnB,KAAA,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,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKG,SAAS,EAAEC,qBAAM,CAACiC,YAAAA;AAAa,GAAA,eAClCtC,KAAA,CAAAC,aAAA,CAACsC,eAAO,EAAA;IAAC1C,IAAI,EAAEgB,cAAc,CAAChB,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingButton.js","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":"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"}
1
+ {"version":3,"file":"FloatingButton.js","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,wBAAY,CAACD,OAAO,CAAC,gBAC1BE,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEL,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXO,SAAS,EAAEC,6BAAM,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,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;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,KAAA,CAAAC,aAAA,CAAC4B,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEJ,YAAa;AAClBxB,IAAAA,SAAS,EAAE6B,aAAU,CACnB5B,6BAAM,CAACU,cAAc,EACrBV,6BAAM,CAAC,QAAQR,IAAI,CAAA,CAAE,CAAC,EACtBQ,6BAAM,CAAC,CAAA,QAAA,EAAWmB,OAAO,CAAA,CAAE,CAAC,EAC5BnB,6BAAM,CAAC,SAASkB,KAAK,CAAA,CAAE,CAAC,EACxBE,MAAM,IAAIpB,6BAAM,CAACoB,MAAM,EACvBrB,SACF,CAAA;AAAE,GAAA,EACEuB,IAAI,CAAA,eAER3B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEG,SAAS,EAAE6B,aAAU,CAAC5B,6BAAM,CAAC6B,aAAa,EAAER,OAAO,IAAIrB,6BAAM,CAACqB,OAAO,CAAA;AAAE,GAAA,eAEvE1B,KAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAEU,WAAW,CAACV,IAAI,CAAE;AACxBC,IAAAA,OAAO,EAAEuB,aAAAA;AAAc,GACxB,CAAC,eAGFrB,KAAA,CAAAC,aAAA,CAACkC,SAAI,EAAA;IACH/B,SAAS,EAAEC,6BAAM,CAAC+B,UAAW;AAC7BC,IAAAA,IAAI,EAAEvB,aAAa,CAACjB,IAAI,CAAE;IAC1ByC,IAAI,EAAA,IAAA;AAAA,GAAA,EAEHlB,IACG,CAAC,eAEPpB,KAAA,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,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKG,SAAS,EAAEC,6BAAM,CAACkC,YAAAA;AAAa,GAAA,eAClCvC,KAAA,CAAAC,aAAA,CAACuC,eAAO,EAAA;IAAC3C,IAAI,EAAEgB,cAAc,CAAChB,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingIconButton.js","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,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;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,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,iCAAM,CAACnB,kBAAkB,EACzBmB,iCAAM,CAAE,QAAO1B,IAAK,CAAA,CAAC,CAAC,EACtB0B,iCAAM,CAAE,CAAA,QAAA,EAAUd,OAAQ,CAAA,CAAC,CAAC,EAC5Bc,iCAAM,CAAE,SAAQf,KAAM,CAAA,CAAC,CAAC,EACxBE,MAAM,IAAIa,iCAAM,CAACb,MAAM,EACvBG,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CAACC,iCAAM,CAACC,aAAa,EAAEZ,OAAO,IAAIW,iCAAM,CAACX,OAAO,CAAA;GAEpEa,EAAAA,wBAAY,CAACd,OAAO,CAAC,gBACpBM,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH7B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,IAAAA,MAAM,EAAEhB,OAAAA;GACT,CAAC,GAEFA,OAEC,CAAC,EAGLC,OAAO,iBACNK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,iCAAM,CAACK,YAAAA;AAAa,GAAA,eAClCX,KAAA,CAAAC,aAAA,CAACW,eAAO,EAAA;IAAChC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
1
+ {"version":3,"file":"FloatingIconButton.js","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,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;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,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,iCAAM,CAACnB,kBAAkB,EACzBmB,iCAAM,CAAC,QAAQ1B,IAAI,CAAA,CAAE,CAAC,EACtB0B,iCAAM,CAAC,CAAA,QAAA,EAAWd,OAAO,CAAA,CAAE,CAAC,EAC5Bc,iCAAM,CAAC,SAASf,KAAK,CAAA,CAAE,CAAC,EACxBE,MAAM,IAAIa,iCAAM,CAACb,MAAM,EACvBG,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CAACC,iCAAM,CAACC,aAAa,EAAEZ,OAAO,IAAIW,iCAAM,CAACX,OAAO,CAAA;GAEpEa,EAAAA,wBAAY,CAACd,OAAO,CAAC,gBACpBM,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH7B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,IAAAA,MAAM,EAAEhB,OAAAA;GACT,CAAC,GAEFA,OAEC,CAAC,EAGLC,OAAO,iBACNK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,iCAAM,CAACK,YAAAA;AAAa,GAAA,eAClCX,KAAA,CAAAC,aAAA,CAACW,eAAO,EAAA;IAAChC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.js","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,gBAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;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,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACpB,UAAU,EACjBoB,yBAAM,CAAE,CAAO3B,KAAAA,EAAAA,IAAK,EAAC,CAAC,EACtB2B,yBAAM,CAAE,CAAA,QAAA,EAAUf,OAAQ,CAAC,CAAA,CAAC,EAC5Be,yBAAM,CAAE,CAAQhB,MAAAA,EAAAA,KAAM,EAAC,CAAC,EACxBgB,yBAAM,CAAE,CAAA,MAAA,EAAQb,KAAM,CAAC,CAAA,CAAC,EACxBD,MAAM,IAAIc,yBAAM,CAACd,MAAM,EACvBI,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACC,aAAa,EACpBZ,OAAO,IAAIW,yBAAM,CAACX,OACpB,CAAA;GAECa,EAAAA,wBAAY,CAACd,OAAO,CAAC,gBACpBM,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH9B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,IAAAA,MAAM,EAAEhB,OAAQ;IAChBE,SAAS,EAAEU,yBAAM,CAACK,UAAAA;GACnB,CAAC,GAEFjB,OAEC,CAAC,EAGLC,OAAO,iBACNK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,yBAAM,CAACM,YAAAA;AAAa,GAAA,eAClCZ,KAAA,CAAAC,aAAA,CAACY,eAAO,EAAA;IAAClC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
1
+ {"version":3,"file":"IconButton.js","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,gBAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;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,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACpB,UAAU,EACjBoB,yBAAM,CAAC,CAAQ3B,KAAAA,EAAAA,IAAI,EAAE,CAAC,EACtB2B,yBAAM,CAAC,CAAA,QAAA,EAAWf,OAAO,CAAE,CAAA,CAAC,EAC5Be,yBAAM,CAAC,CAAShB,MAAAA,EAAAA,KAAK,EAAE,CAAC,EACxBgB,yBAAM,CAAC,CAAA,MAAA,EAASb,KAAK,CAAE,CAAA,CAAC,EACxBD,MAAM,IAAIc,yBAAM,CAACd,MAAM,EACvBI,SACF,CAAA;AAAE,GAAA,EACEC,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACC,aAAa,EACpBZ,OAAO,IAAIW,yBAAM,CAACX,OACpB,CAAA;GAECa,EAAAA,wBAAY,CAACd,OAAO,CAAC,gBACpBM,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH9B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,IAAAA,MAAM,EAAEhB,OAAQ;IAChBE,SAAS,EAAEU,yBAAM,CAACK,UAAAA;GACnB,CAAC,GAEFjB,OAEC,CAAC,EAGLC,OAAO,iBACNK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAEU,yBAAM,CAACM,YAAAA;AAAa,GAAA,eAClCZ,KAAA,CAAAC,aAAA,CAACY,eAAO,EAAA;IAAClC,IAAI,EAAEM,cAAc,CAACN,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;"}
@@ -0,0 +1,38 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var index = require('../../node_modules/classnames/index.js');
5
+ var Spinner_module = require('./Spinner.module.scss.js');
6
+
7
+ const SPINNER_TEST_ID = 'bezier-spinner';
8
+ const Spinner = /*#__PURE__*/React.forwardRef(function Spinner({
9
+ className,
10
+ size,
11
+ variant = 'secondary',
12
+ ...rest
13
+ }, forwardedRef) {
14
+ return /*#__PURE__*/React.createElement("span", Object.assign({
15
+ className: index.default(Spinner_module.default.Spinner, size && Spinner_module.default[`size-${size}`], Spinner_module.default[`variant-${variant}`]),
16
+ ref: forwardedRef,
17
+ "data-testid": SPINNER_TEST_ID
18
+ }, rest), /*#__PURE__*/React.createElement("svg", {
19
+ xmlns: "http://www.w3.org/2000/svg",
20
+ viewBox: "0 0 16 16"
21
+ }, /*#__PURE__*/React.createElement("circle", {
22
+ cx: "8",
23
+ cy: "8",
24
+ r: "7",
25
+ className: Spinner_module.default.track,
26
+ vectorEffect: "non-scaling-stroke"
27
+ }), /*#__PURE__*/React.createElement("circle", {
28
+ cx: "8",
29
+ cy: "8",
30
+ r: "7",
31
+ className: Spinner_module.default.indicator,
32
+ vectorEffect: "non-scaling-stroke"
33
+ })));
34
+ });
35
+
36
+ exports.SPINNER_TEST_ID = SPINNER_TEST_ID;
37
+ exports.Spinner = Spinner;
38
+ //# sourceMappingURL=Spinner.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Spinner.js","sources":["../../../../src/components/AlphaSpinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n function Spinner(\n { className, size, variant = 'secondary', ...rest },\n forwardedRef\n ) {\n return (\n <span\n className={classNames(\n styles.Spinner,\n size && styles[`size-${size}`],\n styles[`variant-${variant}`]\n )}\n ref={forwardedRef}\n data-testid={SPINNER_TEST_ID}\n {...rest}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n >\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"7\"\n className={styles.track}\n vectorEffect=\"non-scaling-stroke\"\n />\n\n <circle\n cx=\"8\"\n cy=\"8\"\n r=\"7\"\n className={styles.indicator}\n vectorEffect=\"non-scaling-stroke\"\n />\n </svg>\n </span>\n )\n }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","className","size","variant","rest","forwardedRef","React","createElement","Object","assign","classNames","styles","ref","xmlns","viewBox","cx","cy","r","track","vectorEffect","indicator"],"mappings":";;;;;;AAQO,MAAMA,eAAe,GAAG,iBAAgB;MAElCC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC,IAAAA;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,MAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;IACER,SAAS,EAAES,aAAU,CACnBC,sBAAM,CAACZ,OAAO,EACdG,IAAI,IAAIS,sBAAM,CAAC,QAAQT,IAAI,CAAA,CAAE,CAAC,EAC9BS,sBAAM,CAAC,CAAWR,QAAAA,EAAAA,OAAO,CAAE,CAAA,CAC7B,CAAE;AACFS,IAAAA,GAAG,EAAEP,YAAa;IAClB,aAAaP,EAAAA,eAAAA;AAAgB,GAAA,EACzBM,IAAI,CAAA,eAERE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEM,IAAAA,KAAK,EAAC,4BAA4B;AAClCC,IAAAA,OAAO,EAAC,WAAA;GAERR,eAAAA,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,GAAG;IACLhB,SAAS,EAAEU,sBAAM,CAACO,KAAM;AACxBC,IAAAA,YAAY,EAAC,oBAAA;AAAoB,GAClC,CAAC,eAEFb,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,GAAG;IACLhB,SAAS,EAAEU,sBAAM,CAACS,SAAU;AAC5BD,IAAAA,YAAY,EAAC,oBAAA;GACd,CACE,CACD,CAAC,CAAA;AAEX,CACF;;;;;"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var styles = {"Spinner":"b-JiZuz","rotate":"b--s0vl","track":"b-yJ2yV","indicator":"b-ZDWx3","size-s":"b-RnjP3","size-m":"b-ZRPEJ","variant-primary":"b-awyMq","variant-secondary":"b-ur-vE","variant-on-overlay":"b-5H4Ga"};
6
+
7
+ exports.default = styles;
8
+ //# sourceMappingURL=Spinner.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Spinner.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -2,6 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
5
+ var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
5
6
  var useMergeRefs = require('../../hooks/useMergeRefs.js');
6
7
 
7
8
  /**
@@ -27,7 +28,7 @@ const AutoFocus = /*#__PURE__*/React.forwardRef(function AutoFocus({
27
28
  ...rest
28
29
  }, forwardedRef) {
29
30
  const [target, setTarget] = React.useState(null);
30
- React.useLayoutEffect(function focus() {
31
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function focus() {
31
32
  if (target && when) {
32
33
  target.focus();
33
34
  }
@@ -1 +1 @@
1
- {"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useState } from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { type AutoFocusProps } from './AutoFocus.types'\n\n/**\n * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.\n * It is useful when you want to focus on a specific element when the component is mounted.\n * It doesn't render any DOM node.\n * @example\n *\n * ```tsx\n * <AutoFocus>\n * <button>Close</button>\n * </AutoFocus>\n *\n * // You can also use it with the additional condition\n * <AutoFocus when={condition}>\n * <button>Close</button>\n * </AutoFocus>\n * ```\n */\nexport const AutoFocus = forwardRef<HTMLElement, AutoFocusProps>(\n function AutoFocus({ children, when = true, ...rest }, forwardedRef) {\n const [target, setTarget] = useState<HTMLElement | null>(null)\n\n useLayoutEffect(\n function focus() {\n if (target && when) {\n target.focus()\n }\n },\n [target, when]\n )\n\n const ref = useMergeRefs(setTarget, forwardedRef)\n\n return (\n <Slot\n ref={ref}\n {...rest}\n >\n {children}\n </Slot>\n )\n }\n)\n"],"names":["AutoFocus","forwardRef","children","when","rest","forwardedRef","target","setTarget","useState","useLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CACjC,SAASD,SAASA,CAAC;EAAEE,QAAQ;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAAEC,YAAY,EAAE;EACnE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAE9DC,EAAAA,qBAAe,CACb,SAASC,KAAKA,GAAG;IACf,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE,CAAA;AAChB,KAAA;AACF,GAAC,EACD,CAACJ,MAAM,EAAEH,IAAI,CACf,CAAC,CAAA;AAED,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CAACL,SAAS,EAAEF,YAAY,CAAC,CAAA;EAEjD,oBACEQ,KAAA,CAAAC,aAAA,CAACC,UAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA,GAAAA;GACDP,EAAAA,IAAI,CAEPF,EAAAA,QACG,CAAC,CAAA;AAEX,CACF;;;;"}
1
+ {"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { type AutoFocusProps } from './AutoFocus.types'\n\n/**\n * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.\n * It is useful when you want to focus on a specific element when the component is mounted.\n * It doesn't render any DOM node.\n * @example\n *\n * ```tsx\n * <AutoFocus>\n * <button>Close</button>\n * </AutoFocus>\n *\n * // You can also use it with the additional condition\n * <AutoFocus when={condition}>\n * <button>Close</button>\n * </AutoFocus>\n * ```\n */\nexport const AutoFocus = forwardRef<HTMLElement, AutoFocusProps>(\n function AutoFocus({ children, when = true, ...rest }, forwardedRef) {\n const [target, setTarget] = useState<HTMLElement | null>(null)\n\n useIsomorphicLayoutEffect(\n function focus() {\n if (target && when) {\n target.focus()\n }\n },\n [target, when]\n )\n\n const ref = useMergeRefs(setTarget, forwardedRef)\n\n return (\n <Slot\n ref={ref}\n {...rest}\n >\n {children}\n </Slot>\n )\n }\n)\n"],"names":["AutoFocus","forwardRef","children","when","rest","forwardedRef","target","setTarget","useState","useIsomorphicLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CACjC,SAASD,SAASA,CAAC;EAAEE,QAAQ;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAAEC,YAAY,EAAE;EACnE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAE9DC,EAAAA,mDAAyB,CACvB,SAASC,KAAKA,GAAG;IACf,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE,CAAA;AAChB,KAAA;AACF,GAAC,EACD,CAACJ,MAAM,EAAEH,IAAI,CACf,CAAC,CAAA;AAED,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CAACL,SAAS,EAAEF,YAAY,CAAC,CAAA;EAEjD,oBACEQ,KAAA,CAAAC,aAAA,CAACC,UAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA,GAAAA;GACDP,EAAAA,IAAI,CAEPF,EAAAA,QACG,CAAC,CAAA;AAEX,CACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","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":"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"}
1
+ {"version":3,"file":"Avatar.js","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":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { px } from '~/src/utils/style'\n\nimport {\n type AvatarProps,\n type AvatarSize,\n useAvatarRadiusToken,\n} from '~/src/components/Avatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport { type AvatarGroupProps } from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n 'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n const restCount = count - max\n return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(avatarSize: AvatarSize) {\n return (\n {\n 20: 'xxs',\n 24: 'xs',\n 30: 's',\n 36: 'm',\n 42: 'm',\n 48: 'l',\n 72: 'l',\n 90: 'l',\n 120: 'l',\n } as const\n )[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n return (\n {\n 20: '12',\n 24: '13',\n 30: '15',\n 36: '16',\n 42: '18',\n 48: '24',\n 72: '24',\n 90: '24',\n 120: '24',\n } as const\n )[avatarSize]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n * max={2}\n * spacing={4}\n * ellipsisType=\"icon\"\n * >\n * <Avatar />\n * <Avatar />\n * <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n function AvatarGroup(\n {\n max,\n size = '24',\n spacing = AVATAR_GROUP_DEFAULT_SPACING,\n ellipsisType = 'icon',\n onMouseEnterEllipsis,\n onMouseLeaveEllipsis,\n style,\n className,\n children,\n ...rest\n },\n forwardedRef\n ) {\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const renderAvatarElement = useCallback(\n (avatar: React.ReactElement<AvatarProps>, avatarListCount: number) => {\n const key =\n avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n const shouldShowBorder = avatarListCount > 1 && spacing < 0\n const showBorder = avatar.props.showBorder || shouldShowBorder\n return React.cloneElement(avatar, { key, size, showBorder })\n },\n [size, spacing]\n )\n\n const avatarListCount = useMemo(\n () => React.Children.count(children),\n [children]\n )\n\n const AvatarListComponent = useMemo(() => {\n if (avatarListCount <= max) {\n return React.Children.map(\n children,\n (avatar) =>\n React.isValidElement<AvatarProps>(avatar) &&\n renderAvatarElement(avatar, avatarListCount)\n )\n }\n\n const sliceEndIndex = max - avatarListCount\n const slicedAvatarList = React.Children.toArray(children).slice(\n 0,\n sliceEndIndex\n )\n\n return slicedAvatarList.map((avatar, index, arr) => {\n if (!React.isValidElement<AvatarProps>(avatar)) {\n return null\n }\n\n const AvatarElement = renderAvatarElement(\n avatar,\n slicedAvatarList.length\n )\n\n if (!isLastIndex(arr, index)) {\n return AvatarElement\n }\n\n if (ellipsisType === 'icon') {\n return (\n <div\n key=\"ellipsis\"\n className={styles.AvatarEllipsisIconWrapper}\n onMouseEnter={onMouseEnterEllipsis}\n onMouseLeave={onMouseLeaveEllipsis}\n data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n >\n <SmoothCornersBox\n borderRadius={AVATAR_BORDER_RADIUS}\n backgroundColor=\"bgtxt-absolute-black-lightest\"\n className={styles.AvatarEllipsisIcon}\n >\n <Icon\n source={MoreIcon}\n size={getProperIconSize(size)}\n color=\"bgtxt-absolute-white-dark\"\n />\n </SmoothCornersBox>\n {AvatarElement}\n </div>\n )\n }\n\n if (ellipsisType === 'count') {\n return (\n <React.Fragment key=\"ellipsis\">\n {AvatarElement}\n <div\n style={\n {\n '--b-avatar-group-ellipsis-ml': px(\n Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n ),\n } as React.CSSProperties\n }\n className={classNames(\n styles.AvatarEllipsisCountWrapper,\n styles[`size-${size}`]\n )}\n onMouseEnter={onMouseEnterEllipsis}\n onMouseLeave={onMouseLeaveEllipsis}\n >\n <Text\n typo={getProperTypoSize(size)}\n color=\"txt-black-dark\"\n className={styles.AvatarEllipsisCount}\n >\n {getRestAvatarListCountText(avatarListCount, max)}\n </Text>\n </div>\n </React.Fragment>\n )\n }\n\n return null\n })\n }, [\n avatarListCount,\n max,\n children,\n renderAvatarElement,\n ellipsisType,\n onMouseEnterEllipsis,\n onMouseLeaveEllipsis,\n AVATAR_BORDER_RADIUS,\n size,\n spacing,\n ])\n\n return (\n <div\n role=\"group\"\n ref={forwardedRef}\n className={classNames(\n styles.AvatarGroup,\n styles[`size-${size}`],\n className\n )}\n style={\n {\n '--b-avatar-group-spacing': px(spacing),\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n >\n {AvatarListComponent}\n </div>\n )\n }\n)\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","avatarSize","getProperTypoSize","AvatarGroup","forwardRef","size","spacing","ellipsisType","onMouseEnterEllipsis","onMouseLeaveEllipsis","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAvatarRadiusToken","renderAvatarElement","useCallback","avatar","avatarListCount","key","props","name","avatarUrl","shouldShowBorder","showBorder","React","cloneElement","useMemo","Children","AvatarListComponent","map","isValidElement","sliceEndIndex","slicedAvatarList","toArray","slice","index","arr","AvatarElement","length","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","onMouseEnter","onMouseLeave","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","Object","assign","role","ref"],"mappings":"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"}
1
+ {"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { px } from '~/src/utils/style'\n\nimport {\n type AvatarProps,\n type AvatarSize,\n useAvatarRadiusToken,\n} from '~/src/components/Avatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport { type AvatarGroupProps } from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n 'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n const restCount = count - max\n return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(avatarSize: AvatarSize) {\n return (\n {\n 20: 'xxs',\n 24: 'xs',\n 30: 's',\n 36: 'm',\n 42: 'm',\n 48: 'l',\n 72: 'l',\n 90: 'l',\n 120: 'l',\n } as const\n )[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n return (\n {\n 20: '12',\n 24: '13',\n 30: '15',\n 36: '16',\n 42: '18',\n 48: '24',\n 72: '24',\n 90: '24',\n 120: '24',\n } as const\n )[avatarSize]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n * max={2}\n * spacing={4}\n * ellipsisType=\"icon\"\n * >\n * <Avatar />\n * <Avatar />\n * <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n function AvatarGroup(\n {\n max,\n size = '24',\n spacing = AVATAR_GROUP_DEFAULT_SPACING,\n ellipsisType = 'icon',\n onMouseEnterEllipsis,\n onMouseLeaveEllipsis,\n style,\n className,\n children,\n ...rest\n },\n forwardedRef\n ) {\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const renderAvatarElement = useCallback(\n (avatar: React.ReactElement<AvatarProps>, avatarListCount: number) => {\n const key =\n avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n const shouldShowBorder = avatarListCount > 1 && spacing < 0\n const showBorder = avatar.props.showBorder || shouldShowBorder\n return React.cloneElement(avatar, { key, size, showBorder })\n },\n [size, spacing]\n )\n\n const avatarListCount = useMemo(\n () => React.Children.count(children),\n [children]\n )\n\n const AvatarListComponent = useMemo(() => {\n if (avatarListCount <= max) {\n return React.Children.map(\n children,\n (avatar) =>\n React.isValidElement<AvatarProps>(avatar) &&\n renderAvatarElement(avatar, avatarListCount)\n )\n }\n\n const sliceEndIndex = max - avatarListCount\n const slicedAvatarList = React.Children.toArray(children).slice(\n 0,\n sliceEndIndex\n )\n\n return slicedAvatarList.map((avatar, index, arr) => {\n if (!React.isValidElement<AvatarProps>(avatar)) {\n return null\n }\n\n const AvatarElement = renderAvatarElement(\n avatar,\n slicedAvatarList.length\n )\n\n if (!isLastIndex(arr, index)) {\n return AvatarElement\n }\n\n if (ellipsisType === 'icon') {\n return (\n <div\n key=\"ellipsis\"\n className={styles.AvatarEllipsisIconWrapper}\n onMouseEnter={onMouseEnterEllipsis}\n onMouseLeave={onMouseLeaveEllipsis}\n data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n >\n <SmoothCornersBox\n borderRadius={AVATAR_BORDER_RADIUS}\n backgroundColor=\"bgtxt-absolute-black-lightest\"\n className={styles.AvatarEllipsisIcon}\n >\n <Icon\n source={MoreIcon}\n size={getProperIconSize(size)}\n color=\"bgtxt-absolute-white-dark\"\n />\n </SmoothCornersBox>\n {AvatarElement}\n </div>\n )\n }\n\n if (ellipsisType === 'count') {\n return (\n <React.Fragment key=\"ellipsis\">\n {AvatarElement}\n <div\n style={\n {\n '--b-avatar-group-ellipsis-ml': px(\n Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n ),\n } as React.CSSProperties\n }\n className={classNames(\n styles.AvatarEllipsisCountWrapper,\n styles[`size-${size}`]\n )}\n onMouseEnter={onMouseEnterEllipsis}\n onMouseLeave={onMouseLeaveEllipsis}\n >\n <Text\n typo={getProperTypoSize(size)}\n color=\"txt-black-dark\"\n className={styles.AvatarEllipsisCount}\n >\n {getRestAvatarListCountText(avatarListCount, max)}\n </Text>\n </div>\n </React.Fragment>\n )\n }\n\n return null\n })\n }, [\n avatarListCount,\n max,\n children,\n renderAvatarElement,\n ellipsisType,\n onMouseEnterEllipsis,\n onMouseLeaveEllipsis,\n AVATAR_BORDER_RADIUS,\n size,\n spacing,\n ])\n\n return (\n <div\n role=\"group\"\n ref={forwardedRef}\n className={classNames(\n styles.AvatarGroup,\n styles[`size-${size}`],\n className\n )}\n style={\n {\n '--b-avatar-group-spacing': px(spacing),\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n >\n {AvatarListComponent}\n </div>\n )\n }\n)\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","avatarSize","getProperTypoSize","AvatarGroup","forwardRef","size","spacing","ellipsisType","onMouseEnterEllipsis","onMouseLeaveEllipsis","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAvatarRadiusToken","renderAvatarElement","useCallback","avatar","avatarListCount","key","props","name","avatarUrl","shouldShowBorder","showBorder","React","cloneElement","useMemo","Children","AvatarListComponent","map","isValidElement","sliceEndIndex","slicedAvatarList","toArray","slice","index","arr","AvatarElement","length","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","onMouseEnter","onMouseLeave","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","Object","assign","role","ref"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\nimport { isNil } from '~/src/utils/type'\n\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon, isIconName } from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type BannerProps,\n type BannerVariant,\n type RenderLinkFunc,\n} from './Banner.types'\n\nimport styles from './Banner.module.scss'\n\nconst BANNER_TEST_ID = 'bezier-banner'\n\nfunction getActionButtonColorVariant(variant: BannerVariant) {\n return (\n {\n default: 'monochrome-dark',\n blue: 'blue',\n cobalt: 'cobalt',\n green: 'green',\n orange: 'orange',\n red: 'red',\n alt: 'monochrome-dark',\n } as const\n )[variant]\n}\n\nconst externalLinkRenderer: RenderLinkFunc = ({ content, linkTo }) => (\n <a\n href={linkTo}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {content}\n </a>\n)\n\n/**\n * `Banner` is a component you use when you want to communicate instructions, warnings, recommendations, and other information well.\n * @example\n * ```tsx\n * <Banner\n * variant=\"blue\"\n * icon={LightbulbIcon}\n * content=\"Information here.\"\n * />\n * ```\n */\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n {\n className,\n variant = 'default',\n icon,\n iconColor,\n content,\n hasLink = false,\n linkText,\n linkTo,\n renderLink = externalLinkRenderer,\n actionIcon,\n onClickAction,\n ...rest\n },\n forwardedRef\n) {\n if (isIconName(icon)) {\n warn(\n 'Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.'\n )\n }\n\n return (\n <div\n ref={forwardedRef}\n className={classNames(\n styles.Banner,\n styles[`variant-${variant}`],\n className\n )}\n data-testid={BANNER_TEST_ID}\n {...rest}\n >\n {!isNil(icon) && (\n <div className={styles.Center}>\n {isBezierIcon(icon) ? (\n <Icon\n className={styles.Icon}\n source={icon}\n color={iconColor}\n size=\"s\"\n />\n ) : (\n <LegacyIcon\n className={styles.Icon}\n name={icon}\n color={iconColor}\n size=\"s\"\n />\n )}\n </div>\n )}\n\n <div className={styles.Content}>\n <Text typo=\"14\">\n {content}\n\n {hasLink &&\n renderLink({\n content: (\n <Text\n className={styles.Link}\n typo=\"14\"\n bold\n >\n {linkText}\n </Text>\n ),\n linkTo,\n })}\n </Text>\n </div>\n\n {!isNil(actionIcon) && (\n <div className={styles.Center}>\n <Button\n size=\"xs\"\n colorVariant={getActionButtonColorVariant(variant)}\n styleVariant=\"tertiary\"\n leftContent={actionIcon}\n onClick={onClickAction}\n />\n </div>\n )}\n </div>\n )\n})\n"],"names":["BANNER_TEST_ID","getActionButtonColorVariant","variant","default","blue","cobalt","green","orange","red","alt","externalLinkRenderer","content","linkTo","React","createElement","href","target","rel","Banner","forwardRef","className","icon","iconColor","hasLink","linkText","renderLink","actionIcon","onClickAction","rest","forwardedRef","isIconName","warn","Object","assign","ref","classNames","styles","isNil","Center","isBezierIcon","Icon","source","color","size","LegacyIcon","name","Content","Text","typo","Link","bold","Button","colorVariant","styleVariant","leftContent","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\nimport { isNil } from '~/src/utils/type'\n\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon, isIconName } from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n type BannerProps,\n type BannerVariant,\n type RenderLinkFunc,\n} from './Banner.types'\n\nimport styles from './Banner.module.scss'\n\nconst BANNER_TEST_ID = 'bezier-banner'\n\nfunction getActionButtonColorVariant(variant: BannerVariant) {\n return (\n {\n default: 'monochrome-dark',\n blue: 'blue',\n cobalt: 'cobalt',\n green: 'green',\n orange: 'orange',\n red: 'red',\n alt: 'monochrome-dark',\n } as const\n )[variant]\n}\n\nconst externalLinkRenderer: RenderLinkFunc = ({ content, linkTo }) => (\n <a\n href={linkTo}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {content}\n </a>\n)\n\n/**\n * `Banner` is a component you use when you want to communicate instructions, warnings, recommendations, and other information well.\n * @example\n * ```tsx\n * <Banner\n * variant=\"blue\"\n * icon={LightbulbIcon}\n * content=\"Information here.\"\n * />\n * ```\n */\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n {\n className,\n variant = 'default',\n icon,\n iconColor,\n content,\n hasLink = false,\n linkText,\n linkTo,\n renderLink = externalLinkRenderer,\n actionIcon,\n onClickAction,\n ...rest\n },\n forwardedRef\n) {\n if (isIconName(icon)) {\n warn(\n 'Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.'\n )\n }\n\n return (\n <div\n ref={forwardedRef}\n className={classNames(\n styles.Banner,\n styles[`variant-${variant}`],\n className\n )}\n data-testid={BANNER_TEST_ID}\n {...rest}\n >\n {!isNil(icon) && (\n <div className={styles.Center}>\n {isBezierIcon(icon) ? (\n <Icon\n className={styles.Icon}\n source={icon}\n color={iconColor}\n size=\"s\"\n />\n ) : (\n <LegacyIcon\n className={styles.Icon}\n name={icon}\n color={iconColor}\n size=\"s\"\n />\n )}\n </div>\n )}\n\n <div className={styles.Content}>\n <Text typo=\"14\">\n {content}\n\n {hasLink &&\n renderLink({\n content: (\n <Text\n className={styles.Link}\n typo=\"14\"\n bold\n >\n {linkText}\n </Text>\n ),\n linkTo,\n })}\n </Text>\n </div>\n\n {!isNil(actionIcon) && (\n <div className={styles.Center}>\n <Button\n size=\"xs\"\n colorVariant={getActionButtonColorVariant(variant)}\n styleVariant=\"tertiary\"\n leftContent={actionIcon}\n onClick={onClickAction}\n />\n </div>\n )}\n </div>\n )\n})\n"],"names":["BANNER_TEST_ID","getActionButtonColorVariant","variant","default","blue","cobalt","green","orange","red","alt","externalLinkRenderer","content","linkTo","React","createElement","href","target","rel","Banner","forwardRef","className","icon","iconColor","hasLink","linkText","renderLink","actionIcon","onClickAction","rest","forwardedRef","isIconName","warn","Object","assign","ref","classNames","styles","isNil","Center","isBezierIcon","Icon","source","color","size","LegacyIcon","name","Content","Text","typo","Link","bold","Button","colorVariant","styleVariant","leftContent","onClick"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAMA,cAAc,GAAG,eAAe,CAAA;AAEtC,SAASC,2BAA2BA,CAACC,OAAsB,EAAE;EAC3D,OACE;AACEC,IAAAA,OAAO,EAAE,iBAAiB;AAC1BC,IAAAA,IAAI,EAAE,MAAM;AACZC,IAAAA,MAAM,EAAE,QAAQ;AAChBC,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,QAAQ;AAChBC,IAAAA,GAAG,EAAE,KAAK;AACVC,IAAAA,GAAG,EAAE,iBAAA;GACN,CACDP,OAAO,CAAC,CAAA;AACZ,CAAA;AAEA,MAAMQ,oBAAoC,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,MAAAA;AAAO,CAAC,kBAC/DC,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AACEC,EAAAA,IAAI,EAAEH,MAAO;AACbI,EAAAA,MAAM,EAAC,QAAQ;AACfC,EAAAA,GAAG,EAAC,qBAAA;AAAqB,CAAA,EAExBN,OACA,CACJ,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaO,MAAM,gBAAGC,gBAAU,CAA8B,SAASD,MAAMA,CAC3E;EACEE,SAAS;AACTlB,EAAAA,OAAO,GAAG,SAAS;EACnBmB,IAAI;EACJC,SAAS;EACTX,OAAO;AACPY,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;EACRZ,MAAM;AACNa,EAAAA,UAAU,GAAGf,oBAAoB;EACjCgB,UAAU;EACVC,aAAa;EACb,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,IAAIC,gBAAU,CAACT,IAAI,CAAC,EAAE;IACpBU,WAAI,CACF,6HACF,CAAC,CAAA;AACH,GAAA;AAEA,EAAA,oBACElB,KAAA,CAAAC,aAAA,CAAAkB,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBT,IAAAA,SAAS,EAAEe,aAAU,CACnBC,qBAAM,CAAClB,MAAM,EACbkB,qBAAM,CAAC,WAAWlC,OAAO,CAAA,CAAE,CAAC,EAC5BkB,SACF,CAAE;IACF,aAAapB,EAAAA,cAAAA;GACT4B,EAAAA,IAAI,CAEP,EAAA,CAACS,UAAK,CAAChB,IAAI,CAAC,iBACXR,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEgB,qBAAM,CAACE,MAAAA;GACpBC,EAAAA,wBAAY,CAAClB,IAAI,CAAC,gBACjBR,KAAA,CAAAC,aAAA,CAAC0B,SAAI,EAAA;IACHpB,SAAS,EAAEgB,qBAAM,CAACI,IAAK;AACvBC,IAAAA,MAAM,EAAEpB,IAAK;AACbqB,IAAAA,KAAK,EAAEpB,SAAU;AACjBqB,IAAAA,IAAI,EAAC,GAAA;AAAG,GACT,CAAC,gBAEF9B,KAAA,CAAAC,aAAA,CAAC8B,qBAAU,EAAA;IACTxB,SAAS,EAAEgB,qBAAM,CAACI,IAAK;AACvBK,IAAAA,IAAI,EAAExB,IAAK;AACXqB,IAAAA,KAAK,EAAEpB,SAAU;AACjBqB,IAAAA,IAAI,EAAC,GAAA;AAAG,GACT,CAEA,CACN,eAED9B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEgB,qBAAM,CAACU,OAAAA;AAAQ,GAAA,eAC7BjC,KAAA,CAAAC,aAAA,CAACiC,SAAI,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAA;AAAI,GAAA,EACZrC,OAAO,EAEPY,OAAO,IACNE,UAAU,CAAC;AACTd,IAAAA,OAAO,eACLE,KAAA,CAAAC,aAAA,CAACiC,SAAI,EAAA;MACH3B,SAAS,EAAEgB,qBAAM,CAACa,IAAK;AACvBD,MAAAA,IAAI,EAAC,IAAI;MACTE,IAAI,EAAA,IAAA;AAAA,KAAA,EAEH1B,QACG,CACP;AACDZ,IAAAA,MAAAA;AACF,GAAC,CACC,CACH,CAAC,EAEL,CAACyB,UAAK,CAACX,UAAU,CAAC,iBACjBb,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEgB,qBAAM,CAACE,MAAAA;AAAO,GAAA,eAC5BzB,KAAA,CAAAC,aAAA,CAACqC,aAAM,EAAA;AACLR,IAAAA,IAAI,EAAC,IAAI;AACTS,IAAAA,YAAY,EAAEnD,2BAA2B,CAACC,OAAO,CAAE;AACnDmD,IAAAA,YAAY,EAAC,UAAU;AACvBC,IAAAA,WAAW,EAAE5B,UAAW;AACxB6B,IAAAA,OAAO,EAAE5B,aAAAA;GACV,CACE,CAEJ,CAAC,CAAA;AAEV,CAAC;;;;"}
@@ -37,9 +37,10 @@ const BaseTagBadgeText = /*#__PURE__*/React.forwardRef(function BaseTagBadgeText
37
37
  size,
38
38
  children,
39
39
  ...rest
40
- }) {
40
+ }, forwardedRef) {
41
41
  return /*#__PURE__*/React.createElement(Text.Text, Object.assign({
42
- typo: getProperTypo(size)
42
+ typo: getProperTypo(size),
43
+ ref: forwardedRef
43
44
  }, rest), children);
44
45
  });
45
46
 
@@ -1 +1 @@
1
- {"version":3,"file":"BaseTagBadge.js","sources":["../../../../src/components/BaseTagBadge/BaseTagBadge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { Text } from '~/src/components/Text'\n\nimport {\n type BaseTagBadgeProps,\n type BaseTagBadgeSize,\n type BaseTagBadgeTextProps,\n} from './BaseTagBadge.types'\n\nimport styles from './BaseTagBadge.module.scss'\n\nfunction getProperTypo(size: BaseTagBadgeSize) {\n return (\n {\n xs: '11',\n s: '13',\n m: '14',\n l: '15',\n } as const\n )[size]\n}\n\n/**\n * `BaseTagBadge` is the component on which `Tag` and `Badge` components are based.\n */\nexport const BaseTagBadge = forwardRef<HTMLDivElement, BaseTagBadgeProps>(\n function Tag({ size, variant, children, className, ...rest }, forwardedRef) {\n return (\n <div\n ref={forwardedRef}\n className={classNames(\n styles.BaseTagBadge,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n className\n )}\n {...rest}\n >\n {children}\n </div>\n )\n }\n)\n\n/**\n * `BaseTagBadgeText` is the component on which `Tag` and `Badge` components are based.\n */\nexport const BaseTagBadgeText = forwardRef<\n HTMLDivElement,\n BaseTagBadgeTextProps\n>(function BaseTagBadgeText({ size, children, ...rest }) {\n return (\n <Text\n typo={getProperTypo(size)}\n {...rest}\n >\n {children}\n </Text>\n )\n})\n"],"names":["getProperTypo","size","xs","s","m","l","BaseTagBadge","forwardRef","Tag","variant","children","className","rest","forwardedRef","React","createElement","Object","assign","ref","classNames","styles","BaseTagBadgeText","Text","typo"],"mappings":";;;;;;;AAcA,SAASA,aAAaA,CAACC,IAAsB,EAAE;EAC7C,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAA;GACJ,CACDJ,IAAI,CAAC,CAAA;AACT,CAAA;;AAEA;AACA;AACA;MACaK,YAAY,gBAAGC,gBAAU,CACpC,SAASC,GAAGA,CAAC;EAAEP,IAAI;EAAEQ,OAAO;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAAEC,YAAY,EAAE;AAC1E,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;IAClBF,SAAS,EAAEQ,aAAU,CACnBC,2BAAM,CAACd,YAAY,EACnBc,2BAAM,CAAE,CAAA,KAAA,EAAOnB,IAAK,CAAC,CAAA,CAAC,EACtBmB,2BAAM,CAAE,WAAUX,OAAQ,CAAA,CAAC,CAAC,EAC5BE,SACF,CAAA;GACIC,EAAAA,IAAI,CAEPF,EAAAA,QACE,CAAC,CAAA;AAEV,CACF,EAAC;;AAED;AACA;AACA;MACaW,gBAAgB,gBAAGd,gBAAU,CAGxC,SAASc,gBAAgBA,CAAC;EAAEpB,IAAI;EAAES,QAAQ;EAAE,GAAGE,IAAAA;AAAK,CAAC,EAAE;EACvD,oBACEE,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAAN,MAAA,CAAAC,MAAA,CAAA;IACHM,IAAI,EAAEvB,aAAa,CAACC,IAAI,CAAA;GACpBW,EAAAA,IAAI,CAEPF,EAAAA,QACG,CAAC,CAAA;AAEX,CAAC;;;;;"}
1
+ {"version":3,"file":"BaseTagBadge.js","sources":["../../../../src/components/BaseTagBadge/BaseTagBadge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { Text } from '~/src/components/Text'\n\nimport {\n type BaseTagBadgeProps,\n type BaseTagBadgeSize,\n type BaseTagBadgeTextProps,\n} from './BaseTagBadge.types'\n\nimport styles from './BaseTagBadge.module.scss'\n\nfunction getProperTypo(size: BaseTagBadgeSize) {\n return (\n {\n xs: '11',\n s: '13',\n m: '14',\n l: '15',\n } as const\n )[size]\n}\n\n/**\n * `BaseTagBadge` is the component on which `Tag` and `Badge` components are based.\n */\nexport const BaseTagBadge = forwardRef<HTMLDivElement, BaseTagBadgeProps>(\n function Tag({ size, variant, children, className, ...rest }, forwardedRef) {\n return (\n <div\n ref={forwardedRef}\n className={classNames(\n styles.BaseTagBadge,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n className\n )}\n {...rest}\n >\n {children}\n </div>\n )\n }\n)\n\n/**\n * `BaseTagBadgeText` is the component on which `Tag` and `Badge` components are based.\n */\nexport const BaseTagBadgeText = forwardRef<\n HTMLDivElement,\n BaseTagBadgeTextProps\n>(function BaseTagBadgeText({ size, children, ...rest }, forwardedRef) {\n return (\n <Text\n typo={getProperTypo(size)}\n ref={forwardedRef}\n {...rest}\n >\n {children}\n </Text>\n )\n})\n"],"names":["getProperTypo","size","xs","s","m","l","BaseTagBadge","forwardRef","Tag","variant","children","className","rest","forwardedRef","React","createElement","Object","assign","ref","classNames","styles","BaseTagBadgeText","Text","typo"],"mappings":";;;;;;;AAcA,SAASA,aAAaA,CAACC,IAAsB,EAAE;EAC7C,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAA;GACJ,CACDJ,IAAI,CAAC,CAAA;AACT,CAAA;;AAEA;AACA;AACA;MACaK,YAAY,gBAAGC,gBAAU,CACpC,SAASC,GAAGA,CAAC;EAAEP,IAAI;EAAEQ,OAAO;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAAEC,YAAY,EAAE;AAC1E,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;IAClBF,SAAS,EAAEQ,aAAU,CACnBC,2BAAM,CAACd,YAAY,EACnBc,2BAAM,CAAC,CAAA,KAAA,EAAQnB,IAAI,CAAE,CAAA,CAAC,EACtBmB,2BAAM,CAAC,WAAWX,OAAO,CAAA,CAAE,CAAC,EAC5BE,SACF,CAAA;GACIC,EAAAA,IAAI,CAEPF,EAAAA,QACE,CAAC,CAAA;AAEV,CACF,EAAC;;AAED;AACA;AACA;MACaW,gBAAgB,gBAAGd,gBAAU,CAGxC,SAASc,gBAAgBA,CAAC;EAAEpB,IAAI;EAAES,QAAQ;EAAE,GAAGE,IAAAA;AAAK,CAAC,EAAEC,YAAY,EAAE;EACrE,oBACEC,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAAN,MAAA,CAAAC,MAAA,CAAA;AACHM,IAAAA,IAAI,EAAEvB,aAAa,CAACC,IAAI,CAAE;AAC1BiB,IAAAA,GAAG,EAAEL,YAAAA;GACDD,EAAAA,IAAI,CAEPF,EAAAA,QACG,CAAC,CAAA;AAEX,CAAC;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n getLayoutStyles,\n getMarginStyles,\n splitByLayoutProps,\n splitByMarginProps,\n} from '~/src/types/props-helpers'\n\nimport { type BoxProps } from './Box.types'\n\nimport styles from './Box.module.scss'\n\n/**\n * `Box` is a primitive layout component. It provides an easy way to access design tokens.\n * @example\n *\n * ```tsx\n * <Box\n * width=\"100px\"\n * height=\"100px\"\n * p=\"6px\"\n * m=\"6px\"\n * bgColor=\"bg-black-light\"\n * >\n * <div>{ ... }</div>\n * </Box>\n * ```\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n function Box(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)\n const marginStyles = getMarginStyles(marginProps)\n const layoutStyles = getLayoutStyles(layoutProps)\n\n const {\n children,\n style,\n className,\n as = 'div',\n display,\n ...rest\n } = layoutRest\n\n /**\n * NOTE: Using the createElement function directly because of a ref type related error.\n * TODO: Fix type error.\n */\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n ...marginStyles.style,\n ...layoutStyles.style,\n ...style,\n },\n className: classNames(\n styles.Box,\n display && styles[`display-${display}`],\n marginStyles.className,\n layoutStyles.className,\n className\n ),\n 'data-testid': 'bezier-box',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Box","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","layoutProps","layoutRest","splitByLayoutProps","marginStyles","getMarginStyles","layoutStyles","getLayoutStyles","children","style","className","as","display","rest","createElement","ref","classNames","styles"],"mappings":";;;;;;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,SAASD,GAAGA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC,CAAA;EAC3D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,UAAU,CAAC,CAAA;AAChE,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACP,WAAW,CAAC,CAAA;AACjD,EAAA,MAAMQ,YAAY,GAAGC,4BAAe,CAACN,WAAW,CAAC,CAAA;EAEjD,MAAM;IACJO,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;IACVC,OAAO;IACP,GAAGC,IAAAA;AACL,GAAC,GAAGX,UAAU,CAAA;;AAEd;AACJ;AACA;AACA;EACI,oBAAOY,mBAAa,CAClBH,EAAE,EACF;AACEI,IAAAA,GAAG,EAAElB,YAAY;AACjBY,IAAAA,KAAK,EAAE;MACL,GAAGL,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA,KAAAA;KACJ;IACDC,SAAS,EAAEM,aAAU,CACnBC,kBAAM,CAACvB,GAAG,EACVkB,OAAO,IAAIK,kBAAM,CAAE,CAAA,QAAA,EAAUL,OAAQ,CAAC,CAAA,CAAC,EACvCR,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,YAAY;IAC3B,GAAGG,IAAAA;GACJ,EACDL,QACF,CAAC,CAAA;AACH,CACF;;;;"}
1
+ {"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n getLayoutStyles,\n getMarginStyles,\n splitByLayoutProps,\n splitByMarginProps,\n} from '~/src/types/props-helpers'\n\nimport { type BoxProps } from './Box.types'\n\nimport styles from './Box.module.scss'\n\n/**\n * `Box` is a primitive layout component. It provides an easy way to access design tokens.\n * @example\n *\n * ```tsx\n * <Box\n * width=\"100px\"\n * height=\"100px\"\n * p=\"6px\"\n * m=\"6px\"\n * bgColor=\"bg-black-light\"\n * >\n * <div>{ ... }</div>\n * </Box>\n * ```\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n function Box(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)\n const marginStyles = getMarginStyles(marginProps)\n const layoutStyles = getLayoutStyles(layoutProps)\n\n const {\n children,\n style,\n className,\n as = 'div',\n display,\n ...rest\n } = layoutRest\n\n /**\n * NOTE: Using the createElement function directly because of a ref type related error.\n * TODO: Fix type error.\n */\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n ...marginStyles.style,\n ...layoutStyles.style,\n ...style,\n },\n className: classNames(\n styles.Box,\n display && styles[`display-${display}`],\n marginStyles.className,\n layoutStyles.className,\n className\n ),\n 'data-testid': 'bezier-box',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Box","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","layoutProps","layoutRest","splitByLayoutProps","marginStyles","getMarginStyles","layoutStyles","getLayoutStyles","children","style","className","as","display","rest","createElement","ref","classNames","styles"],"mappings":";;;;;;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,SAASD,GAAGA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC,CAAA;EAC3D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,UAAU,CAAC,CAAA;AAChE,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACP,WAAW,CAAC,CAAA;AACjD,EAAA,MAAMQ,YAAY,GAAGC,4BAAe,CAACN,WAAW,CAAC,CAAA;EAEjD,MAAM;IACJO,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;IACVC,OAAO;IACP,GAAGC,IAAAA;AACL,GAAC,GAAGX,UAAU,CAAA;;AAEd;AACJ;AACA;AACA;EACI,oBAAOY,mBAAa,CAClBH,EAAE,EACF;AACEI,IAAAA,GAAG,EAAElB,YAAY;AACjBY,IAAAA,KAAK,EAAE;MACL,GAAGL,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA,KAAAA;KACJ;IACDC,SAAS,EAAEM,aAAU,CACnBC,kBAAM,CAACvB,GAAG,EACVkB,OAAO,IAAIK,kBAAM,CAAC,CAAA,QAAA,EAAWL,OAAO,CAAE,CAAA,CAAC,EACvCR,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,YAAY;IAC3B,GAAGG,IAAAA;GACJ,EACDL,QACF,CAAC,CAAA;AACH,CACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon, isIconName } from '~/src/components/LegacyIcon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport type { ButtonProps, ButtonSize, SideContent } from './Button.types'\n\nimport styles from './Button.module.scss'\n\nexport const BUTTON_TEST_ID = 'bezier-button'\n\nfunction getTypography(size: ButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 's',\n } as const\n )[size]\n}\n\nfunction ButtonSideContent({\n size,\n children,\n}: {\n size: ButtonSize\n children: SideContent\n}) {\n if (isIconName(children)) {\n warn(\n 'Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.'\n )\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 disabled = false,\n loading = 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 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 bold\n >\n {text}\n </Text>\n )}\n\n <ButtonSideContent size={size}>{rightContent}</ButtonSideContent>\n </div>\n\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["BUTTON_TEST_ID","getTypography","size","xs","s","m","l","xl","getIconSize","getSpinnerSize","ButtonSideContent","children","isIconName","warn","React","createElement","LegacyIcon","className","styles","ButtonIcon","name","isBezierIcon","Icon","source","Fragment","Button","forwardRef","as","BaseButton","text","disabled","loading","active","styleVariant","colorVariant","leftContent","rightContent","onClick","rest","forwardedRef","Comp","handleClick","useCallback","event","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { LegacyIcon, isIconName } from '~/src/components/LegacyIcon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport type { ButtonProps, ButtonSize, SideContent } from './Button.types'\n\nimport styles from './Button.module.scss'\n\nexport const BUTTON_TEST_ID = 'bezier-button'\n\nfunction getTypography(size: ButtonSize) {\n return (\n {\n xs: '13',\n s: '13',\n m: '14',\n l: '15',\n xl: '18',\n } as const\n )[size]\n}\n\nfunction getIconSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 'm',\n } as const\n )[size]\n}\n\nfunction getSpinnerSize(size: ButtonSize) {\n return (\n {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 's',\n xl: 's',\n } as const\n )[size]\n}\n\nfunction ButtonSideContent({\n size,\n children,\n}: {\n size: ButtonSize\n children: SideContent\n}) {\n if (isIconName(children)) {\n warn(\n 'Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.'\n )\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 disabled = false,\n loading = 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 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 bold\n >\n {text}\n </Text>\n )}\n\n <ButtonSideContent size={size}>{rightContent}</ButtonSideContent>\n </div>\n\n {loading && (\n <div className={styles.ButtonLoader}>\n <Spinner size={getSpinnerSize(size)} />\n </div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["BUTTON_TEST_ID","getTypography","size","xs","s","m","l","xl","getIconSize","getSpinnerSize","ButtonSideContent","children","isIconName","warn","React","createElement","LegacyIcon","className","styles","ButtonIcon","name","isBezierIcon","Icon","source","Fragment","Button","forwardRef","as","BaseButton","text","disabled","loading","active","styleVariant","colorVariant","leftContent","rightContent","onClick","rest","forwardedRef","Comp","handleClick","useCallback","event","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":";;;;;;;;;;;;;;AAiBO,MAAMA,cAAc,GAAG,gBAAe;AAE7C,SAASC,aAAaA,CAACC,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;AAEA,SAASM,WAAWA,CAACN,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,GAAA;GACL,CACDL,IAAI,CAAC,CAAA;AACT,CAAA;AAEA,SAASO,cAAcA,CAACP,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,SAASQ,iBAAiBA,CAAC;EACzBR,IAAI;AACJS,EAAAA,QAAAA;AAIF,CAAC,EAAE;AACD,EAAA,IAAIC,gBAAU,CAACD,QAAQ,CAAC,EAAE;IACxBE,WAAI,CACF,sIACF,CAAC,CAAA;AACD,IAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,qBAAU,EAAA;MACTC,SAAS,EAAEC,qBAAM,CAACC,UAAW;AAC7BC,MAAAA,IAAI,EAAET,QAAS;MACfT,IAAI,EAAEM,WAAW,CAACN,IAAI,CAAA;AAAE,KACzB,CAAC,CAAA;AAEN,GAAA;AAEA,EAAA,IAAImB,wBAAY,CAACV,QAAQ,CAAC,EAAE;AAC1B,IAAA,oBACEG,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAA;MACHL,SAAS,EAAEC,qBAAM,CAACC,UAAW;AAC7BI,MAAAA,MAAM,EAAEZ,QAAS;MACjBT,IAAI,EAAEM,WAAW,CAACN,IAAI,CAAA;AAAE,KACzB,CAAC,CAAA;AAEN,GAAA;EAEA,oBAAOY,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAU,QAAA,EAAGb,IAAAA,EAAAA,QAAW,CAAC,CAAA;AACxB,CAAA;MAEac,MAAM,gBAAGC,gBAAU,CAC9B,SAASD,MAAMA,CACb;AACEE,EAAAA,EAAE,GAAGC,qBAAU;EACfX,SAAS;EACTY,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,MAAM,GAAG,KAAK;AACd9B,EAAAA,IAAI,GAAG,GAAG;AACV+B,EAAAA,YAAY,GAAG,SAAS;AACxBC,EAAAA,YAAY,GAAG,MAAM;EACrBC,WAAW;EACXC,YAAY;EACZC,OAAO;EACP,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB,CAAA;AAEpC,EAAA,MAAMc,WAAW,GAAGC,iBAAW,CAC5BC,KAAK,IAAK;IACT,IAAI,CAACb,QAAQ,EAAE;MACbO,OAAO,GAAGM,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACN,OAAO,EAAEP,QAAQ,CACpB,CAAC,CAAA;EAED,oBACEhB,KAAA,CAAAC,aAAA,CAACyB,IAAI,EAAAI,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEP,YAAa;AAClBtB,IAAAA,SAAS,EAAE8B,aAAU,CACnB7B,qBAAM,CAACO,MAAM,EACbP,qBAAM,CAAC,QAAQhB,IAAI,CAAA,CAAE,CAAC,EACtBgB,qBAAM,CAAC,CAAA,MAAA,EAASe,YAAY,CAAA,CAAE,CAAC,EAC/Bf,qBAAM,CAAC,CAAA,MAAA,EAASgB,YAAY,CAAE,CAAA,CAAC,EAC/BF,MAAM,IAAId,qBAAM,CAACc,MAAM,EACvBf,SACF,CAAE;AACFa,IAAAA,QAAQ,EAAEA,QAAS;AACnBO,IAAAA,OAAO,EAAEI,WAAY;AACrB,IAAA,aAAA,EAAazC,cAAe;IAC5B,uBAAsB,EAAA,QAAA;AAAQ,GAAA,EAC1BsC,IAAI,CAAA,eAERxB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEE,SAAS,EAAE8B,aAAU,CACnB7B,qBAAM,CAAC8B,aAAa,EACpBjB,OAAO,IAAIb,qBAAM,CAACa,OACpB,CAAA;AAAE,GAAA,eAEFjB,KAAA,CAAAC,aAAA,CAACL,iBAAiB,EAAA;AAACR,IAAAA,IAAI,EAAEA,IAAAA;GAAOiC,EAAAA,WAA+B,CAAC,EAE/DN,IAAI,iBACHf,KAAA,CAAAC,aAAA,CAACkC,SAAI,EAAA;IACHhC,SAAS,EAAEC,qBAAM,CAACgC,UAAW;AAC7BC,IAAAA,IAAI,EAAElD,aAAa,CAACC,IAAI,CAAE;IAC1BkD,IAAI,EAAA,IAAA;AAAA,GAAA,EAEHvB,IACG,CACP,eAEDf,KAAA,CAAAC,aAAA,CAACL,iBAAiB,EAAA;AAACR,IAAAA,IAAI,EAAEA,IAAAA;GAAOkC,EAAAA,YAAgC,CAC7D,CAAC,EAELL,OAAO,iBACNjB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKE,SAAS,EAAEC,qBAAM,CAACmC,YAAAA;AAAa,GAAA,eAClCvC,KAAA,CAAAC,aAAA,CAACuC,eAAO,EAAA;IAACpD,IAAI,EAAEO,cAAc,CAACP,IAAI,CAAA;GAAI,CACnC,CAEH,CAAC,CAAA;AAEX,CACF;;;;;"}