@os-design/core 1.0.239 → 1.0.241

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 (281) hide show
  1. package/dist/cjs/@types/emotion.d.js.map +1 -1
  2. package/dist/cjs/Alert/index.js +2 -2
  3. package/dist/cjs/Alert/index.js.map +1 -1
  4. package/dist/cjs/Avatar/index.js +2 -2
  5. package/dist/cjs/Avatar/index.js.map +1 -1
  6. package/dist/cjs/Avatar/utils/nameToInitials.js.map +1 -1
  7. package/dist/cjs/Avatar/utils/strToHue.js.map +1 -1
  8. package/dist/cjs/AvatarSkeleton/index.js +2 -2
  9. package/dist/cjs/AvatarSkeleton/index.js.map +1 -1
  10. package/dist/cjs/Badge/index.js +82 -0
  11. package/dist/cjs/Badge/index.js.map +1 -0
  12. package/dist/cjs/Breadcrumb/index.js +3 -3
  13. package/dist/cjs/Breadcrumb/index.js.map +1 -1
  14. package/dist/cjs/BreadcrumbItem/index.js +2 -2
  15. package/dist/cjs/BreadcrumbItem/index.js.map +1 -1
  16. package/dist/cjs/Button/ButtonContent.js.map +1 -1
  17. package/dist/cjs/Button/index.js +2 -2
  18. package/dist/cjs/Button/index.js.map +1 -1
  19. package/dist/cjs/Button/utils/useButtonColors.js.map +1 -1
  20. package/dist/cjs/ButtonLink/index.js +2 -2
  21. package/dist/cjs/ButtonLink/index.js.map +1 -1
  22. package/dist/cjs/Checkbox/index.js +2 -2
  23. package/dist/cjs/Checkbox/index.js.map +1 -1
  24. package/dist/cjs/CheckboxSkeleton/index.js +2 -2
  25. package/dist/cjs/CheckboxSkeleton/index.js.map +1 -1
  26. package/dist/cjs/DatePicker/DatePickerCalendar.js +1 -1
  27. package/dist/cjs/DatePicker/DatePickerCalendar.js.map +1 -1
  28. package/dist/cjs/DatePicker/index.js +2 -2
  29. package/dist/cjs/DatePicker/index.js.map +1 -1
  30. package/dist/cjs/Drawer/index.js +2 -2
  31. package/dist/cjs/Drawer/index.js.map +1 -1
  32. package/dist/cjs/Form/FormConfigContext.js.map +1 -1
  33. package/dist/cjs/Form/index.js +2 -2
  34. package/dist/cjs/Form/index.js.map +1 -1
  35. package/dist/cjs/FormDivider/index.js +2 -2
  36. package/dist/cjs/FormDivider/index.js.map +1 -1
  37. package/dist/cjs/FormItem/index.js +2 -2
  38. package/dist/cjs/FormItem/index.js.map +1 -1
  39. package/dist/cjs/Gallery/Status.js.map +1 -1
  40. package/dist/cjs/Gallery/index.js +2 -2
  41. package/dist/cjs/Gallery/index.js.map +1 -1
  42. package/dist/cjs/GlobalStyles/index.js.map +1 -1
  43. package/dist/cjs/GlobalStyles/resetStyles.js.map +1 -1
  44. package/dist/cjs/GlobalStyles/typographyStyles.js.map +1 -1
  45. package/dist/cjs/HeaderSkeleton/index.js +2 -2
  46. package/dist/cjs/HeaderSkeleton/index.js.map +1 -1
  47. package/dist/cjs/Image/index.js +2 -2
  48. package/dist/cjs/Image/index.js.map +1 -1
  49. package/dist/cjs/ImageSkeleton/index.js +1 -1
  50. package/dist/cjs/ImageSkeleton/index.js.map +1 -1
  51. package/dist/cjs/Input/index.js +2 -2
  52. package/dist/cjs/Input/index.js.map +1 -1
  53. package/dist/cjs/Input/utils/getFocusableElements.js.map +1 -1
  54. package/dist/cjs/InputNumber/index.js +2 -2
  55. package/dist/cjs/InputNumber/index.js.map +1 -1
  56. package/dist/cjs/InputNumber/utils/defaultLocale.js.map +1 -1
  57. package/dist/cjs/InputPassword/index.js +2 -2
  58. package/dist/cjs/InputPassword/index.js.map +1 -1
  59. package/dist/cjs/InputPassword/utils/defaultLocale.js.map +1 -1
  60. package/dist/cjs/InputSearch/index.js +2 -2
  61. package/dist/cjs/InputSearch/index.js.map +1 -1
  62. package/dist/cjs/InputSearch/utils/defaultLocale.js.map +1 -1
  63. package/dist/cjs/InputSkeleton/index.js +1 -1
  64. package/dist/cjs/InputSkeleton/index.js.map +1 -1
  65. package/dist/cjs/Layout/LayoutContext.js.map +1 -1
  66. package/dist/cjs/Layout/index.js +1 -1
  67. package/dist/cjs/Layout/index.js.map +1 -1
  68. package/dist/cjs/Link/index.js +2 -2
  69. package/dist/cjs/Link/index.js.map +1 -1
  70. package/dist/cjs/LinkButton/index.js +2 -2
  71. package/dist/cjs/LinkButton/index.js.map +1 -1
  72. package/dist/cjs/List/WindowScroller.js +1 -1
  73. package/dist/cjs/List/WindowScroller.js.map +1 -1
  74. package/dist/cjs/List/index.js +3 -3
  75. package/dist/cjs/List/index.js.map +1 -1
  76. package/dist/cjs/List/utils/bodyPointerEvents.js.map +1 -1
  77. package/dist/cjs/List/utils/frameTimeout.js.map +1 -1
  78. package/dist/cjs/List/utils/useRWLoadNext.js.map +1 -1
  79. package/dist/cjs/ListItem/index.js +2 -2
  80. package/dist/cjs/ListItem/index.js.map +1 -1
  81. package/dist/cjs/ListItemActions/index.js +2 -2
  82. package/dist/cjs/ListItemActions/index.js.map +1 -1
  83. package/dist/cjs/ListItemLink/index.js +2 -2
  84. package/dist/cjs/ListItemLink/index.js.map +1 -1
  85. package/dist/cjs/ListSkeleton/index.js +2 -2
  86. package/dist/cjs/ListSkeleton/index.js.map +1 -1
  87. package/dist/cjs/LogoLink/index.js +2 -2
  88. package/dist/cjs/LogoLink/index.js.map +1 -1
  89. package/dist/cjs/Menu/index.js +2 -2
  90. package/dist/cjs/Menu/index.js.map +1 -1
  91. package/dist/cjs/Menu/utils/useFocusWithArrows.js.map +1 -1
  92. package/dist/cjs/MenuDivider/index.js +1 -1
  93. package/dist/cjs/MenuDivider/index.js.map +1 -1
  94. package/dist/cjs/MenuGroup/index.js +3 -3
  95. package/dist/cjs/MenuGroup/index.js.map +1 -1
  96. package/dist/cjs/MenuItem/index.js +2 -2
  97. package/dist/cjs/MenuItem/index.js.map +1 -1
  98. package/dist/cjs/Modal/index.js +2 -2
  99. package/dist/cjs/Modal/index.js.map +1 -1
  100. package/dist/cjs/Modal/utils/defaultLocale.js.map +1 -1
  101. package/dist/cjs/Navigation/index.js +2 -2
  102. package/dist/cjs/Navigation/index.js.map +1 -1
  103. package/dist/cjs/Navigation/utils/useScrollFlags.js.map +1 -1
  104. package/dist/cjs/NavigationItem/index.js +2 -2
  105. package/dist/cjs/NavigationItem/index.js.map +1 -1
  106. package/dist/cjs/PageContent/index.js +2 -2
  107. package/dist/cjs/PageContent/index.js.map +1 -1
  108. package/dist/cjs/PageHeader/index.js +2 -2
  109. package/dist/cjs/PageHeader/index.js.map +1 -1
  110. package/dist/cjs/PageHeader/utils/defaultLocale.js.map +1 -1
  111. package/dist/cjs/PageHeaderInputSearch/index.js +2 -2
  112. package/dist/cjs/PageHeaderInputSearch/index.js.map +1 -1
  113. package/dist/cjs/PageHeaderInputSearch/utils/defaultLocale.js +1 -1
  114. package/dist/cjs/PageHeaderInputSearch/utils/defaultLocale.js.map +1 -1
  115. package/dist/cjs/PageHeaderSkeleton/index.js +2 -2
  116. package/dist/cjs/PageHeaderSkeleton/index.js.map +1 -1
  117. package/dist/cjs/ParagraphSkeleton/index.js +2 -2
  118. package/dist/cjs/ParagraphSkeleton/index.js.map +1 -1
  119. package/dist/cjs/Popover/index.js +2 -2
  120. package/dist/cjs/Popover/index.js.map +1 -1
  121. package/dist/cjs/Popover/utils/usePopoverPosition.js +1 -1
  122. package/dist/cjs/Popover/utils/usePopoverPosition.js.map +1 -1
  123. package/dist/cjs/Progress/index.js +2 -2
  124. package/dist/cjs/Progress/index.js.map +1 -1
  125. package/dist/cjs/RadioGroup/index.js +2 -2
  126. package/dist/cjs/RadioGroup/index.js.map +1 -1
  127. package/dist/cjs/RadioGroupSkeleton/index.js +2 -2
  128. package/dist/cjs/RadioGroupSkeleton/index.js.map +1 -1
  129. package/dist/cjs/Result/index.js +2 -2
  130. package/dist/cjs/Result/index.js.map +1 -1
  131. package/dist/cjs/ScrollButton/index.js +2 -2
  132. package/dist/cjs/ScrollButton/index.js.map +1 -1
  133. package/dist/cjs/ScrollButton/utils/useContainerPosition.js.map +1 -1
  134. package/dist/cjs/ScrollButton/utils/useVisibility.js.map +1 -1
  135. package/dist/cjs/Select/index.js +3 -3
  136. package/dist/cjs/Select/index.js.map +1 -1
  137. package/dist/cjs/Select/utils/defaultLocale.js.map +1 -1
  138. package/dist/cjs/Skeleton/index.js +2 -2
  139. package/dist/cjs/Skeleton/index.js.map +1 -1
  140. package/dist/cjs/Switch/index.js +2 -2
  141. package/dist/cjs/Switch/index.js.map +1 -1
  142. package/dist/cjs/SwitchSkeleton/index.js +1 -1
  143. package/dist/cjs/SwitchSkeleton/index.js.map +1 -1
  144. package/dist/cjs/Tag/index.js +2 -2
  145. package/dist/cjs/Tag/index.js.map +1 -1
  146. package/dist/cjs/TagLink/index.js +2 -2
  147. package/dist/cjs/TagLink/index.js.map +1 -1
  148. package/dist/cjs/TagList/index.js +2 -2
  149. package/dist/cjs/TagList/index.js.map +1 -1
  150. package/dist/cjs/TagListSkeleton/index.js +2 -2
  151. package/dist/cjs/TagListSkeleton/index.js.map +1 -1
  152. package/dist/cjs/TagSkeleton/index.js +2 -2
  153. package/dist/cjs/TagSkeleton/index.js.map +1 -1
  154. package/dist/cjs/TextArea/index.js +2 -2
  155. package/dist/cjs/TextArea/index.js.map +1 -1
  156. package/dist/cjs/TextAreaSkeleton/index.js +1 -1
  157. package/dist/cjs/TextAreaSkeleton/index.js.map +1 -1
  158. package/dist/cjs/ThemeSwitcher/index.js +2 -2
  159. package/dist/cjs/ThemeSwitcher/index.js.map +1 -1
  160. package/dist/cjs/TimePicker/index.js +2 -2
  161. package/dist/cjs/TimePicker/index.js.map +1 -1
  162. package/dist/cjs/Video/index.js +2 -2
  163. package/dist/cjs/Video/index.js.map +1 -1
  164. package/dist/cjs/index.js +1 -1
  165. package/dist/cjs/index.js.map +1 -1
  166. package/dist/cjs/message/AlertIcon.js.map +1 -1
  167. package/dist/cjs/message/Message.js +1 -1
  168. package/dist/cjs/message/Message.js.map +1 -1
  169. package/dist/cjs/message/index.js +1 -1
  170. package/dist/cjs/message/index.js.map +1 -1
  171. package/dist/cjs/message/styles.js.map +1 -1
  172. package/dist/esm/@types/emotion.d.js.map +1 -1
  173. package/dist/esm/Alert/index.js.map +1 -1
  174. package/dist/esm/Avatar/index.js.map +1 -1
  175. package/dist/esm/Avatar/utils/nameToInitials.js.map +1 -1
  176. package/dist/esm/Avatar/utils/strToHue.js.map +1 -1
  177. package/dist/esm/AvatarSkeleton/index.js.map +1 -1
  178. package/dist/esm/Badge/index.js +68 -0
  179. package/dist/esm/Badge/index.js.map +1 -0
  180. package/dist/esm/Breadcrumb/index.js.map +1 -1
  181. package/dist/esm/BreadcrumbItem/index.js.map +1 -1
  182. package/dist/esm/Button/ButtonContent.js.map +1 -1
  183. package/dist/esm/Button/index.js.map +1 -1
  184. package/dist/esm/Button/utils/useButtonColors.js.map +1 -1
  185. package/dist/esm/ButtonLink/index.js.map +1 -1
  186. package/dist/esm/Checkbox/index.js.map +1 -1
  187. package/dist/esm/CheckboxSkeleton/index.js.map +1 -1
  188. package/dist/esm/DatePicker/DatePickerCalendar.js.map +1 -1
  189. package/dist/esm/DatePicker/index.js.map +1 -1
  190. package/dist/esm/Drawer/index.js.map +1 -1
  191. package/dist/esm/Form/FormConfigContext.js.map +1 -1
  192. package/dist/esm/Form/index.js.map +1 -1
  193. package/dist/esm/FormDivider/index.js.map +1 -1
  194. package/dist/esm/FormItem/index.js.map +1 -1
  195. package/dist/esm/Gallery/Status.js.map +1 -1
  196. package/dist/esm/Gallery/index.js.map +1 -1
  197. package/dist/esm/GlobalStyles/index.js.map +1 -1
  198. package/dist/esm/GlobalStyles/resetStyles.js.map +1 -1
  199. package/dist/esm/GlobalStyles/typographyStyles.js.map +1 -1
  200. package/dist/esm/HeaderSkeleton/index.js.map +1 -1
  201. package/dist/esm/Image/index.js.map +1 -1
  202. package/dist/esm/ImageSkeleton/index.js.map +1 -1
  203. package/dist/esm/Input/index.js.map +1 -1
  204. package/dist/esm/Input/utils/getFocusableElements.js.map +1 -1
  205. package/dist/esm/InputNumber/index.js.map +1 -1
  206. package/dist/esm/InputNumber/utils/defaultLocale.js.map +1 -1
  207. package/dist/esm/InputPassword/index.js.map +1 -1
  208. package/dist/esm/InputPassword/utils/defaultLocale.js.map +1 -1
  209. package/dist/esm/InputSearch/index.js.map +1 -1
  210. package/dist/esm/InputSearch/utils/defaultLocale.js.map +1 -1
  211. package/dist/esm/InputSkeleton/index.js.map +1 -1
  212. package/dist/esm/Layout/LayoutContext.js.map +1 -1
  213. package/dist/esm/Layout/index.js.map +1 -1
  214. package/dist/esm/Link/index.js.map +1 -1
  215. package/dist/esm/LinkButton/index.js.map +1 -1
  216. package/dist/esm/List/WindowScroller.js.map +1 -1
  217. package/dist/esm/List/index.js.map +1 -1
  218. package/dist/esm/List/utils/bodyPointerEvents.js.map +1 -1
  219. package/dist/esm/List/utils/frameTimeout.js.map +1 -1
  220. package/dist/esm/List/utils/useRWLoadNext.js.map +1 -1
  221. package/dist/esm/ListItem/index.js.map +1 -1
  222. package/dist/esm/ListItemActions/index.js.map +1 -1
  223. package/dist/esm/ListItemLink/index.js.map +1 -1
  224. package/dist/esm/ListSkeleton/index.js.map +1 -1
  225. package/dist/esm/LogoLink/index.js.map +1 -1
  226. package/dist/esm/Menu/index.js.map +1 -1
  227. package/dist/esm/Menu/utils/useFocusWithArrows.js.map +1 -1
  228. package/dist/esm/MenuDivider/index.js.map +1 -1
  229. package/dist/esm/MenuGroup/index.js.map +1 -1
  230. package/dist/esm/MenuItem/index.js.map +1 -1
  231. package/dist/esm/Modal/index.js.map +1 -1
  232. package/dist/esm/Modal/utils/defaultLocale.js.map +1 -1
  233. package/dist/esm/Navigation/index.js.map +1 -1
  234. package/dist/esm/Navigation/utils/useScrollFlags.js.map +1 -1
  235. package/dist/esm/NavigationItem/index.js.map +1 -1
  236. package/dist/esm/PageContent/index.js.map +1 -1
  237. package/dist/esm/PageHeader/index.js.map +1 -1
  238. package/dist/esm/PageHeader/utils/defaultLocale.js.map +1 -1
  239. package/dist/esm/PageHeaderInputSearch/index.js.map +1 -1
  240. package/dist/esm/PageHeaderInputSearch/utils/defaultLocale.js.map +1 -1
  241. package/dist/esm/PageHeaderSkeleton/index.js.map +1 -1
  242. package/dist/esm/ParagraphSkeleton/index.js.map +1 -1
  243. package/dist/esm/Popover/index.js.map +1 -1
  244. package/dist/esm/Popover/utils/usePopoverPosition.js.map +1 -1
  245. package/dist/esm/Progress/index.js.map +1 -1
  246. package/dist/esm/RadioGroup/index.js.map +1 -1
  247. package/dist/esm/RadioGroupSkeleton/index.js.map +1 -1
  248. package/dist/esm/Result/index.js.map +1 -1
  249. package/dist/esm/ScrollButton/index.js.map +1 -1
  250. package/dist/esm/ScrollButton/utils/useContainerPosition.js.map +1 -1
  251. package/dist/esm/ScrollButton/utils/useVisibility.js.map +1 -1
  252. package/dist/esm/Select/index.js.map +1 -1
  253. package/dist/esm/Select/utils/defaultLocale.js.map +1 -1
  254. package/dist/esm/Skeleton/index.js.map +1 -1
  255. package/dist/esm/Switch/index.js.map +1 -1
  256. package/dist/esm/SwitchSkeleton/index.js.map +1 -1
  257. package/dist/esm/Tag/index.js.map +1 -1
  258. package/dist/esm/TagLink/index.js.map +1 -1
  259. package/dist/esm/TagList/index.js.map +1 -1
  260. package/dist/esm/TagListSkeleton/index.js.map +1 -1
  261. package/dist/esm/TagSkeleton/index.js.map +1 -1
  262. package/dist/esm/TextArea/index.js.map +1 -1
  263. package/dist/esm/TextAreaSkeleton/index.js.map +1 -1
  264. package/dist/esm/ThemeSwitcher/index.js.map +1 -1
  265. package/dist/esm/TimePicker/index.js.map +1 -1
  266. package/dist/esm/Video/index.js.map +1 -1
  267. package/dist/esm/index.js.map +1 -1
  268. package/dist/esm/message/AlertIcon.js.map +1 -1
  269. package/dist/esm/message/Message.js.map +1 -1
  270. package/dist/esm/message/index.js.map +1 -1
  271. package/dist/esm/message/styles.js.map +1 -1
  272. package/dist/types/Badge/index.d.ts +11 -0
  273. package/dist/types/Badge/index.d.ts.map +1 -0
  274. package/dist/types/ButtonLink/index.d.ts +2 -4
  275. package/dist/types/ButtonLink/index.d.ts.map +1 -1
  276. package/dist/types/ThemeSwitcher/index.d.ts +2 -4
  277. package/dist/types/ThemeSwitcher/index.d.ts.map +1 -1
  278. package/package.json +9 -9
  279. package/src/Badge/index.tsx +115 -0
  280. package/src/Button/index.tsx +2 -2
  281. package/src/GlobalStyles/index.mdx +34 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Message.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_AlertIcon","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","fadeIn","keyframes","MESSAGE_HEIGHT_EM","MESSAGE_MARGIN_TOP_EM","MESSAGE_DURATION_MS","exports","fadeOut","Container","styled","omitEmotionProps","p","clr","backgroundColor","textColor","transitionDelay","Text","span","ellipsisStyles","Message","forwardRef","_ref","ref","type","text","info","light","messageInfoColorBg","success","messageSuccessColorBg","error","messageErrorColorBg","createElement","colorText","role","displayName","_default"],"sources":["../../../src/message/Message.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr, Color, light } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport AlertIcon from './AlertIcon';\n\nexport interface MessageProps {\n type: 'info' | 'success' | 'error';\n text: string;\n}\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst MESSAGE_HEIGHT_EM = 2.5;\nconst MESSAGE_MARGIN_TOP_EM = 0.7;\nexport const MESSAGE_DURATION_MS = 3000;\n\nconst fadeOut = keyframes`\n from {\n opacity: 1;\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n height: 0;\n margin-top: 0;\n transform: translateY(-100%);\n }\n`;\n\ninterface ContainerProps extends Pick<MessageProps, 'type'> {\n textColor: Color;\n backgroundColor: Color;\n transitionDelay: number;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n\n box-sizing: border-box;\n padding: 0 1em;\n max-width: 90%;\n\n border-radius: 0.25em;\n box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);\n background-color: ${(p) => clr(p.backgroundColor)};\n color: ${(p) => clr(p.textColor)};\n\n pointer-events: auto;\n overflow: hidden;\n\n animation:\n ${fadeIn} ${(p) => p.transitionDelay}ms,\n ${fadeOut} ${(p) => p.transitionDelay}ms\n ${(p) => MESSAGE_DURATION_MS - p.transitionDelay}ms;\n animation-fill-mode: forwards;\n`;\n\nconst Text = styled.span`\n ${ellipsisStyles};\n`;\n\nconst Message = forwardRef<HTMLDivElement, MessageProps>(\n ({ type, text }, ref) => {\n const backgroundColor = {\n info: light.messageInfoColorBg,\n success: light.messageSuccessColorBg,\n error: light.messageErrorColorBg,\n }[type];\n\n return (\n <Container\n ref={ref}\n type={type}\n textColor={light.colorText}\n backgroundColor={backgroundColor}\n transitionDelay={light.transitionDelay}\n role='alert'\n >\n <AlertIcon type={type} />\n <Text>{text}</Text>\n </Container>\n );\n }\n);\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Message.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_AlertIcon","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","fadeIn","keyframes","MESSAGE_HEIGHT_EM","MESSAGE_MARGIN_TOP_EM","MESSAGE_DURATION_MS","exports","fadeOut","Container","styled","omitEmotionProps","p","clr","backgroundColor","textColor","transitionDelay","Text","span","ellipsisStyles","Message","forwardRef","_ref","ref","type","text","info","light","messageInfoColorBg","success","messageSuccessColorBg","error","messageErrorColorBg","createElement","colorText","role","displayName","_default"],"sources":["../../../src/message/Message.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr, Color, light } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport AlertIcon from './AlertIcon';\n\nexport interface MessageProps {\n type: 'info' | 'success' | 'error';\n text: string;\n}\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst MESSAGE_HEIGHT_EM = 2.5;\nconst MESSAGE_MARGIN_TOP_EM = 0.7;\nexport const MESSAGE_DURATION_MS = 3000;\n\nconst fadeOut = keyframes`\n from {\n opacity: 1;\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n height: 0;\n margin-top: 0;\n transform: translateY(-100%);\n }\n`;\n\ninterface ContainerProps extends Pick<MessageProps, 'type'> {\n textColor: Color;\n backgroundColor: Color;\n transitionDelay: number;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n\n box-sizing: border-box;\n padding: 0 1em;\n max-width: 90%;\n\n border-radius: 0.25em;\n box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);\n background-color: ${(p) => clr(p.backgroundColor)};\n color: ${(p) => clr(p.textColor)};\n\n pointer-events: auto;\n overflow: hidden;\n\n animation:\n ${fadeIn} ${(p) => p.transitionDelay}ms,\n ${fadeOut} ${(p) => p.transitionDelay}ms\n ${(p) => MESSAGE_DURATION_MS - p.transitionDelay}ms;\n animation-fill-mode: forwards;\n`;\n\nconst Text = styled.span`\n ${ellipsisStyles};\n`;\n\nconst Message = forwardRef<HTMLDivElement, MessageProps>(\n ({ type, text }, ref) => {\n const backgroundColor = {\n info: light.messageInfoColorBg,\n success: light.messageSuccessColorBg,\n error: light.messageErrorColorBg,\n }[type];\n\n return (\n <Container\n ref={ref}\n type={type}\n textColor={light.colorText}\n backgroundColor={backgroundColor}\n transitionDelay={light.transitionDelay}\n role='alert'\n >\n <AlertIcon type={type} />\n <Text>{text}</Text>\n </Container>\n );\n }\n);\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":"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","ignoreList":[]}
