@zonos/amino 4.3.2 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (265) hide show
  1. package/all.d.ts +23 -21
  2. package/amino.css +0 -1
  3. package/components/alert-dialog/AlertContext.js +1 -1
  4. package/components/alert-dialog/AlertDialog.d.ts +4 -4
  5. package/components/alert-dialog/AlertDialog.js +1 -1
  6. package/components/alert-dialog/useAlert.js +1 -1
  7. package/components/badge/Badge.js +1 -1
  8. package/components/button/Button.d.ts +2 -2
  9. package/components/button/Button.js +1 -1
  10. package/components/checkbox/Checkbox.js +1 -1
  11. package/components/confirm-dialog/ConfirmContext.js +1 -1
  12. package/components/confirm-dialog/ConfirmDialog.d.ts +3 -3
  13. package/components/confirm-dialog/ConfirmDialog.js +1 -1
  14. package/components/confirm-dialog/useConfirm.js +1 -1
  15. package/components/cover-sheet/CoverSheet.d.ts +1 -1
  16. package/components/cover-sheet/CoverSheet.js +1 -1
  17. package/components/currency/Currency.js +1 -1
  18. package/components/dialog/Dialog.d.ts +2 -2
  19. package/components/dialog/Dialog.js +1 -1
  20. package/components/dialog/_BaseDialog.d.ts +3 -3
  21. package/components/dialog/_BaseDialog.js +1 -1
  22. package/components/drop-zone/DropZone.js +1 -1
  23. package/components/file-upload/FileUpload.js +1 -1
  24. package/components/graph-matrix/GraphMatrix.js +1 -1
  25. package/components/graph-matrix/_LoadingIcon.js +1 -1
  26. package/components/input/input-type/_FloatLabelInput.js +1 -1
  27. package/components/layout/Layout.js +1 -1
  28. package/components/layout/NavigationGroup.js +1 -1
  29. package/components/lightbox/LightBox.d.ts +3 -3
  30. package/components/lightbox/LightBox.js +1 -1
  31. package/components/list-item/ListItem.js +1 -1
  32. package/components/mdx/mdx-anchor/MdxAnchor.js +1 -0
  33. package/components/{mdx-badge → mdx/mdx-badge}/MdxBadge.d.ts +1 -1
  34. package/components/mdx/mdx-badge/MdxBadge.js +1 -0
  35. package/components/{mdx-banner → mdx/mdx-banner}/MdxBanner.d.ts +1 -1
  36. package/components/mdx/mdx-banner/MdxBanner.js +1 -0
  37. package/components/mdx/mdx-bread-crumbs/MdxBreadCrumbs.js +1 -0
  38. package/components/{mdx-button → mdx/mdx-button}/MdxButton.d.ts +1 -1
  39. package/components/mdx/mdx-button/MdxButton.js +1 -0
  40. package/components/{mdx-card → mdx/mdx-card}/MdxCard.d.ts +2 -2
  41. package/components/mdx/mdx-card/MdxCard.js +1 -0
  42. package/components/mdx/mdx-card-grid/MdxCardGrid.js +1 -0
  43. package/components/{mdx-code-block → mdx/mdx-code-block}/MdxCodeBlock.d.ts +4 -3
  44. package/components/mdx/mdx-code-block/MdxCodeBlock.js +1 -0
  45. package/components/mdx/mdx-collapse/MdxCollapse.js +1 -0
  46. package/components/mdx/mdx-copy-value/MdxCopyValue.js +1 -0
  47. package/components/mdx/mdx-hero/MdxHero.js +1 -0
  48. package/components/mdx/mdx-image/MdxImage.js +1 -0
  49. package/components/mdx/mdx-progress-checkbox/MdxProgressCheckbox.js +1 -0
  50. package/components/{mdx-related-content → mdx/mdx-related-content}/MdxRelatedContent.d.ts +1 -1
  51. package/components/mdx/mdx-related-content/MdxRelatedContent.js +1 -0
  52. package/components/mdx/mdx-section/MdxSection.js +1 -0
  53. package/components/mdx/mdx-subtitle/MdxSubtitle.js +1 -0
  54. package/components/mdx/mdx-table/MdxTable.js +1 -0
  55. package/components/mdx/mdx-tabs/MdxTabs.js +1 -0
  56. package/components/mdx/mdx-video-guide/MdxVideoGuide.js +1 -0
  57. package/components/nested-data-table/NestedDataTable.js +1 -1
  58. package/components/nested-data-table/NestedDataTableHasura.js +1 -1
  59. package/components/nested-data-table/_TableData.js +1 -1
  60. package/components/night-mode-wrapper/NightModeWrapper.d.ts +5 -0
  61. package/components/night-mode-wrapper/NightModeWrapper.js +1 -0
  62. package/components/ownership-block/OwnershipBlock.d.ts +3 -1
  63. package/components/ownership-block/OwnershipBlock.js +1 -1
  64. package/components/pivot-table/PivotTable.js +1 -1
  65. package/components/profile-icon/ProfileIcon.d.ts +2 -1
  66. package/components/profile-icon/ProfileIcon.js +1 -1
  67. package/components/radio/Radio.js +1 -1
  68. package/components/rich-checkbox/RichCheckbox.js +1 -1
  69. package/components/rich-radio/RichRadio.js +1 -1
  70. package/components/select/ThemeSelect.d.ts +2 -0
  71. package/components/select/ThemeSelect.js +1 -0
  72. package/components/select/_StyledReactSelect.js +1 -1
  73. package/components/slide-over/SlideOver.d.ts +4 -4
  74. package/components/slide-over/SlideOver.js +1 -1
  75. package/components/slider/Slider.js +1 -1
  76. package/components/spinner/Spinner.js +1 -1
  77. package/components/styles/ColorPalette.js +1 -1
  78. package/components/styles/Shadow.js +1 -1
  79. package/components/switch/Switch.js +1 -1
  80. package/components/text/LegacyText.js +1 -1
  81. package/components/text/Text.js +1 -1
  82. package/components/textarea/Textarea.js +1 -1
  83. package/components/tooltip/Tooltip.d.ts +3 -2
  84. package/components/tooltip/Tooltip.js +1 -1
  85. package/icons/ArrowDownDuotoneIcon.js +1 -1
  86. package/icons/ArrowLeftDuotoneIcon.js +1 -1
  87. package/icons/ArrowRightDuotoneIcon.js +1 -1
  88. package/icons/ArrowSwapDuotoneIcon.js +1 -1
  89. package/icons/ArrowUpDuotoneIcon.js +1 -1
  90. package/icons/BagDuotoneIcon.js +1 -1
  91. package/icons/BankDuotoneIcon.js +1 -1
  92. package/icons/BellDuotoneIcon.js +1 -1
  93. package/icons/BellOffDuotoneIcon.js +1 -1
  94. package/icons/BookDuotoneIcon.js +1 -1
  95. package/icons/BookmarkAddDuotoneIcon.js +1 -1
  96. package/icons/BookmarkCheckDuotoneIcon.js +1 -1
  97. package/icons/BookmarkDuotoneIcon.js +1 -1
  98. package/icons/BookmarkOffDuotoneIcon.js +1 -1
  99. package/icons/BookmarkRemoveDuotoneIcon.js +1 -1
  100. package/icons/BookmarkSubtractDuotoneIcon.js +1 -1
  101. package/icons/BoxesDuotoneIcon.js +1 -1
  102. package/icons/BufferDuotoneIcon.js +1 -1
  103. package/icons/CalculatorDuotoneIcon.js +1 -1
  104. package/icons/CalendarDuotoneIcon.js +1 -1
  105. package/icons/CardDuotoneIcon.js +1 -1
  106. package/icons/CaretDownDuotoneIcon.js +1 -1
  107. package/icons/CaretLeftDuotoneIcon.js +1 -1
  108. package/icons/CaretRightDuotoneIcon.js +1 -1
  109. package/icons/CaretUpDuotoneIcon.js +1 -1
  110. package/icons/CartDuotoneIcon.js +1 -1
  111. package/icons/ChartDuotoneIcon.js +1 -1
  112. package/icons/CheckCircleDuotoneIcon.js +1 -1
  113. package/icons/CheckmarkDuotoneIcon.js +1 -1
  114. package/icons/CheckoutDuotoneIcon.js +1 -1
  115. package/icons/ChevronDownCircleDuotoneIcon.js +1 -1
  116. package/icons/ChevronDownDuotoneIcon.js +1 -1
  117. package/icons/ChevronLeftCircleDuotoneIcon.js +1 -1
  118. package/icons/ChevronLeftDuotoneIcon.js +1 -1
  119. package/icons/ChevronRightCircleDuotoneIcon.js +1 -1
  120. package/icons/ChevronRightDuotoneIcon.js +1 -1
  121. package/icons/ChevronUpCircleDuotoneIcon.js +1 -1
  122. package/icons/ChevronUpDuotoneIcon.js +1 -1
  123. package/icons/CircleDuotoneIcon.js +1 -1
  124. package/icons/ClassifyDuotoneIcon.js +1 -1
  125. package/icons/ClearDuotoneIcon.js +1 -1
  126. package/icons/ClockDuotoneIcon.js +1 -1
  127. package/icons/CodeCircleDuotoneIcon.js +1 -1
  128. package/icons/CodeDuotoneIcon.js +1 -1
  129. package/icons/CoinsDuotoneIcon.js +1 -1
  130. package/icons/CommentDuotoneIcon.js +1 -1
  131. package/icons/CopyDuotoneIcon.js +1 -1
  132. package/icons/CubeDuotoneIcon.js +1 -1
  133. package/icons/DashboardDuotoneIcon.js +1 -1
  134. package/icons/DiamondDuotoneIcon.js +1 -1
  135. package/icons/DislikeDuotoneIcon.js +1 -1
  136. package/icons/DocsDuotoneIcon.js +1 -1
  137. package/icons/DollarDuotoneIcon.js +1 -1
  138. package/icons/DoubleChevronDuotoneIcon.js +1 -1
  139. package/icons/DragDuotoneIcon.js +1 -1
  140. package/icons/EditDuotoneIcon.js +1 -1
  141. package/icons/ExclamationMarkDuotoneIcon.js +1 -1
  142. package/icons/ExportDuotoneIcon.js +1 -1
  143. package/icons/ExternalDuotoneIcon.js +1 -1
  144. package/icons/EyeDuotoneIcon.js +1 -1
  145. package/icons/EyeOffDuotoneIcon.js +1 -1
  146. package/icons/FileDuotoneIcon.js +1 -1
  147. package/icons/FileUploadDuotoneIcon.js +1 -1
  148. package/icons/FilterDuotoneIcon.js +1 -1
  149. package/icons/FolderListDuotoneIcon.js +1 -1
  150. package/icons/FolderUploadDuotoneIcon.js +1 -1
  151. package/icons/GridDuotoneIcon.js +1 -1
  152. package/icons/HelloDuotoneIcon.js +1 -1
  153. package/icons/HelpDuotoneIcon.js +1 -1
  154. package/icons/HexagonDuotoneIcon.js +1 -1
  155. package/icons/HomeDuotoneIcon.js +1 -1
  156. package/icons/IconIndex.d.ts +1 -0
  157. package/icons/IconIndex.js +1 -1
  158. package/icons/ImageDuotoneIcon.js +1 -1
  159. package/icons/ImportDuotoneIcon.js +1 -1
  160. package/icons/InfoDuotoneIcon.js +1 -1
  161. package/icons/IntegrationDuotoneIcon.js +1 -1
  162. package/icons/LandedCostDuotoneIcon.js +1 -1
  163. package/icons/LaptopDuotoneIcon.js +1 -1
  164. package/icons/LightDuotoneIcon.js +1 -1
  165. package/icons/LikeDuotoneIcon.js +1 -1
  166. package/icons/LineDownDuotoneIcon.js +1 -1
  167. package/icons/LineUpDuotoneIcon.js +1 -1
  168. package/icons/LinkDuotoneIcon.js +1 -1
  169. package/icons/LocationDuotoneIcon.js +1 -1
  170. package/icons/LockDuotoneIcon.js +1 -1
  171. package/icons/LoginDuotoneIcon.js +1 -1
  172. package/icons/LogoutDuotoneIcon.js +1 -1
  173. package/icons/MailDuotoneIcon.js +1 -1
  174. package/icons/MenuDuotoneIcon.js +1 -1
  175. package/icons/MinusCircleDuotoneIcon.js +1 -1
  176. package/icons/MinusDuotoneIcon.js +1 -1
  177. package/icons/MobileDuotoneIcon.js +1 -1
  178. package/icons/MoneyDuotoneIcon.js +1 -1
  179. package/icons/MonitorDuotoneIcon.js +1 -1
  180. package/icons/NightDuotoneIcon.js +1 -1
  181. package/icons/PauseCircleDuotoneIcon.js +1 -1
  182. package/icons/PercentBadgeDuotoneIcon.js +1 -1
  183. package/icons/PercentDuotoneIcon.js +1 -1
  184. package/icons/PlayCircleDuotoneIcon.js +1 -1
  185. package/icons/PlayDuotoneIcon.js +1 -1
  186. package/icons/PlusCircleDuotoneIcon.js +1 -1
  187. package/icons/PlusDuotoneIcon.js +1 -1
  188. package/icons/PrinterDuotoneIcon.js +1 -1
  189. package/icons/RateDuotoneIcon.js +1 -1
  190. package/icons/ReceiptDuotoneIcon.js +1 -1
  191. package/icons/RefreshDuotoneIcon.js +1 -1
  192. package/icons/RemoveCircleDuotoneIcon.js +1 -1
  193. package/icons/RemoveDuotoneIcon.js +1 -1
  194. package/icons/RestrictDuotoneIcon.js +1 -1
  195. package/icons/RocketDuotoneIcon.js +1 -1
  196. package/icons/ScanDuotoneIcon.js +1 -1
  197. package/icons/ScreenDuotoneIcon.js +1 -1
  198. package/icons/SearchDuotoneIcon.js +1 -1
  199. package/icons/SendDuotoneIcon.js +1 -1
  200. package/icons/SettingsDuotoneIcon.js +1 -1
  201. package/icons/ShoppingListDuotoneIcon.js +1 -1
  202. package/icons/ShoppingTagDuotoneIcon.js +1 -1
  203. package/icons/SquareDuotoneIcon.js +1 -1
  204. package/icons/StarDuotoneIcon.js +1 -1
  205. package/icons/StarOffDuotoneIcon.js +1 -1
  206. package/icons/StarsDuotoneIcon.js +1 -1
  207. package/icons/SunnyDuotoneIcon.js +1 -1
  208. package/icons/TagDuotoneIcon.js +1 -1
  209. package/icons/ThreeDotDuotoneIcon.js +1 -1
  210. package/icons/TotalLandedCostDuotoneIcon.js +1 -1
  211. package/icons/TrashCanDuotoneIcon.js +1 -1
  212. package/icons/TriangleDuotoneIcon.js +1 -1
  213. package/icons/TruckDuotoneIcon.js +1 -1
  214. package/icons/UserDuotoneIcon.js +1 -1
  215. package/icons/UtahDuotoneIcon.js +1 -1
  216. package/icons/WarningDuotoneIcon.js +1 -1
  217. package/icons/custom/ZonosLogoIcon.d.ts +2 -6
  218. package/icons/custom/ZonosLogoIcon.js +1 -1
  219. package/package.json +1 -1
  220. package/reset.css +1 -1
  221. package/styles/constants/theme.d.ts +102 -110
  222. package/styles/constants/theme.js +1 -1
  223. package/theme.css +190 -153
  224. package/types/Color.d.ts +1 -1
  225. package/types/Theme.d.ts +1 -1
  226. package/types/index.d.ts +1 -1
  227. package/utils/hooks/useAminoTheme.d.ts +5 -0
  228. package/utils/hooks/useAminoTheme.js +1 -0
  229. package/components/dark-mode-wrapper/DarkModeWrapper.d.ts +0 -5
  230. package/components/dark-mode-wrapper/DarkModeWrapper.js +0 -1
  231. package/components/mdx-anchor/MdxAnchor.js +0 -1
  232. package/components/mdx-badge/MdxBadge.js +0 -1
  233. package/components/mdx-banner/MdxBanner.js +0 -1
  234. package/components/mdx-bread-crumbs/MdxBreadCrumbs.js +0 -1
  235. package/components/mdx-button/MdxButton.js +0 -1
  236. package/components/mdx-card/MdxCard.js +0 -1
  237. package/components/mdx-card-grid/MdxCardGrid.js +0 -1
  238. package/components/mdx-code-block/MdxCodeBlock.js +0 -1
  239. package/components/mdx-collapse/MdxCollapse.js +0 -1
  240. package/components/mdx-copy-value/MdxCopyValue.js +0 -1
  241. package/components/mdx-hero/MdxHero.js +0 -1
  242. package/components/mdx-image/MdxImage.js +0 -1
  243. package/components/mdx-progress-checkbox/MdxProgressCheckbox.js +0 -1
  244. package/components/mdx-related-content/MdxRelatedContent.js +0 -1
  245. package/components/mdx-section/MdxSection.js +0 -1
  246. package/components/mdx-subtitle/MdxSubtitle.js +0 -1
  247. package/components/mdx-table/MdxTable.js +0 -1
  248. package/components/mdx-tabs/MdxTabs.js +0 -1
  249. package/components/mdx-video-guide/MdxVideoGuide.js +0 -1
  250. package/types/IAminoTheme.d.ts +0 -1
  251. /package/components/{mdx-anchor → mdx/mdx-anchor}/MdxAnchor.d.ts +0 -0
  252. /package/components/{mdx-bread-crumbs → mdx/mdx-bread-crumbs}/MdxBreadCrumbs.d.ts +0 -0
  253. /package/components/{mdx-card-grid → mdx/mdx-card-grid}/MdxCardGrid.d.ts +0 -0
  254. /package/components/{mdx-collapse → mdx/mdx-collapse}/MdxCollapse.d.ts +0 -0
  255. /package/components/{mdx-copy-value → mdx/mdx-copy-value}/MdxCopyValue.d.ts +0 -0
  256. /package/components/{mdx-hero → mdx/mdx-hero}/MdxHero.d.ts +0 -0
  257. /package/components/{mdx-image → mdx/mdx-image}/MdxImage.d.ts +0 -0
  258. /package/components/{mdx-progress-checkbox → mdx/mdx-progress-checkbox}/MdxProgressCheckbox.d.ts +0 -0
  259. /package/components/{mdx-section → mdx/mdx-section}/MdxSection.d.ts +0 -0
  260. /package/components/{mdx-subtitle → mdx/mdx-subtitle}/MdxSubtitle.d.ts +0 -0
  261. /package/components/{mdx-table → mdx/mdx-table}/MdxTable.d.ts +0 -0
  262. /package/components/{mdx-tabs → mdx/mdx-tabs}/MdxTab.d.ts +0 -0
  263. /package/components/{mdx-tabs → mdx/mdx-tabs}/MdxTab.js +0 -0
  264. /package/components/{mdx-tabs → mdx/mdx-tabs}/MdxTabs.d.ts +0 -0
  265. /package/components/{mdx-video-guide → mdx/mdx-video-guide}/MdxVideoGuide.d.ts +0 -0