@@ -10,7 +10,7 @@ var _client = _interopRequireDefault(require("react-dom/client"));
10
10
  var _Message = _interopRequireWildcard(require("./Message"));
11
11
  var _styles = require("./styles");
12
12
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
15
  var containerElement;
16
16
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_Message","_interopRequireWildcard","_styles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","containerElement","getContainer","document","createElement","setStylesToHtmlElement","containerStyles","body","appendChild","deleteContainerIfNoChildNodes","hasChildNodes","removeChild","send","type","text","container","messageContainer","messageContainerStyles","messageElement","root","ReactDOM","createRoot","render","setTimeout","unmount","MESSAGE_DURATION_MS","message","info","success","error","_default","exports"],"sources":["../../../src/message/index.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { AlertProps } from '../Alert';\nimport Message, { MESSAGE_DURATION_MS } from './Message';\nimport {\n containerStyles,\n messageContainerStyles,\n setStylesToHtmlElement,\n} from './styles';\n\nlet containerElement: HTMLElement | null;\n\n/**\n * Creates the container for storing messages.\n */\nconst getContainer = () => {\n if (!containerElement) {\n containerElement = document.createElement('div');\n setStylesToHtmlElement(containerElement, containerStyles);\n document.body.appendChild(containerElement);\n }\n return containerElement;\n};\n\n/**\n * Delete the container if there are no more messages in it.\n */\nconst deleteContainerIfNoChildNodes = () => {\n if (!containerElement || containerElement.hasChildNodes()) return;\n document.body.removeChild(containerElement);\n containerElement = null;\n};\n\n/**\n * Renders a new message.\n */\nconst send = (type: AlertProps['type'], text: string) => {\n // Create a new container for the message\n const container = getContainer();\n const messageContainer = document.createElement('div');\n setStylesToHtmlElement(messageContainer, messageContainerStyles);\n container.appendChild(messageContainer);\n\n // Render the message element\n const messageElement = <Message type={type} text={text} />;\n const root = ReactDOM.createRoot(messageContainer);\n root.render(messageElement);\n\n // Delete the message container after N ms\n setTimeout(() => {\n root.unmount();\n container.removeChild(messageContainer);\n deleteContainerIfNoChildNodes();\n }, MESSAGE_DURATION_MS);\n};\n\nconst message: Record<AlertProps['type'], (text: string) => void> = {\n info: (text) => send('info', text),\n success: (text) => send('success', text),\n error: (text) => send('error', text),\n};\n\nexport default message;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_Message","_interopRequireWildcard","_styles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","containerElement","getContainer","document","createElement","setStylesToHtmlElement","containerStyles","body","appendChild","deleteContainerIfNoChildNodes","hasChildNodes","removeChild","send","type","text","container","messageContainer","messageContainerStyles","messageElement","root","ReactDOM","createRoot","render","setTimeout","unmount","MESSAGE_DURATION_MS","message","info","success","error","_default","exports"],"sources":["../../../src/message/index.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { AlertProps } from '../Alert';\nimport Message, { MESSAGE_DURATION_MS } from './Message';\nimport {\n containerStyles,\n messageContainerStyles,\n setStylesToHtmlElement,\n} from './styles';\n\nlet containerElement: HTMLElement | null;\n\n/**\n * Creates the container for storing messages.\n */\nconst getContainer = () => {\n if (!containerElement) {\n containerElement = document.createElement('div');\n setStylesToHtmlElement(containerElement, containerStyles);\n document.body.appendChild(containerElement);\n }\n return containerElement;\n};\n\n/**\n * Delete the container if there are no more messages in it.\n */\nconst deleteContainerIfNoChildNodes = () => {\n if (!containerElement || containerElement.hasChildNodes()) return;\n document.body.removeChild(containerElement);\n containerElement = null;\n};\n\n/**\n * Renders a new message.\n */\nconst send = (type: AlertProps['type'], text: string) => {\n // Create a new container for the message\n const container = getContainer();\n const messageContainer = document.createElement('div');\n setStylesToHtmlElement(messageContainer, messageContainerStyles);\n container.appendChild(messageContainer);\n\n // Render the message element\n const messageElement = <Message type={type} text={text} />;\n const root = ReactDOM.createRoot(messageContainer);\n root.render(messageElement);\n\n // Delete the message container after N ms\n setTimeout(() => {\n root.unmount();\n container.removeChild(messageContainer);\n deleteContainerIfNoChildNodes();\n }, MESSAGE_DURATION_MS);\n};\n\nconst message: Record<AlertProps['type'], (text: string) => void> = {\n info: (text) => send('info', text),\n success: (text) => send('success', text),\n error: (text) => send('error', text),\n};\n\nexport default message;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","names":["containerStyles","exports","position","top","left","right","zIndex","pointerEvents","display","flexDirection","messageContainerStyles","justifyContent","setStylesToHtmlElement","element","styles","Object","entries","forEach","_ref","_ref2","_slicedToArray","key","value","style"],"sources":["../../../src/message/styles.ts"],"sourcesContent":["export const containerStyles: Partial<CSSStyleDeclaration> = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n zIndex: '1001',\n pointerEvents: 'none',\n display: 'flex',\n flexDirection: 'column',\n};\n\nexport const messageContainerStyles: Partial<CSSStyleDeclaration> = {\n display: 'flex',\n justifyContent: 'center',\n};\n\nexport const setStylesToHtmlElement = (\n element: HTMLElement,\n styles: Partial<CSSStyleDeclaration>\n): void => {\n Object.entries(styles).forEach(([key, value]) => {\n // eslint-disable-next-line no-param-reassign\n element.style[key] = value;\n });\n};\n"],"mappings":";;;;;;;;;;;;AAAO,IAAMA,eAA6C,GAAAC,OAAA,CAAAD,eAAA,GAAG;EAC3DE,QAAQ,EAAE,OAAO;EACjBC,GAAG,EAAE,GAAG;EACRC,IAAI,EAAE,GAAG;EACTC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,MAAM;EACdC,aAAa,EAAE,MAAM;EACrBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC;AAEM,IAAMC,sBAAoD,GAAAT,OAAA,CAAAS,sBAAA,GAAG;EAClEF,OAAO,EAAE,MAAM;EACfG,cAAc,EAAE;AAClB,CAAC;AAEM,IAAMC,sBAAsB,GAAAX,OAAA,CAAAW,sBAAA,GAAG,SAAzBA,sBAAsBA,CACjCC,OAAoB,EACpBC,MAAoC,EAC3B;EACTC,MAAM,CAACC,OAAO,CAACF,MAAM,CAAC,CAACG,OAAO,CAAC,UAAAC,IAAA,EAAkB;IAAA,IAAAC,KAAA,GAAAC,cAAA,CAAAF,IAAA;MAAhBG,GAAG,GAAAF,KAAA;MAAEG,KAAK,GAAAH,KAAA;IACzC;IACAN,OAAO,CAACU,KAAK,CAACF,GAAG,CAAC,GAAGC,KAAK;EAC5B,CAAC,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","names":["containerStyles","exports","position","top","left","right","zIndex","pointerEvents","display","flexDirection","messageContainerStyles","justifyContent","setStylesToHtmlElement","element","styles","Object","entries","forEach","_ref","_ref2","_slicedToArray","key","value","style"],"sources":["../../../src/message/styles.ts"],"sourcesContent":["export const containerStyles: Partial<CSSStyleDeclaration> = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n zIndex: '1001',\n pointerEvents: 'none',\n display: 'flex',\n flexDirection: 'column',\n};\n\nexport const messageContainerStyles: Partial<CSSStyleDeclaration> = {\n display: 'flex',\n justifyContent: 'center',\n};\n\nexport const setStylesToHtmlElement = (\n element: HTMLElement,\n styles: Partial<CSSStyleDeclaration>\n): void => {\n Object.entries(styles).forEach(([key, value]) => {\n // eslint-disable-next-line no-param-reassign\n element.style[key] = value;\n });\n};\n"],"mappings":";;;;;;;;;;;;AAAO,IAAMA,eAA6C,GAAAC,OAAA,CAAAD,eAAA,GAAG;EAC3DE,QAAQ,EAAE,OAAO;EACjBC,GAAG,EAAE,GAAG;EACRC,IAAI,EAAE,GAAG;EACTC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,MAAM;EACdC,aAAa,EAAE,MAAM;EACrBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC;AAEM,IAAMC,sBAAoD,GAAAT,OAAA,CAAAS,sBAAA,GAAG;EAClEF,OAAO,EAAE,MAAM;EACfG,cAAc,EAAE;AAClB,CAAC;AAEM,IAAMC,sBAAsB,GAAAX,OAAA,CAAAW,sBAAA,GAAG,SAAzBA,sBAAsBA,CACjCC,OAAoB,EACpBC,MAAoC,EAC3B;EACTC,MAAM,CAACC,OAAO,CAACF,MAAM,CAAC,CAACG,OAAO,CAAC,UAAAC,IAAA,EAAkB;IAAA,IAAAC,KAAA,GAAAC,cAAA,CAAAF,IAAA;MAAhBG,GAAG,GAAAF,KAAA;MAAEG,KAAK,GAAAH,KAAA;IACzC;IACAN,OAAO,CAACU,KAAK,CAACF,GAAG,CAAC,GAAGC,KAAK;EAC5B,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB"}
1
+ {"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["css","styled","CheckCircle","CloseCircle","InfoCircle","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","createElement","_extends","role","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n\n {typeof children === 'string' ? <span>{children}</span> : children}\n </Container>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["css","styled","CheckCircle","CloseCircle","InfoCircle","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","createElement","_extends","role","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n\n {typeof children === 'string' ? <span>{children}</span> : children}\n </Container>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","IconContainer","div","Initials","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","children","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","createElement","_extends","url","cropped","initials","role","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n font-size: 0.6em;\n line-height: 0.6;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n children,\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return (\n <IconContainer>\n <User />\n </IconContainer>\n );\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {children ? (\n <IconContainer>{children}</IconContainer>\n ) : (\n renderChildren()\n )}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","IconContainer","div","Initials","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","children","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","createElement","_extends","url","cropped","initials","role","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n font-size: 0.6em;\n line-height: 0.6;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n children,\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return (\n <IconContainer>\n <User />\n </IconContainer>\n );\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {children ? (\n <IconContainer>{children}</IconContainer>\n ) : (\n renderChildren()\n )}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"nameToInitials.js","names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"sourcesContent":["interface Name {\n firstName?: string;\n lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n const first = firstName ? firstName.charAt(0) : '';\n const second = lastName ? lastName.charAt(0) : '';\n return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"mappings":"AAKA,MAAMA,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAe,CAAC,KAAa;EAChE,MAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EAClD,MAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EACjD,OAAQ,GAAED,KAAM,GAAEE,MAAO,EAAC,CAACC,WAAW,CAAC,CAAC;AAC1C,CAAC;AAED,eAAeN,cAAc"}
1
+ {"version":3,"file":"nameToInitials.js","names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"sourcesContent":["interface Name {\n firstName?: string;\n lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n const first = firstName ? firstName.charAt(0) : '';\n const second = lastName ? lastName.charAt(0) : '';\n return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"mappings":"AAKA,MAAMA,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAe,CAAC,KAAa;EAChE,MAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EAClD,MAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EACjD,OAAQ,GAAED,KAAM,GAAEE,MAAO,EAAC,CAACC,WAAW,CAAC,CAAC;AAC1C,CAAC;AAED,eAAeN,cAAc","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"strToHue.js","names":["strToHue","str","hash","i","length","charCodeAt"],"sources":["../../../../src/Avatar/utils/strToHue.ts"],"sourcesContent":["/**\n * Return the hue of the color by string.\n */\nconst strToHue = (str: string): number => {\n let hash = 0;\n for (let i = 0; i < str.length; i += 1) {\n // eslint-disable-next-line no-bitwise\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n return hash % 360;\n};\n\nexport default strToHue;\n"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,QAAQ,GAAIC,GAAW,IAAa;EACxC,IAAIC,IAAI,GAAG,CAAC;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,GAAG,CAACG,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;IACtC;IACAD,IAAI,GAAGD,GAAG,CAACI,UAAU,CAACF,CAAC,CAAC,IAAI,CAACD,IAAI,IAAI,CAAC,IAAIA,IAAI,CAAC;EACjD;EACA,OAAOA,IAAI,GAAG,GAAG;AACnB,CAAC;AAED,eAAeF,QAAQ"}
1
+ {"version":3,"file":"strToHue.js","names":["strToHue","str","hash","i","length","charCodeAt"],"sources":["../../../../src/Avatar/utils/strToHue.ts"],"sourcesContent":["/**\n * Return the hue of the color by string.\n */\nconst strToHue = (str: string): number => {\n let hash = 0;\n for (let i = 0; i < str.length; i += 1) {\n // eslint-disable-next-line no-bitwise\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n return hash % 360;\n};\n\nexport default strToHue;\n"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,QAAQ,GAAIC,GAAW,IAAa;EACxC,IAAIC,IAAI,GAAG,CAAC;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,GAAG,CAACG,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;IACtC;IACAD,IAAI,GAAGD,GAAG,CAACI,UAAU,CAACF,CAAC,CAAC,IAAI,CAACD,IAAI,IAAI,CAAC,IAAIA,IAAI,CAAC;EACjD;EACA,OAAOA,IAAI,GAAG,GAAG;AACnB,CAAC;AAED,eAAeF,QAAQ","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","Container","AvatarSkeleton","size","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n ({ size = '2em', ...rest }, ref) => (\n <Container size={size} {...rest} ref={ref}>\n <Skeleton width='1em' />\n </Container>\n )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMM,cAAc,gBAAGH,UAAU,CAC/B,CAAC;EAAEI,IAAI,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC7BP,KAAA,CAAAQ,aAAA,CAACL,SAAS,EAAAM,QAAA;EAACJ,IAAI,EAAEA;AAAK,GAAKC,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACxCP,KAAA,CAAAQ,aAAA,CAACN,QAAQ;EAACQ,KAAK,EAAC;AAAK,CAAE,CACd,CAEf,CAAC;AAEDN,cAAc,CAACO,WAAW,GAAG,gBAAgB;AAE7C,eAAeP,cAAc"}
1
+ {"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","Container","AvatarSkeleton","size","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n ({ size = '2em', ...rest }, ref) => (\n <Container size={size} {...rest} ref={ref}>\n <Skeleton width='1em' />\n </Container>\n )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMM,cAAc,gBAAGH,UAAU,CAC/B,CAAC;EAAEI,IAAI,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC7BP,KAAA,CAAAQ,aAAA,CAACL,SAAS,EAAAM,QAAA;EAACJ,IAAI,EAAEA;AAAK,GAAKC,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACxCP,KAAA,CAAAQ,aAAA,CAACN,QAAQ;EAACQ,KAAK,EAAC;AAAK,CAAE,CACd,CAEf,CAAC;AAEDN,cAAc,CAACO,WAAW,GAAG,gBAAgB;AAE7C,eAAeP,cAAc","ignoreList":[]}
@@ -0,0 +1,68 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+ import styled from '@emotion/styled';
3
+ import { sizeStyles } from '@os-design/styles';
4
+ import { clr } from '@os-design/theming';
5
+ import { omitEmotionProps } from '@os-design/utils';
6
+ import React, { forwardRef, useMemo } from 'react';
7
+ const Container = styled.div`
8
+ display: inline-block;
9
+ position: relative;
10
+ `;
11
+ const HEIGHT_EM = 1.5;
12
+ const Sized = styled('div', omitEmotionProps('size'))`
13
+ ${sizeStyles};
14
+ `;
15
+ const Value = styled('div', omitEmotionProps('top', 'right'))`
16
+ position: absolute;
17
+ top: ${p => p.top};
18
+ right: ${p => p.right};
19
+ transform: translate(50%, -50%);
20
+
21
+ height: ${HEIGHT_EM}em;
22
+ min-width: ${HEIGHT_EM}em;
23
+ padding: 0 0.3em;
24
+ border-radius: ${HEIGHT_EM / 2}em;
25
+ box-sizing: border-box;
26
+
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+
31
+ background-color: ${p => clr(p.theme.badgeColorBg)};
32
+ color: ${p => clr(p.theme.badgeColorText)};
33
+ border: 1px solid ${p => clr(p.theme.colorBg)};
34
+
35
+ font-size: ${p => p.theme.sizes.small}em;
36
+ font-weight: 500;
37
+ line-height: 1;
38
+ `;
39
+ const Plus = styled.div`
40
+ font-size: ${p => p.theme.sizes.small}em;
41
+ padding-bottom: 2px;
42
+ `;
43
+
44
+ /**
45
+ * The number shown in the corner. Used to show the number of notifications.
46
+ */
47
+ const Badge = /*#__PURE__*/forwardRef(({
48
+ count = 0,
49
+ max = 99,
50
+ offset = '0',
51
+ size = '1em',
52
+ children,
53
+ ...rest
54
+ }, ref) => {
55
+ const value = useMemo(() => count > max ? /*#__PURE__*/React.createElement(React.Fragment, null, max, /*#__PURE__*/React.createElement(Plus, null, "+")) : count, [count, max]);
56
+ const [top, right] = useMemo(() => Array.isArray(offset) ? offset : [offset, offset], [offset]);
57
+ return value === 0 ? children : /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
58
+ ref: ref
59
+ }), children, /*#__PURE__*/React.createElement(Sized, {
60
+ size: size
61
+ }, /*#__PURE__*/React.createElement(Value, {
62
+ top: top,
63
+ right: right
64
+ }, value)));
65
+ });
66
+ Badge.displayName = 'Badge';
67
+ export default Badge;
68
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","div","HEIGHT_EM","Sized","Value","p","top","right","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","count","max","offset","size","children","rest","ref","value","createElement","Fragment","Array","isArray","_extends","displayName"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n /**\n * Number shown in the corner.\n * @default 0\n */\n count?: number;\n /**\n * The max number.\n * @default 99\n */\n max?: number;\n /**\n * Offset of the badge.\n * top/right | [top, right]\n * @default undefined\n */\n offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n display: inline-block;\n position: relative;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\ninterface ValueProps {\n top: string;\n right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n position: absolute;\n top: ${(p) => p.top};\n right: ${(p) => p.right};\n transform: translate(50%, -50%);\n\n height: ${HEIGHT_EM}em;\n min-width: ${HEIGHT_EM}em;\n padding: 0 0.3em;\n border-radius: ${HEIGHT_EM / 2}em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(p) => clr(p.theme.badgeColorBg)};\n color: ${(p) => clr(p.theme.badgeColorText)};\n border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n font-size: ${(p) => p.theme.sizes.small}em;\n font-weight: 500;\n line-height: 1;\n`;\n\nconst Plus = styled.div`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n ref\n ) => {\n const value = useMemo(\n () =>\n count > max ? (\n <>\n {max}\n <Plus>+</Plus>\n </>\n ) : (\n count\n ),\n [count, max]\n );\n\n const [top, right] = useMemo(\n () => (Array.isArray(offset) ? offset : [offset, offset]),\n [offset]\n );\n\n return value === 0 ? (\n children\n ) : (\n <Container {...rest} ref={ref}>\n {children}\n <Sized size={size}>\n <Value top={top} right={right}>\n {value}\n </Value>\n </Sized>\n </Container>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAsBlD,MAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAI;AAC7B;AACA;AACA,CAAC;AAED,MAAMC,SAAS,GAAG,GAAG;AAErB,MAAMC,KAAK,GAAGV,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AAChE,IAAIF,UAAW;AACf,CAAC;AAMD,MAAMU,KAAK,GAAGX,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAc;AAC1E;AACA,SAAUS,CAAC,IAAKA,CAAC,CAACC,GAAI;AACtB,WAAYD,CAAC,IAAKA,CAAC,CAACE,KAAM;AAC1B;AACA;AACA,YAAYL,SAAU;AACtB,eAAeA,SAAU;AACzB;AACA,mBAAmBA,SAAS,GAAG,CAAE;AACjC;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBG,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACC,YAAY,CAAE;AACvD,WAAYJ,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACE,cAAc,CAAE;AAC9C,sBAAuBL,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACG,OAAO,CAAE;AAClD;AACA,eAAgBN,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrB,MAAM,CAACQ,GAAI;AACxB,eAAgBI,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAME,KAAK,gBAAGjB,UAAU,CACtB,CACE;EAAEkB,KAAK,GAAG,CAAC;EAAEC,GAAG,GAAG,EAAE;EAAEC,MAAM,GAAG,GAAG;EAAEC,IAAI,GAAG,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACtEC,GAAG,KACA;EACH,MAAMC,KAAK,GAAGxB,OAAO,CACnB,MACEiB,KAAK,GAAGC,GAAG,gBACTpB,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QACGR,GAAG,eACJpB,KAAA,CAAA2B,aAAA,CAACV,IAAI,QAAC,GAAO,CACb,CAAC,GAEHE,KACD,EACH,CAACA,KAAK,EAAEC,GAAG,CACb,CAAC;EAED,MAAM,CAACX,GAAG,EAAEC,KAAK,CAAC,GAAGR,OAAO,CAC1B,MAAO2B,KAAK,CAACC,OAAO,CAACT,MAAM,CAAC,GAAGA,MAAM,GAAG,CAACA,MAAM,EAAEA,MAAM,CAAE,EACzD,CAACA,MAAM,CACT,CAAC;EAED,OAAOK,KAAK,KAAK,CAAC,GAChBH,QAAQ,gBAERvB,KAAA,CAAA2B,aAAA,CAACxB,SAAS,EAAA4B,QAAA,KAAKP,IAAI;IAAEC,GAAG,EAAEA;EAAI,IAC3BF,QAAQ,eACTvB,KAAA,CAAA2B,aAAA,CAACrB,KAAK;IAACgB,IAAI,EAAEA;EAAK,gBAChBtB,KAAA,CAAA2B,aAAA,CAACpB,KAAK;IAACE,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEA;EAAM,GAC3BgB,KACI,CACF,CACE,CACZ;AACH,CACF,CAAC;AAEDR,KAAK,CAACc,WAAW,GAAG,OAAO;AAE3B,eAAed,KAAK","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","enableScrollingStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","createElement","_extends","itemScope","itemType","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, ReactElement, useMemo } from 'react';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n 'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${enableScrollingStyles('x', false)};\n ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n const breadcrumbItems = useMemo(() => {\n const items: ReactElement[] = [];\n const childrenArray = React.Children.toArray(children);\n childrenArray.forEach((child, index) => {\n if (!React.isValidElement(child)) return;\n\n let element;\n const breadcrumbItemProps = {\n key: childIndex,\n position: index + 1,\n hasRightArrow: index < childrenArray.length - 1,\n };\n\n if (child.type === BreadcrumbItem) {\n element = React.cloneElement(child, breadcrumbItemProps);\n } else if (\n React.isValidElement(child.props.children) &&\n child.props.children.type === BreadcrumbItem\n ) {\n const breadcrumbItem = React.cloneElement(\n child.props.children,\n breadcrumbItemProps\n );\n element = React.cloneElement(\n child,\n {\n ...(child.props || {}),\n key: childIndex,\n },\n breadcrumbItem\n );\n }\n if (!element) return;\n\n items.push(element);\n childIndex += 1;\n });\n return items;\n }, [children]);\n\n if (breadcrumbItems.length === 0) return null;\n\n return (\n <nav aria-label={ariaLabel}>\n <Container\n itemScope\n itemType='https://schema.org/BreadcrumbList'\n {...rest}\n ref={ref}\n >\n {breadcrumbItems}\n </Container>\n </nav>\n );\n }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,qBAAqB,EAAEC,UAAU,QAAkB,mBAAmB;AAC/E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAgBC,OAAO,QAAQ,OAAO;AAChE,OAAOC,cAAc,MAAM,mBAAmB;AAO9C,MAAMC,SAAS,GAAGT,MAAM,CAAC,IAAI,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACnE;AACA;AACA;AACA;AACA;AACA,WAAYM,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA,IAAIX,qBAAqB,CAAC,GAAG,EAAE,KAAK,CAAE;AACtC,IAAIC,UAAW;AACf,CAAC;AAED,IAAIW,UAAU,GAAG,CAAC;;AAElB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,gBAAGR,UAAU,CAC3B,CAAC;EAAE,YAAY,EAAES,SAAS,GAAG,YAAY;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACtE,MAAMC,eAAe,GAAGZ,OAAO,CAAC,MAAM;IACpC,MAAMa,KAAqB,GAAG,EAAE;IAChC,MAAMC,aAAa,GAAGhB,KAAK,CAACiB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC;IACtDK,aAAa,CAACG,OAAO,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;MACtC,IAAI,eAACrB,KAAK,CAACsB,cAAc,CAACF,KAAK,CAAC,EAAE;MAElC,IAAIG,OAAO;MACX,MAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEjB,UAAU;QACfkB,QAAQ,EAAEL,KAAK,GAAG,CAAC;QACnBM,aAAa,EAAEN,KAAK,GAAGL,aAAa,CAACY,MAAM,GAAG;MAChD,CAAC;MAED,IAAIR,KAAK,CAACS,IAAI,KAAK1B,cAAc,EAAE;QACjCoB,OAAO,gBAAGvB,KAAK,CAAC8B,YAAY,CAACV,KAAK,EAAEI,mBAAmB,CAAC;MAC1D,CAAC,MAAM,IACL,cAAAxB,KAAK,CAACsB,cAAc,CAACF,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAAC,IAC1CS,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAACkB,IAAI,KAAK1B,cAAc,EAC5C;QACA,MAAM6B,cAAc,gBAAGhC,KAAK,CAAC8B,YAAY,CACvCV,KAAK,CAACW,KAAK,CAACpB,QAAQ,EACpBa,mBACF,CAAC;QACDD,OAAO,gBAAGvB,KAAK,CAAC8B,YAAY,CAC1BV,KAAK,EACL;UACE,IAAIA,KAAK,CAACW,KAAK,IAAI,CAAC,CAAC,CAAC;UACtBN,GAAG,EAAEjB;QACP,CAAC,EACDwB,cACF,CAAC;MACH;MACA,IAAI,CAACT,OAAO,EAAE;MAEdR,KAAK,CAACkB,IAAI,CAACV,OAAO,CAAC;MACnBf,UAAU,IAAI,CAAC;IACjB,CAAC,CAAC;IACF,OAAOO,KAAK;EACd,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,IAAIG,eAAe,CAACc,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAE7C,oBACE5B,KAAA,CAAAkC,aAAA;IAAK,cAAYxB;EAAU,gBACzBV,KAAA,CAAAkC,aAAA,CAAC9B,SAAS,EAAA+B,QAAA;IACRC,SAAS;IACTC,QAAQ,EAAC;EAAmC,GACxCzB,IAAI;IACRC,GAAG,EAAEA;EAAI,IAERC,eACQ,CACR,CAAC;AAEV,CACF,CAAC;AAEDL,UAAU,CAAC6B,WAAW,GAAG,YAAY;AAErC,eAAe7B,UAAU"}
1
+ {"version":3,"file":"index.js","names":["styled","enableScrollingStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","createElement","_extends","itemScope","itemType","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, ReactElement, useMemo } from 'react';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n 'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${enableScrollingStyles('x', false)};\n ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n const breadcrumbItems = useMemo(() => {\n const items: ReactElement[] = [];\n const childrenArray = React.Children.toArray(children);\n childrenArray.forEach((child, index) => {\n if (!React.isValidElement(child)) return;\n\n let element;\n const breadcrumbItemProps = {\n key: childIndex,\n position: index + 1,\n hasRightArrow: index < childrenArray.length - 1,\n };\n\n if (child.type === BreadcrumbItem) {\n element = React.cloneElement(child, breadcrumbItemProps);\n } else if (\n React.isValidElement(child.props.children) &&\n child.props.children.type === BreadcrumbItem\n ) {\n const breadcrumbItem = React.cloneElement(\n child.props.children,\n breadcrumbItemProps\n );\n element = React.cloneElement(\n child,\n {\n ...(child.props || {}),\n key: childIndex,\n },\n breadcrumbItem\n );\n }\n if (!element) return;\n\n items.push(element);\n childIndex += 1;\n });\n return items;\n }, [children]);\n\n if (breadcrumbItems.length === 0) return null;\n\n return (\n <nav aria-label={ariaLabel}>\n <Container\n itemScope\n itemType='https://schema.org/BreadcrumbList'\n {...rest}\n ref={ref}\n >\n {breadcrumbItems}\n </Container>\n </nav>\n );\n }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,qBAAqB,EAAEC,UAAU,QAAkB,mBAAmB;AAC/E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAgBC,OAAO,QAAQ,OAAO;AAChE,OAAOC,cAAc,MAAM,mBAAmB;AAO9C,MAAMC,SAAS,GAAGT,MAAM,CAAC,IAAI,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACnE;AACA;AACA;AACA;AACA;AACA,WAAYM,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA,IAAIX,qBAAqB,CAAC,GAAG,EAAE,KAAK,CAAE;AACtC,IAAIC,UAAW;AACf,CAAC;AAED,IAAIW,UAAU,GAAG,CAAC;;AAElB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,gBAAGR,UAAU,CAC3B,CAAC;EAAE,YAAY,EAAES,SAAS,GAAG,YAAY;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACtE,MAAMC,eAAe,GAAGZ,OAAO,CAAC,MAAM;IACpC,MAAMa,KAAqB,GAAG,EAAE;IAChC,MAAMC,aAAa,GAAGhB,KAAK,CAACiB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC;IACtDK,aAAa,CAACG,OAAO,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;MACtC,IAAI,eAACrB,KAAK,CAACsB,cAAc,CAACF,KAAK,CAAC,EAAE;MAElC,IAAIG,OAAO;MACX,MAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEjB,UAAU;QACfkB,QAAQ,EAAEL,KAAK,GAAG,CAAC;QACnBM,aAAa,EAAEN,KAAK,GAAGL,aAAa,CAACY,MAAM,GAAG;MAChD,CAAC;MAED,IAAIR,KAAK,CAACS,IAAI,KAAK1B,cAAc,EAAE;QACjCoB,OAAO,gBAAGvB,KAAK,CAAC8B,YAAY,CAACV,KAAK,EAAEI,mBAAmB,CAAC;MAC1D,CAAC,MAAM,IACL,cAAAxB,KAAK,CAACsB,cAAc,CAACF,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAAC,IAC1CS,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAACkB,IAAI,KAAK1B,cAAc,EAC5C;QACA,MAAM6B,cAAc,gBAAGhC,KAAK,CAAC8B,YAAY,CACvCV,KAAK,CAACW,KAAK,CAACpB,QAAQ,EACpBa,mBACF,CAAC;QACDD,OAAO,gBAAGvB,KAAK,CAAC8B,YAAY,CAC1BV,KAAK,EACL;UACE,IAAIA,KAAK,CAACW,KAAK,IAAI,CAAC,CAAC,CAAC;UACtBN,GAAG,EAAEjB;QACP,CAAC,EACDwB,cACF,CAAC;MACH;MACA,IAAI,CAACT,OAAO,EAAE;MAEdR,KAAK,CAACkB,IAAI,CAACV,OAAO,CAAC;MACnBf,UAAU,IAAI,CAAC;IACjB,CAAC,CAAC;IACF,OAAOO,KAAK;EACd,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,IAAIG,eAAe,CAACc,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAE7C,oBACE5B,KAAA,CAAAkC,aAAA;IAAK,cAAYxB;EAAU,gBACzBV,KAAA,CAAAkC,aAAA,CAAC9B,SAAS,EAAA+B,QAAA;IACRC,SAAS;IACTC,QAAQ,EAAC;EAAmC,GACxCzB,IAAI;IACRC,GAAG,EAAEA;EAAI,IAERC,eACQ,CACR,CAAC;AAEV,CACF,CAAC;AAEDL,UAAU,CAAC6B,WAAW,GAAG,YAAY;AAErC,eAAe7B,UAAU","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","Right","ellipsisStyles","clr","React","forwardRef","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","createElement","_extends","itemProp","itemScope","itemType","underline","content","toString","role","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Right } from '@os-design/icons';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n /**\n * Whether the item is the current page.\n * @default false\n */\n currentPage?: boolean;\n /**\n * Whether the right arrow located to the right of the text is visible.\n * @default false\n */\n hasRightArrow?: boolean;\n /**\n * The position of the breadcrumb item.\n * @default undefined\n */\n position?: number;\n}\n\nconst Container = styled.li`\n list-style: none;\n`;\n\nconst Name = styled.span`\n max-width: 20em;\n ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n color: ${(p) => clr(p.theme.colorText)};\n margin: 0 0.6em;\n font-size: 0.6em;\n opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n (\n {\n currentPage = false,\n hasRightArrow = false,\n position,\n href,\n children,\n ...rest\n },\n ref\n ) => (\n <Container>\n <Link\n itemProp='itemListElement'\n itemScope\n itemType='https://schema.org/ListItem'\n href={href}\n {...(currentPage\n ? {\n underline: 'always',\n 'aria-current': 'page',\n }\n : {})}\n {...rest}\n ref={ref}\n >\n <link itemProp='item' href={href} />\n {position && <meta itemProp='position' content={position.toString()} />}\n <Name itemProp='name'>{children}</Name>\n </Link>\n {hasRightArrow && <RightIcon role='presentation' />}\n </Container>\n )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAqB,SAAS;AAoBzC,MAAMC,SAAS,GAAGP,MAAM,CAACQ,EAAG;AAC5B;AACA,CAAC;AAED,MAAMC,IAAI,GAAGT,MAAM,CAACU,IAAK;AACzB;AACA,IAAIR,cAAe;AACnB,CAAC;AAED,MAAMS,SAAS,GAAGX,MAAM,CAACC,KAAK,CAAE;AAChC,WAAYW,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,cAAc,gBAAGV,UAAU,CAC/B,CACE;EACEW,WAAW,GAAG,KAAK;EACnBC,aAAa,GAAG,KAAK;EACrBC,QAAQ;EACRC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEHlB,KAAA,CAAAmB,aAAA,CAAChB,SAAS,qBACRH,KAAA,CAAAmB,aAAA,CAACjB,IAAI,EAAAkB,QAAA;EACHC,QAAQ,EAAC,iBAAiB;EAC1BC,SAAS;EACTC,QAAQ,EAAC,6BAA6B;EACtCR,IAAI,EAAEA;AAAK,GACNH,WAAW,GACZ;EACEY,SAAS,EAAE,QAAQ;EACnB,cAAc,EAAE;AAClB,CAAC,GACD,CAAC,CAAC,EACFP,IAAI;EACRC,GAAG,EAAEA;AAAI,iBAETlB,KAAA,CAAAmB,aAAA;EAAME,QAAQ,EAAC,MAAM;EAACN,IAAI,EAAEA;AAAK,CAAE,CAAC,EACnCD,QAAQ,iBAAId,KAAA,CAAAmB,aAAA;EAAME,QAAQ,EAAC,UAAU;EAACI,OAAO,EAAEX,QAAQ,CAACY,QAAQ,CAAC;AAAE,CAAE,CAAC,eACvE1B,KAAA,CAAAmB,aAAA,CAACd,IAAI;EAACgB,QAAQ,EAAC;AAAM,GAAEL,QAAe,CAClC,CAAC,EACNH,aAAa,iBAAIb,KAAA,CAAAmB,aAAA,CAACZ,SAAS;EAACoB,IAAI,EAAC;AAAc,CAAE,CACzC,CAEf,CAAC;AAEDhB,cAAc,CAACiB,WAAW,GAAG,gBAAgB;AAE7C,eAAejB,cAAc"}
1
+ {"version":3,"file":"index.js","names":["styled","Right","ellipsisStyles","clr","React","forwardRef","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","createElement","_extends","itemProp","itemScope","itemType","underline","content","toString","role","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Right } from '@os-design/icons';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n /**\n * Whether the item is the current page.\n * @default false\n */\n currentPage?: boolean;\n /**\n * Whether the right arrow located to the right of the text is visible.\n * @default false\n */\n hasRightArrow?: boolean;\n /**\n * The position of the breadcrumb item.\n * @default undefined\n */\n position?: number;\n}\n\nconst Container = styled.li`\n list-style: none;\n`;\n\nconst Name = styled.span`\n max-width: 20em;\n ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n color: ${(p) => clr(p.theme.colorText)};\n margin: 0 0.6em;\n font-size: 0.6em;\n opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n (\n {\n currentPage = false,\n hasRightArrow = false,\n position,\n href,\n children,\n ...rest\n },\n ref\n ) => (\n <Container>\n <Link\n itemProp='itemListElement'\n itemScope\n itemType='https://schema.org/ListItem'\n href={href}\n {...(currentPage\n ? {\n underline: 'always',\n 'aria-current': 'page',\n }\n : {})}\n {...rest}\n ref={ref}\n >\n <link itemProp='item' href={href} />\n {position && <meta itemProp='position' content={position.toString()} />}\n <Name itemProp='name'>{children}</Name>\n </Link>\n {hasRightArrow && <RightIcon role='presentation' />}\n </Container>\n )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,IAAI,MAAqB,SAAS;AAoBzC,MAAMC,SAAS,GAAGP,MAAM,CAACQ,EAAG;AAC5B;AACA,CAAC;AAED,MAAMC,IAAI,GAAGT,MAAM,CAACU,IAAK;AACzB;AACA,IAAIR,cAAe;AACnB,CAAC;AAED,MAAMS,SAAS,GAAGX,MAAM,CAACC,KAAK,CAAE;AAChC,WAAYW,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,cAAc,gBAAGV,UAAU,CAC/B,CACE;EACEW,WAAW,GAAG,KAAK;EACnBC,aAAa,GAAG,KAAK;EACrBC,QAAQ;EACRC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEHlB,KAAA,CAAAmB,aAAA,CAAChB,SAAS,qBACRH,KAAA,CAAAmB,aAAA,CAACjB,IAAI,EAAAkB,QAAA;EACHC,QAAQ,EAAC,iBAAiB;EAC1BC,SAAS;EACTC,QAAQ,EAAC,6BAA6B;EACtCR,IAAI,EAAEA;AAAK,GACNH,WAAW,GACZ;EACEY,SAAS,EAAE,QAAQ;EACnB,cAAc,EAAE;AAClB,CAAC,GACD,CAAC,CAAC,EACFP,IAAI;EACRC,GAAG,EAAEA;AAAI,iBAETlB,KAAA,CAAAmB,aAAA;EAAME,QAAQ,EAAC,MAAM;EAACN,IAAI,EAAEA;AAAK,CAAE,CAAC,EACnCD,QAAQ,iBAAId,KAAA,CAAAmB,aAAA;EAAME,QAAQ,EAAC,UAAU;EAACI,OAAO,EAAEX,QAAQ,CAACY,QAAQ,CAAC;AAAE,CAAE,CAAC,eACvE1B,KAAA,CAAAmB,aAAA,CAACd,IAAI;EAACgB,QAAQ,EAAC;AAAM,GAAEL,QAAe,CAClC,CAAC,EACNH,aAAa,iBAAIb,KAAA,CAAAmB,aAAA,CAACZ,SAAS;EAACoB,IAAI,EAAC;AAAc,CAAE,CACzC,CAEf,CAAC;AAEDhB,cAAc,CAACiB,WAAW,GAAG,gBAAgB;AAE7C,eAAejB,cAAc","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonContent.js","names":["keyframes","styled","Loading","clr","omitEmotionProps","React","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children","createElement","Fragment"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React from 'react';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, ButtonLink\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,MAAM,OAAO;AAWzB,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAI;AAC7B;AACA,mBAAoBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC/D,CAAC;AAED,MAAMC,UAAU,GAAGV,MAAM,CAACM,GAAI;AAC9B;AACA,kBAAmBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC9D,CAAC;AAED,MAAME,OAAO,GAAGX,MAAM,CAACY,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,qBAAsB;AAC5D;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGd,MAAM,CAACC,OAAO,CAAE;AACpC;AACA,CAAC;AAED,MAAMc,aAAa,GAAGhB,SAAU;AAChC;AACA;AACA,CAAC;AAKD,MAAMiB,gBAAgB,GAAGhB,MAAM,CAC7B,KAAK,EACLG,gBAAgB,CAAC,QAAQ,CAC3B,CAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACC,IAAI,CAAE;AACrC,sBAAuBX,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACE,EAAE,CAAE;AAC9C,eAAeJ,aAAc,IAAIR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACY,eAAgB;AAC/D,CAAC;;AAED;AACA,MAAMC,aAA2C,GAAGA,CAAC;EACnDC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,KAAK;EACfC,aAAa;EACbC;AACF,CAAC,kBACCtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACGN,IAAI,iBAAIlB,KAAA,CAAAuB,aAAA,CAACtB,SAAS,QAAEiB,IAAgB,CAAC,eACtClB,KAAA,CAAAuB,aAAA,CAAChB,OAAO,QAAEe,QAAkB,CAAC,EAC5BH,KAAK,iBAAInB,KAAA,CAAAuB,aAAA,CAACjB,UAAU,QAAEa,KAAkB,CAAC,EACzCC,OAAO,iBACNpB,KAAA,CAAAuB,aAAA,CAACX,gBAAgB;EAACC,MAAM,EAAEQ;AAAc,gBACtCrB,KAAA,CAAAuB,aAAA,CAACb,WAAW,MAAE,CACE,CAEpB,CACH;AAED,eAAeO,aAAa"}
1
+ {"version":3,"file":"ButtonContent.js","names":["keyframes","styled","Loading","clr","omitEmotionProps","React","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children","createElement","Fragment"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React from 'react';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, ButtonLink\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,MAAM,OAAO;AAWzB,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAI;AAC7B;AACA,mBAAoBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC/D,CAAC;AAED,MAAMC,UAAU,GAAGV,MAAM,CAACM,GAAI;AAC9B;AACA,kBAAmBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC9D,CAAC;AAED,MAAME,OAAO,GAAGX,MAAM,CAACY,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,qBAAsB;AAC5D;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGd,MAAM,CAACC,OAAO,CAAE;AACpC;AACA,CAAC;AAED,MAAMc,aAAa,GAAGhB,SAAU;AAChC;AACA;AACA,CAAC;AAKD,MAAMiB,gBAAgB,GAAGhB,MAAM,CAC7B,KAAK,EACLG,gBAAgB,CAAC,QAAQ,CAC3B,CAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACC,IAAI,CAAE;AACrC,sBAAuBX,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACE,EAAE,CAAE;AAC9C,eAAeJ,aAAc,IAAIR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACY,eAAgB;AAC/D,CAAC;;AAED;AACA,MAAMC,aAA2C,GAAGA,CAAC;EACnDC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,KAAK;EACfC,aAAa;EACbC;AACF,CAAC,kBACCtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACGN,IAAI,iBAAIlB,KAAA,CAAAuB,aAAA,CAACtB,SAAS,QAAEiB,IAAgB,CAAC,eACtClB,KAAA,CAAAuB,aAAA,CAAChB,OAAO,QAAEe,QAAkB,CAAC,EAC5BH,KAAK,iBAAInB,KAAA,CAAAuB,aAAA,CAACjB,UAAU,QAAEa,KAAkB,CAAC,EACzCC,OAAO,iBACNpB,KAAA,CAAAuB,aAAA,CAACX,gBAAgB;EAACC,MAAM,EAAEQ;AAAc,gBACtCrB,KAAA,CAAAuB,aAAA,CAACb,WAAW,MAAE,CACE,CAEpB,CACH;AAED,eAAeO,aAAa","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["css","styled","m","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","ButtonContent","useButtonColors","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport ButtonContent from './ButtonContent';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, ButtonLink\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for ButtonLink\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["css","styled","m","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","ButtonContent","useButtonColors","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport ButtonContent from './ButtonContent';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, ButtonLink\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n) <StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for ButtonLink\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => { },\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"useButtonColors.js","names":["useTheme","useMemo","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { Color, useTheme } from '@os-design/theming';\nimport { useMemo } from 'react';\n\ninterface Props {\n type: 'primary' | 'outline' | 'ghost';\n danger: boolean;\n disabled: boolean;\n}\n\nexport interface ButtonColors {\n text: Color;\n bg?: Color;\n bgHover?: Color;\n}\n\nexport interface LoadingColors {\n text: Color;\n bg: Color;\n}\n\ninterface UseButtonColorsRes {\n buttonColors: ButtonColors;\n loadingColors: LoadingColors;\n}\n\n// Used by Button, ButtonLink\nconst useButtonColors = ({\n type,\n danger,\n disabled,\n}: Props): UseButtonColorsRes => {\n const { theme } = useTheme();\n\n const prefix = useMemo<string>(() => {\n if (danger) return 'Danger';\n return '';\n }, [danger]);\n\n const buttonColors = useMemo<ButtonColors>(() => {\n if (type === 'primary') {\n return !disabled\n ? {\n text: theme[`button${prefix}PrimaryColorText`],\n bg: theme[`button${prefix}PrimaryColorBg`],\n bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n }\n : {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n return !disabled\n ? {\n text: theme[`button${prefix}GhostColorText`],\n bgHover: theme[`button${prefix}GhostColorBgHover`],\n }\n : {\n text: theme.buttonDisabledGhostColorText,\n };\n }, [type, disabled, theme, prefix]);\n\n const loadingColors = useMemo<LoadingColors>(() => {\n if (disabled) {\n return {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n if (type === 'primary') {\n return {\n text: theme[`button${prefix}PrimaryColorLoadingText`],\n bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n };\n }\n return {\n text: theme[`button${prefix}GhostColorLoadingText`],\n bg: theme[`button${prefix}GhostColorLoadingBg`],\n };\n }, [disabled, type, theme, prefix]);\n\n return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,OAAO;AAwB/B;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAE5B,MAAMO,MAAM,GAAGN,OAAO,CAAS,MAAM;IACnC,IAAIG,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGP,OAAO,CAAe,MAAM;IAC/C,IAAIE,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAiB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAoB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAkB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGd,OAAO,CAAgB,MAAM;IACjD,IAAII,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAwB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAsB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAsB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAoB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe"}
1
+ {"version":3,"file":"useButtonColors.js","names":["useTheme","useMemo","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { Color, useTheme } from '@os-design/theming';\nimport { useMemo } from 'react';\n\ninterface Props {\n type: 'primary' | 'outline' | 'ghost';\n danger: boolean;\n disabled: boolean;\n}\n\nexport interface ButtonColors {\n text: Color;\n bg?: Color;\n bgHover?: Color;\n}\n\nexport interface LoadingColors {\n text: Color;\n bg: Color;\n}\n\ninterface UseButtonColorsRes {\n buttonColors: ButtonColors;\n loadingColors: LoadingColors;\n}\n\n// Used by Button, ButtonLink\nconst useButtonColors = ({\n type,\n danger,\n disabled,\n}: Props): UseButtonColorsRes => {\n const { theme } = useTheme();\n\n const prefix = useMemo<string>(() => {\n if (danger) return 'Danger';\n return '';\n }, [danger]);\n\n const buttonColors = useMemo<ButtonColors>(() => {\n if (type === 'primary') {\n return !disabled\n ? {\n text: theme[`button${prefix}PrimaryColorText`],\n bg: theme[`button${prefix}PrimaryColorBg`],\n bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n }\n : {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n return !disabled\n ? {\n text: theme[`button${prefix}GhostColorText`],\n bgHover: theme[`button${prefix}GhostColorBgHover`],\n }\n : {\n text: theme.buttonDisabledGhostColorText,\n };\n }, [type, disabled, theme, prefix]);\n\n const loadingColors = useMemo<LoadingColors>(() => {\n if (disabled) {\n return {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n if (type === 'primary') {\n return {\n text: theme[`button${prefix}PrimaryColorLoadingText`],\n bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n };\n }\n return {\n text: theme[`button${prefix}GhostColorLoadingText`],\n bg: theme[`button${prefix}GhostColorLoadingBg`],\n };\n }, [disabled, type, theme, prefix]);\n\n return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,OAAO;AAwB/B;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAE5B,MAAMO,MAAM,GAAGN,OAAO,CAAS,MAAM;IACnC,IAAIG,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGP,OAAO,CAAe,MAAM;IAC/C,IAAIE,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAiB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAoB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAkB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGd,OAAO,CAAgB,MAAM;IACjD,IAAII,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAwB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAsB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAsB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAoB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","DisabledWrapper","disabledStyles","p","disabled","StyledButtonLink","withComponent","ButtonLink","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","link","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/ButtonLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport { DisabledWrapper, LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type ButtonLinkProps = JsxAProps &\n ReactRouterLinkProps &\n Pick<LinkProps, 'as'> &\n ButtonProps;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n `;\n\nconst StyledButtonLink = styled(\n StyledButton.withComponent('a'),\n omitEmotionProps('as', 'disabled')\n)`\n text-decoration: none;\n display: inline-flex;\n ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as a link.\n */\nconst ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n as,\n onMouseDown = () => {},\n onKeyDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n const link = (\n <StyledButtonLink\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n onKeyDown={(e) => {\n onKeyDown(e);\n if (disabled || loading) e.preventDefault();\n }}\n aria-disabled={disabled || loading}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButtonLink>\n );\n\n if (disabled || loading) {\n return <DisabledWrapper>{link}</DisabledWrapper>;\n }\n\n return link;\n }\n);\n\nButtonLink.displayName = 'ButtonLink';\n\nexport default ButtonLink;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,eAAe,MAAM,iCAAiC;AAC7D,SAASC,eAAe,QAAyC,SAAS;AAQ1E,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVX,GAAI;AACN;AACA,GAAG;AAEH,MAAMY,gBAAgB,GAAGX,MAAM,CAC7BI,YAAY,CAACQ,aAAa,CAAC,GAAG,CAAC,EAC/BX,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAE;AACF;AACA;AACA,IAAIO,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGV,UAAU,CAC3B,CACE;EACEW,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGtB,eAAe,CAAC;IACtDQ,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,MAAMmB,IAAI,gBACR3B,KAAA,CAAA4B,aAAA,CAACnB,gBAAgB,EAAAoB,QAAA;IACfC,OAAO,EAAElB,IAAK;IACdmB,MAAM,EAAEN,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGY,CAAC,IAAK;MAClBZ,WAAW,CAACY,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFZ,SAAS,EAAGW,CAAC,IAAK;MAChBX,SAAS,CAACW,CAAC,CAAC;MACZ,IAAIxB,QAAQ,IAAIS,OAAO,EAAEe,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAezB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETxB,KAAA,CAAA4B,aAAA,CAACzB,aAAa;IACZW,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CACnB;EAED,IAAId,QAAQ,IAAIS,OAAO,EAAE;IACvB,oBAAOjB,KAAA,CAAA4B,aAAA,CAACvB,eAAe,QAAEsB,IAAsB,CAAC;EAClD;EAEA,OAAOA,IAAI;AACb,CACF,CAAC;AAEDhB,UAAU,CAACuB,WAAW,GAAG,YAAY;AAErC,eAAevB,UAAU"}
1
+ {"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","DisabledWrapper","disabledStyles","p","disabled","StyledButtonLink","withComponent","ButtonLink","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","link","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/ButtonLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport { DisabledWrapper, LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type ButtonLinkProps = JsxAProps &\n ReactRouterLinkProps &\n Pick<LinkProps, 'as'> &\n ButtonProps;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n pointer-events: none;\n `;\n\nconst StyledButtonLink = styled(\n StyledButton.withComponent('a'),\n omitEmotionProps('as', 'disabled')\n)`\n text-decoration: none;\n display: inline-flex;\n ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as a link.\n */\nconst ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n as,\n onMouseDown = () => {},\n onKeyDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n const link = (\n <StyledButtonLink\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n as={as}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n onKeyDown={(e) => {\n onKeyDown(e);\n if (disabled || loading) e.preventDefault();\n }}\n aria-disabled={disabled || loading}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButtonLink>\n );\n\n if (disabled || loading) {\n return <DisabledWrapper>{link}</DisabledWrapper>;\n }\n\n return link;\n }\n);\n\nButtonLink.displayName = 'ButtonLink';\n\nexport default ButtonLink;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,eAAe,MAAM,iCAAiC;AAC7D,SAASC,eAAe,QAAyC,SAAS;AAQ1E,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVX,GAAI;AACN;AACA,GAAG;AAEH,MAAMY,gBAAgB,GAAGX,MAAM,CAC7BI,YAAY,CAACQ,aAAa,CAAC,GAAG,CAAC,EAC/BX,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAE;AACF;AACA;AACA,IAAIO,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGV,UAAU,CAC3B,CACE;EACEW,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGtB,eAAe,CAAC;IACtDQ,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,MAAMmB,IAAI,gBACR3B,KAAA,CAAA4B,aAAA,CAACnB,gBAAgB,EAAAoB,QAAA;IACfC,OAAO,EAAElB,IAAK;IACdmB,MAAM,EAAEN,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGY,CAAC,IAAK;MAClBZ,WAAW,CAACY,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFZ,SAAS,EAAGW,CAAC,IAAK;MAChBX,SAAS,CAACW,CAAC,CAAC;MACZ,IAAIxB,QAAQ,IAAIS,OAAO,EAAEe,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAezB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETxB,KAAA,CAAA4B,aAAA,CAACzB,aAAa;IACZW,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CACnB;EAED,IAAId,QAAQ,IAAIS,OAAO,EAAE;IACvB,oBAAOjB,KAAA,CAAA4B,aAAA,CAACvB,eAAe,QAAEsB,IAAsB,CAAC;EAClD;EAEA,OAAOA,IAAI;AACb,CACF,CAAC;AAEDhB,UAAU,CAACuB,WAAW,GAAG,YAAY;AAErC,eAAevB,UAAU","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["css","styled","Check","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","useForwardedState","React","forwardRef","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","createElement","_extends","tabIndex","onClick","e","includes","key","preventDefault","role","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\ninterface ContainerProps\n extends Required<Pick<CheckboxProps, 'disabled'>>,\n Pick<CheckboxProps, 'size'> {\n checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n {children && <Text disabled={disabled}>{children}</Text>}\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["css","styled","Check","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","useForwardedState","React","forwardRef","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","createElement","_extends","tabIndex","onClick","e","includes","key","preventDefault","role","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\ninterface ContainerProps\n extends Required<Pick<CheckboxProps, 'disabled'>>,\n Pick<CheckboxProps, 'size'> {\n checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n {children && <Text disabled={disabled}>{children}</Text>}\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","TextSkeleton","CheckboxSkeleton","width","children","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface CheckboxSkeletonProps extends JsxDivProps, WithSize {\n /**\n * The width of the skeleton.\n * @default 100%\n */\n width?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n user-select: none;\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst TextSkeleton = styled(Skeleton)`\n margin-left: 0.4em;\n margin-top: ${(p) => (p.theme.lineHeight - 1) / 2}em;\n margin-bottom: ${(p) => (p.theme.lineHeight - 1) / 2}em;\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n ({ width = '100%', children, ...rest }, ref) => (\n <Container role='checkbox' aria-busy {...rest} ref={ref}>\n <ImageSkeleton />\n {children ? <Text>{children}</Text> : <TextSkeleton width={width} />}\n </Container>\n )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAWlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIT,UAAW;AACf,CAAC;AAED,MAAMU,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;AAED,MAAMC,YAAY,GAAGlB,MAAM,CAACM,QAAQ,CAAE;AACtC;AACA,gBAAiBE,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAG,CAAC,IAAI,CAAE;AACpD,mBAAoBN,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAG,CAAC,IAAI,CAAE;AACvD,CAAC;;AAED;AACA;AACA;AACA,MAAMK,gBAAgB,gBAAGd,UAAU,CACjC,CAAC;EAAEe,KAAK,GAAG,MAAM;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzCnB,KAAA,CAAAoB,aAAA,CAACjB,SAAS,EAAAkB,QAAA;EAACC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACtDnB,KAAA,CAAAoB,aAAA,CAACb,aAAa,MAAE,CAAC,EAChBU,QAAQ,gBAAGjB,KAAA,CAAAoB,aAAA,CAACT,IAAI,QAAEM,QAAe,CAAC,gBAAGjB,KAAA,CAAAoB,aAAA,CAACN,YAAY;EAACE,KAAK,EAAEA;AAAM,CAAE,CAC1D,CAEf,CAAC;AAEDD,gBAAgB,CAACQ,WAAW,GAAG,kBAAkB;AAEjD,eAAeR,gBAAgB"}
1
+ {"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","TextSkeleton","CheckboxSkeleton","width","children","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface CheckboxSkeletonProps extends JsxDivProps, WithSize {\n /**\n * The width of the skeleton.\n * @default 100%\n */\n width?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n user-select: none;\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst TextSkeleton = styled(Skeleton)`\n margin-left: 0.4em;\n margin-top: ${(p) => (p.theme.lineHeight - 1) / 2}em;\n margin-bottom: ${(p) => (p.theme.lineHeight - 1) / 2}em;\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n ({ width = '100%', children, ...rest }, ref) => (\n <Container role='checkbox' aria-busy {...rest} ref={ref}>\n <ImageSkeleton />\n {children ? <Text>{children}</Text> : <TextSkeleton width={width} />}\n </Container>\n )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAWlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIT,UAAW;AACf,CAAC;AAED,MAAMU,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;AAED,MAAMC,YAAY,GAAGlB,MAAM,CAACM,QAAQ,CAAE;AACtC;AACA,gBAAiBE,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAG,CAAC,IAAI,CAAE;AACpD,mBAAoBN,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAG,CAAC,IAAI,CAAE;AACvD,CAAC;;AAED;AACA;AACA;AACA,MAAMK,gBAAgB,gBAAGd,UAAU,CACjC,CAAC;EAAEe,KAAK,GAAG,MAAM;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzCnB,KAAA,CAAAoB,aAAA,CAACjB,SAAS,EAAAkB,QAAA;EAACC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACtDnB,KAAA,CAAAoB,aAAA,CAACb,aAAa,MAAE,CAAC,EAChBU,QAAQ,gBAAGjB,KAAA,CAAAoB,aAAA,CAACT,IAAI,QAAEM,QAAe,CAAC,gBAAGjB,KAAA,CAAAoB,aAAA,CAACN,YAAY;EAACE,KAAK,EAAEA;AAAM,CAAE,CAC1D,CAEf,CAAC;AAEDD,gBAAgB,CAACQ,WAAW,GAAG,kBAAkB;AAEjD,eAAeR,gBAAgB","ignoreList":[]}