package/theme.css CHANGED
@@ -1,7 +1,7 @@
1
- :root {
1
+ :root,
2
+ [data-theme='day'] {
2
3
  --amino-transition: all 0.2s ease-in-out 0s;
3
4
  --amino-type-scale-base: 16px;
4
- --amino-black: #0c0c0d;
5
5
  --amino-gray-0: white;
6
6
  --amino-gray-50: #f6f6f8;
7
7
  --amino-gray-100: #eaebed;
@@ -16,7 +16,6 @@
16
16
  --amino-gray-1000: #2e3038;
17
17
  --amino-gray-1100: #1e1f26;
18
18
  --amino-gray-1200: #101116;
19
- --amino-gray-1300: black;
20
19
  --amino-blue-100: #deecfe;
21
20
  --amino-blue-200: #c5dcfd;
22
21
  --amino-blue-300: #aac8fc;
@@ -79,41 +78,20 @@
79
78
  --amino-purple-1000: #29143a;
80
79
  --amino-transparent-white: #ffffffbb;
81
80
  --amino-transparent-black: #000000bb;
82
- --amino-danger: var(--amino-red-600);
83
- --amino-danger-dark: var(--amino-red-700);
84
- --amino-error: var(--amino-red-600);
85
- --amino-primary: var(--amino-blue-600);
86
- --amino-primary-light: var(--amino-blue-500);
87
- --amino-primary-dark: var(--amino-blue-800);
88
- --amino-success: var(--amino-green-300);
89
- --amino-success-dark: var(--amino-green-700);
90
- --amino-warning: var(--amino-amber-100);
91
- --amino-warning-dark: var(--amino-amber-700);
92
- --amino-glow-error: 0 0 0 1px var(--amino-red-600);
93
- --amino-glow-blue: 0 0 0 1px var(--amino-primary);
94
- --amino-glow-cyan: 0 0 0 1px var(--amino-cyan-alpha);
95
- --amino-glow-red: 0 0 0 1px var(--amino-red-alpha);
96
- --amino-glow-orange: 0 0 0 1px var(--amino-orange-alpha);
97
- --amino-glow-green: 0 0 0 1px var(--amino-green-alpha);
98
- --amino-glow-purple: 0 0 0 1px var(--amino-purple-alpha);
99
- --amino-page-background: white;
100
- --amino-border-color: var(--amino-gray-200);
101
- --amino-hover-color: var(--amino-gray-50);
102
- --amino-surface-color: white;
103
- --amino-surface-color-secondary: var(--amino-gray-50);
104
- --amino-text-light: white;
105
- --amino-text-color: var(--amino-gray-1000);
106
- --amino-text-dark: var(--amino-text-color);
107
- --amino-input-background: white;
108
- --amino-size-xl: 56px;
109
- --amino-size-lg: 48px;
110
- --amino-size-md: 40px;
111
- --amino-size-sm: 32px;
112
- --amino-radius-4: 0.25rem;
113
- --amino-radius-6: 0.375rem;
114
- --amino-radius-8: 0.5rem;
115
- --amino-radius-10: 0.625rem;
116
- --amino-radius-12: 0.75rem;
81
+ --amino-v3-shadow-base: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
82
+ 0px 1px 2px rgba(10, 10, 11, 0.06), 0px 1px 3px rgba(10, 10, 11, 0.1);
83
+ --amino-v3-shadow-medium: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
84
+ 0px 4px 6px rgba(10, 10, 11, 0.1), 0px 2px 4px rgba(10, 10, 11, 0.06);
85
+ --amino-v3-shadow-large: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
86
+ 0px 10px 15px rgba(10, 10, 11, 0.1), 0px 4px 6px rgba(10, 10, 11, 0.05);
87
+ --amino-v3-shadow-xl: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
88
+ 0px 20px 25px rgba(10, 10, 11, 0.1), 0px 10px 10px rgba(12, 12, 13, 0.04);
89
+ --amino-v3-shadow-xxl: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
90
+ 0px 32px 50px rgba(10, 10, 11, 0.24);
91
+ --amino-v3-shadow-inset: 0px 1px 0px #ffffff, 0px 2px 4px rgba(0, 0, 0, 0.04),
92
+ inset 0px 1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 4px rgba(0, 0, 0, 0.04),
93
+ inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06),
94
+ inset 0px 0px 8px rgba(0, 0, 0, 0.02);
117
95
  --amino-space-negative-80: -5rem;
118
96
  --amino-space-negative-76: -4.75rem;
119
97
  --amino-space-negative-72: -4.5rem;
@@ -155,11 +133,44 @@
155
133
  --amino-space-72: 4.5rem;
156
134
  --amino-space-76: 4.75rem;
157
135
  --amino-space-80: 5rem;
136
+ --amino-border: 1px solid var(--amino-border-color);
137
+ --amino-border-blue: 1px solid var(--amino-blue-500);
138
+ --amino-border-red: 1px solid var(--amino-red-400);
139
+ --amino-border-cyan: 1px solid var(--amino-cyan-400);
140
+ --amino-border-orange: 1px solid var(--amino-orange-400);
141
+ --amino-border-green: 1px solid var(--amino-green-400);
142
+ --amino-border-purple: 1px solid var(--amino-purple-400);
143
+ --amino-border-amber: 1px solid var(--amino-amber-400);
144
+ --amino-border-transparent: 1px solid transparent;
145
+ --amino-sidebar-color: var(--amino-gray-0);
146
+ --amino-header-color: var(--amino-gray-0);
147
+ --amino-danger: var(--amino-red-600);
148
+ --amino-danger-dark: var(--amino-red-700);
149
+ --amino-error: var(--amino-red-600);
150
+ --amino-primary: var(--amino-blue-600);
151
+ --amino-primary-light: var(--amino-blue-500);
152
+ --amino-primary-dark: var(--amino-blue-800);
153
+ --amino-success: var(--amino-green-300);
154
+ --amino-success-dark: var(--amino-green-700);
155
+ --amino-warning: var(--amino-amber-100);
156
+ --amino-warning-dark: var(--amino-amber-700);
157
+ --amino-glow-error: 0 0 0 1px var(--amino-red-600);
158
+ --amino-glow-blue: 0 0 0 1px var(--amino-primary);
159
+ --amino-glow-cyan: 0 0 0 1px var(--amino-cyan-600);
160
+ --amino-glow-red: 0 0 0 1px var(--amino-red-600);
161
+ --amino-glow-orange: 0 0 0 1px var(--amino-orange-600);
162
+ --amino-glow-green: 0 0 0 1px var(--amino-green-600);
163
+ --amino-glow-purple: 0 0 0 1px var(--amino-purple-600);
164
+ --amino-page-background: var(--amino-gray-0);
165
+ --amino-border-color: var(--amino-gray-200);
166
+ --amino-hover-color: var(--amino-gray-50);
167
+ --amino-text-color: var(--amino-gray-1000);
168
+ --amino-input-background: var(--amino-gray-0);
169
+ --amino-surface-color: var(--amino-gray-0);
170
+ --amino-surface-color-secondary: var(--amino-gray-50);
171
+ --amino-backdrop-color: var(--amino-gray-1000);
158
172
  --amino-appbar-height: 55px;
159
173
  --amino-sidebar-width: 264px;
160
- --amino-sidebar-color: white;
161
- --amino-header-color: white;
162
- --amino-backdrop-color: var(--amino-gray-1000);
163
174
  --amino-elevation-0: 0;
164
175
  --amino-elevation-100: 100;
165
176
  --amino-elevation-200: 200;
@@ -169,25 +180,15 @@
169
180
  --amino-dialog-elevation: var(--amino-elevation-400);
170
181
  --amino-toast-elevation: var(--amino-elevation-500);
171
182
  --amino-appbar-elevation: var(--amino-elevation-500);
172
- --amino-v3-shadow-inset: inset 0px 2px 4px rgba(0, 0, 0, 0.06);
173
- --amino-v3-shadow-base: 0px 1px 2px rgba(0, 0, 0, 0.06),
174
- 0px 1px 3px rgba(0, 0, 0, 0.1);
175
- --amino-v3-shadow-medium: 0px 2px 4px rgba(0, 0, 0, 0.06),
176
- 0px 4px 6px rgba(0, 0, 0, 0.1);
177
- --amino-v3-shadow-large: 0px 10px 15px rgba(0, 0, 0, 0.1),
178
- 0px 4px 6px rgba(0, 0, 0, 0.05);
179
- --amino-v3-shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.1),
180
- 0px 10px 10px rgba(0, 0, 0, 0.04);
181
- --amino-v3-shadow-xxl: 0px 32px 50px rgba(0, 0, 0, 0.24);
182
- --amino-border: 1px solid var(--amino-border-color);
183
- --amino-border-blue: 1px solid var(--amino-blue-500);
184
- --amino-border-red: 1px solid var(--amino-red-400);
185
- --amino-border-cyan: 1px solid var(--amino-cyan-400);
186
- --amino-border-orange: 1px solid var(--amino-orange-400);
187
- --amino-border-green: 1px solid var(--amino-green-400);
188
- --amino-border-purple: 1px solid var(--amino-purple-400);
189
- --amino-border-amber: 1px solid var(--amino-amber-400);
190
- --amino-border-transparent: 1px solid transparent;
183
+ --amino-size-xl: 56px;
184
+ --amino-size-lg: 48px;
185
+ --amino-size-md: 40px;
186
+ --amino-size-sm: 32px;
187
+ --amino-radius-4: 0.25rem;
188
+ --amino-radius-6: 0.375rem;
189
+ --amino-radius-8: 0.5rem;
190
+ --amino-radius-10: 0.625rem;
191
+ --amino-radius-12: 0.75rem;
191
192
  --amino-font-size-3xl: 2.125rem;
192
193
  --amino-font-size-2xl: 1.75rem;
193
194
  --amino-font-size-xl: 1.375rem;
@@ -211,98 +212,134 @@
211
212
  --amino-font-harmonized-codes: 'Fira Code', var(--amino-font-sans);
212
213
  }
213
214
 
214
- /* Dark theme */
215
- [data-theme='dark'] {
216
- --amino-gray-l80: #f5f5f6;
217
- --amino-gray-l60: #d8d8db;
218
- --amino-gray-l40: #c4c4c9;
219
- --amino-gray-l20: #b1b1b7;
220
- --amino-gray-base: #9d9da5;
221
- --amino-gray-d20: #76767c;
222
- --amino-gray-d40: #4f4f52;
223
- --amino-gray-d60: #2f2f31;
224
- --amino-gray-d80: #232326;
225
- --amino-blue-l80: #e9ebff;
226
- --amino-blue-l60: #b4c5ff;
227
- --amino-blue-l40: #8fa7ff;
228
- --amino-blue-l20: #698aff;
229
- --amino-blue-base: #446dff;
230
- --amino-blue-d20: #3657cc;
231
- --amino-blue-d40: #294199;
232
- --amino-blue-d60: #1b2c66;
233
- --amino-blue-d80: #1d233b;
234
- --amino-cyan-l80: #e9fcff;
235
- --amino-cyan-l60: #b5f6ff;
236
- --amino-cyan-l40: #8ff2ff;
237
- --amino-cyan-l20: #6aedff;
238
- --amino-cyan-base: #45e9ff;
239
- --amino-cyan-d20: #37bacc;
240
- --amino-cyan-d40: #298c99;
241
- --amino-cyan-d60: #1c5d66;
242
- --amino-cyan-d80: #1d363b;
243
- --amino-red-l80: #fde5eb;
244
- --amino-red-l60: #f9a8bd;
245
- --amino-red-l40: #f77d9b;
246
- --amino-red-l20: #f4517a;
247
- --amino-red-base: #f12659;
248
- --amino-red-d20: #c11e47;
249
- --amino-red-d40: #911735;
250
- --amino-red-d60: #600f24;
251
- --amino-red-d80: #371822;
252
- --amino-orange-l80: #fff0e5;
253
- --amino-orange-l60: #ffd0ad;
254
- --amino-orange-l40: #ffb885;
255
- --amino-orange-l20: #ffa05c;
256
- --amino-orange-base: #ff8933;
257
- --amino-orange-d20: #cc6e29;
258
- --amino-orange-d40: #99521f;
259
- --amino-orange-d60: #663714;
260
- --amino-orange-d80: #39271c;
261
- --amino-green-l80: #e5f9e5;
262
- --amino-green-l60: #a5eba8;
263
- --amino-green-l40: #78e07d;
264
- --amino-green-l20: #4bd651;
265
- --amino-green-base: #1ecc26;
266
- --amino-green-d20: #18a31e;
267
- --amino-green-d40: #127a17;
268
- --amino-green-d60: #0c520f;
269
- --amino-green-d80: #17311a;
270
- --amino-purple-l80: #f5e5ff;
271
- --amino-purple-l60: #dba8ff;
272
- --amino-purple-l40: #ca7dff;
273
- --amino-purple-l20: #b851ff;
274
- --amino-purple-base: #a626ff;
275
- --amino-purple-d20: #851ecc;
276
- --amino-purple-d40: #641799;
277
- --amino-purple-d60: #420f66;
278
- --amino-purple-d80: #2c183b;
279
- --amino-yellow-l80: #fff9e5;
280
- --amino-yellow-l60: #ffedad;
281
- --amino-yellow-l40: #ffe485;
282
- --amino-yellow-l20: #ffdb5c;
283
- --amino-yellow-base: #ffd233;
284
- --amino-yellow-d20: #cca829;
285
- --amino-yellow-d40: #997e1f;
286
- --amino-yellow-d60: #665414;
287
- --amino-yellow-d80: #39321c;
288
- --amino-page-background: var(--amino-gray-50);
289
- --amino-surface-color: var(--amino-gray-base);
290
- --amino-surface-color-secondary: var(--amino-gray-50);
291
- --amino-border-color: var(--amino-gray-l60);
292
- --amino-text-color: white;
293
- --amino-input-background: var(--amino-gray-l40);
294
- --amino-hover-color: var(--amino-gray-l20);
295
- --amino-v3-shadow-inset: inset 0px 2px 4px rgba(0, 0, 0, 0.18);
296
- --amino-v3-shadow-base: 0px 1px 2px rgba(0, 0, 0, 0.18),
297
- 0px 1px 3px rgba(0, 0, 0, 0.3);
298
- --amino-v3-shadow-medium: 0px 2px 4px rgba(0, 0, 0, 0.18),
299
- 0px 4px 6px rgba(0, 0, 0, 0.3);
300
- --amino-v3-shadow-large: 0px 10px 15px rgba(0, 0, 0, 0.3),
301
- 0px 4px 6px rgba(0, 0, 0, 0.15);
302
- --amino-v3-shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.3),
303
- 0px 10px 10px rgba(0, 0, 0, 0.12);
304
- --amino-v3-shadow-xxl: 0px 32px 50px rgba(0, 0, 0, 0.72);
305
- --amino-backdrop-color: var(--amino-gray-l60);
306
- --amino-header-color: var(--amino-gray-l80);
215
+ /* Night theme */
216
+ [data-theme='night'] {
217
+ --amino-gray-0: #101116;
218
+ --amino-gray-50: #1e1f26;
219
+ --amino-gray-100: #2e3038;
220
+ --amino-gray-200: #40424c;
221
+ --amino-gray-300: #4d505a;
222
+ --amino-gray-400: #5c5e68;
223
+ --amino-gray-500: #6a6d77;
224
+ --amino-gray-600: #94969e;
225
+ --amino-gray-700: #acaeb3;
226
+ --amino-gray-800: #c5c6ca;
227
+ --amino-gray-900: #d9dadd;
228
+ --amino-gray-1000: #eaebed;
229
+ --amino-gray-1100: #f6f6f8;
230
+ --amino-gray-1200: white;
231
+ --amino-blue-100: #151943;
232
+ --amino-blue-200: #1f2b73;
233
+ --amino-blue-300: #263b98;
234
+ --amino-blue-400: #294dbe;
235
+ --amino-blue-500: #435dee;
236
+ --amino-blue-600: #568cf6;
237
+ --amino-blue-700: #89adfa;
238
+ --amino-blue-800: #aac8fc;
239
+ --amino-blue-900: #c5dcfd;
240
+ --amino-blue-1000: #deecfe;
241
+ --amino-cyan-100: #183338;
242
+ --amino-cyan-200: #22525a;
243
+ --amino-cyan-300: #236a75;
244
+ --amino-cyan-400: #287e8a;
245
+ --amino-cyan-500: #349dab;
246
+ --amino-cyan-600: #48c4d3;
247
+ --amino-cyan-700: #65e2ef;
248
+ --amino-cyan-800: #8ff1fa;
249
+ --amino-cyan-900: #baf8fd;
250
+ --amino-cyan-1000: #dbfdff;
251
+ --amino-red-100: #3b1119;
252
+ --amino-red-200: #601725;
253
+ --amino-red-300: #841a2f;
254
+ --amino-red-400: #a81e37;
255
+ --amino-red-500: #d3203f;
256
+ --amino-red-600: #f9505b;
257
+ --amino-red-700: #fa8b8b;
258
+ --amino-red-800: #fcb4b2;
259
+ --amino-red-900: #fdd3d0;
260
+ --amino-red-1000: #ffedeb;
261
+ --amino-orange-100: #3c1611;
262
+ --amino-orange-200: #63261a;
263
+ --amino-orange-300: #85341d;
264
+ --amino-orange-400: #a4431d;
265
+ --amino-orange-500: #d7581f;
266
+ --amino-orange-600: #f88548;
267
+ --amino-orange-700: #fca375;
268
+ --amino-orange-800: #fdc2a0;
269
+ --amino-orange-900: #fed5b8;
270
+ --amino-orange-1000: #ffeee0;
271
+ --amino-green-100: #193123;
272
+ --amino-green-200: #214c34;
273
+ --amino-green-300: #236641;
274
+ --amino-green-400: #25794a;
275
+ --amino-green-500: #2a995a;
276
+ --amino-green-600: #4dc477;
277
+ --amino-green-700: #62e488;
278
+ --amino-green-800: #86f99e;
279
+ --amino-green-900: #bafdc2;
280
+ --amino-green-1000: #dbffdd;
281
+ --amino-purple-100: #29143a;
282
+ --amino-purple-200: #461f66;
283
+ --amino-purple-300: #612392;
284
+ --amino-purple-400: #7728b9;
285
+ --amino-purple-500: #9635ee;
286
+ --amino-purple-600: #a379f6;
287
+ --amino-purple-700: #b09ff9;
288
+ --amino-purple-800: #c4c0fc;
289
+ --amino-purple-900: #d8dafd;
290
+ --amino-purple-1000: #eef0ff;
291
+ --amino-transparent-white: #000000bb;
292
+ --amino-transparent-black: #ffffffbb;
293
+ --amino-v3-shadow-base: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
294
+ 0px 1px 3px rgba(0, 0, 0, 0.9), 0px 1px 2px rgba(0, 0, 0, 0.8);
295
+ --amino-v3-shadow-medium: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
296
+ 0px 4px 6px rgba(0, 0, 0, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.8);
297
+ --amino-v3-shadow-large: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
298
+ 0px 10px 15px rgba(0, 0, 0, 0.9), 0px 4px 6px rgba(0, 0, 0, 0.8);
299
+ --amino-v3-shadow-xl: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
300
+ 0px 20px 25px rgba(0, 0, 0, 0.9), 0px 10px 10px rgba(0, 0, 0, 0.8);
301
+ --amino-v3-shadow-xxl: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
302
+ 0px 32px 50px rgba(0, 0, 0, 0.96);
303
+ --amino-v3-shadow-inset: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
304
+ 0px 0px 6px rgba(255, 255, 255, 0.08), 0px 1px 0px #111114,
305
+ 0px 2px 4px rgba(0, 0, 0, 0.24), inset 0px 1px 1px rgba(0, 0, 0, 0.24),
306
+ inset 0px 2px 4px rgba(0, 0, 0, 0.24),
307
+ inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.24),
308
+ inset 0px 0px 8px rgba(0, 0, 0, 0.16);
307
309
  --amino-border: 1px solid var(--amino-border-color);
310
+ --amino-border-blue: 1px solid var(--amino-blue-500);
311
+ --amino-border-red: 1px solid var(--amino-red-400);
312
+ --amino-border-cyan: 1px solid var(--amino-cyan-400);
313
+ --amino-border-orange: 1px solid var(--amino-orange-400);
314
+ --amino-border-green: 1px solid var(--amino-green-400);
315
+ --amino-border-purple: 1px solid var(--amino-purple-400);
316
+ --amino-border-amber: 1px solid var(--amino-amber-400);
317
+ --amino-border-transparent: 1px solid transparent;
318
+ --amino-sidebar-color: var(--amino-gray-0);
319
+ --amino-header-color: var(--amino-gray-0);
320
+ --amino-danger: var(--amino-red-600);
321
+ --amino-danger-dark: var(--amino-red-700);
322
+ --amino-error: var(--amino-red-600);
323
+ --amino-primary: var(--amino-blue-600);
324
+ --amino-primary-light: var(--amino-blue-500);
325
+ --amino-primary-dark: var(--amino-blue-800);
326
+ --amino-success: var(--amino-green-300);
327
+ --amino-success-dark: var(--amino-green-700);
328
+ --amino-warning: var(--amino-amber-100);
329
+ --amino-warning-dark: var(--amino-amber-700);
330
+ --amino-glow-error: 0 0 0 1px var(--amino-red-600);
331
+ --amino-glow-blue: 0 0 0 1px var(--amino-primary);
332
+ --amino-glow-cyan: 0 0 0 1px var(--amino-cyan-600);
333
+ --amino-glow-red: 0 0 0 1px var(--amino-red-600);
334
+ --amino-glow-orange: 0 0 0 1px var(--amino-orange-600);
335
+ --amino-glow-green: 0 0 0 1px var(--amino-green-600);
336
+ --amino-glow-purple: 0 0 0 1px var(--amino-purple-600);
337
+ --amino-page-background: var(--amino-gray-0);
338
+ --amino-border-color: var(--amino-gray-200);
339
+ --amino-hover-color: var(--amino-gray-50);
340
+ --amino-text-color: var(--amino-gray-1000);
341
+ --amino-input-background: var(--amino-gray-0);
342
+ --amino-surface-color: var(--amino-gray-50);
343
+ --amino-surface-color-secondary: var(--amino-gray-100);
344
+ --amino-backdrop-color: var(--amino-gray-100);
308
345
  }
package/types/Color.d.ts CHANGED
@@ -2,4 +2,4 @@ export declare const colorPrefixes: readonly ["blue", "cyan", "green", "orange",
2
2
  export declare const colorContrasts: readonly ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"];
3
3
  export type ColorContrast = typeof colorContrasts[number];
4
4
  export type ColorPrefix = typeof colorPrefixes[number];
5
- export type Color = `${ColorPrefix}${ColorContrast}` | 'black' | 'gray1100' | 'gray1200' | 'gray1300';
5
+ export type Color = 'gray0' | `${ColorPrefix}${ColorContrast}` | 'gray1100' | 'gray1200';
package/types/Theme.d.ts CHANGED
@@ -1 +1 @@
1
- export type Theme = 'light' | 'dark';
1
+ export type Theme = 'day' | 'night' | 'midnight';
package/types/index.d.ts CHANGED
@@ -2,10 +2,10 @@ export type { AlertDialogOpts } from './AlertDialogOpts';
2
2
  export type { Color } from './Color';
3
3
  export type { ConfirmDialogOpts } from './ConfirmDialogOpts';
4
4
  export type { FetcherError } from './FetcherError';
5
- export type { IAminoTheme } from './IAminoTheme';
6
5
  export type { IconProps } from './IconProps';
7
6
  export type { Intent } from './Intent';
8
7
  export type { JsonError } from './JsonError';
9
8
  export type { NoInfer } from './NoInfer';
10
9
  export type { StyledProps } from './StyledProps';
11
10
  export type { SwrtParams } from './SwrtParams';
11
+ export type { Theme } from './Theme';
@@ -0,0 +1,5 @@
1
+ import type { Theme } from "../../types";
2
+ export declare const useAminoTheme: () => {
3
+ aminoTheme: Theme;
4
+ setAminoTheme: (value: Theme) => void;
5
+ };
@@ -0,0 +1 @@
1
+ "use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("./useStorage.js");require("../storage.js"),require("swr"),require("./useSwr.js");exports.useAminoTheme=function(){var s=e.__read(r.useStorage({defaultValue:"day",key:"amino:theme",type:"local"}),2);return{aminoTheme:s[0],setAminoTheme:s[1]}};
@@ -1,5 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- export type DarkModeWrapperProps = {
3
- children: ReactNode;
4
- };
5
- export declare const DarkModeWrapper: ({ children }: DarkModeWrapperProps) => JSX.Element;
@@ -1 +0,0 @@
1
- "use strict";var r=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime");exports.DarkModeWrapper=function(i){var t=i.children;return e.jsx("div",r.__assign({"data-theme":"dark"},{children:t}))};
@@ -1 +0,0 @@
1
- "use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),n=require("react"),t=require("../../utils/getIsInternalLink.js"),s=n.forwardRef((function(n,s){var a=n.className,i=n.children,l=n.href,c=n.title,f=n.internalPaths;return t.getIsInternalLink({href:l,internalPaths:f}).isInternalLink?r.jsx("a",e.__assign({className:a||"",ref:s,title:c,href:l},{children:i})):r.jsx("a",e.__assign({className:a||"",href:l,ref:s,rel:"nofollow noopener noreferrer",target:"_blank",title:c},{children:i}))}));exports.MdxAnchor=s;
@@ -1 +0,0 @@
1
- "use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("../badge/Badge.js"),n=require("styled-components");function s(e){return e&&e.__esModule?e:{default:e}}require("../../styles/constants/theme.js");var a,i=s(n).default.div(a||(a=e.__makeTemplateObject(["\n margin-bottom: 8px;\n"],["\n margin-bottom: 8px;\n"])));exports.MdxBadge=function(n){return t.jsx(i,{children:t.jsx(r.Badge,e.__assign({},n))})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),i=require("../banner/Banner.js"),t=require("../../styles/constants/theme.js"),r=require("styled-components");function s(n){return n&&n.__esModule?n:{default:n}}require("../stack/HStack.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../icons/CheckCircleDuotoneIcon.js"),require("react"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/InfoDuotoneIcon.js"),require("../../icons/RemoveCircleDuotoneIcon.js"),require("../../icons/RemoveIcon.js"),require("../../icons/WarningDuotoneIcon.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js");var o,u=s(r).default.div(o||(o=n.__makeTemplateObject(["\n margin: "," 0;\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: 0;\n }\n p {\n line-height: 20px;\n margin-bottom: 0px !important;\n }\n ul {\n margin: 0px !important;\n li {\n list-style-position: inside;\n margin: 0px !important;\n list-style-type: '• ';\n padding-left: 0;\n\n ul li {\n list-style-type: circle;\n padding-left: 16px;\n }\n\n ::before {\n display: none;\n }\n }\n }\n"],["\n margin: "," 0;\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: 0;\n }\n p {\n line-height: 20px;\n margin-bottom: 0px !important;\n }\n ul {\n margin: 0px !important;\n li {\n list-style-position: inside;\n margin: 0px !important;\n list-style-type: '• ';\n padding-left: 0;\n\n ul li {\n list-style-type: circle;\n padding-left: 16px;\n }\n\n ::before {\n display: none;\n }\n }\n }\n"])),t.theme.space16);exports.MdxBanner=function(t){var r=t.xtitle,s=n.__rest(t,["xtitle"]);return e.jsx(u,{children:e.jsx(i.Banner,n.__assign({},s,{title:r}))})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("../../styles/constants/theme.js");function r(n){return n&&n.__esModule?n:{default:n}}var o,a=r(require("styled-components")).default.div(o||(o=n.__makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n padding: 0 16px;\n\n > a,\n span {\n color: ",";\n border-bottom: none;\n margin: 0 3px 0 5px;\n :hover {\n opacity: 0.9;\n }\n :after {\n content: '/';\n color: ",";\n margin-left: 8px;\n }\n }\n a:first-of-type {\n margin-left: 0;\n }\n span:last-of-type {\n color: ",";\n :after {\n content: none;\n }\n }\n"],["\n font-size: 14px;\n font-weight: 500;\n padding: 0 16px;\n\n > a,\n span {\n color: ",";\n border-bottom: none;\n margin: 0 3px 0 5px;\n :hover {\n opacity: 0.9;\n }\n :after {\n content: '/';\n color: ",";\n margin-left: 8px;\n }\n }\n a:first-of-type {\n margin-left: 0;\n }\n span:last-of-type {\n color: ",";\n :after {\n content: none;\n }\n }\n"])),t.theme.gray800,t.theme.gray500,t.theme.gray300);exports.MdxBreadCrumbs=function(t){var r=t.children,o=t.className;return e.jsx(a,n.__assign({className:o},{children:r}))};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("../button/Button.js"),r=require("../../icons/ArrowRightIcon.js"),i=require("../../styles/constants/theme.js"),o=require("../../utils/getIsInternalLink.js"),a=require("styled-components");function s(n){return n&&n.__esModule?n:{default:n}}require("react"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../../icons/icon-base/_IconBase.js");var u,c=s(a).default.div(u||(u=n.__makeTemplateObject(["\n margin-bottom: 8px;\n max-width: fit-content;\n a {\n color: ",";\n }\n p {\n margin: 0 !important;\n }\n"],["\n margin-bottom: 8px;\n max-width: fit-content;\n a {\n color: ",";\n }\n p {\n margin: 0 !important;\n }\n"])),(function(n){return n.isPrimary?"".concat(i.theme.textLight," !important"):"".concat(i.theme.gray900," !important")})),l=function(i){var a=i.intent,s=i.href,u=i.children,l=i.className,m=i.internalPaths,h=n.__rest(i,["intent","href","children","className","internalPaths"]),p="primary"===a,d=o.getIsInternalLink({href:s,internalPaths:m}).isInternalLink;if(!s)throw new Error("<MdxButton>".concat(u,"</MdxButton> requires an href"));return e.jsx(c,n.__assign({isPrimary:p},{children:e.jsx(t.Button,n.__assign({tag:"a",intent:a,icon:p&&e.jsx(r.ArrowRightIcon,{size:20}),iconRight:p,href:s,target:d?void 0:"_blank",rel:d?void 0:"nofollow noopener noreferrer",className:["link-button",l].join(" ")},h,{children:u}))}))};l.stableName="MdxButton",exports.MdxButton=l;
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),t=require("../../styles/constants/theme.js"),o=require("../../utils/getProductDetails.js"),i=require("styled-components"),s=require("../mdx-anchor/MdxAnchor.js");function c(n){return n&&n.__esModule?n:{default:n}}require("../../icons/custom/products/CheckoutIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/custom/products/ClassifyIcon.js"),require("../../icons/custom/products/ClearIcon.js"),require("../../icons/custom/products/DashboardIcon.js"),require("../../icons/custom/products/HelloIcon.js"),require("../../icons/custom/products/LandedCostIcon.js"),require("../../icons/custom/products/RateIcon.js"),require("../../icons/custom/products/RestrictIcon.js"),require("../../icons/custom/products/ScreenIcon.js"),require("../../utils/getIsInternalLink.js");var a,l,p,d,u=c(i),x=u.default(s.MdxAnchor)(a||(a=n.__makeTemplateObject([""],[""]))),g=u.default.div(p||(p=n.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 1px;\n box-shadow: inset 0px 0px 1px 1px ",";\n border-radius: 12px;\n position: relative;\n font-size: 14px;\n gap: 4px;\n line-height: 24px;\n overflow: hidden;\n cursor: pointer;\n z-index: 0;\n\n ",""," {\n background: ",";\n height: 100%;\n border-radius: 11px;\n padding: 20px 24px;\n }\n ","\n\n b {\n color: ",";\n font-weight: 700;\n }\n p {\n font-weight: 400;\n color: ",";\n margin: 0;\n }\n\n > div {\n display: flex;\n gap: 8px;\n align-items: center;\n\n span {\n color: ",";\n font-size: 12px;\n margin-bottom: 0;\n }\n }\n"],["\n display: flex;\n flex-direction: column;\n padding: 1px;\n box-shadow: inset 0px 0px 1px 1px ",";\n border-radius: 12px;\n position: relative;\n font-size: 14px;\n gap: 4px;\n line-height: 24px;\n overflow: hidden;\n cursor: pointer;\n z-index: 0;\n\n ",""," {\n background: ",";\n height: 100%;\n border-radius: 11px;\n padding: 20px 24px;\n }\n ","\n\n b {\n color: ",";\n font-weight: 700;\n }\n p {\n font-weight: 400;\n color: ",";\n margin: 0;\n }\n\n > div {\n display: flex;\n gap: 8px;\n align-items: center;\n\n span {\n color: ",";\n font-size: 12px;\n margin-bottom: 0;\n }\n }\n"])),t.theme.gray200,x,x,t.theme.gray0,(function(e){return!e.noGlowOnHover&&e.glowingColor&&i.css(l||(l=n.__makeTemplateObject(["\n &::after {\n content: '';\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n top: calc(var(--y, 0) * 1px - 50%);\n left: calc(var(--x, 0) * 1px - 50%);\n background: radial-gradient(\n circle,\n "," 0%,\n white 70%\n );\n filter: blur(20px);\n transition: opacity 0.5s;\n z-index: -1;\n }\n :hover {\n &::after {\n opacity: 1;\n }\n }\n "],["\n &::after {\n content: '';\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n top: calc(var(--y, 0) * 1px - 50%);\n left: calc(var(--x, 0) * 1px - 50%);\n background: radial-gradient(\n circle,\n "," 0%,\n white 70%\n );\n filter: blur(20px);\n transition: opacity 0.5s;\n z-index: -1;\n }\n :hover {\n &::after {\n opacity: 1;\n }\n }\n "])),t.theme["".concat(e.glowingColor,"600")])}),t.theme.primary,t.theme.gray700,t.theme.gray800),h=u.default.div(d||(d=n.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 24px;\n"],["\n display: flex;\n align-items: center;\n gap: 24px;\n"])));exports.MdxCard=function(t){var i=t.product,s=t.glowingColor,c=void 0===s?"gray":s,a=t.noGlowOnHover,l=void 0!==a&&a,p=t.xlabel,d=t.xsubLabel,u=t.children,f=r.useRef(null);r.useEffect((function(){var n=f.current,e=function(e){if(n){var r=n.getBoundingClientRect(),t=r.x,o=r.y;n.style.setProperty("--x",(e.clientX-t).toString()),n.style.setProperty("--y",(e.clientY-o).toString())}};return l||null==n||n.addEventListener("mousemove",e),function(){l||null==n||n.removeEventListener("mousemove",e)}}),[l]);var m=function(){if(u){var n=(u.props||u.props.children.props).href;if(n)return n;throw new Error("MdxCard will only accept one link as a child.")}return null}(),v=o.getProductDetails(i),b=i?v.color:c;return e.jsx(g,n.__assign({ref:f,glowingColor:b,noGlowOnHover:l},{children:e.jsx(x,n.__assign({as:m?"a":"div",href:m||void 0,title:p,className:"link-button"},{children:e.jsxs(h,{children:[i&&e.jsx("div",{children:v.icon}),e.jsxs("div",{children:[e.jsx("b",{children:p}),e.jsx("p",{children:d})]})]})}))}))};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime");function t(n){return n&&n.__esModule?n:{default:n}}var i,r=t(require("styled-components")).default.div(i||(i=n.__makeTemplateObject(["\n display: grid;\n grid-template-columns: ",";\n gap: 16px;\n margin-top: 24px;\n\n > a > div,\n > div {\n height: 100%;\n }\n\n @media (max-width: 1510px) {\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n }\n"],["\n display: grid;\n grid-template-columns: ",";\n gap: 16px;\n margin-top: 24px;\n\n > a > div,\n > div {\n height: 100%;\n }\n\n @media (max-width: 1510px) {\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n }\n"])),(function(n){return n.twoColumn?"repeat(2, minmax(240px, 1fr))":"repeat(3, minmax(240px, 1fr))"}));exports.MdxCardGrid=function(t){var i=t.twoColumn,a=t.children;return e.jsx(r,n.__assign({twoColumn:i},{children:a}))};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),t=require("../badge/Badge.js"),o=require("../button/Button.js"),i=require("../stack/HStack.js"),a=require("../../icons/CopyIcon.js"),s=require("../../styles/constants/theme.js"),l=require("styled-components"),p=require("../../utils/useCopyText.js");function c(n){return n&&n.__esModule?n:{default:n}}require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var d,u,g,h,x,m,f=c(l),b=f.default.div(d||(d=n.__makeTemplateObject(["\n width: 100%;\n background-color: ",";\n border-radius: 12px;\n color: ",";\n margin-bottom: 16px;\n"],["\n width: 100%;\n background-color: ",";\n border-radius: 12px;\n color: ",";\n margin-bottom: 16px;\n"])),s.theme.gray1100,s.theme.gray0),j=f.default.div(u||(u=n.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: ",";\n padding: 8px 16px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n\n p {\n margin: 0;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n }\n"],["\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: ",";\n padding: 8px 16px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n\n p {\n margin: 0;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n }\n"])),s.theme.gray1000),y=f.default.div(g||(g=n.__makeTemplateObject(["\n padding: 16px;\n display: flex;\n max-height: ","px;\n overflow: auto;\n height: fit-content;\n\n pre {\n white-space: pre;\n word-break: break-word;\n border-radius: 0;\n padding: 0;\n background: transparent;\n\n .hljs {\n color: ",";\n background: transparent;\n }\n\n code {\n display: block;\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n line-height: 20px;\n font-weight: 600;\n font-size: 12px;\n\n .hljs- {\n &attr,\n &tag {\n color: ",";\n }\n\n &literal,\n &number {\n color: ",";\n }\n\n &string {\n color: ",";\n }\n }\n\n .key {\n color: ",";\n }\n\n div {\n height: 21px;\n }\n }\n }\n"],["\n padding: 16px;\n display: flex;\n max-height: ","px;\n overflow: auto;\n height: fit-content;\n\n pre {\n white-space: pre;\n word-break: break-word;\n border-radius: 0;\n padding: 0;\n background: transparent;\n\n .hljs {\n color: ",";\n background: transparent;\n }\n\n code {\n display: block;\n font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n line-height: 20px;\n font-weight: 600;\n font-size: 12px;\n\n .hljs- {\n &attr,\n &tag {\n color: ",";\n }\n\n &literal,\n &number {\n color: ",";\n }\n\n &string {\n color: ",";\n }\n }\n\n .key {\n color: ",";\n }\n\n div {\n height: 21px;\n }\n }\n }\n"])),(function(n){return n.maxHeight}),s.theme.gray100,s.theme.gray200,s.theme.blue400,s.theme.purple400,s.theme.orange500),k=f.default(t.Badge)(h||(h=n.__makeTemplateObject(["\n > div {\n background-color: ",";\n p {\n color: #fff;\n }\n }\n"],["\n > div {\n background-color: ",";\n p {\n color: #fff;\n }\n }\n"])),s.theme.gray800),_=f.default.div(x||(x=n.__makeTemplateObject(["\n min-width: 24px;\n line-height: 20px;\n padding: 4px 0;\n font-size: 10px;\n color: ",";\n font-weight: 600;\n -webkit-user-select: none; /* Safari */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* IE10+/Edge */\n user-select: none; /* Standard */\n"],["\n min-width: 24px;\n line-height: 20px;\n padding: 4px 0;\n font-size: 10px;\n color: ",";\n font-weight: 600;\n -webkit-user-select: none; /* Safari */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* IE10+/Edge */\n user-select: none; /* Standard */\n"])),s.theme.gray500),w=f.default(i.HStack)(m||(m=n.__makeTemplateObject(["\n align-items: center;\n"],["\n align-items: center;\n"]))),v=function(n){return n?"string"==typeof n?("".concat(n).match(/\n/g)||[]).length:Array.isArray(n)?n.reduce((function(n,e){return n+v(e)}),0):n.props.children?v(n.props.children):0:0};exports.MdxCodeBlock=function(t){var i=t.children,s=t.xlabel,l=t.type,c=t.maxHeight,d=void 0===c?260:c,u="pre"===(null==i?void 0:i.type)&&i.props.children,g="code"===(null==u?void 0:u.type)&&u.props.children||[],h=v(g),x=p.useCopyText(),m=x.showTooltip,f=x.copyText,q=r.useRef(null);return e.jsxs(b,{children:[e.jsxs(j,{children:[e.jsx("p",{children:s}),e.jsxs(w,n.__assign({spacing:16},{children:[l&&e.jsx(k,{children:l}),m?e.jsx("p",{children:"Copied!"}):e.jsx(o.Button,{intent:"text",icon:e.jsx(a.CopyIcon,{color:"gray100",size:20}),onClick:function(){var n;return f((null===(n=q.current)||void 0===n?void 0:n.innerText)||"Oops... Something went wrong copying the text")}})]}))]}),e.jsxs(y,n.__assign({maxHeight:d},{children:[e.jsx(_,{children:n.__spreadArray([],n.__read(Array(h)),!1).map((function(n,r){return e.jsx("div",{children:r+1},r)}))}),e.jsx("div",n.__assign({ref:q},{children:i}))]}))]})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),i=require("react"),r=require("../button/Button.js"),t=require("../collapse/Collapse.js"),o=require("../../icons/ChevronDownIcon.js"),s=require("../../styles/constants/theme.js"),l=require("../../utils/getHashId.js"),d=require("styled-components"),a=require("../mdx-section/MdxSection.js");function p(n){return n&&n.__esModule?n:{default:n}}require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/LinkIcon.js"),require("../../styles/devices.js"),require("../../utils/useCopyText.js");var u,c,x,g,m=p(d),h=m.default(a.MdxSection)(u||(u=n.__makeTemplateObject(["\n border-top: 1px solid ",";\n border-bottom: 1px solid ",";\n padding: 16px 0;\n border-radius: 0;\n margin: 0 16px;\n\n & + & {\n border-top: none;\n }\n"],["\n border-top: 1px solid ",";\n border-bottom: 1px solid ",";\n padding: 16px 0;\n border-radius: 0;\n margin: 0 16px;\n\n & + & {\n border-top: none;\n }\n"])),s.theme.gray200,s.theme.gray200),f=m.default.div(c||(c=n.__makeTemplateObject(["\n font-size: 24px;\n font-weight: 900;\n color: ",";\n"],["\n font-size: 24px;\n font-weight: 900;\n color: ",";\n"])),s.theme.gray500),v=m.default.div(x||(x=n.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n cursor: pointer;\n padding-bottom: ",";\n transition: padding-bottom 0.3s ease;\n\n > div {\n display: flex;\n gap: 20px;\n align-items: center;\n padding-right: 16px;\n\n > h2 {\n font-size: 22px;\n font-weight: 600;\n margin: 0;\n padding-top: 0;\n display: inline-block;\n }\n }\n"],["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n cursor: pointer;\n padding-bottom: ",";\n transition: padding-bottom 0.3s ease;\n\n > div {\n display: flex;\n gap: 20px;\n align-items: center;\n padding-right: 16px;\n\n > h2 {\n font-size: 22px;\n font-weight: 600;\n margin: 0;\n padding-top: 0;\n display: inline-block;\n }\n }\n"])),(function(n){return n.isCollapsed?"0":"16px"})),b=m.default(o.ChevronDownIcon)(g||(g=n.__makeTemplateObject(["\n transition: 0.2s ease;\n transform: ",";\n"],["\n transition: 0.2s ease;\n transform: ",";\n"])),(function(n){return n.isCollapsed?"none":"rotate(-180deg)"}));exports.MdxCollapse=function(o){var s,d,a,p,u,c,x,g,m=o.stepNumber,j=o.collapse,_=void 0!==j&&j,q=o.children,y=n.__read(i.useState(_),2),w=y[0],C=y[1],k=Array.isArray(q)&&(null==q?void 0:q.find(Boolean)),I="h2"===((null===(s=k.type)||void 0===s?void 0:s.name)||k.type||null),M=I&&k;if(!M)throw new Error("Expecting first child of MdxCollapse to have an H2 label");var T=M&&q.filter((function(n){return n!==M})),z=I?l.getHashId(null===(d=M.props)||void 0===d?void 0:d.children):null===(p=null===(a=M.props)||void 0===a?void 0:a.children)||void 0===p?void 0:p.id,B=I?null===(u=M.props)||void 0===u?void 0:u.children:null===(g=null===(x=null===(c=M.props)||void 0===c?void 0:c.children)||void 0===x?void 0:x.props)||void 0===g?void 0:g.title;return e.jsxs(h,{children:[e.jsxs(v,n.__assign({isCollapsed:w,onClick:function(){return C(!w)}},{children:[e.jsxs("div",{children:[m&&e.jsx(f,{children:m}),e.jsx("h2",n.__assign({id:z},{children:B}))]}),e.jsx(r.Button,{intent:"plain",icon:e.jsx(b,{isCollapsed:w})})]})),e.jsx(t.Collapse,n.__assign({collapsed:w},{children:T||q}))]})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),o=require("../../icons/CheckmarkIcon.js"),i=require("../../icons/CopyIcon.js"),t=require("../../styles/constants/theme.js"),r=require("../../utils/hooks/useNotify.js"),s=require("styled-components"),a=require("../../utils/useCopyText.js");function c(n){return n&&n.__esModule?n:{default:n}}require("react"),require("../../icons/icon-base/_IconBase.js"),require("../toast/ToastContext.js"),require("framer-motion"),require("uuid"),require("../toast/Toast.js"),require("../../icons/CheckCircleDuotoneIcon.js"),require("../../icons/InfoDuotoneIcon.js"),require("../../icons/RemoveCircleDuotoneIcon.js"),require("../../icons/WarningDuotoneIcon.js");var u,d,p=c(s),l=p.default.div(u||(u=n.__makeTemplateObject(["\n width: fit-content;\n border-radius: ",";\n background: ",";\n border: 1px solid ",";\n display: flex;\n align-items: center;\n padding: 8px 8px 8px 12px;\n margin-bottom: 16px;\n position: relative;\n padding-right: 32px;\n max-width: 100%;\n cursor: pointer;\n\n code:not(.hljs) {\n background: none;\n border: none;\n font-size: 14px;\n line-height: 20px;\n padding: 0;\n font-weight: 500;\n margin-right: 4px;\n white-space: nowrap;\n overflow: hidden;\n }\n"],["\n width: fit-content;\n border-radius: ",";\n background: ",";\n border: 1px solid ",";\n display: flex;\n align-items: center;\n padding: 8px 8px 8px 12px;\n margin-bottom: 16px;\n position: relative;\n padding-right: 32px;\n max-width: 100%;\n cursor: pointer;\n\n code:not(.hljs) {\n background: none;\n border: none;\n font-size: 14px;\n line-height: 20px;\n padding: 0;\n font-weight: 500;\n margin-right: 4px;\n white-space: nowrap;\n overflow: hidden;\n }\n"])),t.theme.radius4,t.theme.gray100,t.theme.gray200),h=p.default.div(d||(d=n.__makeTemplateObject(["\n transition: all 0.3s ease;\n transform: ",";\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto;\n right: 10px;\n cursor: pointer;\n"],["\n transition: all 0.3s ease;\n transform: ",";\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto;\n right: 10px;\n cursor: pointer;\n"])),(function(n){return n.showIcon?"scale(1)":"scale(0)"}));exports.MdxCopyValue=function(t){var s=t.text,c=a.useCopyText(),u=c.showTooltip,d=c.copyText,p=r.useNotify();return e.jsxs(l,n.__assign({onClick:function(){return d(s||""),void p("Text was copied!",{intent:"info",duration:4e3})}},{children:[e.jsx("code",{children:s}),e.jsx(h,n.__assign({showIcon:!u},{children:e.jsx(i.CopyIcon,{size:16})})),e.jsx(h,n.__assign({showIcon:u},{children:e.jsx(o.CheckmarkIcon,{size:16})}))]}))};
@@ -1 +0,0 @@
1
- "use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../../styles/constants/theme.js"),r=require("../../styles/devices.js"),i=require("styled-components"),s=require("../mdx-section/MdxSection.js");function a(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/LinkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getHashId.js"),require("../../utils/useCopyText.js");var o,d,l,c=a(i),p=c.default(s.MdxSection)(o||(o=e.__makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n gap: 48px;\n align-items: center;\n\n @media "," {\n flex-direction: column;\n }\n\n > div {\n height: fit-content;\n width: 100%;\n }\n\n h1,\n h2 {\n margin-bottom: 16px;\n }\n\n p {\n margin-bottom: 16px;\n }\n"],["\n width: 100%;\n display: flex;\n justify-content: space-between;\n gap: 48px;\n align-items: center;\n\n @media "," {\n flex-direction: column;\n }\n\n > div {\n height: fit-content;\n width: 100%;\n }\n\n h1,\n h2 {\n margin-bottom: 16px;\n }\n\n p {\n margin-bottom: 16px;\n }\n"])),r.devices.desktop),m=c.default.div(d||(d=e.__makeTemplateObject(["\n img,\n .gatsby-resp-image-wrapper {\n box-shadow: ",";\n border-radius: 10px;\n }\n"],["\n img,\n .gatsby-resp-image-wrapper {\n box-shadow: ",";\n border-radius: 10px;\n }\n"])),t.theme.v3ShadowLarge),u=c.default.div(l||(l=e.__makeTemplateObject(["\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n\n && > a:hover {\n border-bottom: none;\n }\n"],["\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n\n && > a:hover {\n border-bottom: none;\n }\n"])));exports.MdxHero=function(e){var t=e.children;if(!Array.isArray(t))return console.error("The MdxHero component requires at least 2 children elements. See https://amino.zonos.com/?path=/story/amino-mdxhero--mdx-hero for details."),null;var r=t.filter((function(e){return"MdxButton"===e.type.stableName})),i=t.find((function(e){return"MdxImage"===e.type.stableName}))||"",s=r&&t.filter((function(e){return!r.includes(e)&&i!==e}));return n.jsx(p,{children:n.jsxs(n.Fragment,{children:[n.jsxs("div",{children:[s,n.jsx(u,{children:r})]}),i&&n.jsx(m,{children:i})]})})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),i=require("../lightbox/LightBox.js"),t=require("styled-components");function o(n){return n&&n.__esModule?n:{default:n}}require("../dialog/_BaseDialog.js"),require("react-dom"),require("framer-motion"),require("../backdrop/Backdrop.js"),require("../../styles/constants/theme.js");var a,d,s,l=o(t),u=l.default.div(a||(a=n.__makeTemplateObject(["\n position: relative;\n margin: 0 auto;\n display: block;\n margin: ",";\n cursor: pointer;\n width: 100%;\n\n ::after {\n content: '';\n display: ",";\n background: linear-gradient(90deg, #fdff87, #ff9b3f, #00e0ff, #83ff5f);\n position: absolute;\n bottom: 20px;\n left: -50px;\n right: -50px;\n margin: auto;\n height: 50%;\n width: 100%;\n z-index: -1;\n filter: blur(50px);\n }\n\n img {\n border-radius: 10px;\n overflow: hidden;\n }\n"],["\n position: relative;\n margin: 0 auto;\n display: block;\n margin: ",";\n cursor: pointer;\n width: 100%;\n\n ::after {\n content: '';\n display: ",";\n background: linear-gradient(90deg, #fdff87, #ff9b3f, #00e0ff, #83ff5f);\n position: absolute;\n bottom: 20px;\n left: -50px;\n right: -50px;\n margin: auto;\n height: 50%;\n width: 100%;\n z-index: -1;\n filter: blur(50px);\n }\n\n img {\n border-radius: 10px;\n overflow: hidden;\n }\n"])),(function(n){return n.addMargin&&"32px 0"}),(function(n){return n.showColor?"block":"none"})),f=l.default.div(d||(d=n.__makeTemplateObject(["\n filter: ",";\n position: ",";\n"],["\n filter: ",";\n position: ",";\n"])),(function(n){return n.showShadow&&"drop-shadow(0px 4px 6px rgba(10, 10, 11, 0.1))\n drop-shadow(0px 2px 4px rgba(10, 10, 11, 0.06))"}),(function(n){return n.showShadow&&"relative"})),p=l.default(i.LightBox)(s||(s=n.__makeTemplateObject(["\n width: 100%;\n max-width: 700px;\n margin: 32px;\n"],["\n width: 100%;\n max-width: 700px;\n margin: 32px;\n"]))),g=function(i){var t=i.addMargin,o=i.color,a=i.shadow,d=i.children,s=n.__read(r.useState(!1),2),l=s[0],g=s[1];return e.jsxs(e.Fragment,{children:[e.jsx(u,n.__assign({addMargin:t,showColor:o,onClick:function(){return g(!0)}},{children:e.jsx(f,n.__assign({showShadow:a},{children:d}))})),e.jsx(p,n.__assign({open:l,onClose:function(){return g(!1)}},{children:d}))]})};g.stableName="MdxImage",exports.MdxImage=g;
@@ -1 +0,0 @@
1
- "use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("../checkbox/Checkbox.js"),n=require("../text/Text.js"),s=require("../../styles/constants/theme.js"),i=require("../../utils/hooks/useStorage.js"),a=require("styled-components");function c(e){return e&&e.__esModule?e:{default:e}}require("react"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js");var l,o,u,h=c(a),m=h.default(n.Text)(l||(l=e.__makeTemplateObject(["\n font-size: ",";\n"],["\n font-size: ",";\n"])),s.theme.space16),d=h.default.div(o||(o=e.__makeTemplateObject(["\n label {\n /* Align checkbox with list item */\n display: flex;\n align-items: center;\n }\n"],["\n label {\n /* Align checkbox with list item */\n display: flex;\n align-items: center;\n }\n"]))),x=h.default.div(u||(u=e.__makeTemplateObject(["\n margin-left: ",";\n margin-top: ",";\n"],["\n margin-left: ",";\n margin-top: ",";\n"])),s.theme.space24,s.theme.space24);exports.MdxProgressCheckbox=function(n){var s=n.pathname,a=n.checkboxKey,c=n.children,l=n.xlabel;a||console.warn("A unique progress checkbox key is required to track progress");var o="".concat(s,"-").concat(a),u=e.__read(i.useStorage({key:o,type:"local",defaultValue:""}),2),h=u[0],b=u[1];return r.jsxs(d,{children:[r.jsx(t.Checkbox,{checked:!!h,labelComponent:r.jsx(m,e.__assign({type:"bold-label"},{children:l})),label:l,onChange:function(){return b(h?"":"isChecked")}}),r.jsx(x,{children:c})]})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("../button/Button.js"),i=require("../../icons/ArrowRightIcon.js"),o=require("../../styles/constants/theme.js"),t=require("styled-components"),s=require("../../styles/devices.js"),c=require("../../utils/getProductDetails.js");function u(n){return n&&n.__esModule?n:{default:n}}require("react"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/custom/products/CheckoutIcon.js"),require("../../icons/custom/products/ClassifyIcon.js"),require("../../icons/custom/products/ClearIcon.js"),require("../../icons/custom/products/DashboardIcon.js"),require("../../icons/custom/products/HelloIcon.js"),require("../../icons/custom/products/LandedCostIcon.js"),require("../../icons/custom/products/RateIcon.js"),require("../../icons/custom/products/RestrictIcon.js"),require("../../icons/custom/products/ScreenIcon.js");var l,a,p=u(t),d=p.default.div(l||(l=n.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: 16px;\n height: fit-content;\n\n > h4 {\n color: ",";\n font-weight: 700;\n margin-top: 4px;\n }\n > p {\n color: ",";\n font-size: 14px;\n line-height: 24px;\n font-weight: 400;\n margin-bottom: 0;\n }\n > a {\n margin-top: auto;\n padding: 0;\n border-radius: 0;\n\n :hover {\n background: none !important;\n }\n\n @media "," {\n margin-top: 8px;\n }\n }\n"],["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: 16px;\n height: fit-content;\n\n > h4 {\n color: ",";\n font-weight: 700;\n margin-top: 4px;\n }\n > p {\n color: ",";\n font-size: 14px;\n line-height: 24px;\n font-weight: 400;\n margin-bottom: 0;\n }\n > a {\n margin-top: auto;\n padding: 0;\n border-radius: 0;\n\n :hover {\n background: none !important;\n }\n\n @media "," {\n margin-top: 8px;\n }\n }\n"])),o.theme.gray1300,o.theme.gray800,s.devices.mobileL),m=p.default.div(a||(a=n.__makeTemplateObject(["\n display: flex;\n gap: 8px;\n font-size: 12px;\n color: ",";\n align-items: center;\n"],["\n display: flex;\n gap: 8px;\n font-size: 12px;\n color: ",";\n align-items: center;\n"])),o.theme.gray800);exports.MdxRelatedContent=function(o){var t,s,u,l=o.product,a=o.xlabel,p=o.xsubLabel,h=o.children,g=c.getProductDetails(l);if(h&&!Array.isArray(h)){var x=(null===(t=null==h?void 0:h.props)||void 0===t?void 0:t.href)?h.props:null===(u=null===(s=null==h?void 0:h.props)||void 0===s?void 0:s.children)||void 0===u?void 0:u.props,f=x.children,j=x.href;if(f&&j)return e.jsxs(d,{children:[e.jsxs(m,{children:[g.icon,e.jsx("span",{children:g.name})]}),e.jsx("h4",{children:a}),e.jsx("p",{children:p}),e.jsx(r.Button,n.__assign({tag:"a",intent:"link",href:j,iconRight:!0,icon:e.jsx(i.ArrowRightIcon,{size:18,color:"blue600"})},{children:f}))]})}throw new Error("Expected exactly 1 child link in RelatedContent")};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),i=require("react"),r=require("../../icons/LinkIcon.js"),o=require("../../styles/constants/theme.js"),t=require("../../styles/devices.js"),a=require("../../utils/getHashId.js"),s=require("../../utils/useCopyText.js"),l=require("styled-components");function c(n){return n&&n.__esModule?n:{default:n}}require("../../icons/icon-base/_IconBase.js");var p,d,u,y=c(l),h=y.default.section(p||(p=n.__makeTemplateObject(["\n padding: 4px 12px;\n border-radius: 12px;\n border: 1px solid transparent;\n\n .link-icon {\n display: inline;\n white-space: nowrap;\n\n > span {\n font-size: 12px;\n font-weight: 700;\n color: ",";\n display: inline-block;\n vertical-align: middle;\n }\n }\n\n h1,\n h2 {\n scroll-margin-top: 140px;\n\n > div {\n position: relative;\n width: fit-content;\n }\n }\n\n h2 {\n cursor: pointer;\n }\n"],["\n padding: 4px 12px;\n border-radius: 12px;\n border: 1px solid transparent;\n\n .link-icon {\n display: inline;\n white-space: nowrap;\n\n > span {\n font-size: 12px;\n font-weight: 700;\n color: ",";\n display: inline-block;\n vertical-align: middle;\n }\n }\n\n h1,\n h2 {\n scroll-margin-top: 140px;\n\n > div {\n position: relative;\n width: fit-content;\n }\n }\n\n h2 {\n cursor: pointer;\n }\n"])),o.theme.gray500),m=y.default.a(d||(d=n.__makeTemplateObject(["\n "," &:link {\n color: ",";\n border-bottom: none;\n }\n"],["\n "," &:link {\n color: ",";\n border-bottom: none;\n }\n"])),h,o.theme.textColor),k=y.default(r.LinkIcon)(u||(u=n.__makeTemplateObject(["\n display: inline-block;\n opacity: 0;\n white-space: nowrap;\n\n h2:hover .link-icon > & {\n display: inline-block;\n opacity: 1;\n\n @media "," {\n display: none;\n }\n }\n"],["\n display: inline-block;\n opacity: 0;\n white-space: nowrap;\n\n h2:hover .link-icon > & {\n display: inline-block;\n opacity: 1;\n\n @media "," {\n display: none;\n }\n }\n"])),t.devices.tablet);exports.MdxSection=function(r){var o=r.children,t=r.className,l=s.useCopyText(),c=l.showTooltip,p=l.copyText,d="undefined"!=typeof window?window.location.href:null,u=function(r){var o,t=r.node;return Array.isArray(t)?t.flatMap((function(n){return u({node:n})})):"string"==typeof t.type?Array.isArray(t.props.children)?i.cloneElement(t,n.__assign(n.__assign({},t.props),{key:t.key||"k".concat(Math.random())}),t.props.children.map((function(n){return u({node:n})}))):n.__assign(n.__assign({},t),{key:"k".concat(Math.random())}):t.type&&["h1","h2"].includes(t.type.name)?function(r){var o=r.props.children,t=a.getHashId(o),s="#".concat(t);return"h1"===r.type.name?i.createElement(r.type.name,{id:t,key:t},o):i.createElement(r.type.name,{id:t,onClick:function(){return window.innerWidth>768&&d&&p("".concat(d.replace(/#.*/g,"")+s))},key:t},e.jsxs(m,n.__assign({href:s,title:o,className:"link-button"},{children:[o,e.jsxs("span",n.__assign({className:"link-icon"},{children:[" ",c?e.jsx("span",{children:"Copied!"}):e.jsx(k,{size:16})]}))]}),s))}(t):t.props&&Array.isArray(t.props.children)&&t.type.name?i.cloneElement(t,n.__assign(n.__assign({},t.props),{key:t.key}),null===(o=t.props.children)||void 0===o?void 0:o.map((function(n){return u({node:n})}))):t},y=Array.isArray(o)?o.map((function(n){return u({node:n})})):u({node:o});return e.jsx(h,n.__assign({className:"".concat(t||""," comment-mode-section")},{children:y}))};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),e=require("../../styles/constants/theme.js");function i(n){return n&&n.__esModule?n:{default:n}}var r,o=i(require("styled-components")).default.span(r||(r=n.__makeTemplateObject(["\n width: fit-content;\n display: block;\n color: ",";\n font-weight: 500;\n font-size: 22px;\n line-height: 28px;\n margin-top: -4px;\n margin-bottom: 40px;\n"],["\n width: fit-content;\n display: block;\n color: ",";\n font-weight: 500;\n font-size: 22px;\n line-height: 28px;\n margin-top: -4px;\n margin-bottom: 40px;\n"])),e.theme.gray600);exports.MdxSubtitle=function(n){var e=n.children;return t.jsx(o,{children:e})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("../../styles/constants/theme.js");function o(n){return n&&n.__esModule?n:{default:n}}var e,d=o(require("styled-components")).default.div(e||(e=n.__makeTemplateObject(["\n width: 100%;\n overflow: auto;\n margin-top: 16px;\n\n table {\n width: 100%;\n background: white;\n border-radius: 10px;\n font-size: 14px;\n border: 1px solid ",";\n border-collapse: unset;\n border-spacing: 0;\n margin-bottom: ",";\n box-sizing: border-box;\n }\n\n thead strong {\n color: ",";\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n tbody {\n border-radius: 10px;\n }\n\n tr:first-of-type {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n\n th:first-of-type {\n border-top-left-radius: 10px;\n }\n\n th:last-of-type {\n border-top-right-radius: 10px;\n }\n\n th {\n text-align: left;\n font-weight: normal;\n width: fit-content;\n }\n\n td,\n th {\n min-width: 80px;\n border-bottom: 1px solid ",";\n }\n tr:last-of-type td {\n border-bottom: 0;\n }\n\n tr:last-of-type {\n border-bottom: 0;\n }\n\n .numberingColumn {\n padding: 10px 20px;\n }\n\n hr {\n border: 0;\n border-bottom: 1px solid ",";\n margin: 32px 0;\n }\n\n table td,\n table th {\n span {\n display: inline-block;\n }\n vertical-align: top;\n padding: 10px 20px;\n margin: 0;\n }\n\n > table {\n border: none;\n\n tbody {\n tr {\n &:first-of-type > td {\n border-top: 1px solid ",";\n &:first-of-type {\n border-top-left-radius: 12px;\n }\n &:last-of-type {\n border-top-right-radius: 12px;\n }\n }\n\n &:last-of-type > td {\n border-bottom: 1px solid ",";\n &:first-of-type {\n border-bottom-left-radius: 12px;\n }\n &:last-of-type {\n border-bottom-right-radius: 12px;\n }\n }\n\n > td:first-of-type {\n border-left: 1px solid ",";\n }\n > td:last-of-type {\n border-right: 1px solid ",";\n }\n }\n }\n\n thead > tr > th {\n border: none;\n }\n }\n"],["\n width: 100%;\n overflow: auto;\n margin-top: 16px;\n\n table {\n width: 100%;\n background: white;\n border-radius: 10px;\n font-size: 14px;\n border: 1px solid ",";\n border-collapse: unset;\n border-spacing: 0;\n margin-bottom: ",";\n box-sizing: border-box;\n }\n\n thead strong {\n color: ",";\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n tbody {\n border-radius: 10px;\n }\n\n tr:first-of-type {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n\n th:first-of-type {\n border-top-left-radius: 10px;\n }\n\n th:last-of-type {\n border-top-right-radius: 10px;\n }\n\n th {\n text-align: left;\n font-weight: normal;\n width: fit-content;\n }\n\n td,\n th {\n min-width: 80px;\n border-bottom: 1px solid ",";\n }\n tr:last-of-type td {\n border-bottom: 0;\n }\n\n tr:last-of-type {\n border-bottom: 0;\n }\n\n .numberingColumn {\n padding: 10px 20px;\n }\n\n hr {\n border: 0;\n border-bottom: 1px solid ",";\n margin: 32px 0;\n }\n\n table td,\n table th {\n span {\n display: inline-block;\n }\n vertical-align: top;\n padding: 10px 20px;\n margin: 0;\n }\n\n > table {\n border: none;\n\n tbody {\n tr {\n &:first-of-type > td {\n border-top: 1px solid ",";\n &:first-of-type {\n border-top-left-radius: 12px;\n }\n &:last-of-type {\n border-top-right-radius: 12px;\n }\n }\n\n &:last-of-type > td {\n border-bottom: 1px solid ",";\n &:first-of-type {\n border-bottom-left-radius: 12px;\n }\n &:last-of-type {\n border-bottom-right-radius: 12px;\n }\n }\n\n > td:first-of-type {\n border-left: 1px solid ",";\n }\n > td:last-of-type {\n border-right: 1px solid ",";\n }\n }\n }\n\n thead > tr > th {\n border: none;\n }\n }\n"])),r.theme.gray200,r.theme.space16,r.theme.gray900,r.theme.gray200,r.theme.gray200,r.theme.gray200,r.theme.gray200,r.theme.gray200,r.theme.gray200);exports.MdxTable=function(n){var r=n.children;return t.jsx(d,{children:t.jsx("table",{children:r})})};
@@ -1 +0,0 @@
1
- "use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("react"),n=require("framer-motion"),i=require("../tabs/Tabs.js"),a=require("styled-components");function s(e){return e&&e.__esModule?e:{default:e}}require("../../styles/constants/theme.js"),require("../text/Text.js");var o,u=s(a).default(i.Tabs)(o||(o=e.__makeTemplateObject(["\n margin-bottom: 32px;\n"],["\n margin-bottom: 32px;\n"]))),c={enter:function(e){return{x:e>0?1e3:-1e3,opacity:0}},center:{zIndex:1,x:0,opacity:1},exit:function(e){return{zIndex:0,x:e<0?1e3:-1e3,opacity:0,position:"absolute"}}};exports.MdxTabs=function(i){var a=i.children,s=e.__read(r.useState(0),2),o=s[0],l=s[1],d=e.__read(r.useState(1),2),m=d[0],x=d[1],p=a&&Array.isArray(a),b=function(){if(p)return a.filter((function(e){return"Tab"===e.type.stableName}));var e=a;return"Tab"===(null==e?void 0:e.type.stableName)?[e]:[]}(),f=b&&b.map((function(e){return null==e?void 0:e.props.xlabel})),_=b[o];return t.jsxs("div",{children:[t.jsx(u,{items:f||["Error loading tabs"],subtle:!0,selected:o,onChange:function(e){x(e-o),l(e)}}),t.jsx(n.AnimatePresence,e.__assign({initial:!1,custom:m},{children:t.jsx(n.motion.div,e.__assign({variants:c,custom:m,initial:"enter",animate:"center",exit:"exit",transition:{x:{type:"spring",stiffness:400,damping:40},opacity:{duration:.2}}},{children:_}),o)}))]})};
@@ -1 +0,0 @@
1
- "use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),o=require("../dialog/_BaseDialog.js"),r=require("../../icons/PlayCircleDuotoneIcon.js"),i=require("styled-components");function a(n){return n&&n.__esModule?n:{default:n}}require("react-dom"),require("framer-motion"),require("../backdrop/Backdrop.js"),require("../../styles/constants/theme.js"),require("../../icons/icon-base/_IconBase.js");var s,l,c,u=a(i),d=u.default(o.BaseDialog)(s||(s=n.__makeTemplateObject(["\n background: black;\n border: 0;\n"],["\n background: black;\n border: 0;\n"]))),p=u.default.button(l||(l=n.__makeTemplateObject(["\n width: 100%;\n height: 150px;\n background: ",";\n background-size: cover;\n color: #fff;\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n margin-bottom: 16px;\n transition: all 150ms ease-in-out;\n\n svg {\n transition: all 250ms ease-in-out;\n transform: scale(1);\n }\n\n :before {\n transition: all 250ms ease-in-out;\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: #000000;\n opacity: 0.85;\n }\n\n :hover {\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n\n svg {\n transform: scale(1.1);\n }\n\n :before {\n opacity: 0.8;\n }\n }\n"],["\n width: 100%;\n height: 150px;\n background: ",";\n background-size: cover;\n color: #fff;\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n margin-bottom: 16px;\n transition: all 150ms ease-in-out;\n\n svg {\n transition: all 250ms ease-in-out;\n transform: scale(1);\n }\n\n :before {\n transition: all 250ms ease-in-out;\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: #000000;\n opacity: 0.85;\n }\n\n :hover {\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n\n svg {\n transform: scale(1.1);\n }\n\n :before {\n opacity: 0.8;\n }\n }\n"])),(function(n){var e=n.thumbnail;return e&&"url(".concat(e,") center center no-repeat")})),b=u.default.div(c||(c=n.__makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n\n b {\n font-weight: 600;\n }\n"],["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n\n b {\n font-weight: 600;\n }\n"]))),m=function(n){var e,t=n.url,o=null===(e=null==t?void 0:t.match(/^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#\\&?]*).*/))||void 0===e?void 0:e.pop();return{thumbnail:11===(null==o?void 0:o.length)?"https://img.youtube.com/vi/".concat(o,"/0.jpg"):"",videoUrl:"https://www.youtube.com/embed/".concat(o,"?enablejsapi=1")}};exports.MdxVideoGuide=function(o){var i=o.url,a=o.xtitle,s=m({url:i}),l=s.thumbnail,c=s.videoUrl,u=t.useRef(null),g=n.__read(t.useState(!1),2),f=g[0],h=g[1];return t.useEffect((function(){var n,e=null===(n=null==u?void 0:u.current)||void 0===n?void 0:n.contentWindow;e&&(f?e.postMessage('{"event":"command","func":"playVideo","args":""}',"*"):e.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*"))}),[u,f]),e.jsxs(e.Fragment,{children:[e.jsx(p,n.__assign({thumbnail:l,onClick:function(n){n.stopPropagation(),h(!0)}},{children:e.jsxs(b,{children:[e.jsx(r.PlayCircleDuotoneIcon,{color:"gray800",secondaryColor:"gray100"}),e.jsx("b",{children:"Watch the video guide"})]})})),e.jsx(d,n.__assign({width:1080,open:f,onClose:function(){return h(!1)},closeOnBlur:!0,closeOnEsc:!0},{children:e.jsx("iframe",{ref:u,src:c,title:a,allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0,width:"1080",height:"608"})}))]})},exports.getYoutubeVideo=m;