@ncds/ui-admin 0.0.32 → 0.0.34

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 (639) hide show
  1. package/dist/temp/assets/scripts/datePicker.d.ts +49 -0
  2. package/dist/temp/assets/scripts/datePicker.d.ts.map +1 -0
  3. package/dist/temp/assets/scripts/datePicker.js +232 -0
  4. package/dist/temp/assets/scripts/index.d.ts +7 -0
  5. package/dist/temp/assets/scripts/index.d.ts.map +1 -0
  6. package/dist/temp/assets/scripts/index.js +8 -0
  7. package/dist/temp/assets/scripts/slider.d.ts.map +1 -0
  8. package/dist/temp/assets/scripts/slider.js +331 -0
  9. package/dist/temp/assets/scripts/tab.d.ts +8 -0
  10. package/dist/temp/assets/scripts/tab.d.ts.map +1 -0
  11. package/dist/temp/assets/scripts/tab.js +35 -0
  12. package/dist/{types → temp}/constant/color.d.ts +1 -0
  13. package/dist/temp/constant/color.d.ts.map +1 -0
  14. package/dist/temp/constant/color.js +32 -0
  15. package/dist/temp/constant/size.d.ts.map +1 -0
  16. package/dist/temp/constant/size.js +1 -0
  17. package/dist/temp/docusaurus/docusaurus.config.d.ts +4 -0
  18. package/dist/temp/docusaurus/docusaurus.config.d.ts.map +1 -0
  19. package/dist/temp/docusaurus/docusaurus.config.js +300 -0
  20. package/dist/temp/docusaurus/sidebars.d.ts +14 -0
  21. package/dist/temp/docusaurus/sidebars.d.ts.map +1 -0
  22. package/dist/temp/docusaurus/sidebars.js +104 -0
  23. package/dist/temp/docusaurus/src/components/Badge.d.ts +2 -0
  24. package/dist/temp/docusaurus/src/components/Badge.d.ts.map +1 -0
  25. package/dist/temp/docusaurus/src/components/Badge.js +1 -0
  26. package/dist/temp/docusaurus/src/components/BadgeGroup.d.ts +2 -0
  27. package/dist/temp/docusaurus/src/components/BadgeGroup.d.ts.map +1 -0
  28. package/dist/temp/docusaurus/src/components/BadgeGroup.js +1 -0
  29. package/dist/temp/docusaurus/src/components/BreadCrumb.d.ts +3 -0
  30. package/dist/temp/docusaurus/src/components/BreadCrumb.d.ts.map +1 -0
  31. package/dist/temp/docusaurus/src/components/BreadCrumb.js +2 -0
  32. package/dist/temp/docusaurus/src/components/Button.d.ts +2 -0
  33. package/dist/temp/docusaurus/src/components/Button.d.ts.map +1 -0
  34. package/dist/temp/docusaurus/src/components/Button.js +1 -0
  35. package/dist/temp/docusaurus/src/components/ButtonGroup.d.ts +2 -0
  36. package/dist/temp/docusaurus/src/components/ButtonGroup.d.ts.map +1 -0
  37. package/dist/temp/docusaurus/src/components/ButtonGroup.js +1 -0
  38. package/dist/temp/docusaurus/src/components/CarouselArrow.d.ts +2 -0
  39. package/dist/temp/docusaurus/src/components/CarouselArrow.d.ts.map +1 -0
  40. package/dist/temp/docusaurus/src/components/CarouselArrow.js +1 -0
  41. package/dist/temp/docusaurus/src/components/CarouselNumberGroup.d.ts +2 -0
  42. package/dist/temp/docusaurus/src/components/CarouselNumberGroup.d.ts.map +1 -0
  43. package/dist/temp/docusaurus/src/components/CarouselNumberGroup.js +1 -0
  44. package/dist/temp/docusaurus/src/components/Checkbox.d.ts +4 -0
  45. package/dist/temp/docusaurus/src/components/Checkbox.d.ts.map +1 -0
  46. package/dist/temp/docusaurus/src/components/Checkbox.js +20 -0
  47. package/dist/temp/docusaurus/src/components/CodeTabs/index.d.ts +10 -0
  48. package/dist/temp/docusaurus/src/components/CodeTabs/index.d.ts.map +1 -0
  49. package/dist/temp/docusaurus/src/components/CodeTabs/index.js +143 -0
  50. package/dist/temp/docusaurus/src/components/ColorSwatch.d.ts +9 -0
  51. package/dist/temp/docusaurus/src/components/ColorSwatch.d.ts.map +1 -0
  52. package/dist/temp/docusaurus/src/components/ColorSwatch.js +37 -0
  53. package/dist/temp/docusaurus/src/components/DatePicker.d.ts +2 -0
  54. package/dist/temp/docusaurus/src/components/DatePicker.d.ts.map +1 -0
  55. package/dist/temp/docusaurus/src/components/DatePicker.js +1 -0
  56. package/dist/temp/docusaurus/src/components/Divider.d.ts +3 -0
  57. package/dist/temp/docusaurus/src/components/Divider.d.ts.map +1 -0
  58. package/dist/temp/docusaurus/src/components/Divider.js +2 -0
  59. package/dist/temp/docusaurus/src/components/Dot.d.ts +3 -0
  60. package/dist/temp/docusaurus/src/components/Dot.d.ts.map +1 -0
  61. package/dist/temp/docusaurus/src/components/Dot.js +1 -0
  62. package/dist/temp/docusaurus/src/components/Dropdown.d.ts +4 -0
  63. package/dist/temp/docusaurus/src/components/Dropdown.d.ts.map +1 -0
  64. package/dist/temp/docusaurus/src/components/Dropdown.js +20 -0
  65. package/dist/temp/docusaurus/src/components/EmptyState.d.ts +2 -0
  66. package/dist/temp/docusaurus/src/components/EmptyState.d.ts.map +1 -0
  67. package/dist/temp/docusaurus/src/components/EmptyState.js +1 -0
  68. package/dist/temp/docusaurus/src/components/ExampleCode/index.d.ts +9 -0
  69. package/dist/temp/docusaurus/src/components/ExampleCode/index.d.ts.map +1 -0
  70. package/dist/temp/docusaurus/src/components/ExampleCode/index.js +30 -0
  71. package/dist/temp/docusaurus/src/components/ExampleContainer/index.d.ts +8 -0
  72. package/dist/temp/docusaurus/src/components/ExampleContainer/index.d.ts.map +1 -0
  73. package/dist/temp/docusaurus/src/components/ExampleContainer/index.js +30 -0
  74. package/dist/temp/docusaurus/src/components/FeaturedIcon.d.ts +2 -0
  75. package/dist/temp/docusaurus/src/components/FeaturedIcon.d.ts.map +1 -0
  76. package/dist/temp/docusaurus/src/components/FeaturedIcon.js +1 -0
  77. package/dist/temp/docusaurus/src/components/HorizontalTab.d.ts +3 -0
  78. package/dist/temp/docusaurus/src/components/HorizontalTab.d.ts.map +1 -0
  79. package/dist/temp/docusaurus/src/components/HorizontalTab.js +2 -0
  80. package/dist/temp/docusaurus/src/components/IconList.d.ts +2 -0
  81. package/dist/temp/docusaurus/src/components/IconList.d.ts.map +1 -0
  82. package/dist/temp/docusaurus/src/components/IconList.js +1588 -0
  83. package/dist/temp/docusaurus/src/components/Input.d.ts +4 -0
  84. package/dist/temp/docusaurus/src/components/Input.d.ts.map +1 -0
  85. package/dist/temp/docusaurus/src/components/Input.js +3 -0
  86. package/dist/temp/docusaurus/src/components/InteractiveExample/index.d.ts +19 -0
  87. package/dist/temp/docusaurus/src/components/InteractiveExample/index.d.ts.map +1 -0
  88. package/dist/temp/docusaurus/src/components/InteractiveExample/index.js +174 -0
  89. package/dist/temp/docusaurus/src/components/InteractiveIconWrapper.d.ts +46 -0
  90. package/dist/temp/docusaurus/src/components/InteractiveIconWrapper.d.ts.map +1 -0
  91. package/dist/temp/docusaurus/src/components/InteractiveIconWrapper.js +211 -0
  92. package/dist/temp/docusaurus/src/components/Modal.d.ts +8 -0
  93. package/dist/temp/docusaurus/src/components/Modal.d.ts.map +1 -0
  94. package/dist/temp/docusaurus/src/components/Modal.js +30 -0
  95. package/dist/temp/docusaurus/src/components/Notification.d.ts +2 -0
  96. package/dist/temp/docusaurus/src/components/Notification.d.ts.map +1 -0
  97. package/dist/temp/docusaurus/src/components/Notification.js +1 -0
  98. package/dist/temp/docusaurus/src/components/PaginationExample.d.ts +2 -0
  99. package/dist/temp/docusaurus/src/components/PaginationExample.d.ts.map +1 -0
  100. package/dist/temp/docusaurus/src/components/PaginationExample.js +1 -0
  101. package/dist/temp/docusaurus/src/components/ProgressBar.d.ts +3 -0
  102. package/dist/temp/docusaurus/src/components/ProgressBar.d.ts.map +1 -0
  103. package/dist/temp/docusaurus/src/components/ProgressBar.js +2 -0
  104. package/dist/temp/docusaurus/src/components/ProgressCircle.d.ts +3 -0
  105. package/dist/temp/docusaurus/src/components/ProgressCircle.d.ts.map +1 -0
  106. package/dist/temp/docusaurus/src/components/ProgressCircle.js +2 -0
  107. package/dist/temp/docusaurus/src/components/Radio.d.ts +4 -0
  108. package/dist/temp/docusaurus/src/components/Radio.d.ts.map +1 -0
  109. package/dist/temp/docusaurus/src/components/Radio.js +20 -0
  110. package/dist/temp/docusaurus/src/components/RangeDatePicker.d.ts +2 -0
  111. package/dist/temp/docusaurus/src/components/RangeDatePicker.d.ts.map +1 -0
  112. package/dist/temp/docusaurus/src/components/RangeDatePicker.js +1 -0
  113. package/dist/temp/docusaurus/src/components/RangeDatePickerWithButtons.d.ts +2 -0
  114. package/dist/temp/docusaurus/src/components/RangeDatePickerWithButtons.d.ts.map +1 -0
  115. package/dist/temp/docusaurus/src/components/RangeDatePickerWithButtons.js +1 -0
  116. package/dist/temp/docusaurus/src/components/Select.d.ts +4 -0
  117. package/dist/temp/docusaurus/src/components/Select.d.ts.map +1 -0
  118. package/dist/temp/docusaurus/src/components/Select.js +17 -0
  119. package/dist/temp/docusaurus/src/components/Slider.d.ts +3 -0
  120. package/dist/temp/docusaurus/src/components/Slider.d.ts.map +1 -0
  121. package/dist/temp/docusaurus/src/components/Slider.js +1 -0
  122. package/dist/temp/docusaurus/src/components/Spinner.d.ts +2 -0
  123. package/dist/temp/docusaurus/src/components/Spinner.d.ts.map +1 -0
  124. package/dist/temp/docusaurus/src/components/Spinner.js +1 -0
  125. package/dist/temp/docusaurus/src/components/Table.d.ts +43 -0
  126. package/dist/temp/docusaurus/src/components/Table.d.ts.map +1 -0
  127. package/dist/temp/docusaurus/src/components/Table.js +56 -0
  128. package/dist/temp/docusaurus/src/components/Tabs.d.ts +27 -0
  129. package/dist/temp/docusaurus/src/components/Tabs.d.ts.map +1 -0
  130. package/dist/temp/docusaurus/src/components/Tabs.js +49 -0
  131. package/dist/temp/docusaurus/src/components/Tag.d.ts +2 -0
  132. package/dist/temp/docusaurus/src/components/Tag.d.ts.map +1 -0
  133. package/dist/temp/docusaurus/src/components/Tag.js +16 -0
  134. package/dist/temp/docusaurus/src/components/Toggle.d.ts +2 -0
  135. package/dist/temp/docusaurus/src/components/Toggle.d.ts.map +1 -0
  136. package/dist/temp/docusaurus/src/components/Toggle.js +19 -0
  137. package/dist/temp/docusaurus/src/components/TooltipExample.d.ts +2 -0
  138. package/dist/temp/docusaurus/src/components/TooltipExample.d.ts.map +1 -0
  139. package/dist/temp/docusaurus/src/components/TooltipExample.js +1 -0
  140. package/dist/temp/docusaurus/src/components/VerticalTab.d.ts +3 -0
  141. package/dist/temp/docusaurus/src/components/VerticalTab.d.ts.map +1 -0
  142. package/dist/temp/docusaurus/src/components/VerticalTab.js +2 -0
  143. package/dist/temp/docusaurus/src/components/demos/BadgeGroupDemo.d.ts +2 -0
  144. package/dist/temp/docusaurus/src/components/demos/BadgeGroupDemo.d.ts.map +1 -0
  145. package/dist/temp/docusaurus/src/components/demos/BadgeGroupDemo.js +46 -0
  146. package/dist/temp/docusaurus/src/components/demos/DividerDemo.d.ts +9 -0
  147. package/dist/temp/docusaurus/src/components/demos/DividerDemo.d.ts.map +1 -0
  148. package/dist/temp/docusaurus/src/components/demos/DividerDemo.js +40 -0
  149. package/dist/temp/docusaurus/src/components/demos/DotDemo.d.ts +5 -0
  150. package/dist/temp/docusaurus/src/components/demos/DotDemo.d.ts.map +1 -0
  151. package/dist/temp/docusaurus/src/components/demos/DotDemo.js +17 -0
  152. package/dist/temp/docusaurus/src/components/demos/DropdownDemo.d.ts +19 -0
  153. package/dist/temp/docusaurus/src/components/demos/DropdownDemo.d.ts.map +1 -0
  154. package/dist/temp/docusaurus/src/components/demos/DropdownDemo.js +89 -0
  155. package/dist/temp/docusaurus/src/components/demos/FeaturedIconDemo.d.ts +9 -0
  156. package/dist/temp/docusaurus/src/components/demos/FeaturedIconDemo.d.ts.map +1 -0
  157. package/dist/temp/docusaurus/src/components/demos/FeaturedIconDemo.js +6 -0
  158. package/dist/temp/docusaurus/src/components/demos/ModalDemo.d.ts +27 -0
  159. package/dist/temp/docusaurus/src/components/demos/ModalDemo.d.ts.map +1 -0
  160. package/dist/temp/docusaurus/src/components/demos/ModalDemo.js +51 -0
  161. package/dist/temp/docusaurus/src/components/demos/NotificationDemo.d.ts +48 -0
  162. package/dist/temp/docusaurus/src/components/demos/NotificationDemo.d.ts.map +1 -0
  163. package/dist/temp/docusaurus/src/components/demos/NotificationDemo.js +77 -0
  164. package/dist/temp/docusaurus/src/components/demos/SliderDemo.d.ts +18 -0
  165. package/dist/temp/docusaurus/src/components/demos/SliderDemo.d.ts.map +1 -0
  166. package/dist/temp/docusaurus/src/components/demos/SliderDemo.js +24 -0
  167. package/dist/temp/docusaurus/src/components/demos/index.d.ts +8 -0
  168. package/dist/temp/docusaurus/src/components/demos/index.d.ts.map +1 -0
  169. package/dist/temp/docusaurus/src/components/demos/index.js +7 -0
  170. package/dist/temp/docusaurus/src/components/index.d.ts +2 -0
  171. package/dist/temp/docusaurus/src/components/index.d.ts.map +1 -0
  172. package/dist/temp/docusaurus/src/components/index.js +2 -0
  173. package/dist/temp/docusaurus/src/pages/index.d.ts +4 -0
  174. package/dist/temp/docusaurus/src/pages/index.d.ts.map +1 -0
  175. package/dist/temp/docusaurus/src/pages/index.js +10 -0
  176. package/dist/temp/docusaurus/src/step-guide-example/BasicExample.d.ts +3 -0
  177. package/dist/temp/docusaurus/src/step-guide-example/BasicExample.d.ts.map +1 -0
  178. package/dist/temp/docusaurus/src/step-guide-example/BasicExample.js +47 -0
  179. package/dist/temp/docusaurus/src/step-guide-example/ClickableDim.d.ts +3 -0
  180. package/dist/temp/docusaurus/src/step-guide-example/ClickableDim.d.ts.map +1 -0
  181. package/dist/temp/docusaurus/src/step-guide-example/ClickableDim.js +48 -0
  182. package/dist/temp/docusaurus/src/step-guide-example/CustomStyle.d.ts +3 -0
  183. package/dist/temp/docusaurus/src/step-guide-example/CustomStyle.d.ts.map +1 -0
  184. package/dist/temp/docusaurus/src/step-guide-example/CustomStyle.js +50 -0
  185. package/dist/temp/docusaurus/src/step-guide-example/EndCallback.d.ts +3 -0
  186. package/dist/temp/docusaurus/src/step-guide-example/EndCallback.d.ts.map +1 -0
  187. package/dist/temp/docusaurus/src/step-guide-example/EndCallback.js +62 -0
  188. package/dist/temp/docusaurus/src/step-guide-example/GoToStep.d.ts +3 -0
  189. package/dist/temp/docusaurus/src/step-guide-example/GoToStep.d.ts.map +1 -0
  190. package/dist/temp/docusaurus/src/step-guide-example/GoToStep.js +65 -0
  191. package/dist/temp/docusaurus/src/step-guide-example/NoTargetElement.d.ts +3 -0
  192. package/dist/temp/docusaurus/src/step-guide-example/NoTargetElement.d.ts.map +1 -0
  193. package/dist/temp/docusaurus/src/step-guide-example/NoTargetElement.js +63 -0
  194. package/dist/temp/docusaurus/src/step-guide-example/NotUseAnimation.d.ts +3 -0
  195. package/dist/temp/docusaurus/src/step-guide-example/NotUseAnimation.d.ts.map +1 -0
  196. package/dist/temp/docusaurus/src/step-guide-example/NotUseAnimation.js +48 -0
  197. package/dist/temp/docusaurus/src/step-guide-example/PositionExample.d.ts +3 -0
  198. package/dist/temp/docusaurus/src/step-guide-example/PositionExample.d.ts.map +1 -0
  199. package/dist/temp/docusaurus/src/step-guide-example/PositionExample.js +52 -0
  200. package/dist/temp/docusaurus/src/step-guide-example/SetBtnLabel.d.ts +3 -0
  201. package/dist/temp/docusaurus/src/step-guide-example/SetBtnLabel.d.ts.map +1 -0
  202. package/dist/temp/docusaurus/src/step-guide-example/SetBtnLabel.js +52 -0
  203. package/dist/temp/docusaurus/src/step-guide-example/SkipBtn.d.ts +3 -0
  204. package/dist/temp/docusaurus/src/step-guide-example/SkipBtn.d.ts.map +1 -0
  205. package/dist/temp/docusaurus/src/step-guide-example/SkipBtn.js +54 -0
  206. package/dist/temp/docusaurus/src/step-guide-example/StepCount.d.ts +3 -0
  207. package/dist/temp/docusaurus/src/step-guide-example/StepCount.d.ts.map +1 -0
  208. package/dist/temp/docusaurus/src/step-guide-example/StepCount.js +65 -0
  209. package/dist/temp/docusaurus/src/step-guide-example/UseHtml.d.ts +3 -0
  210. package/dist/temp/docusaurus/src/step-guide-example/UseHtml.d.ts.map +1 -0
  211. package/dist/temp/docusaurus/src/step-guide-example/UseHtml.js +46 -0
  212. package/dist/temp/docusaurus/src/step-guide-example/component/ExampleContainer.d.ts +7 -0
  213. package/dist/temp/docusaurus/src/step-guide-example/component/ExampleContainer.d.ts.map +1 -0
  214. package/dist/temp/docusaurus/src/step-guide-example/component/ExampleContainer.js +21 -0
  215. package/dist/temp/docusaurus/src/step-guide-example/util/index.d.ts +5 -0
  216. package/dist/temp/docusaurus/src/step-guide-example/util/index.d.ts.map +1 -0
  217. package/dist/temp/docusaurus/src/step-guide-example/util/index.js +16 -0
  218. package/dist/temp/docusaurus/src/theme/BlogArchivePage/index.d.ts +6 -0
  219. package/dist/temp/docusaurus/src/theme/BlogArchivePage/index.d.ts.map +1 -0
  220. package/dist/temp/docusaurus/src/theme/BlogArchivePage/index.js +46 -0
  221. package/dist/temp/docusaurus/src/theme/BlogSidebar/index.d.ts +6 -0
  222. package/dist/temp/docusaurus/src/theme/BlogSidebar/index.d.ts.map +1 -0
  223. package/dist/temp/docusaurus/src/theme/BlogSidebar/index.js +30 -0
  224. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/Items/Home/index.d.ts +3 -0
  225. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/Items/Home/index.d.ts.map +1 -0
  226. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/Items/Home/index.js +25 -0
  227. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/StructuredData/index.d.ts +4 -0
  228. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/StructuredData/index.d.ts.map +1 -0
  229. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/StructuredData/index.js +20 -0
  230. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/index.d.ts +3 -0
  231. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/index.d.ts.map +1 -0
  232. package/dist/temp/docusaurus/src/theme/DocBreadcrumbs/index.js +46 -0
  233. package/dist/temp/docusaurus/src/utils/html.d.ts +3 -0
  234. package/dist/temp/docusaurus/src/utils/html.d.ts.map +1 -0
  235. package/dist/temp/docusaurus/src/utils/html.js +100 -0
  236. package/dist/temp/index.d.ts.map +1 -0
  237. package/dist/{esm → temp}/index.js +1 -1
  238. package/dist/temp/src/components/badge/Badge.d.ts.map +1 -0
  239. package/dist/temp/src/components/badge/Badge.js +22 -0
  240. package/dist/{types → temp}/src/components/badge/BadgeGroup.d.ts +4 -2
  241. package/dist/temp/src/components/badge/BadgeGroup.d.ts.map +1 -0
  242. package/dist/temp/src/components/badge/BadgeGroup.js +31 -0
  243. package/dist/temp/src/components/badge/index.d.ts.map +1 -0
  244. package/dist/temp/src/components/badge/index.js +2 -0
  245. package/dist/temp/src/components/badge/utils.d.ts.map +1 -0
  246. package/dist/temp/src/components/badge/utils.js +16 -0
  247. package/dist/temp/src/components/breadcrumb/BreadCrumb.d.ts.map +1 -0
  248. package/dist/temp/src/components/breadcrumb/BreadCrumb.js +30 -0
  249. package/dist/temp/src/components/breadcrumb/index.d.ts.map +1 -0
  250. package/dist/temp/src/components/breadcrumb/index.js +1 -0
  251. package/dist/{types → temp}/src/components/button/Button.d.ts +1 -1
  252. package/dist/temp/src/components/button/Button.d.ts.map +1 -0
  253. package/dist/temp/src/components/button/Button.js +89 -0
  254. package/dist/temp/src/components/button/ButtonCloseX.d.ts +9 -0
  255. package/dist/temp/src/components/button/ButtonCloseX.d.ts.map +1 -0
  256. package/dist/temp/src/components/button/ButtonCloseX.js +24 -0
  257. package/dist/temp/src/components/button/ButtonGroup.d.ts.map +1 -0
  258. package/dist/temp/src/components/button/ButtonGroup.js +71 -0
  259. package/dist/temp/src/components/button/index.d.ts.map +1 -0
  260. package/dist/temp/src/components/button/index.js +2 -0
  261. package/dist/temp/src/components/carousel/CarouselArrow.d.ts.map +1 -0
  262. package/dist/temp/src/components/carousel/CarouselArrow.js +23 -0
  263. package/dist/temp/src/components/carousel/CarouselNumberGroup.d.ts.map +1 -0
  264. package/dist/temp/src/components/carousel/CarouselNumberGroup.js +23 -0
  265. package/dist/temp/src/components/carousel/index.d.ts.map +1 -0
  266. package/dist/temp/src/components/carousel/index.js +2 -0
  267. package/dist/temp/src/components/checkbox/Checkbox.d.ts.map +1 -0
  268. package/dist/temp/src/components/checkbox/Checkbox.js +29 -0
  269. package/dist/temp/src/components/checkbox/CheckboxInput.d.ts.map +1 -0
  270. package/dist/temp/src/components/checkbox/CheckboxInput.js +37 -0
  271. package/dist/temp/src/components/checkbox/index.d.ts.map +1 -0
  272. package/dist/temp/src/components/checkbox/index.js +2 -0
  273. package/dist/{types → temp}/src/components/date-picker/DatePicker.d.ts +3 -2
  274. package/dist/temp/src/components/date-picker/DatePicker.d.ts.map +1 -0
  275. package/dist/temp/src/components/date-picker/DatePicker.js +39 -0
  276. package/dist/{types → temp}/src/components/date-picker/RangeDatePicker.d.ts +2 -1
  277. package/dist/temp/src/components/date-picker/RangeDatePicker.d.ts.map +1 -0
  278. package/dist/temp/src/components/date-picker/RangeDatePicker.js +127 -0
  279. package/dist/temp/src/components/date-picker/RangeDatePickerWithButtons.d.ts.map +1 -0
  280. package/dist/temp/src/components/date-picker/RangeDatePickerWithButtons.js +46 -0
  281. package/dist/temp/src/components/date-picker/index.d.ts.map +1 -0
  282. package/dist/{esm → temp}/src/components/date-picker/index.js +1 -1
  283. package/dist/temp/src/components/date-picker/utils.d.ts.map +1 -0
  284. package/dist/temp/src/components/date-picker/utils.js +8 -0
  285. package/dist/temp/src/components/divider/Divider.d.ts.map +1 -0
  286. package/dist/temp/src/components/divider/Divider.js +24 -0
  287. package/dist/temp/src/components/divider/index.d.ts.map +1 -0
  288. package/dist/temp/src/components/divider/index.js +1 -0
  289. package/dist/temp/src/components/dot/Dot.d.ts.map +1 -0
  290. package/dist/temp/src/components/dot/Dot.js +30 -0
  291. package/dist/temp/src/components/dot/index.d.ts.map +1 -0
  292. package/dist/temp/src/components/dot/index.js +1 -0
  293. package/dist/{types → temp}/src/components/dropdown/Dropdown.d.ts +1 -0
  294. package/dist/temp/src/components/dropdown/Dropdown.d.ts.map +1 -0
  295. package/dist/temp/src/components/dropdown/Dropdown.js +82 -0
  296. package/dist/temp/src/components/dropdown/index.d.ts.map +1 -0
  297. package/dist/temp/src/components/dropdown/index.js +1 -0
  298. package/dist/temp/src/components/empty-state/EmptyState.d.ts.map +1 -0
  299. package/dist/temp/src/components/empty-state/EmptyState.js +32 -0
  300. package/dist/temp/src/components/empty-state/index.d.ts.map +1 -0
  301. package/dist/temp/src/components/empty-state/index.js +1 -0
  302. package/dist/temp/src/components/featured-icon/FeaturedIcon.d.ts.map +1 -0
  303. package/dist/temp/src/components/featured-icon/FeaturedIcon.js +36 -0
  304. package/dist/temp/src/components/featured-icon/index.d.ts.map +1 -0
  305. package/dist/temp/src/components/featured-icon/index.js +1 -0
  306. package/dist/temp/src/components/index.d.ts.map +1 -0
  307. package/dist/{esm → temp}/src/components/index.js +1 -1
  308. package/dist/temp/src/components/input/InputBase.d.ts.map +1 -0
  309. package/dist/temp/src/components/input/InputBase.js +91 -0
  310. package/dist/{types → temp}/src/components/input/PasswordInput.d.ts +1 -0
  311. package/dist/temp/src/components/input/PasswordInput.d.ts.map +1 -0
  312. package/dist/temp/src/components/input/PasswordInput.js +75 -0
  313. package/dist/temp/src/components/input/Textarea.d.ts.map +1 -0
  314. package/dist/temp/src/components/input/Textarea.js +60 -0
  315. package/dist/temp/src/components/input/index.d.ts.map +1 -0
  316. package/dist/{esm → temp}/src/components/input/index.js +1 -1
  317. package/dist/{types → temp}/src/components/modal/Modal.d.ts +1 -1
  318. package/dist/temp/src/components/modal/Modal.d.ts.map +1 -0
  319. package/dist/temp/src/components/modal/Modal.js +100 -0
  320. package/dist/temp/src/components/modal/index.d.ts.map +1 -0
  321. package/dist/temp/src/components/modal/index.js +1 -0
  322. package/dist/{types → temp}/src/components/notification/FloatingNotification.d.ts +3 -4
  323. package/dist/temp/src/components/notification/FloatingNotification.d.ts.map +1 -0
  324. package/dist/temp/src/components/notification/FloatingNotification.js +50 -0
  325. package/dist/{types → temp}/src/components/notification/FullWidthNotification.d.ts +3 -4
  326. package/dist/temp/src/components/notification/FullWidthNotification.d.ts.map +1 -0
  327. package/dist/temp/src/components/notification/FullWidthNotification.js +47 -0
  328. package/dist/{types → temp}/src/components/notification/Notification.d.ts +5 -4
  329. package/dist/temp/src/components/notification/Notification.d.ts.map +1 -0
  330. package/dist/temp/src/components/notification/Notification.js +31 -0
  331. package/dist/{types → temp}/src/components/notification/index.d.ts +1 -1
  332. package/dist/temp/src/components/notification/index.d.ts.map +1 -0
  333. package/dist/{esm → temp}/src/components/notification/index.js +1 -1
  334. package/dist/temp/src/components/pagination/NavButton.d.ts.map +1 -0
  335. package/dist/temp/src/components/pagination/NavButton.js +66 -0
  336. package/dist/temp/src/components/pagination/Pagination.d.ts.map +1 -0
  337. package/dist/temp/src/components/pagination/Pagination.js +97 -0
  338. package/dist/temp/src/components/pagination/index.d.ts.map +1 -0
  339. package/dist/temp/src/components/pagination/index.js +2 -0
  340. package/dist/temp/src/components/progress-bar/ProgressBar.d.ts.map +1 -0
  341. package/dist/temp/src/components/progress-bar/ProgressBar.js +25 -0
  342. package/dist/temp/src/components/progress-bar/index.d.ts.map +1 -0
  343. package/dist/temp/src/components/progress-bar/index.js +1 -0
  344. package/dist/temp/src/components/progress-circle/ProgressCircle.d.ts.map +1 -0
  345. package/dist/temp/src/components/progress-circle/ProgressCircle.js +22 -0
  346. package/dist/temp/src/components/progress-circle/index.d.ts.map +1 -0
  347. package/dist/temp/src/components/progress-circle/index.js +1 -0
  348. package/dist/temp/src/components/radio/Radio.d.ts.map +1 -0
  349. package/dist/temp/src/components/radio/Radio.js +29 -0
  350. package/dist/temp/src/components/radio/RadioInput.d.ts.map +1 -0
  351. package/dist/temp/src/components/radio/RadioInput.js +29 -0
  352. package/dist/temp/src/components/radio/index.d.ts.map +1 -0
  353. package/dist/temp/src/components/radio/index.js +2 -0
  354. package/dist/temp/src/components/select/Select.d.ts.map +1 -0
  355. package/dist/temp/src/components/select/Select.js +38 -0
  356. package/dist/temp/src/components/select/index.d.ts.map +1 -0
  357. package/dist/temp/src/components/select/index.js +1 -0
  358. package/dist/{types → temp}/src/components/shared/hintText/HintText.d.ts +1 -0
  359. package/dist/temp/src/components/shared/hintText/HintText.d.ts.map +1 -0
  360. package/dist/temp/src/components/shared/hintText/HintText.js +28 -0
  361. package/dist/temp/src/components/shared/hintText/index.d.ts.map +1 -0
  362. package/dist/temp/src/components/shared/hintText/index.js +1 -0
  363. package/dist/temp/src/components/shared/index.d.ts.map +1 -0
  364. package/dist/{esm → temp}/src/components/shared/index.js +1 -1
  365. package/dist/{types → temp}/src/components/shared/label/Label.d.ts +1 -0
  366. package/dist/temp/src/components/shared/label/Label.d.ts.map +1 -0
  367. package/dist/temp/src/components/shared/label/Label.js +28 -0
  368. package/dist/temp/src/components/shared/label/index.d.ts.map +1 -0
  369. package/dist/temp/src/components/shared/label/index.js +1 -0
  370. package/dist/temp/src/components/slider/Slider.d.ts.map +1 -0
  371. package/dist/temp/src/components/slider/Slider.js +44 -0
  372. package/dist/temp/src/components/slider/index.d.ts.map +1 -0
  373. package/dist/temp/src/components/slider/index.js +1 -0
  374. package/dist/temp/src/components/spinner/Spinner.d.ts.map +1 -0
  375. package/dist/temp/src/components/spinner/Spinner.js +21 -0
  376. package/dist/temp/src/components/spinner/index.d.ts.map +1 -0
  377. package/dist/{esm → temp}/src/components/spinner/index.js +1 -1
  378. package/dist/temp/src/components/tab/HorizontalTab.d.ts.map +1 -0
  379. package/dist/temp/src/components/tab/HorizontalTab.js +44 -0
  380. package/dist/temp/src/components/tab/TabButton.d.ts.map +1 -0
  381. package/dist/temp/src/components/tab/TabButton.js +38 -0
  382. package/dist/temp/src/components/tab/VerticalTab.d.ts.map +1 -0
  383. package/dist/temp/src/components/tab/VerticalTab.js +39 -0
  384. package/dist/temp/src/components/tab/index.d.ts.map +1 -0
  385. package/dist/{esm → temp}/src/components/tab/index.js +1 -1
  386. package/dist/temp/src/components/tag/Tag.d.ts.map +1 -0
  387. package/dist/temp/src/components/tag/Tag.js +34 -0
  388. package/dist/temp/src/components/tag/index.d.ts.map +1 -0
  389. package/dist/temp/src/components/tag/index.js +1 -0
  390. package/dist/temp/src/components/toggle/Toggle.d.ts.map +1 -0
  391. package/dist/temp/src/components/toggle/Toggle.js +30 -0
  392. package/dist/temp/src/components/toggle/index.d.ts.map +1 -0
  393. package/dist/temp/src/components/toggle/index.js +1 -0
  394. package/dist/temp/src/components/tooltip/Tooltip.d.ts.map +1 -0
  395. package/dist/temp/src/components/tooltip/Tooltip.js +23 -0
  396. package/dist/temp/src/components/tooltip/index.d.ts.map +1 -0
  397. package/dist/temp/src/components/tooltip/index.js +1 -0
  398. package/dist/temp/src/constant/breakpoint.d.ts +7 -0
  399. package/dist/temp/src/constant/breakpoint.d.ts.map +1 -0
  400. package/dist/temp/src/constant/breakpoint.js +6 -0
  401. package/dist/temp/src/constant/date-picker.d.ts.map +1 -0
  402. package/dist/temp/src/constant/date-picker.js +53 -0
  403. package/dist/temp/src/constant/index.d.ts.map +1 -0
  404. package/dist/temp/src/constant/index.js +2 -0
  405. package/dist/temp/src/constant/size.d.ts.map +1 -0
  406. package/dist/temp/src/constant/size.js +1 -0
  407. package/dist/temp/src/hooks/useMediaQuery.d.ts +6 -0
  408. package/dist/temp/src/hooks/useMediaQuery.d.ts.map +1 -0
  409. package/dist/temp/src/hooks/useMediaQuery.js +20 -0
  410. package/dist/temp/src/utils/date-picker.d.ts.map +1 -0
  411. package/dist/temp/src/utils/date-picker.js +12 -0
  412. package/dist/temp/tsconfig.tsbuildinfo +1 -0
  413. package/package.json +3 -2
  414. package/dist/cjs/assets/scripts/index.js +0 -27
  415. package/dist/cjs/assets/scripts/slider.js +0 -341
  416. package/dist/cjs/assets/scripts/test.js +0 -10
  417. package/dist/cjs/constant/color.js +0 -37
  418. package/dist/cjs/constant/size.js +0 -5
  419. package/dist/cjs/index.js +0 -313
  420. package/dist/cjs/src/components/badge/Badge.js +0 -52
  421. package/dist/cjs/src/components/badge/BadgeGroup.js +0 -57
  422. package/dist/cjs/src/components/badge/index.js +0 -27
  423. package/dist/cjs/src/components/badge/utils.js +0 -33
  424. package/dist/cjs/src/components/breadcrumb/BreadCrumb.js +0 -67
  425. package/dist/cjs/src/components/breadcrumb/index.js +0 -16
  426. package/dist/cjs/src/components/button/Button.js +0 -127
  427. package/dist/cjs/src/components/button/ButtonGroup.js +0 -121
  428. package/dist/cjs/src/components/button/index.js +0 -27
  429. package/dist/cjs/src/components/carousel/CarouselArrow.js +0 -41
  430. package/dist/cjs/src/components/carousel/CarouselNumberGroup.js +0 -46
  431. package/dist/cjs/src/components/carousel/index.js +0 -27
  432. package/dist/cjs/src/components/checkbox/Checkbox.js +0 -70
  433. package/dist/cjs/src/components/checkbox/CheckboxInput.js +0 -96
  434. package/dist/cjs/src/components/checkbox/index.js +0 -27
  435. package/dist/cjs/src/components/date-picker/DatePicker.js +0 -87
  436. package/dist/cjs/src/components/date-picker/RangeDatePicker.js +0 -118
  437. package/dist/cjs/src/components/date-picker/RangeDatePickerWithButtons.js +0 -92
  438. package/dist/cjs/src/components/date-picker/index.js +0 -49
  439. package/dist/cjs/src/components/date-picker/utils.js +0 -18
  440. package/dist/cjs/src/components/divider/Divider.js +0 -47
  441. package/dist/cjs/src/components/divider/index.js +0 -16
  442. package/dist/cjs/src/components/dot/Dot.js +0 -41
  443. package/dist/cjs/src/components/dot/index.js +0 -16
  444. package/dist/cjs/src/components/dropdown/Dropdown.js +0 -206
  445. package/dist/cjs/src/components/dropdown/index.js +0 -16
  446. package/dist/cjs/src/components/empty-state/EmptyState.js +0 -58
  447. package/dist/cjs/src/components/empty-state/index.js +0 -16
  448. package/dist/cjs/src/components/featured-icon/FeaturedIcon.js +0 -62
  449. package/dist/cjs/src/components/featured-icon/index.js +0 -16
  450. package/dist/cjs/src/components/index.js +0 -291
  451. package/dist/cjs/src/components/input/InputBase.js +0 -184
  452. package/dist/cjs/src/components/input/PasswordInput.js +0 -94
  453. package/dist/cjs/src/components/input/Textarea.js +0 -115
  454. package/dist/cjs/src/components/input/index.js +0 -38
  455. package/dist/cjs/src/components/modal/Modal.js +0 -196
  456. package/dist/cjs/src/components/modal/index.js +0 -16
  457. package/dist/cjs/src/components/notification/FloatingNotification.js +0 -104
  458. package/dist/cjs/src/components/notification/FullWidthNotification.js +0 -112
  459. package/dist/cjs/src/components/notification/Notification.js +0 -66
  460. package/dist/cjs/src/components/notification/index.js +0 -38
  461. package/dist/cjs/src/components/pagination/NavButton.js +0 -93
  462. package/dist/cjs/src/components/pagination/Pagination.js +0 -161
  463. package/dist/cjs/src/components/pagination/index.js +0 -27
  464. package/dist/cjs/src/components/progress-bar/ProgressBar.js +0 -57
  465. package/dist/cjs/src/components/progress-bar/index.js +0 -16
  466. package/dist/cjs/src/components/progress-circle/ProgressCircle.js +0 -121
  467. package/dist/cjs/src/components/progress-circle/index.js +0 -16
  468. package/dist/cjs/src/components/radio/Radio.js +0 -65
  469. package/dist/cjs/src/components/radio/RadioInput.js +0 -50
  470. package/dist/cjs/src/components/radio/index.js +0 -27
  471. package/dist/cjs/src/components/select/Select.js +0 -98
  472. package/dist/cjs/src/components/select/index.js +0 -16
  473. package/dist/cjs/src/components/shared/hintText/HintText.js +0 -43
  474. package/dist/cjs/src/components/shared/hintText/index.js +0 -16
  475. package/dist/cjs/src/components/shared/index.js +0 -27
  476. package/dist/cjs/src/components/shared/label/Label.js +0 -43
  477. package/dist/cjs/src/components/shared/label/index.js +0 -16
  478. package/dist/cjs/src/components/slider/Slider.js +0 -64
  479. package/dist/cjs/src/components/slider/index.js +0 -16
  480. package/dist/cjs/src/components/spinner/Spinner.js +0 -53
  481. package/dist/cjs/src/components/spinner/index.js +0 -27
  482. package/dist/cjs/src/components/tab/HorizontalTab.js +0 -77
  483. package/dist/cjs/src/components/tab/TabButton.js +0 -76
  484. package/dist/cjs/src/components/tab/VerticalTab.js +0 -75
  485. package/dist/cjs/src/components/tab/index.js +0 -38
  486. package/dist/cjs/src/components/tag/Tag.js +0 -78
  487. package/dist/cjs/src/components/tag/index.js +0 -16
  488. package/dist/cjs/src/components/toggle/Toggle.js +0 -75
  489. package/dist/cjs/src/components/toggle/index.js +0 -16
  490. package/dist/cjs/src/components/tooltip/Tooltip.js +0 -74
  491. package/dist/cjs/src/components/tooltip/index.js +0 -16
  492. package/dist/cjs/src/constant/date-picker.js +0 -63
  493. package/dist/cjs/src/constant/index.js +0 -27
  494. package/dist/cjs/src/constant/size.js +0 -7
  495. package/dist/cjs/src/utils/date-picker.js +0 -26
  496. package/dist/esm/assets/scripts/index.js +0 -2
  497. package/dist/esm/assets/scripts/slider.js +0 -336
  498. package/dist/esm/assets/scripts/test.js +0 -3
  499. package/dist/esm/constant/color.js +0 -31
  500. package/dist/esm/constant/size.js +0 -1
  501. package/dist/esm/src/components/badge/Badge.js +0 -44
  502. package/dist/esm/src/components/badge/BadgeGroup.js +0 -49
  503. package/dist/esm/src/components/badge/index.js +0 -2
  504. package/dist/esm/src/components/badge/utils.js +0 -25
  505. package/dist/esm/src/components/breadcrumb/BreadCrumb.js +0 -59
  506. package/dist/esm/src/components/breadcrumb/index.js +0 -1
  507. package/dist/esm/src/components/button/Button.js +0 -120
  508. package/dist/esm/src/components/button/ButtonGroup.js +0 -111
  509. package/dist/esm/src/components/button/index.js +0 -2
  510. package/dist/esm/src/components/carousel/CarouselArrow.js +0 -33
  511. package/dist/esm/src/components/carousel/CarouselNumberGroup.js +0 -38
  512. package/dist/esm/src/components/carousel/index.js +0 -2
  513. package/dist/esm/src/components/checkbox/Checkbox.js +0 -62
  514. package/dist/esm/src/components/checkbox/CheckboxInput.js +0 -89
  515. package/dist/esm/src/components/checkbox/index.js +0 -2
  516. package/dist/esm/src/components/date-picker/DatePicker.js +0 -79
  517. package/dist/esm/src/components/date-picker/RangeDatePicker.js +0 -110
  518. package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js +0 -85
  519. package/dist/esm/src/components/date-picker/utils.js +0 -10
  520. package/dist/esm/src/components/divider/Divider.js +0 -40
  521. package/dist/esm/src/components/divider/index.js +0 -1
  522. package/dist/esm/src/components/dot/Dot.js +0 -34
  523. package/dist/esm/src/components/dot/index.js +0 -1
  524. package/dist/esm/src/components/dropdown/Dropdown.js +0 -198
  525. package/dist/esm/src/components/dropdown/index.js +0 -1
  526. package/dist/esm/src/components/empty-state/EmptyState.js +0 -51
  527. package/dist/esm/src/components/empty-state/index.js +0 -1
  528. package/dist/esm/src/components/featured-icon/FeaturedIcon.js +0 -55
  529. package/dist/esm/src/components/featured-icon/index.js +0 -1
  530. package/dist/esm/src/components/input/InputBase.js +0 -177
  531. package/dist/esm/src/components/input/PasswordInput.js +0 -87
  532. package/dist/esm/src/components/input/Textarea.js +0 -108
  533. package/dist/esm/src/components/modal/Modal.js +0 -188
  534. package/dist/esm/src/components/modal/index.js +0 -1
  535. package/dist/esm/src/components/notification/FloatingNotification.js +0 -97
  536. package/dist/esm/src/components/notification/FullWidthNotification.js +0 -105
  537. package/dist/esm/src/components/notification/Notification.js +0 -59
  538. package/dist/esm/src/components/pagination/NavButton.js +0 -86
  539. package/dist/esm/src/components/pagination/Pagination.js +0 -153
  540. package/dist/esm/src/components/pagination/index.js +0 -2
  541. package/dist/esm/src/components/progress-bar/ProgressBar.js +0 -50
  542. package/dist/esm/src/components/progress-bar/index.js +0 -1
  543. package/dist/esm/src/components/progress-circle/ProgressCircle.js +0 -114
  544. package/dist/esm/src/components/progress-circle/index.js +0 -1
  545. package/dist/esm/src/components/radio/Radio.js +0 -57
  546. package/dist/esm/src/components/radio/RadioInput.js +0 -43
  547. package/dist/esm/src/components/radio/index.js +0 -2
  548. package/dist/esm/src/components/select/Select.js +0 -91
  549. package/dist/esm/src/components/select/index.js +0 -1
  550. package/dist/esm/src/components/shared/hintText/HintText.js +0 -35
  551. package/dist/esm/src/components/shared/hintText/index.js +0 -1
  552. package/dist/esm/src/components/shared/label/Label.js +0 -35
  553. package/dist/esm/src/components/shared/label/index.js +0 -1
  554. package/dist/esm/src/components/slider/Slider.js +0 -57
  555. package/dist/esm/src/components/slider/index.js +0 -1
  556. package/dist/esm/src/components/spinner/Spinner.js +0 -45
  557. package/dist/esm/src/components/tab/HorizontalTab.js +0 -69
  558. package/dist/esm/src/components/tab/TabButton.js +0 -68
  559. package/dist/esm/src/components/tab/VerticalTab.js +0 -67
  560. package/dist/esm/src/components/tag/Tag.js +0 -70
  561. package/dist/esm/src/components/tag/index.js +0 -1
  562. package/dist/esm/src/components/toggle/Toggle.js +0 -67
  563. package/dist/esm/src/components/toggle/index.js +0 -1
  564. package/dist/esm/src/components/tooltip/Tooltip.js +0 -66
  565. package/dist/esm/src/components/tooltip/index.js +0 -1
  566. package/dist/esm/src/constant/date-picker.js +0 -57
  567. package/dist/esm/src/constant/index.js +0 -2
  568. package/dist/esm/src/constant/size.js +0 -1
  569. package/dist/esm/src/utils/date-picker.js +0 -17
  570. package/dist/types/assets/scripts/index.d.ts +0 -3
  571. package/dist/types/assets/scripts/test.d.ts +0 -2
  572. package/dist/ui-admin/assets/images/sprite.png +0 -0
  573. package/dist/ui-admin/assets/styles/style.css +0 -3688
  574. /package/dist/{types → temp}/assets/scripts/slider.d.ts +0 -0
  575. /package/dist/{types → temp}/constant/size.d.ts +0 -0
  576. /package/dist/{types → temp}/index.d.ts +0 -0
  577. /package/dist/{types → temp}/src/components/badge/Badge.d.ts +0 -0
  578. /package/dist/{types → temp}/src/components/badge/index.d.ts +0 -0
  579. /package/dist/{types → temp}/src/components/badge/utils.d.ts +0 -0
  580. /package/dist/{types → temp}/src/components/breadcrumb/BreadCrumb.d.ts +0 -0
  581. /package/dist/{types → temp}/src/components/breadcrumb/index.d.ts +0 -0
  582. /package/dist/{types → temp}/src/components/button/ButtonGroup.d.ts +0 -0
  583. /package/dist/{types → temp}/src/components/button/index.d.ts +0 -0
  584. /package/dist/{types → temp}/src/components/carousel/CarouselArrow.d.ts +0 -0
  585. /package/dist/{types → temp}/src/components/carousel/CarouselNumberGroup.d.ts +0 -0
  586. /package/dist/{types → temp}/src/components/carousel/index.d.ts +0 -0
  587. /package/dist/{types → temp}/src/components/checkbox/Checkbox.d.ts +0 -0
  588. /package/dist/{types → temp}/src/components/checkbox/CheckboxInput.d.ts +0 -0
  589. /package/dist/{types → temp}/src/components/checkbox/index.d.ts +0 -0
  590. /package/dist/{types → temp}/src/components/date-picker/RangeDatePickerWithButtons.d.ts +0 -0
  591. /package/dist/{types → temp}/src/components/date-picker/index.d.ts +0 -0
  592. /package/dist/{types → temp}/src/components/date-picker/utils.d.ts +0 -0
  593. /package/dist/{types → temp}/src/components/divider/Divider.d.ts +0 -0
  594. /package/dist/{types → temp}/src/components/divider/index.d.ts +0 -0
  595. /package/dist/{types → temp}/src/components/dot/Dot.d.ts +0 -0
  596. /package/dist/{types → temp}/src/components/dot/index.d.ts +0 -0
  597. /package/dist/{types → temp}/src/components/dropdown/index.d.ts +0 -0
  598. /package/dist/{types → temp}/src/components/empty-state/EmptyState.d.ts +0 -0
  599. /package/dist/{types → temp}/src/components/empty-state/index.d.ts +0 -0
  600. /package/dist/{types → temp}/src/components/featured-icon/FeaturedIcon.d.ts +0 -0
  601. /package/dist/{types → temp}/src/components/featured-icon/index.d.ts +0 -0
  602. /package/dist/{types → temp}/src/components/index.d.ts +0 -0
  603. /package/dist/{types → temp}/src/components/input/InputBase.d.ts +0 -0
  604. /package/dist/{types → temp}/src/components/input/Textarea.d.ts +0 -0
  605. /package/dist/{types → temp}/src/components/input/index.d.ts +0 -0
  606. /package/dist/{types → temp}/src/components/modal/index.d.ts +0 -0
  607. /package/dist/{types → temp}/src/components/pagination/NavButton.d.ts +0 -0
  608. /package/dist/{types → temp}/src/components/pagination/Pagination.d.ts +0 -0
  609. /package/dist/{types → temp}/src/components/pagination/index.d.ts +0 -0
  610. /package/dist/{types → temp}/src/components/progress-bar/ProgressBar.d.ts +0 -0
  611. /package/dist/{types → temp}/src/components/progress-bar/index.d.ts +0 -0
  612. /package/dist/{types → temp}/src/components/progress-circle/ProgressCircle.d.ts +0 -0
  613. /package/dist/{types → temp}/src/components/progress-circle/index.d.ts +0 -0
  614. /package/dist/{types → temp}/src/components/radio/Radio.d.ts +0 -0
  615. /package/dist/{types → temp}/src/components/radio/RadioInput.d.ts +0 -0
  616. /package/dist/{types → temp}/src/components/radio/index.d.ts +0 -0
  617. /package/dist/{types → temp}/src/components/select/Select.d.ts +0 -0
  618. /package/dist/{types → temp}/src/components/select/index.d.ts +0 -0
  619. /package/dist/{types → temp}/src/components/shared/hintText/index.d.ts +0 -0
  620. /package/dist/{types → temp}/src/components/shared/index.d.ts +0 -0
  621. /package/dist/{types → temp}/src/components/shared/label/index.d.ts +0 -0
  622. /package/dist/{types → temp}/src/components/slider/Slider.d.ts +0 -0
  623. /package/dist/{types → temp}/src/components/slider/index.d.ts +0 -0
  624. /package/dist/{types → temp}/src/components/spinner/Spinner.d.ts +0 -0
  625. /package/dist/{types → temp}/src/components/spinner/index.d.ts +0 -0
  626. /package/dist/{types → temp}/src/components/tab/HorizontalTab.d.ts +0 -0
  627. /package/dist/{types → temp}/src/components/tab/TabButton.d.ts +0 -0
  628. /package/dist/{types → temp}/src/components/tab/VerticalTab.d.ts +0 -0
  629. /package/dist/{types → temp}/src/components/tab/index.d.ts +0 -0
  630. /package/dist/{types → temp}/src/components/tag/Tag.d.ts +0 -0
  631. /package/dist/{types → temp}/src/components/tag/index.d.ts +0 -0
  632. /package/dist/{types → temp}/src/components/toggle/Toggle.d.ts +0 -0
  633. /package/dist/{types → temp}/src/components/toggle/index.d.ts +0 -0
  634. /package/dist/{types → temp}/src/components/tooltip/Tooltip.d.ts +0 -0
  635. /package/dist/{types → temp}/src/components/tooltip/index.d.ts +0 -0
  636. /package/dist/{types → temp}/src/constant/date-picker.d.ts +0 -0
  637. /package/dist/{types → temp}/src/constant/index.d.ts +0 -0
  638. /package/dist/{types → temp}/src/constant/size.d.ts +0 -0
  639. /package/dist/{types → temp}/src/utils/date-picker.d.ts +0 -0
@@ -1,3688 +0,0 @@
1
- :root {
2
- --primary-red-50: #fffafd;
3
- --primary-red-100: #ffeaee;
4
- --primary-red-200: #fecbd2;
5
- --primary-red-300: #ff9fa5;
6
- --primary-red-400: #f86f76;
7
- --primary-red-450: #f7444e;
8
- --primary-red-500: #ec1d31;
9
- --primary-red-600: #dc0a2b;
10
- --primary-red-700: #a60013;
11
- --base-white: #ffffff;
12
- --base-black: #000000;
13
- --gray-50: #f6f7f9;
14
- --gray-100: #eaecf0;
15
- --gray-200: #d3d4d8;
16
- --gray-300: #a4a5a8;
17
- --gray-400: #757678;
18
- --gray-450: #5e5e60;
19
- --gray-500: #464748;
20
- --gray-600: #2f2f30;
21
- --gray-700: #171818;
22
- --green-50: #f6fef9;
23
- --green-100: #d3f8df;
24
- --green-200: #aaf0c4;
25
- --green-300: #73e2a3;
26
- --green-400: #3ccb7f;
27
- --green-500: #099250;
28
- --green-600: #087443;
29
- --green-700: #095c37;
30
- --blue-50: #f5faff;
31
- --blue-100: #e0efff;
32
- --blue-200: #b2ddff;
33
- --blue-300: #84caff;
34
- --blue-400: #53b1fd;
35
- --blue-500: #1570ef;
36
- --blue-600: #1849a9;
37
- --blue-700: #194185;
38
- --pink-50: #fef6fb;
39
- --pink-100: #fce7f6;
40
- --pink-200: #fcceee;
41
- --pink-300: #faa7e0;
42
- --pink-400: #f670c7;
43
- --pink-500: #dd2590;
44
- --pink-600: #c11574;
45
- --pink-700: #851651;
46
- --orange-50: #fefaf5;
47
- --orange-100: #fdead7;
48
- --orange-200: #f9dbaf;
49
- --orange-300: #f7b27a;
50
- --orange-400: #f38744;
51
- --orange-500: #e4501e;
52
- --orange-600: #b93815;
53
- --orange-700: #772917;
54
- --focus-ring-4px-primary-100: 0px 0px 0px 3px #ffeaee;
55
- --focus-ring-4px-gray-100: 0px 0px 0px 3px #f2f4f7;
56
- --focus-ring-4px-error-100: 0px 0px 0px 3px #fee4e2;
57
- --shadow-xs: 0px 1px 2px 0px #1018280d;
58
- --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
59
- --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
60
- --shadow-xs-focused-4px-primary-color-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
61
- --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
62
- --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
63
- --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
64
- --shadow-sm-focused-4px-primary-color-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
65
- --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
66
- --shadow-sm-focused-4px-error-100: 0px 0px 0px 4px #fee4e2, 0px 1px 2px 0px #1018280d;
67
- --shadow-md: 0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;
68
- --shadow-lg: 0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808;
69
- --shadow-xl: 0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;
70
- --shadow-2xl: 0px 24px 48px -12px #1018282e;
71
- --shadow-3xl: 0px 32px 64px -12px #10182824;
72
- --font-families-commerce-sans: Commerce Sans;
73
- --line-heights-display-xl: 76px;
74
- --line-heights-display-lg: 60px;
75
- --line-heights-display-md: 46px;
76
- --line-heights-display-sm: 38px;
77
- --line-heights-display-xs: 32px;
78
- --line-heights-xl: 30px;
79
- --line-heights-lg: 28px;
80
- --line-heights-md: 24px;
81
- --line-heights-sm: 22px;
82
- --line-heights-xs: 18px;
83
- --line-heights-xxs: 16px;
84
- --line-heights-xxxs: 14px;
85
- --font-weights-commerce-sans-0: 400;
86
- --font-weights-commerce-sans-1: 500;
87
- --font-weights-commerce-sans-2: 700;
88
- --font-size-xxxs: 11px;
89
- --font-size-xxs: 12px;
90
- --font-size-xs: 13px;
91
- --font-size-sm: 14px;
92
- --font-size-md: 16px;
93
- --font-size-lg: 18px;
94
- --font-size-xl: 20px;
95
- --font-size-display-xs: 24px;
96
- --font-size-display-sm: 30px;
97
- --font-size-display-md: 36px;
98
- --font-size-display-lg: 48px;
99
- --font-size-display-xl: 60px;
100
- }
101
-
102
- @font-face {
103
- font-family: "CommerceSans";
104
- font-weight: 400;
105
- font-style: normal;
106
- src: url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Regular.woff") format("woff"), url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Regular.woff2") format("woff2");
107
- font-display: swap;
108
- }
109
- @font-face {
110
- font-family: "CommerceSans";
111
- font-weight: 500;
112
- font-style: normal;
113
- src: url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Medium.woff") format("woff"), url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Medium.woff2") format("woff2");
114
- font-display: swap;
115
- }
116
- @font-face {
117
- font-family: "CommerceSans";
118
- font-weight: 700;
119
- font-style: normal;
120
- src: url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Bold.woff") format("woff"), url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Bold.woff2") format("woff2");
121
- font-display: swap;
122
- }
123
- * {
124
- margin: 0;
125
- }
126
- *, *::before, *::after {
127
- box-sizing: border-box;
128
- }
129
-
130
- body {
131
- font-family: "CommerceSans", sans-serif;
132
- font-size: var(--font-size-xs);
133
- line-height: var(--line-heights-xs);
134
- }
135
-
136
- ol,
137
- ul {
138
- list-style: none;
139
- }
140
-
141
- blockquote,
142
- q {
143
- quotes: none;
144
- }
145
-
146
- blockquote:before,
147
- blockquote:after,
148
- q:before,
149
- q:after {
150
- content: "";
151
- content: none;
152
- }
153
-
154
- table {
155
- border-collapse: collapse;
156
- border-spacing: 0;
157
- }
158
-
159
- fieldset {
160
- border: 0;
161
- }
162
-
163
- input,
164
- button,
165
- select,
166
- textarea {
167
- font: inherit;
168
- color: inherit;
169
- }
170
-
171
- button {
172
- border: 0;
173
- }
174
-
175
- .a11y {
176
- position: absolute;
177
- overflow: hidden;
178
- margin: -1px;
179
- width: 1px;
180
- height: 1px;
181
- clip: rect(0, 0, 0, 0);
182
- }
183
-
184
- .bold {
185
- font-weight: bold;
186
- }
187
-
188
- .ncua-link {
189
- display: inline-flex;
190
- align-items: center;
191
- justify-content: center;
192
- gap: 8px;
193
- }
194
- .ncua-link--link-gray {
195
- color: var(--gray-500);
196
- }
197
- .ncua-link--link-gray:hover, .ncua-link--link-gray:hover:not(.is-disable) {
198
- color: var(--gray-700);
199
- }
200
- .ncua-link--link-gray.is-disable {
201
- color: var(--gray-200);
202
- pointer-events: none;
203
- cursor: default;
204
- }
205
- .ncua-link--link-color {
206
- color: var(--blue-500);
207
- }
208
- .ncua-link--link-color:hover, .ncua-link--link-color:hover:not(.is-disable) {
209
- color: var(--blue-600);
210
- }
211
- .ncua-link--link-color.is-disable {
212
- color: var(--gray-200);
213
- pointer-events: none;
214
- cursor: default;
215
- }
216
- .ncua-link--sm {
217
- font-size: var(--font-size-xs);
218
- }
219
- .ncua-link--md {
220
- font-size: var(--font-size-sm);
221
- }
222
- .ncua-link--lg {
223
- font-size: var(--font-size-md);
224
- }
225
- .ncua-link__icon {
226
- width: 20px;
227
- height: 20px;
228
- }
229
- :where(.ncua-link--lg) .ncua-link__icon {
230
- width: 24px;
231
- height: 24px;
232
- }
233
-
234
- :root {
235
- --button-height-xxs: 24px;
236
- --button-height-xs: 28px;
237
- --button-height-sm: 36px;
238
- --button-height-md: 40px;
239
- }
240
-
241
- .ncua-btn {
242
- border: 0;
243
- padding: 0;
244
- background-color: transparent;
245
- cursor: pointer;
246
- display: inline-flex;
247
- justify-content: center;
248
- align-items: center;
249
- text-align: center;
250
- line-height: normal;
251
- color: inherit;
252
- transition: background-color 0.2s ease-in-out;
253
- }
254
- .ncua-btn__label {
255
- pointer-events: none;
256
- }
257
- .ncua-btn svg {
258
- pointer-events: none;
259
- }
260
- .ncua-btn--primary {
261
- box-shadow: var(--shadow-xs);
262
- background-color: var(--primary-red-450);
263
- border: 1px solid var(--primary-red-500);
264
- color: var(--base-white);
265
- }
266
- .ncua-btn--primary:hover:not([disabled], .is-disable) {
267
- background-color: var(--primary-red-600);
268
- border: 1px solid var(--primary-red-700);
269
- color: var(--base-white);
270
- }
271
- .ncua-btn--primary:focus:not([disabled], .is-disabled) {
272
- background-color: var(--primary-red-450);
273
- border: 1px solid var(--primary-red-500);
274
- color: var(--base-white);
275
- box-shadow: var(--shadow-xs-focused-4px-primary-color-100);
276
- }
277
- .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
278
- background-color: var(--primary-red-100);
279
- border: 1px solid var(--primary-red-200);
280
- color: var(--primary-red-300);
281
- cursor: default;
282
- }
283
- .ncua-btn--secondary {
284
- box-shadow: var(--shadow-xs);
285
- background-color: var(--primary-red-50);
286
- border: 1px solid var(--primary-red-200);
287
- color: var(--primary-red-600);
288
- }
289
- .ncua-btn--secondary:hover:not([disabled], .is-disable) {
290
- background-color: var(--primary-red-100);
291
- border: 1px solid var(--primary-red-300);
292
- color: var(--primary-red-700);
293
- }
294
- .ncua-btn--secondary:focus:not([disabled], .is-disabled) {
295
- background-color: var(--primary-red-50);
296
- border: 1px solid var(--primary-red-200);
297
- color: var(--primary-red-600);
298
- box-shadow: var(--shadow-xs-focused-4px-primary-color-100);
299
- }
300
- .ncua-btn--secondary:disabled, .ncua-btn--secondary.is-disable {
301
- background-color: var(--primary-red-50);
302
- border: 1px solid var(--primary-red-100);
303
- color: var(--primary-red-300);
304
- cursor: default;
305
- }
306
- .ncua-btn--secondary-gray {
307
- box-shadow: var(--shadow-xs);
308
- background-color: var(--base-white);
309
- border: 1px solid var(--gray-200);
310
- color: var(--gray-700);
311
- }
312
- .ncua-btn--secondary-gray:hover:not([disabled], .is-disable) {
313
- background-color: var(--gray-50);
314
- border: 1px solid var(--gray-200);
315
- color: var(--gray-700);
316
- }
317
- .ncua-btn--secondary-gray:focus:not([disabled], .is-disabled) {
318
- background-color: var(--base-white);
319
- border: 1px solid var(--gray-200);
320
- color: var(--gray-700);
321
- box-shadow: var(--shadow-xs-focused-4px-gray-100);
322
- }
323
- .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
324
- background-color: var(--base-white);
325
- border: 1px solid var(--gray-200);
326
- color: var(--gray-200);
327
- cursor: default;
328
- }
329
- .ncua-btn--tertiary {
330
- color: var(--blue-500);
331
- }
332
- .ncua-btn--tertiary:hover:not([disabled], .is-disable) {
333
- color: var(--blue-600);
334
- }
335
- .ncua-btn--tertiary:disabled, .ncua-btn--tertiary.is-disable {
336
- color: var(--gray-200);
337
- cursor: default;
338
- }
339
- .ncua-btn--tertiary-gray {
340
- color: var(--gray-700);
341
- }
342
- .ncua-btn--tertiary-gray:hover:not([disabled], .is-disable) {
343
- color: var(--gray-700);
344
- }
345
- .ncua-btn--tertiary-gray:disabled, .ncua-btn--tertiary-gray.is-disable {
346
- color: var(--gray-200);
347
- cursor: default;
348
- }
349
- .ncua-btn--link {
350
- color: var(--blue-500);
351
- }
352
- .ncua-btn--link:hover:not([disabled], .is-disable) {
353
- color: var(--blue-600);
354
- }
355
- .ncua-btn--link:disabled, .ncua-btn--link.is-disable {
356
- color: var(--gray-200);
357
- cursor: default;
358
- }
359
- .ncua-btn--link-gray {
360
- color: var(--gray-500);
361
- }
362
- .ncua-btn--link-gray:hover:not([disabled], .is-disable) {
363
- color: var(--gray-700);
364
- }
365
- .ncua-btn--link-gray:disabled, .ncua-btn--link-gray.is-disable {
366
- color: var(--gray-200);
367
- cursor: default;
368
- }
369
- .ncua-btn--destructive {
370
- box-shadow: var(--shadow-xs);
371
- background-color: var(--primary-red-500);
372
- border: 1px solid var(--primary-red-600);
373
- color: var(--base-white);
374
- }
375
- .ncua-btn--destructive:hover:not([disabled], .is-disable) {
376
- background-color: var(--primary-red-700);
377
- border: 1px solid var(--primary-red-700);
378
- color: var(--base-white);
379
- }
380
- .ncua-btn--destructive:focus:not([disabled], .is-disabled) {
381
- background-color: var(--primary-red-500);
382
- border: 1px solid var(--primary-red-600);
383
- color: var(--base-white);
384
- box-shadow: var(--shadow-xs-focused-4px-primary-color-100);
385
- }
386
- .ncua-btn--destructive:disabled, .ncua-btn--destructive.is-disable {
387
- background-color: var(--primary-red-200);
388
- border: 1px solid var(--primary-red-300);
389
- color: var(--primary-red-300);
390
- cursor: default;
391
- }
392
- .ncua-btn--xxs {
393
- padding: 5px 8px;
394
- gap: 4px;
395
- height: var(--button-height-xxs);
396
- font-size: var(--font-size-xxxs);
397
- border-radius: 4px;
398
- font-weight: var(--font-weights-commerce-sans-1);
399
- line-height: var(--line-heights-xxxs);
400
- }
401
- .ncua-btn--xs {
402
- padding: 5px 10px;
403
- gap: 4px;
404
- height: var(--button-height-xs);
405
- font-size: var(--font-size-xs);
406
- border-radius: 6px;
407
- font-weight: var(--font-weights-commerce-sans-1);
408
- line-height: var(--line-heights-xs);
409
- }
410
- .ncua-btn--sm {
411
- padding: 7px 14px;
412
- gap: 8px;
413
- height: var(--button-height-sm);
414
- font-size: var(--font-size-sm);
415
- border-radius: 6px;
416
- font-weight: var(--font-weights-commerce-sans-2);
417
- line-height: var(--line-heights-sm);
418
- }
419
- .ncua-btn--md {
420
- padding: 10px 16px;
421
- gap: 8px;
422
- height: var(--button-height-md);
423
- font-size: var(--font-size-sm);
424
- border-radius: 8px;
425
- font-weight: var(--font-weights-commerce-sans-2);
426
- line-height: var(--line-heights-md);
427
- }
428
- .ncua-btn.is-full {
429
- width: 100%;
430
- }
431
- .ncua-btn.is-link {
432
- padding: 0;
433
- border: 0;
434
- box-shadow: none;
435
- }
436
- .ncua-btn--link-gray {
437
- color: var(--gray-500);
438
- }
439
- .ncua-btn--link-gray:hover, .ncua-btn--link-gray:hover:not(.is-disable) {
440
- color: var(--gray-700);
441
- }
442
- .ncua-btn--link-gray.is-disable {
443
- color: var(--gray-200);
444
- pointer-events: none;
445
- cursor: default;
446
- }
447
- .ncua-btn--link-color {
448
- color: var(--blue-500);
449
- }
450
- .ncua-btn--link-color:hover, .ncua-btn--link-color:hover:not(.is-disable) {
451
- color: var(--blue-600);
452
- }
453
- .ncua-btn--link-color.is-disable {
454
- color: var(--gray-200);
455
- pointer-events: none;
456
- cursor: default;
457
- }
458
- .ncua-btn svg {
459
- flex: none;
460
- }
461
- .ncua-btn span {
462
- z-index: 0;
463
- }
464
-
465
- [class*=ncua-btn--link] {
466
- padding: 0;
467
- height: auto !important;
468
- background-color: transparent !important;
469
- vertical-align: top;
470
- font-weight: var(--font-weights-commerce-sans-1);
471
- }
472
-
473
- .ncua-btn--xxs.only-icon {
474
- padding: 0;
475
- width: var(--button-height-xxs);
476
- }
477
-
478
- .ncua-btn--xs.only-icon {
479
- padding: 0;
480
- width: var(--button-height-xs);
481
- }
482
-
483
- .ncua-btn--sm.only-icon {
484
- padding: 0;
485
- width: var(--button-height-sm);
486
- }
487
-
488
- .ncua-btn--md.only-icon {
489
- padding: 0;
490
- width: var(--button-height-md);
491
- }
492
-
493
- .has-underline {
494
- text-decoration: underline;
495
- text-underline-offset: 2px;
496
- }
497
-
498
- .ncua-button-group {
499
- display: inline-flex;
500
- overflow: hidden;
501
- color: var(--gray-400);
502
- }
503
- .ncua-button-group__item {
504
- position: relative;
505
- cursor: pointer;
506
- color: inherit;
507
- border: none;
508
- outline: none;
509
- display: inline-flex;
510
- justify-content: center;
511
- align-items: center;
512
- box-sizing: border-box;
513
- background-color: var(--base-white);
514
- gap: 8px;
515
- }
516
- .ncua-button-group__item[href] {
517
- text-decoration: none;
518
- }
519
- .ncua-button-group__item[href]:hover {
520
- text-decoration: none;
521
- }
522
- .ncua-button-group__item:first-child {
523
- padding-left: 0;
524
- }
525
- .ncua-button-group__item:last-child {
526
- padding-right: 0;
527
- }
528
- .ncua-button-group__item.is-current, .ncua-button-group__item:hover, .ncua-button-group__item:focus {
529
- color: var(--gray-600);
530
- }
531
- .ncua-button-group__item:disabled, .ncua-button-group__item:disabled:hover, .ncua-button-group__item:disabled:focus, .ncua-button-group__item.is-disabled, .ncua-button-group__item.is-disabled:hover, .ncua-button-group__item.is-disabled:focus {
532
- color: var(--gray-200);
533
- }
534
- .ncua-button-group__item + .ncua-button-group__item::after {
535
- content: "";
536
- position: absolute;
537
- left: 0;
538
- top: 50%;
539
- transform: translateY(-50%);
540
- width: 1px;
541
- height: 12px;
542
- background-color: var(--gray-200);
543
- }
544
- .ncua-button-group--xs .ncua-button-group__item {
545
- padding: 4px 12px;
546
- font-size: var(--font-size-xxxs);
547
- line-height: var(--line-heights-xxxs);
548
- font-weight: var(--font-weights-commerce-sans-1);
549
- }
550
- :where(.ncua-button-group--xs .ncua-button-group__item.is-current, .ncua-button-group--xs .ncua-button-group__item:hover, .ncua-button-group--xs .ncua-button-group__item:focus) {
551
- font-weight: var(--font-weights-commerce-sans-1);
552
- }
553
- .ncua-button-group--xs .ncua-button-group__item:where(.is-only-icon) {
554
- padding: 6px;
555
- }
556
- :where(.ncua-button-group--xs.has-border) {
557
- border-radius: 4px;
558
- }
559
-
560
- .ncua-button-group--sm .ncua-button-group__item {
561
- padding: 4px 16px;
562
- font-size: var(--font-size-xs);
563
- line-height: var(--line-heights-xs);
564
- font-weight: var(--font-weights-commerce-sans-1);
565
- }
566
- :where(.ncua-button-group--sm .ncua-button-group__item.is-current, .ncua-button-group--sm .ncua-button-group__item:hover, .ncua-button-group--sm .ncua-button-group__item:focus) {
567
- font-weight: var(--font-weights-commerce-sans-1);
568
- }
569
- .ncua-button-group--sm .ncua-button-group__item:where(.is-only-icon) {
570
- padding: 6px;
571
- }
572
- :where(.ncua-button-group--sm.has-border) {
573
- border-radius: 6px;
574
- }
575
-
576
- .ncua-button-group--md .ncua-button-group__item {
577
- padding: 6px 16px;
578
- font-size: var(--font-size-sm);
579
- line-height: var(--line-heights-sm);
580
- font-weight: var(--font-weights-commerce-sans-1);
581
- }
582
- :where(.ncua-button-group--md .ncua-button-group__item.is-current, .ncua-button-group--md .ncua-button-group__item:hover, .ncua-button-group--md .ncua-button-group__item:focus) {
583
- font-weight: var(--font-weights-commerce-sans-1);
584
- }
585
- .ncua-button-group--md .ncua-button-group__item:where(.is-only-icon) {
586
- padding: 10px;
587
- }
588
- :where(.ncua-button-group--md.has-border) {
589
- border-radius: 6px;
590
- }
591
-
592
- .ncua-button-group--lg .ncua-button-group__item {
593
- padding: 8px 16px;
594
- font-size: var(--font-size-sm);
595
- line-height: var(--line-heights-sm);
596
- font-weight: var(--font-weights-commerce-sans-2);
597
- }
598
- :where(.ncua-button-group--lg .ncua-button-group__item.is-current, .ncua-button-group--lg .ncua-button-group__item:hover, .ncua-button-group--lg .ncua-button-group__item:focus) {
599
- font-weight: var(--font-weights-commerce-sans-2);
600
- }
601
- .ncua-button-group--lg .ncua-button-group__item:where(.is-only-icon) {
602
- padding: 10px;
603
- }
604
- :where(.ncua-button-group--lg.has-border) {
605
- border-radius: 8px;
606
- }
607
-
608
- :where(.ncua-button-group.has-border) {
609
- box-shadow: var(--shadow-xs);
610
- border: 1px solid var(--gray-200);
611
- }
612
- :where(.ncua-button-group.has-border) .ncua-button-group__item + .ncua-button-group__item::after {
613
- content: none;
614
- }
615
- :where(.ncua-button-group.has-border) .ncua-button-group__item.is-current, :where(.ncua-button-group.has-border) .ncua-button-group__item:focus, :where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
616
- background-color: var(--gray-50);
617
- }
618
- :where(.ncua-button-group.has-border) .ncua-button-group__item:nth-child(n+2) {
619
- border-left: 1px solid var(--gray-200);
620
- }
621
- :where(.ncua-button-group.has-border) .ncua-button-group__item svg {
622
- display: block;
623
- }
624
-
625
- .ncua-btn-close {
626
- display: inline-flex;
627
- align-items: center;
628
- justify-content: center;
629
- color: var(--gray-400);
630
- border-radius: 8px;
631
- cursor: pointer;
632
- }
633
- .ncua-btn-close:hover {
634
- background-color: var(--gray-50);
635
- color: var(--gray-500);
636
- }
637
- .ncua-btn-close:focus {
638
- background-color: var(--gray-50);
639
- }
640
- .ncua-btn-close--sm {
641
- width: 36px;
642
- height: 36px;
643
- }
644
- .ncua-btn-close--md {
645
- width: 40px;
646
- height: 40px;
647
- }
648
- .ncua-btn-close--lg {
649
- width: 44px;
650
- height: 44px;
651
- }
652
- .ncua-btn-close--dark {
653
- color: var(--gray-100);
654
- }
655
- .ncua-btn-close--dark:hover {
656
- color: var(--base-white);
657
- background-color: rgba(255, 255, 255, 0.2);
658
- }
659
- .ncua-btn-close--dark:focus {
660
- color: var(--gray-100);
661
- background-color: rgba(255, 255, 255, 0.2);
662
- }
663
-
664
- .ncua-checkbox-input {
665
- position: relative;
666
- flex: none;
667
- display: inline-block;
668
- width: 16px;
669
- height: 16px;
670
- line-height: 1;
671
- background-color: var(--base-white);
672
- border-radius: 4px;
673
- }
674
- .ncua-checkbox-input :where(input) {
675
- position: absolute;
676
- top: 0;
677
- left: 0;
678
- z-index: 1;
679
- -webkit-appearance: none;
680
- -moz-appearance: none;
681
- appearance: none;
682
- margin: 0;
683
- width: 100%;
684
- height: 100%;
685
- border: 1px solid var(--gray-200);
686
- font: inherit;
687
- border-radius: 4px;
688
- }
689
- .ncua-checkbox-input :where(input):focus {
690
- border-color: var(--gray-400);
691
- box-shadow: var(--focus-ring-4px-gray-100);
692
- }
693
- .ncua-checkbox-input :where(input):checked {
694
- border-color: var(--gray-700);
695
- background-color: var(--gray-50);
696
- outline: none;
697
- }
698
- .ncua-checkbox-input :where(input):disabled {
699
- border-color: var(--gray-200);
700
- background-color: var(--gray-100);
701
- }
702
- .ncua-checkbox-input.destructive :where(input) {
703
- border-color: var(--primary-red-600);
704
- }
705
- .ncua-checkbox-input.destructive :where(input):focus {
706
- border-color: var(--primary-red-600);
707
- box-shadow: var(--shadow-xs-focused-4px-error-100);
708
- }
709
- .ncua-checkbox-input:hover {
710
- border-color: var(--gray-600);
711
- background-color: var(--gray-100);
712
- border-radius: 4px;
713
- }
714
- .ncua-checkbox-input__ico {
715
- position: absolute;
716
- top: 0;
717
- left: 0;
718
- display: inline-flex;
719
- justify-content: center;
720
- align-items: center;
721
- width: 100%;
722
- height: 100%;
723
- z-index: 2;
724
- }
725
- .ncua-checkbox-input :not(input:checked + .ncua-checkbox-input__ico) > svg {
726
- display: none;
727
- }
728
- .ncua-checkbox-input :disabled + .ncua-checkbox-input__ico {
729
- border-radius: 4px;
730
- }
731
-
732
- .ncua-checkbox-field {
733
- position: relative;
734
- font-size: var(--font-size-xs);
735
- line-height: var(--line-heights-xs);
736
- cursor: pointer;
737
- }
738
- .ncua-checkbox-field__text {
739
- display: block;
740
- color: var(--gray-500);
741
- font-weight: var(--font-weights-commerce-sans-1);
742
- }
743
- .ncua-checkbox-field__support-text {
744
- color: var(--gray-400);
745
- font-weight: var(--font-weights-commerce-sans-0);
746
- }
747
- .ncua-checkbox-field:hover .ncua-checkbox-field__input {
748
- border-color: var(--gray-700);
749
- background-color: var(--gray-50);
750
- border-radius: 4px;
751
- }
752
- .ncua-checkbox-field--md .ncua-checkbox-field__text,
753
- .ncua-checkbox-field--md .ncua-checkbox-field__support-text {
754
- font-size: var(--font-size-sm);
755
- line-height: var(--line-heights-sm);
756
- }
757
- .ncua-checkbox-field.has-text {
758
- display: inline-flex;
759
- gap: 6px;
760
- }
761
- .ncua-checkbox-field.has-text .ncua-checkbox-field__input {
762
- transform: translateY(1px);
763
- }
764
- .ncua-checkbox-field.has-text.ncua-checkbox-field--md .ncua-checkbox-field__input {
765
- transform: translateY(3px);
766
- }
767
-
768
- .ncua-featured-icon {
769
- display: flex;
770
- align-items: center;
771
- justify-content: center;
772
- position: relative;
773
- }
774
- .ncua-featured-icon--sm {
775
- width: 32px;
776
- height: 32px;
777
- }
778
- .ncua-featured-icon--md {
779
- width: 40px;
780
- height: 40px;
781
- }
782
- .ncua-featured-icon--lg {
783
- width: 48px;
784
- height: 48px;
785
- }
786
- .ncua-featured-icon--xl {
787
- width: 56px;
788
- height: 56px;
789
- }
790
- .ncua-featured-icon--light-circle.ncua-featured-icon--neutral {
791
- color: var(--gray-500);
792
- background-color: var(--gray-100);
793
- border-radius: 50%;
794
- }
795
- .ncua-featured-icon--light-circle.ncua-featured-icon--error {
796
- color: var(--primary-red-500);
797
- background-color: var(--primary-red-100);
798
- border-radius: 50%;
799
- }
800
- .ncua-featured-icon--light-circle.ncua-featured-icon--warning {
801
- color: var(--orange-500);
802
- background-color: var(--orange-100);
803
- border-radius: 50%;
804
- }
805
- .ncua-featured-icon--light-circle.ncua-featured-icon--success {
806
- color: var(--green-500);
807
- background-color: var(--green-100);
808
- border-radius: 50%;
809
- }
810
- .ncua-featured-icon--dark-circle.ncua-featured-icon--neutral {
811
- color: var(--base-white);
812
- background-color: var(--gray-400);
813
- border-radius: 50%;
814
- }
815
- .ncua-featured-icon--dark-circle.ncua-featured-icon--error {
816
- color: var(--base-white);
817
- background-color: var(--primary-red-400);
818
- border-radius: 50%;
819
- }
820
- .ncua-featured-icon--dark-circle.ncua-featured-icon--warning {
821
- color: var(--base-white);
822
- background-color: var(--orange-400);
823
- border-radius: 50%;
824
- }
825
- .ncua-featured-icon--dark-circle.ncua-featured-icon--success {
826
- color: var(--base-white);
827
- background-color: var(--green-400);
828
- border-radius: 50%;
829
- }
830
- .ncua-featured-icon--outline-circle {
831
- border-radius: 50%;
832
- }
833
- .ncua-featured-icon--outline-circle.ncua-featured-icon--neutral {
834
- color: var(--gray-500);
835
- }
836
- .ncua-featured-icon--outline-circle.ncua-featured-icon--neutral .ncua-featured-icon__outline {
837
- border-color: var(--gray-500);
838
- }
839
- .ncua-featured-icon--outline-circle.ncua-featured-icon--error {
840
- color: var(--primary-red-500);
841
- }
842
- .ncua-featured-icon--outline-circle.ncua-featured-icon--error .ncua-featured-icon__outline {
843
- border-color: var(--primary-red-500);
844
- }
845
- .ncua-featured-icon--outline-circle.ncua-featured-icon--warning {
846
- color: var(--orange-500);
847
- }
848
- .ncua-featured-icon--outline-circle.ncua-featured-icon--warning .ncua-featured-icon__outline {
849
- border-color: var(--orange-500);
850
- }
851
- .ncua-featured-icon--outline-circle.ncua-featured-icon--success {
852
- color: var(--green-500);
853
- }
854
- .ncua-featured-icon--outline-circle.ncua-featured-icon--success .ncua-featured-icon__outline {
855
- border-color: var(--green-500);
856
- }
857
- .ncua-featured-icon--square-outline.ncua-featured-icon--sm {
858
- border-radius: 6px;
859
- background-color: var(--base-white);
860
- border: 1px solid var(--gray-200);
861
- box-shadow: var(--shadow-xs);
862
- }
863
- .ncua-featured-icon--square-outline.ncua-featured-icon--md {
864
- border-radius: 8px;
865
- background-color: var(--base-white);
866
- border: 1px solid var(--gray-200);
867
- box-shadow: var(--shadow-xs);
868
- }
869
- .ncua-featured-icon--square-outline.ncua-featured-icon--lg {
870
- border-radius: 10px;
871
- background-color: var(--base-white);
872
- border: 1px solid var(--gray-200);
873
- box-shadow: var(--shadow-xs);
874
- }
875
- .ncua-featured-icon--square-outline.ncua-featured-icon--xl {
876
- border-radius: 12px;
877
- background-color: var(--base-white);
878
- border: 1px solid var(--gray-200);
879
- box-shadow: var(--shadow-xs);
880
- }
881
- .ncua-featured-icon__outline {
882
- position: absolute;
883
- border-style: solid;
884
- border-radius: 50%;
885
- width: 100%;
886
- height: 100%;
887
- box-sizing: border-box;
888
- }
889
- .ncua-featured-icon__outline--inner {
890
- width: 75%;
891
- height: 75%;
892
- border-width: 2px;
893
- opacity: 0.3;
894
- }
895
- .ncua-featured-icon__outline--outer {
896
- width: 100%;
897
- height: 100%;
898
- border-width: 2px;
899
- opacity: 0.1;
900
- }
901
-
902
- .ncua-divider {
903
- width: 100%;
904
- display: flex;
905
- align-items: center;
906
- justify-content: center;
907
- gap: 8px;
908
- }
909
- .ncua-divider__line {
910
- flex: 1;
911
- height: 1px;
912
- background-color: var(--gray-100);
913
- }
914
- .ncua-divider__content {
915
- display: flex;
916
- align-items: center;
917
- justify-content: center;
918
- }
919
- .ncua-divider--background-fill {
920
- padding: 8px 0;
921
- background-color: var(--gray-50);
922
- border-radius: 8px;
923
- }
924
- .ncua-divider--text {
925
- font-size: var(--font-size-xs);
926
- font-weight: var(--font-weights-commerce-sans-1);
927
- line-height: var(--line-heights-xs);
928
- color: var(--gray-500);
929
- }
930
- .ncua-divider--heading {
931
- font-size: var(--font-size-md);
932
- font-weight: var(--font-weights-commerce-sans-1);
933
- line-height: var(--line-heights-md);
934
- color: var(--gray-700);
935
- }
936
-
937
- .ncua-dot {
938
- display: inline-block;
939
- border-radius: 50%;
940
- margin: 1px;
941
- }
942
- .ncua-dot--sm {
943
- width: 6px;
944
- height: 6px;
945
- }
946
- .ncua-dot--md {
947
- width: 8px;
948
- height: 8px;
949
- }
950
- .ncua-dot--lg {
951
- width: 10px;
952
- height: 10px;
953
- }
954
- .ncua-dot--neutral {
955
- background-color: var(--gray-500);
956
- }
957
- .ncua-dot--error {
958
- background-color: var(--primary-red-500);
959
- }
960
- .ncua-dot--warning {
961
- background-color: var(--orange-500);
962
- }
963
- .ncua-dot--success {
964
- background-color: var(--green-500);
965
- }
966
- .ncua-dot--blue {
967
- background-color: var(--blue-500);
968
- }
969
- .ncua-dot--pink {
970
- background-color: var(--pink-500);
971
- }
972
- .ncua-dot--disabled {
973
- background-color: var(--gray-300);
974
- }
975
-
976
- .ncua-dropdown {
977
- position: relative;
978
- display: inline-block;
979
- }
980
- .ncua-dropdown__trigger {
981
- cursor: pointer;
982
- padding: 0;
983
- background: none;
984
- display: flex;
985
- align-items: center;
986
- justify-content: center;
987
- }
988
- .ncua-dropdown__trigger--icon {
989
- width: 20px;
990
- height: 20px;
991
- }
992
- .ncua-dropdown__trigger--icon + .ncua-dropdown__menu {
993
- top: calc(100% - 4px);
994
- }
995
- .ncua-dropdown__trigger--icon svg {
996
- width: 100%;
997
- height: 100%;
998
- }
999
- .ncua-dropdown__trigger--avatar + .ncua-dropdown__menu {
1000
- top: calc(100% - 8px);
1001
- left: 5px;
1002
- }
1003
- .ncua-dropdown--right .ncua-dropdown__trigger--avatar + .ncua-dropdown__menu {
1004
- left: auto;
1005
- right: 5px;
1006
- }
1007
- .ncua-dropdown__trigger--avatar .ncua-dropdown__avatar {
1008
- border-radius: 50%;
1009
- overflow: hidden;
1010
- display: flex;
1011
- align-items: center;
1012
- justify-content: center;
1013
- border: 4px solid var(--gray-50);
1014
- }
1015
- .ncua-dropdown__trigger--avatar .ncua-dropdown__avatar img {
1016
- width: 32px;
1017
- height: 32px;
1018
- object-fit: cover;
1019
- }
1020
- .ncua-dropdown__trigger--button {
1021
- height: 28px;
1022
- padding: 5px 10px;
1023
- background-color: var(--base-white);
1024
- border: 1px solid var(--gray-100);
1025
- border-radius: 6px;
1026
- cursor: pointer;
1027
- font-size: var(--font-size-xs);
1028
- line-height: var(--line-heights-xs);
1029
- font-weight: var(--font-weights-commerce-sans-1);
1030
- color: var(--gray-700);
1031
- box-shadow: var(--shadow-xs);
1032
- }
1033
- .ncua-dropdown__menu {
1034
- position: absolute;
1035
- top: calc(100% + 4px);
1036
- left: 0;
1037
- min-width: 240px;
1038
- background-color: var(--base-white);
1039
- border-radius: 8px;
1040
- border: 1px solid var(--gray-100);
1041
- box-shadow: var(--shadow-md);
1042
- overflow: hidden;
1043
- }
1044
- .ncua-dropdown--right .ncua-dropdown__menu {
1045
- left: auto;
1046
- right: 0;
1047
- }
1048
- .ncua-dropdown__header {
1049
- padding: 8px 16px;
1050
- border-bottom: 1px solid var(--gray-100);
1051
- }
1052
- .ncua-dropdown__header-avatar-group {
1053
- display: flex;
1054
- align-items: center;
1055
- gap: 10px;
1056
- }
1057
- .ncua-dropdown__header .ncua-dropdown__avatar {
1058
- width: 32px;
1059
- height: 32px;
1060
- border-radius: 50%;
1061
- overflow: hidden;
1062
- display: flex;
1063
- align-items: center;
1064
- justify-content: center;
1065
- }
1066
- .ncua-dropdown__header .ncua-dropdown__avatar img {
1067
- width: 100%;
1068
- height: 100%;
1069
- object-fit: cover;
1070
- }
1071
- .ncua-dropdown__header-text {
1072
- display: flex;
1073
- flex-direction: column;
1074
- }
1075
- .ncua-dropdown__header-title {
1076
- font-size: var(--font-size-xs);
1077
- font-weight: var(--font-weights-commerce-sans-2);
1078
- color: var(--gray-600);
1079
- line-height: var(--line-heights-xs);
1080
- }
1081
- .ncua-dropdown__header-subtitle {
1082
- font-size: var(--font-size-xxxs);
1083
- font-weight: var(--font-weights-commerce-sans-0);
1084
- color: var(--gray-400);
1085
- line-height: var(--line-heights-xxxs);
1086
- }
1087
- .ncua-dropdown__menu-items {
1088
- display: flex;
1089
- flex-direction: column;
1090
- width: 100%;
1091
- }
1092
- .ncua-dropdown__group {
1093
- padding: 4px 0;
1094
- border-bottom: 1px solid var(--gray-100);
1095
- }
1096
- .ncua-dropdown__group:last-child {
1097
- border-bottom: none;
1098
- }
1099
- .ncua-dropdown__item {
1100
- cursor: pointer;
1101
- padding: 2px 6px;
1102
- width: 100%;
1103
- position: relative;
1104
- }
1105
- .ncua-dropdown__item-clickable-layer {
1106
- position: absolute;
1107
- top: 2px;
1108
- left: 6px;
1109
- right: 6px;
1110
- bottom: 2px;
1111
- border-radius: 6px;
1112
- background: transparent;
1113
- z-index: 1;
1114
- }
1115
- .ncua-dropdown__item-content {
1116
- display: flex;
1117
- align-items: center;
1118
- justify-content: space-between;
1119
- gap: 12px;
1120
- padding: 7px 10px;
1121
- border-radius: 6px;
1122
- }
1123
- .ncua-dropdown__item:hover .ncua-dropdown__item-content {
1124
- background-color: var(--gray-50);
1125
- }
1126
- .ncua-dropdown__item-text-group {
1127
- flex: 1;
1128
- display: flex;
1129
- align-items: center;
1130
- gap: 8px;
1131
- color: var(--gray-500);
1132
- }
1133
- .ncua-dropdown__item-icon {
1134
- width: 14px;
1135
- height: 14px;
1136
- }
1137
- .ncua-dropdown__item-text {
1138
- font-size: var(--font-size-xs);
1139
- font-weight: var(--font-weights-commerce-sans-1);
1140
- line-height: var(--line-heights-xs);
1141
- }
1142
- .ncua-dropdown__item-shortcut {
1143
- font-size: var(--font-size-xs);
1144
- font-weight: var(--font-weights-commerce-sans-0);
1145
- color: var(--gray-400);
1146
- line-height: var(--line-heights-xs);
1147
- }
1148
- .ncua-dropdown__item.is-disabled {
1149
- pointer-events: none;
1150
- cursor: default;
1151
- }
1152
- .ncua-dropdown__item.is-disabled .ncua-dropdown__item-text,
1153
- .ncua-dropdown__item.is-disabled .ncua-dropdown__item-shortcut {
1154
- color: var(--gray-200);
1155
- }
1156
- .ncua-dropdown__item.is-disabled svg {
1157
- opacity: 0.5;
1158
- }
1159
- .ncua-dropdown__item.is-danger .ncua-dropdown__item-text {
1160
- color: var(--primary-red-700);
1161
- }
1162
- .ncua-dropdown__item.is-danger svg {
1163
- color: var(--primary-red-700);
1164
- }
1165
-
1166
- .ncua-hint-text {
1167
- color: var(--gray-400);
1168
- margin-top: 0;
1169
- }
1170
- .ncua-hint-text.destructive {
1171
- color: var(--primary-red-600);
1172
- }
1173
-
1174
- .ncua-input {
1175
- display: inline-flex;
1176
- flex-direction: column;
1177
- line-height: normal;
1178
- vertical-align: top;
1179
- }
1180
- .ncua-input > *:last-child {
1181
- margin-bottom: 0;
1182
- }
1183
- .ncua-input__label {
1184
- display: flex;
1185
- align-items: center;
1186
- }
1187
- .ncua-input__help-icon {
1188
- margin-left: 2px;
1189
- color: var(--gray-300);
1190
- width: 14px;
1191
- height: 14px;
1192
- }
1193
- .ncua-input__content {
1194
- box-shadow: var(--shadow-xs);
1195
- border-radius: 6px;
1196
- }
1197
- .ncua-input:where(:not([class*=textarea])) .ncua-input__content {
1198
- display: flex;
1199
- }
1200
- .ncua-input__field {
1201
- display: flex;
1202
- align-items: center;
1203
- background-color: var(--base-white);
1204
- border: 1px solid var(--gray-200);
1205
- }
1206
- .ncua-input__field--xs {
1207
- padding: 5px 10px;
1208
- }
1209
- .ncua-input__field--md {
1210
- padding: 6px 12px;
1211
- }
1212
- .ncua-input__field {
1213
- position: relative;
1214
- flex: 1;
1215
- display: flex;
1216
- align-items: center;
1217
- justify-content: space-between;
1218
- line-height: 1;
1219
- }
1220
- .ncua-input:focus-within :where(.ncua-input__field) {
1221
- border-color: var(--gray-400);
1222
- box-shadow: var(--shadow-xs-focused-3px-gray-100);
1223
- z-index: 1;
1224
- }
1225
- .ncua-input input,
1226
- .ncua-input textarea {
1227
- width: 100%;
1228
- padding: 0;
1229
- border: 0;
1230
- color: var(--gray-700);
1231
- font-size: var(--font-size-sm);
1232
- line-height: var(--line-heights-sm);
1233
- background-color: var(--base-white);
1234
- }
1235
- .ncua-input input::-webkit-input-placeholder,
1236
- .ncua-input textarea::-webkit-input-placeholder {
1237
- color: var(--gray-300);
1238
- }
1239
- .ncua-input input::-moz-placeholder,
1240
- .ncua-input textarea::-moz-placeholder {
1241
- color: var(--gray-300);
1242
- }
1243
- .ncua-input input:-ms-input-placeholder,
1244
- .ncua-input textarea:-ms-input-placeholder {
1245
- color: var(--gray-300);
1246
- }
1247
- .ncua-input input::-ms-input-placeholder,
1248
- .ncua-input textarea::-ms-input-placeholder {
1249
- color: var(--gray-300);
1250
- }
1251
- .ncua-input input::placeholder,
1252
- .ncua-input textarea::placeholder {
1253
- color: var(--gray-300);
1254
- }
1255
- .ncua-input input:focus,
1256
- .ncua-input textarea:focus {
1257
- outline: none;
1258
- }
1259
- .ncua-input .ncua-input__field {
1260
- border-radius: 6px;
1261
- }
1262
- .ncua-input--xs {
1263
- gap: 4px;
1264
- }
1265
- .ncua-input--xs input {
1266
- font-size: var(--font-size-xs);
1267
- line-height: var(--line-heights-xs);
1268
- }
1269
- .ncua-input--md {
1270
- gap: 6px;
1271
- }
1272
- .ncua-input--md input {
1273
- font-size: var(--font-size-sm);
1274
- line-height: var(--line-heights-sm);
1275
- }
1276
- .ncua-input--xs {
1277
- font-size: var(--font-size-xxs);
1278
- }
1279
- .ncua-input--md {
1280
- font-size: var(--font-size-xs);
1281
- }
1282
- .ncua-input input:-webkit-autofill, .ncua-input input:-webkit-autofill:hover, .ncua-input input:-webkit-autofill:focus, .ncua-input input:-webkit-autofill:active {
1283
- -webkit-box-shadow: 0 0 0 30px var(--base-white) inset !important;
1284
- }
1285
- .ncua-input__icon-wrap {
1286
- padding: 0;
1287
- display: flex;
1288
- align-items: center;
1289
- justify-content: center;
1290
- background: transparent;
1291
- border: none;
1292
- }
1293
- .ncua-input__clear {
1294
- border-radius: 10px;
1295
- background: var(--gray-100);
1296
- }
1297
- .ncua-input__clear-icon {
1298
- padding: 2px;
1299
- border-radius: 10px;
1300
- }
1301
- .ncua-input__validation-icon {
1302
- color: var(--green-500);
1303
- }
1304
- .ncua-input__destructive-icon {
1305
- color: var(--primary-red-600);
1306
- }
1307
- .ncua-input__password-icon {
1308
- color: var(--gray-300);
1309
- }
1310
- .ncua-input__left-icon {
1311
- margin-right: 8px;
1312
- }
1313
- .ncua-input__right-icon {
1314
- margin-left: 8px;
1315
- }
1316
- .ncua-input.destructive .ncua-input__field {
1317
- border-color: var(--primary-red-600);
1318
- }
1319
- .ncua-input.destructive:where(:focus-within) .ncua-input__field {
1320
- box-shadow: var(--shadow-xs-focused-4px-error-100);
1321
- }
1322
- .ncua-input.is-disabled .ncua-input__content > :not(button) {
1323
- background-color: var(--gray-50);
1324
- border-color: var(--gray-200);
1325
- }
1326
- .ncua-input.is-disabled .ncua-input__field {
1327
- overflow: hidden;
1328
- }
1329
- .ncua-input.is-disabled .ncua-input__field::after {
1330
- position: absolute;
1331
- top: 0;
1332
- left: 0;
1333
- content: "";
1334
- width: 100%;
1335
- height: 100%;
1336
- background: inherit;
1337
- opacity: 0.5;
1338
- }
1339
- .ncua-input.is-disabled input,
1340
- .ncua-input.is-disabled textarea {
1341
- color: var(--gray-300);
1342
- background-color: inherit;
1343
- }
1344
- .ncua-input.is-disabled .ncua-input__destructive-ico {
1345
- display: none;
1346
- }
1347
- .ncua-input.is-disabled .ncua-input__button {
1348
- color: var(--gray-200);
1349
- }
1350
- .ncua-input.full-width {
1351
- width: 100%;
1352
- }
1353
-
1354
- .ncua-input__leading-text-wrap .ncua-input__leading-text {
1355
- display: flex;
1356
- align-items: center;
1357
- background-color: var(--base-white);
1358
- border: 1px solid var(--gray-200);
1359
- }
1360
- .ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
1361
- padding: 5px 10px;
1362
- }
1363
- .ncua-input__leading-text-wrap .ncua-input__leading-text--md {
1364
- padding: 6px 12px;
1365
- }
1366
- .ncua-input__leading-text-wrap .ncua-input__leading-text {
1367
- border-radius: 6px 0 0 6px;
1368
- border-right-width: 0;
1369
- color: var(--gray-400);
1370
- font-size: var(--font-size-sm);
1371
- }
1372
- .ncua-input__leading-text-wrap .ncua-input__leading-text + .ncua-input__field {
1373
- border-top-left-radius: 0;
1374
- border-bottom-left-radius: 0;
1375
- margin-left: -1px;
1376
- }
1377
-
1378
- .ncua-input__trailing-button .ncua-input__button {
1379
- display: flex;
1380
- align-items: center;
1381
- background-color: var(--base-white);
1382
- border: 1px solid var(--gray-200);
1383
- }
1384
- .ncua-input__trailing-button .ncua-input__button--xs {
1385
- padding: 5px 10px;
1386
- }
1387
- .ncua-input__trailing-button .ncua-input__button--md {
1388
- padding: 6px 12px;
1389
- }
1390
- .ncua-input__trailing-button .ncua-input__button {
1391
- border-radius: 0 6px 6px 0;
1392
- border-left-width: 0;
1393
- color: var(--gray-700);
1394
- font-weight: var(--font-weights-commerce-sans-2);
1395
- }
1396
- .ncua-input__trailing-button .ncua-input__button:not(:disabled) {
1397
- cursor: pointer;
1398
- }
1399
- .ncua-input__trailing-button .ncua-input__button--xs {
1400
- padding: 5px 10px;
1401
- font-size: var(--font-size-xs);
1402
- line-height: var(--line-heights-xs);
1403
- font-weight: var(--font-weights-commerce-sans-1);
1404
- }
1405
- .ncua-input__trailing-button .ncua-input__button--md {
1406
- padding: 7px 14px;
1407
- font-size: var(--font-size-sm);
1408
- line-height: var(--line-heights-sm);
1409
- font-weight: var(--font-weights-commerce-sans-2);
1410
- }
1411
- .ncua-input__trailing-button .ncua-input__field {
1412
- border-top-right-radius: 0;
1413
- border-bottom-right-radius: 0;
1414
- margin-right: -1px;
1415
- }
1416
-
1417
- .ncua-input--textarea {
1418
- gap: 4px;
1419
- width: 100%;
1420
- }
1421
- .ncua-input--textarea--sm textarea {
1422
- font-size: var(--font-size-xs);
1423
- line-height: var(--line-heights-xs);
1424
- }
1425
- .ncua-input--textarea--md textarea {
1426
- font-size: var(--font-size-sm);
1427
- line-height: var(--line-heights-sm);
1428
- }
1429
- .ncua-input--textarea--sm {
1430
- font-size: var(--font-size-xxs);
1431
- }
1432
- .ncua-input--textarea--md {
1433
- font-size: var(--font-size-xs);
1434
- }
1435
- .ncua-input--textarea .ncua-input__content {
1436
- flex-direction: column;
1437
- align-items: flex-start;
1438
- height: 126px;
1439
- }
1440
- .ncua-input--textarea .ncua-input__field {
1441
- padding: 12px;
1442
- height: 100%;
1443
- border-radius: 8px;
1444
- }
1445
- .ncua-input--textarea textarea {
1446
- height: 100%;
1447
- resize: none;
1448
- word-wrap: break-word;
1449
- }
1450
- .ncua-input--textarea textarea:disabled {
1451
- white-space: pre-wrap;
1452
- }
1453
-
1454
- .ncua-input__text-count-wrap {
1455
- width: 100%;
1456
- display: flex;
1457
- align-items: center;
1458
- justify-content: space-between;
1459
- }
1460
-
1461
- .ncua-input__text-count {
1462
- color: var(--gray-400);
1463
- }
1464
- .ncua-input.destructive .ncua-input__text-count {
1465
- color: var(--primary-red-600);
1466
- }
1467
-
1468
- .ncua-input__text-count-text-count {
1469
- color: var(--gray-500);
1470
- }
1471
- .ncua-input.destructive .ncua-input__text-count-text-count {
1472
- color: var(--primary-red-600);
1473
- }
1474
-
1475
- .ncua-label {
1476
- display: flex;
1477
- gap: 4px;
1478
- color: var(--gray-600);
1479
- font-weight: var(--font-weights-commerce-sans-1);
1480
- }
1481
- :where(.ncua-label.is-required)::before {
1482
- content: "*";
1483
- color: var(--primary-red-500);
1484
- }
1485
-
1486
- .ncua-modal-backdrop {
1487
- position: fixed;
1488
- top: 0;
1489
- left: 0;
1490
- right: 0;
1491
- bottom: 0;
1492
- padding: 0 16px;
1493
- background-color: rgba(0, 0, 0, 0.7);
1494
- display: flex;
1495
- align-items: center;
1496
- justify-content: center;
1497
- z-index: 1000;
1498
- }
1499
-
1500
- .ncua-modal {
1501
- background-color: var(--base-white);
1502
- border-radius: 12px;
1503
- width: 100%;
1504
- max-height: calc(100vh - 40px);
1505
- overflow: hidden;
1506
- display: flex;
1507
- flex-direction: column;
1508
- box-shadow: var(--shadow-xl);
1509
- }
1510
- .ncua-modal--sm {
1511
- max-width: 400px;
1512
- }
1513
- .ncua-modal--md {
1514
- max-width: 560px;
1515
- }
1516
- .ncua-modal--lg {
1517
- max-width: 640px;
1518
- }
1519
- .ncua-modal--xl {
1520
- max-width: 760px;
1521
- }
1522
- @media (max-width: 768px) {
1523
- .ncua-modal {
1524
- max-height: calc(100vh - 160px);
1525
- }
1526
- }
1527
-
1528
- .ncua-modal__header {
1529
- padding: 16px 20px 16px;
1530
- border-bottom: none;
1531
- position: relative;
1532
- display: flex;
1533
- flex-direction: column;
1534
- gap: 8px;
1535
- }
1536
- .ncua-modal__header-divider {
1537
- width: 100%;
1538
- height: 1px;
1539
- background-color: var(--gray-100);
1540
- margin: 0 0 16px;
1541
- }
1542
- .ncua-modal__header--left {
1543
- align-items: flex-start;
1544
- }
1545
- .ncua-modal__header--left .ncua-modal__title {
1546
- align-items: flex-start;
1547
- text-align: left;
1548
- }
1549
- .ncua-modal__header--center {
1550
- align-items: center;
1551
- }
1552
- .ncua-modal__header--center .ncua-modal__title {
1553
- align-items: center;
1554
- text-align: center;
1555
- }
1556
- .ncua-modal__header--center .ncua-modal__title .ncua-modal__title-text,
1557
- .ncua-modal__header--center .ncua-modal__title .ncua-modal__title-subtitle {
1558
- text-align: center;
1559
- }
1560
- .ncua-modal__header--horizontal {
1561
- flex-direction: row;
1562
- align-items: flex-start;
1563
- gap: 16px;
1564
- }
1565
- .ncua-modal__header--horizontal .ncua-modal__title {
1566
- flex: 1;
1567
- }
1568
- .ncua-modal__header--close-button.ncua-modal__header--left {
1569
- padding: 20px 56px 20px 16px;
1570
- }
1571
-
1572
- .ncua-modal__title {
1573
- display: flex;
1574
- flex-direction: column;
1575
- align-items: flex-start;
1576
- gap: 4px;
1577
- }
1578
- .ncua-modal__title .ncua-modal__title-text {
1579
- font-weight: var(--font-weights-commerce-sans-2);
1580
- font-size: var(--font-size-sm);
1581
- line-height: var(--line-heights-sm);
1582
- color: var(--gray-700);
1583
- }
1584
- .ncua-modal__title .ncua-modal__title-subtitle {
1585
- font-weight: var(--font-weights-commerce-sans-0);
1586
- font-size: var(--font-size-xs);
1587
- line-height: var(--line-heights-xs);
1588
- color: var(--gray-400);
1589
- }
1590
-
1591
- .ncua-modal__close-button {
1592
- position: absolute;
1593
- top: 10px;
1594
- right: 16px;
1595
- display: flex;
1596
- align-items: center;
1597
- justify-content: center;
1598
- background: transparent;
1599
- border: none;
1600
- cursor: pointer;
1601
- padding: 8px;
1602
- color: var(--gray-400);
1603
- border-radius: 8px;
1604
- }
1605
- .ncua-modal__close-button svg {
1606
- width: 20px;
1607
- height: 20px;
1608
- }
1609
-
1610
- .ncua-modal__content {
1611
- padding: 0 20px 0;
1612
- overflow-y: auto;
1613
- flex: 1;
1614
- }
1615
- @media (max-width: 768px) {
1616
- .ncua-modal__content {
1617
- padding: 0 16px 0;
1618
- }
1619
- }
1620
-
1621
- .ncua-modal__actions-wrapper {
1622
- padding: 16px 20px 16px;
1623
- }
1624
- .ncua-modal__actions-wrapper--checkbox {
1625
- display: flex;
1626
- align-items: center;
1627
- flex-direction: row;
1628
- justify-content: space-between;
1629
- gap: 8px;
1630
- }
1631
- @media (max-width: 768px) {
1632
- .ncua-modal__actions-wrapper--checkbox {
1633
- flex-direction: column-reverse;
1634
- }
1635
- }
1636
-
1637
- .ncua-modal__actions {
1638
- display: flex;
1639
- gap: 8px;
1640
- }
1641
- .ncua-modal__actions-divider {
1642
- width: 100%;
1643
- height: 1px;
1644
- background-color: var(--gray-100);
1645
- margin: 16px 0 0;
1646
- }
1647
- .ncua-modal__actions--vertical {
1648
- flex-direction: column;
1649
- }
1650
- @media (max-width: 768px) {
1651
- .ncua-modal__actions--vertical {
1652
- flex-direction: column-reverse;
1653
- }
1654
- }
1655
- .ncua-modal__actions--horizontal {
1656
- flex-direction: row;
1657
- }
1658
- @media (max-width: 768px) {
1659
- .ncua-modal__actions--horizontal {
1660
- flex-direction: column-reverse;
1661
- }
1662
- }
1663
- .ncua-modal__actions--checkbox {
1664
- flex-direction: row;
1665
- }
1666
- @media (max-width: 768px) {
1667
- .ncua-modal__actions--checkbox {
1668
- width: 100%;
1669
- justify-content: stretch;
1670
- flex-direction: column-reverse;
1671
- }
1672
- }
1673
- .ncua-modal__actions--center {
1674
- justify-content: center;
1675
- }
1676
- .ncua-modal__actions--right {
1677
- justify-content: flex-end;
1678
- }
1679
- .ncua-modal__actions--stretch {
1680
- justify-content: stretch;
1681
- }
1682
- .ncua-modal__actions--stretch button {
1683
- flex: 1;
1684
- }
1685
-
1686
- @media (max-width: 768px) {
1687
- .ncua-modal__actions-checkbox {
1688
- width: 100%;
1689
- }
1690
- }
1691
- .ncua-modal__actions-checkbox-content {
1692
- display: flex;
1693
- align-items: center;
1694
- justify-content: space-between;
1695
- gap: 8px;
1696
- }
1697
- @media (max-width: 768px) {
1698
- .ncua-modal__actions-checkbox-content {
1699
- width: 100%;
1700
- justify-content: space-between;
1701
- }
1702
- }
1703
-
1704
- .ncua-floating-notification {
1705
- position: relative;
1706
- width: 100%;
1707
- padding: 16px;
1708
- max-width: 398px;
1709
- border: 1px solid var(--gray-200);
1710
- background-color: var(--base-white);
1711
- border-radius: 12px;
1712
- box-shadow: var(--shadow-sm);
1713
- }
1714
- @media (max-width: 768px) {
1715
- .ncua-floating-notification {
1716
- max-width: 100%;
1717
- padding: 22px 18px;
1718
- }
1719
- }
1720
- .ncua-floating-notification__content {
1721
- width: 100%;
1722
- display: flex;
1723
- flex-direction: column;
1724
- }
1725
- .ncua-floating-notification__container {
1726
- display: flex;
1727
- align-items: flex-start;
1728
- gap: 16px;
1729
- }
1730
- @media (max-width: 768px) {
1731
- .ncua-floating-notification__container {
1732
- flex-direction: column;
1733
- }
1734
- }
1735
- .ncua-floating-notification__text-container {
1736
- flex: 1;
1737
- display: flex;
1738
- flex-direction: column;
1739
- gap: 4px;
1740
- padding-right: 32px;
1741
- }
1742
- @media (max-width: 768px) {
1743
- .ncua-floating-notification__text-container {
1744
- padding-right: 0;
1745
- }
1746
- }
1747
- .ncua-floating-notification__title-wrapper {
1748
- width: 100%;
1749
- display: flex;
1750
- padding-right: 32px;
1751
- }
1752
- .ncua-floating-notification__title, .ncua-floating-notification__supporting-text {
1753
- font-size: var(--font-size-xs);
1754
- line-height: var(--line-heights-xs);
1755
- }
1756
- @media (max-width: 768px) {
1757
- .ncua-floating-notification__title, .ncua-floating-notification__supporting-text {
1758
- font-size: var(--font-size-md);
1759
- line-height: var(--line-heights-md);
1760
- }
1761
- }
1762
- .ncua-floating-notification__title {
1763
- color: var(--gray-600);
1764
- font-weight: var(--font-weights-commerce-sans-2);
1765
- }
1766
- .ncua-floating-notification__supporting-text {
1767
- color: var(--gray-400);
1768
- font-weight: var(--font-weights-commerce-sans-0);
1769
- }
1770
- .ncua-floating-notification__actions {
1771
- display: flex;
1772
- gap: 12px;
1773
- margin-top: 8px;
1774
- }
1775
- .ncua-floating-notification__close-button {
1776
- position: absolute;
1777
- top: 8px;
1778
- right: 8px;
1779
- display: grid;
1780
- place-items: center;
1781
- background: transparent;
1782
- border: none;
1783
- padding: 8px;
1784
- color: var(--gray-400);
1785
- }
1786
- .ncua-floating-notification__close-button svg {
1787
- width: 20px;
1788
- height: 20px;
1789
- }
1790
- @media (max-width: 768px) {
1791
- .ncua-floating-notification__close-button svg {
1792
- width: 24px;
1793
- height: 24px;
1794
- }
1795
- }
1796
- .ncua-floating-notification .ncua-notification__action-button {
1797
- min-height: 20px;
1798
- background: transparent;
1799
- border: none;
1800
- padding: 0;
1801
- font-size: var(--font-size-xs);
1802
- font-weight: var(--font-weights-commerce-sans-0);
1803
- }
1804
- .ncua-floating-notification .ncua-notification__action-button--secondary-gray {
1805
- color: var(--gray-700);
1806
- border: 1px solid var(--gray-200);
1807
- font-weight: var(--font-weights-commerce-sans-1);
1808
- box-shadow: var(--box-shadow-xs);
1809
- border-radius: 6px;
1810
- padding: 5px 10px;
1811
- }
1812
- .ncua-floating-notification .ncua-notification__action-button--link-gray {
1813
- color: var(--gray-700);
1814
- }
1815
- .ncua-floating-notification .ncua-notification__action-button--link {
1816
- color: var(--blue-500);
1817
- font-weight: var(--font-weights-commerce-sans-1);
1818
- }
1819
- .ncua-floating-notification__pc-icon {
1820
- display: flex;
1821
- }
1822
- @media (max-width: 768px) {
1823
- .ncua-floating-notification__pc-icon {
1824
- display: none;
1825
- }
1826
- }
1827
- .ncua-floating-notification__mobile-icon {
1828
- display: none;
1829
- }
1830
- @media (max-width: 768px) {
1831
- .ncua-floating-notification__mobile-icon {
1832
- display: flex;
1833
- }
1834
- }
1835
-
1836
- .ncua-full-width-notification {
1837
- width: 100%;
1838
- }
1839
- .ncua-full-width-notification__container {
1840
- display: flex;
1841
- align-items: center;
1842
- flex-direction: column;
1843
- width: 100%;
1844
- max-width: 1280px;
1845
- margin: 0 auto;
1846
- padding: 8px 32px;
1847
- }
1848
- @media (max-width: 768px) {
1849
- .ncua-full-width-notification__container {
1850
- max-width: 100%;
1851
- margin: 0;
1852
- padding: 0;
1853
- }
1854
- }
1855
- .ncua-full-width-notification__content {
1856
- width: 100%;
1857
- display: flex;
1858
- align-items: center;
1859
- justify-content: space-between;
1860
- gap: 16px;
1861
- }
1862
- @media (max-width: 768px) {
1863
- .ncua-full-width-notification__content {
1864
- position: relative;
1865
- gap: 0;
1866
- padding: 16px;
1867
- flex-direction: column;
1868
- align-items: flex-start;
1869
- }
1870
- }
1871
- .ncua-full-width-notification__content-wrapper {
1872
- flex: 1;
1873
- display: flex;
1874
- align-items: center;
1875
- gap: 16px;
1876
- }
1877
- .ncua-full-width-notification__text-container {
1878
- flex: 1;
1879
- display: flex;
1880
- flex-wrap: wrap;
1881
- gap: 6px;
1882
- }
1883
- @media (max-width: 768px) {
1884
- .ncua-full-width-notification__text-container {
1885
- flex-direction: column;
1886
- gap: 4px;
1887
- }
1888
- }
1889
- .ncua-full-width-notification__title, .ncua-full-width-notification__supporting-text {
1890
- font-size: var(--font-size-sm);
1891
- line-height: var(--line-heights-sm);
1892
- }
1893
- .ncua-full-width-notification__title {
1894
- font-weight: var(--font-weights-commerce-sans-2);
1895
- }
1896
- .ncua-full-width-notification__supporting-text {
1897
- font-weight: var(--font-weights-commerce-sans-0);
1898
- }
1899
- .ncua-full-width-notification__actions-container {
1900
- display: flex;
1901
- align-items: center;
1902
- gap: 8px;
1903
- }
1904
- .ncua-full-width-notification__actions {
1905
- display: flex;
1906
- gap: 12px;
1907
- }
1908
- @media (max-width: 768px) {
1909
- .ncua-full-width-notification__actions {
1910
- margin-top: 16px;
1911
- }
1912
- }
1913
- .ncua-full-width-notification__close-button {
1914
- display: flex;
1915
- align-items: center;
1916
- justify-content: center;
1917
- background: transparent;
1918
- border: none;
1919
- cursor: pointer;
1920
- border-radius: 8px;
1921
- padding: 8px;
1922
- }
1923
- @media (max-width: 768px) {
1924
- .ncua-full-width-notification__close-button {
1925
- position: absolute;
1926
- top: 8px;
1927
- right: 8px;
1928
- }
1929
- }
1930
- .ncua-full-width-notification--neutral {
1931
- color: var(--gray-600);
1932
- background-color: var(--gray-50);
1933
- border-style: solid;
1934
- border-width: 0 0 1px 0;
1935
- border-color: var(--gray-200);
1936
- }
1937
- .ncua-full-width-notification--neutral .ncua-notification__action-button {
1938
- color: var(--gray-500);
1939
- }
1940
- .ncua-full-width-notification--neutral .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--neutral .ncua-notification__action-button--link {
1941
- color: var(--gray-600);
1942
- }
1943
- @media (max-width: 768px) {
1944
- .ncua-full-width-notification--neutral {
1945
- border-width: 1px 0 0 0;
1946
- border-style: solid;
1947
- }
1948
- }
1949
- .ncua-full-width-notification--error {
1950
- color: var(--primary-red-600);
1951
- background-color: var(--primary-red-50);
1952
- border-style: solid;
1953
- border-width: 0 0 1px 0;
1954
- border-color: var(--primary-red-200);
1955
- }
1956
- .ncua-full-width-notification--error .ncua-notification__action-button {
1957
- color: var(--primary-red-500);
1958
- }
1959
- .ncua-full-width-notification--error .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--error .ncua-notification__action-button--link {
1960
- color: var(--primary-red-600);
1961
- }
1962
- @media (max-width: 768px) {
1963
- .ncua-full-width-notification--error {
1964
- border-width: 1px 0 0 0;
1965
- border-style: solid;
1966
- }
1967
- }
1968
- .ncua-full-width-notification--warning {
1969
- color: var(--orange-600);
1970
- background-color: var(--orange-50);
1971
- border-style: solid;
1972
- border-width: 0 0 1px 0;
1973
- border-color: var(--orange-200);
1974
- }
1975
- .ncua-full-width-notification--warning .ncua-notification__action-button {
1976
- color: var(--orange-500);
1977
- }
1978
- .ncua-full-width-notification--warning .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--warning .ncua-notification__action-button--link {
1979
- color: var(--orange-600);
1980
- }
1981
- @media (max-width: 768px) {
1982
- .ncua-full-width-notification--warning {
1983
- border-width: 1px 0 0 0;
1984
- border-style: solid;
1985
- }
1986
- }
1987
- .ncua-full-width-notification--success {
1988
- color: var(--green-600);
1989
- background-color: var(--green-50);
1990
- border-style: solid;
1991
- border-width: 0 0 1px 0;
1992
- border-color: var(--green-200);
1993
- }
1994
- .ncua-full-width-notification--success .ncua-notification__action-button {
1995
- color: var(--green-500);
1996
- }
1997
- .ncua-full-width-notification--success .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--success .ncua-notification__action-button--link {
1998
- color: var(--green-600);
1999
- }
2000
- @media (max-width: 768px) {
2001
- .ncua-full-width-notification--success {
2002
- border-width: 1px 0 0 0;
2003
- border-style: solid;
2004
- }
2005
- }
2006
- .ncua-full-width-notification .ncua-notification__action-button {
2007
- background: transparent;
2008
- border: none;
2009
- padding: 0;
2010
- vertical-align: middle;
2011
- font-size: var(--font-size-xs);
2012
- line-height: var(--line-heights-xs);
2013
- font-weight: var(--font-weights-commerce-sans-0);
2014
- }
2015
- .ncua-full-width-notification .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification .ncua-notification__action-button--link {
2016
- font-weight: var(--font-weights-commerce-sans-1);
2017
- }
2018
- @media (max-width: 768px) {
2019
- .ncua-full-width-notification__icon {
2020
- display: none;
2021
- }
2022
- }
2023
-
2024
- .ncua-radio-input {
2025
- position: relative;
2026
- flex: none;
2027
- display: inline-block;
2028
- width: 16px;
2029
- height: 16px;
2030
- line-height: 1;
2031
- background-color: var(--base-white);
2032
- border-radius: 50%;
2033
- }
2034
- .ncua-radio-input :where(input) {
2035
- position: absolute;
2036
- top: 0;
2037
- left: 0;
2038
- z-index: 1;
2039
- -webkit-appearance: none;
2040
- -moz-appearance: none;
2041
- appearance: none;
2042
- margin: 0;
2043
- width: 100%;
2044
- height: 100%;
2045
- border: 1px solid var(--gray-200);
2046
- font: inherit;
2047
- border-radius: 50%;
2048
- }
2049
- .ncua-radio-input :where(input):not(:disabled):hover {
2050
- border-color: var(--gray-600);
2051
- background-color: var(--gray-100);
2052
- }
2053
- .ncua-radio-input :where(input):focus {
2054
- border-color: var(--gray-400);
2055
- box-shadow: var(--focus-ring-4px-gray-100);
2056
- }
2057
- .ncua-radio-input :where(input):checked {
2058
- border-color: var(--gray-700);
2059
- outline: none;
2060
- }
2061
- .ncua-radio-input :where(input):disabled {
2062
- border-color: var(--gray-200);
2063
- background-color: var(--gray-100);
2064
- }
2065
- .ncua-radio-input :where(input)::before {
2066
- position: absolute;
2067
- top: 50%;
2068
- left: 50%;
2069
- content: "";
2070
- transform: translate(-50%, -50%);
2071
- width: 6px;
2072
- height: 6px;
2073
- border-radius: 50%;
2074
- }
2075
- .ncua-radio-input :where(input):disabled::before {
2076
- background-color: var(--gray-100);
2077
- }
2078
- .ncua-radio-input :where(input):checked::before {
2079
- background-color: var(--gray-700);
2080
- }
2081
- .ncua-radio-input :where(input):checked:disabled::before {
2082
- background-color: var(--gray-200);
2083
- }
2084
- .ncua-radio-input.destructive :where(input) {
2085
- border-color: var(--primary-red-600);
2086
- }
2087
- .ncua-radio-input.destructive :where(input):focus {
2088
- border-color: var(--primary-red-600);
2089
- box-shadow: var(--shadow-xs-focused-4px-error-100);
2090
- }
2091
-
2092
- .ncua-radio-field {
2093
- position: relative;
2094
- line-height: var(--line-heights-xs);
2095
- font-weight: var(--font-weights-commerce-sans-0);
2096
- font-size: var(--font-size-xs);
2097
- cursor: pointer;
2098
- }
2099
- .ncua-radio-field__text {
2100
- display: block;
2101
- color: var(--gray-500);
2102
- font-weight: var(--font-weights-commerce-sans-1);
2103
- }
2104
- .ncua-radio-field__support-text {
2105
- color: var(--gray-400);
2106
- }
2107
- .ncua-radio-field--md .ncua-radio-field__text, .ncua-radio-field--md .ncua-radio-field__support-text {
2108
- font-size: var(--font-size-sm);
2109
- line-height: var(--line-heights-sm);
2110
- }
2111
- .ncua-radio-field.has-text {
2112
- display: inline-flex;
2113
- gap: 6px;
2114
- }
2115
- .ncua-radio-field.has-text .ncua-radio-field__input {
2116
- transform: translateY(1px);
2117
- }
2118
- .ncua-radio-field.has-text.ncua-radio-field--md .ncua-radio-field__input {
2119
- transform: translateY(3px);
2120
- }
2121
-
2122
- .ncua-tag {
2123
- display: inline-flex;
2124
- align-items: center;
2125
- border: 1px solid var(--gray-200);
2126
- color: var(--gray-500);
2127
- line-height: 1.5;
2128
- font-weight: var(--font-weights-commerce-sans-1);
2129
- background-color: var(--base-white);
2130
- vertical-align: top;
2131
- overflow: hidden;
2132
- }
2133
- .ncua-tag--sm {
2134
- font-size: var(--font-size-xxxs);
2135
- padding: 2px 8px;
2136
- line-height: 14px;
2137
- border-radius: 4px;
2138
- }
2139
- .ncua-tag--md {
2140
- font-size: var(--font-size-sm);
2141
- padding: 1px 9px;
2142
- line-height: 22px;
2143
- border-radius: 6px;
2144
- }
2145
- .ncua-tag__text {
2146
- overflow: hidden;
2147
- display: block;
2148
- text-overflow: ellipsis;
2149
- white-space: nowrap;
2150
- word-wrap: break-word;
2151
- }
2152
- .ncua-tag > svg, .ncua-tag > .ncua-dot {
2153
- margin-right: 4px;
2154
- }
2155
- .ncua-tag__count {
2156
- display: inline-flex;
2157
- align-items: center;
2158
- min-width: 16px;
2159
- height: 14px;
2160
- margin-left: 6px;
2161
- margin-right: -5px;
2162
- padding: 0 5px;
2163
- background-color: var(--gray-100);
2164
- border-radius: 3px;
2165
- text-align: center;
2166
- }
2167
- .ncua-tag__count + .ncua-tag__close {
2168
- margin-left: 6px;
2169
- }
2170
- .ncua-tag--md .ncua-tag__count {
2171
- height: 16px;
2172
- }
2173
- .ncua-tag__close {
2174
- margin-left: 3px;
2175
- margin-right: -5px;
2176
- padding: 0;
2177
- display: inline-flex;
2178
- align-items: center;
2179
- cursor: pointer;
2180
- background-color: transparent;
2181
- border: none;
2182
- }
2183
-
2184
- .ncua-tooltip {
2185
- position: relative;
2186
- }
2187
- .ncua-tooltip {
2188
- font-size: var(--font-size-xxs);
2189
- }
2190
- .ncua-tooltip svg {
2191
- cursor: pointer;
2192
- }
2193
- .ncua-tooltip__bg {
2194
- position: absolute;
2195
- border-radius: 6px;
2196
- padding: 8px 12px;
2197
- display: flex;
2198
- flex-direction: column;
2199
- gap: 4px;
2200
- box-shadow: var(--shadow-lg);
2201
- }
2202
- .ncua-tooltip__bg::after {
2203
- position: absolute;
2204
- border: 6px solid transparent;
2205
- content: "";
2206
- }
2207
- .ncua-tooltip__content {
2208
- line-height: 14px;
2209
- width: max-content;
2210
- }
2211
- .ncua-tooltip__bg--black {
2212
- background-color: var(--gray-700);
2213
- }
2214
- .ncua-tooltip__bg--black::after {
2215
- border-color: var(--gray-700);
2216
- }
2217
- .ncua-tooltip__bg--black .ncua-tooltip__title {
2218
- font-weight: 500;
2219
- color: var(--base-white);
2220
- }
2221
- .ncua-tooltip__bg--black .ncua-tooltip__content {
2222
- color: var(--gray-200);
2223
- }
2224
- .ncua-tooltip__bg--white {
2225
- background-color: var(--base-white);
2226
- }
2227
- .ncua-tooltip__bg--white::after {
2228
- border-color: var(--base-white);
2229
- }
2230
- .ncua-tooltip__bg--white .ncua-tooltip__title {
2231
- font-weight: 500;
2232
- color: var(--gray-500);
2233
- }
2234
- .ncua-tooltip__bg--white .ncua-tooltip__content {
2235
- color: var(--gray-400);
2236
- }
2237
- .ncua-tooltip__bg--top {
2238
- top: auto;
2239
- bottom: calc(100% + 16px);
2240
- right: 50%;
2241
- transform: translateX(50%);
2242
- }
2243
- .ncua-tooltip__bg--top::after {
2244
- top: 100%;
2245
- border-block-end: 0;
2246
- border-inline: 6px solid transparent;
2247
- }
2248
- .ncua-tooltip__bg--top::after {
2249
- left: 50%;
2250
- transform: translateX(-50%);
2251
- }
2252
- .ncua-tooltip__bg--top-left {
2253
- top: auto;
2254
- bottom: calc(100% + 16px);
2255
- left: -12px;
2256
- }
2257
- .ncua-tooltip__bg--top-left::after {
2258
- top: 100%;
2259
- border-block-end: 0;
2260
- border-inline: 6px solid transparent;
2261
- }
2262
- .ncua-tooltip__bg--top-left::after {
2263
- left: 12px;
2264
- }
2265
- .ncua-tooltip__bg--top-right {
2266
- top: auto;
2267
- bottom: calc(100% + 16px);
2268
- right: -12px;
2269
- }
2270
- .ncua-tooltip__bg--top-right::after {
2271
- top: 100%;
2272
- border-block-end: 0;
2273
- border-inline: 6px solid transparent;
2274
- }
2275
- .ncua-tooltip__bg--top-right::after {
2276
- right: 15px;
2277
- }
2278
- .ncua-tooltip__bg--bottom {
2279
- top: calc(100% + 6px);
2280
- right: 50%;
2281
- transform: translateX(50%);
2282
- }
2283
- .ncua-tooltip__bg--bottom::after {
2284
- bottom: 100%;
2285
- border-block-start: 0;
2286
- border-inline: 6px solid transparent;
2287
- }
2288
- .ncua-tooltip__bg--bottom::after {
2289
- left: 50%;
2290
- transform: translateX(-50%);
2291
- }
2292
- .ncua-tooltip__bg--bottom-left {
2293
- top: calc(100% + 6px);
2294
- left: -12px;
2295
- }
2296
- .ncua-tooltip__bg--bottom-left::after {
2297
- bottom: 100%;
2298
- border-block-start: 0;
2299
- border-inline: 6px solid transparent;
2300
- }
2301
- .ncua-tooltip__bg--bottom-left::after {
2302
- left: 12px;
2303
- }
2304
- .ncua-tooltip__bg--bottom-right {
2305
- top: calc(100% + 6px);
2306
- right: -12px;
2307
- }
2308
- .ncua-tooltip__bg--bottom-right::after {
2309
- bottom: 100%;
2310
- border-block-start: 0;
2311
- border-inline: 6px solid transparent;
2312
- }
2313
- .ncua-tooltip__bg--bottom-right::after {
2314
- right: 15px;
2315
- }
2316
- .ncua-tooltip--hidden-arrow .ncua-tooltip__bg::after {
2317
- content: none;
2318
- }
2319
- .ncua-tooltip--stroke svg:hover {
2320
- color: var(--gray-400);
2321
- }
2322
- .ncua-tooltip:not(:hover) .ncua-tooltip__bg {
2323
- display: none;
2324
- }
2325
- .ncua-tooltip:has(.ncua-tooltip__title) .ncua-tooltip__bg {
2326
- padding: 12px;
2327
- }
2328
-
2329
- :root {
2330
- --select-height-xs: 28px;
2331
- --select-height-sm: 36px;
2332
- --select-height-md: 40px;
2333
- --select-simple-height-xs: 18px;
2334
- --select-simple-height-sm: 22px;
2335
- --select-simple-height-md: 22px;
2336
- }
2337
-
2338
- .ncua-select__content {
2339
- display: flex;
2340
- align-items: center;
2341
- padding-inline-start: 14px;
2342
- border: 1px solid var(--gray-200);
2343
- background-color: var(--base-white);
2344
- overflow: hidden;
2345
- position: relative;
2346
- }
2347
- .ncua-select__content::after {
2348
- width: 14px;
2349
- height: 14px;
2350
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
2351
- content: "";
2352
- transform: translateY(-50%);
2353
- position: absolute;
2354
- top: 50%;
2355
- right: 10px;
2356
- }
2357
- .ncua-select__icon {
2358
- margin-right: 8px;
2359
- }
2360
- .ncua-select__icon svg {
2361
- display: block;
2362
- }
2363
- .ncua-select select {
2364
- -webkit-appearance: none;
2365
- appearance: none;
2366
- border: 0;
2367
- height: 100%;
2368
- flex: 1;
2369
- background-color: transparent;
2370
- outline: none;
2371
- color: var(--gray-700);
2372
- }
2373
- .ncua-select__content:focus-within {
2374
- border-color: var(--gray-400);
2375
- box-shadow: var(--shadow-xs-focused-3px-gray-100);
2376
- }
2377
- .ncua-select.destructive .ncua-select__content {
2378
- border-color: var(--primary-red-600);
2379
- }
2380
- .ncua-select.destructive .ncua-select__content:focus-within {
2381
- box-shadow: var(--shadow-xs-focused-4px-error-100);
2382
- }
2383
- .ncua-select--xs {
2384
- height: var(--select-height-xs);
2385
- border-radius: 6px;
2386
- padding-inline: 10px 28px;
2387
- }
2388
- .ncua-select--xs > .ncua-select__tag {
2389
- font-size: var(--font-size-xs);
2390
- font-weight: var(--font-weights-commerce-sans-0);
2391
- line-height: var(--line-heights-xs);
2392
- }
2393
- .ncua-select--xs + .ncua-hint-text {
2394
- margin-block-start: 4px;
2395
- font-size: var(--font-size-xxs);
2396
- line-height: var(--line-heights-xxs);
2397
- }
2398
- .ncua-select--sm {
2399
- height: var(--select-height-sm);
2400
- border-radius: 6px;
2401
- padding-inline: 12px 30px;
2402
- }
2403
- .ncua-select--sm > .ncua-select__tag {
2404
- font-size: var(--font-size-sm);
2405
- font-weight: var(--font-weights-commerce-sans-0);
2406
- line-height: var(--line-heights-sm);
2407
- }
2408
- .ncua-select--sm + .ncua-hint-text {
2409
- margin-block-start: 6px;
2410
- font-size: var(--font-size-xs);
2411
- line-height: var(--line-heights-xs);
2412
- }
2413
- .ncua-select--sm.ncua-select__content::after {
2414
- width: 16px;
2415
- height: 16px;
2416
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
2417
- }
2418
- .ncua-select--md {
2419
- min-width: 132px;
2420
- height: var(--select-height-md);
2421
- border-radius: 8px;
2422
- padding-inline: 12px 30px;
2423
- }
2424
- .ncua-select--md > .ncua-select__tag {
2425
- font-size: var(--font-size-sm);
2426
- font-weight: var(--font-weights-commerce-sans-1);
2427
- line-height: var(--line-heights-sm);
2428
- }
2429
- .ncua-select--md + .ncua-hint-text {
2430
- margin-block-start: 6px;
2431
- font-size: var(--font-size-xs);
2432
- line-height: var(--line-heights-xs);
2433
- }
2434
- .ncua-select--md.ncua-select__content::after {
2435
- width: 16px;
2436
- height: 16px;
2437
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
2438
- }
2439
- .ncua-select--simple .ncua-select__content {
2440
- padding-inline-start: 0;
2441
- border: 0;
2442
- background-color: transparent;
2443
- }
2444
- .ncua-select--simple .ncua-select--xs {
2445
- min-width: auto;
2446
- height: var(--select-simple-height-xs);
2447
- border-radius: 0;
2448
- }
2449
- .ncua-select--simple .ncua-select--sm {
2450
- min-width: auto;
2451
- height: var(--select-simple-height-sm);
2452
- border-radius: 0;
2453
- }
2454
- .ncua-select--simple .ncua-select--md {
2455
- min-width: auto;
2456
- height: var(--select-simple-height-md);
2457
- border-radius: 0;
2458
- }
2459
-
2460
- .ncua-pagination {
2461
- display: flex;
2462
- align-items: center;
2463
- }
2464
- .ncua-pagination__before {
2465
- margin-inline: 4px 8px;
2466
- }
2467
- .ncua-pagination__item + .ncua-pagination__item {
2468
- margin-inline-start: 4px;
2469
- }
2470
- .ncua-pagination__page-num {
2471
- font-size: 14px;
2472
- font-weight: 500;
2473
- display: inline-flex;
2474
- justify-content: center;
2475
- align-items: center;
2476
- padding-inline: 10px;
2477
- min-width: 32px;
2478
- height: 32px;
2479
- border-radius: 8px;
2480
- border: 0;
2481
- background-color: transparent;
2482
- color: var(--gray-500);
2483
- cursor: pointer;
2484
- }
2485
- .ncua-pagination__page-num:hover, .ncua-pagination__page-num:focus, .ncua-pagination__page-num.is-current {
2486
- color: var(--gray-600);
2487
- background-color: var(--gray-50);
2488
- font-weight: 700;
2489
- outline: none;
2490
- }
2491
- .ncua-pagination__next {
2492
- margin-inline: 8px 4px;
2493
- }
2494
- .ncua-pagination--pc {
2495
- justify-content: center;
2496
- }
2497
- .ncua-pagination--pc .ncua-pagination__list {
2498
- display: flex;
2499
- align-items: center;
2500
- margin: 0;
2501
- padding: 0;
2502
- }
2503
- .ncua-pagination--pc .ncua-pagination__page-info {
2504
- display: none;
2505
- }
2506
- .ncua-pagination--mo {
2507
- justify-content: space-between;
2508
- }
2509
- .ncua-pagination--mo .ncua-pagination__list {
2510
- display: none;
2511
- }
2512
- .ncua-pagination--mo .ncua-pagination__first,
2513
- .ncua-pagination--mo .ncua-pagination__last {
2514
- display: none;
2515
- }
2516
- .ncua-pagination--mo .ncua-pagination__page-info {
2517
- display: flex;
2518
- align-items: center;
2519
- margin: 0;
2520
- font-size: 14px;
2521
- color: var(--gray-400);
2522
- }
2523
- .ncua-pagination--mo .ncua-pagination__current-num {
2524
- font-style: normal;
2525
- color: var(--gray-700);
2526
- }
2527
-
2528
- .ncua-slider {
2529
- position: relative;
2530
- width: 100%;
2531
- height: 40px;
2532
- user-select: none;
2533
- touch-action: none;
2534
- }
2535
- .ncua-slider__track {
2536
- position: absolute;
2537
- left: 0;
2538
- right: 0;
2539
- top: 50%;
2540
- transform: translateY(-50%);
2541
- height: 8px;
2542
- background-color: var(--gray-100);
2543
- border-radius: 4px;
2544
- }
2545
- .ncua-slider__progress {
2546
- position: absolute;
2547
- height: 8px;
2548
- background-color: var(--gray-500);
2549
- border-radius: 4px;
2550
- top: 50%;
2551
- transform: translateY(-50%);
2552
- }
2553
- .ncua-slider__handle {
2554
- position: absolute;
2555
- top: 50%;
2556
- transform: translate(-50%, -50%);
2557
- width: 20px;
2558
- height: 20px;
2559
- background-color: var(--base-white);
2560
- border: 1.5px solid var(--gray-400);
2561
- border-radius: 12px;
2562
- cursor: pointer;
2563
- box-shadow: var(--shadow-md);
2564
- }
2565
- .ncua-slider__handle.is-active {
2566
- border-color: var(--gray-500);
2567
- }
2568
- .ncua-slider__label {
2569
- position: absolute;
2570
- top: calc(50% + 18px);
2571
- left: 50%;
2572
- transform: translate(-50%, 0);
2573
- font-size: var(--font-size-xxxs);
2574
- font-weight: var(--font-weights-commerce-sans-1);
2575
- color: var(--gray-500);
2576
- white-space: nowrap;
2577
- }
2578
- .ncua-slider__label--tooltip {
2579
- top: calc(50% - 8px);
2580
- color: var(--gray-500);
2581
- background-color: var(--base-white);
2582
- transform: translate(-50%, -100%);
2583
- padding: 8px 12px;
2584
- border-radius: 6px;
2585
- font-size: var(--font-size-xxs);
2586
- line-height: var(--line-heights-xxs);
2587
- font-weight: var(--font-weights-commerce-sans-1);
2588
- border: 1px solid var(--gray-200);
2589
- box-shadow: var(--shadow-lg);
2590
- }
2591
-
2592
- @keyframes ncua-spinner-rotate {
2593
- from {
2594
- transform: rotate(0deg);
2595
- }
2596
- to {
2597
- transform: rotate(360deg);
2598
- }
2599
- }
2600
- .ncua-spinner {
2601
- display: grid;
2602
- place-items: center;
2603
- }
2604
- .ncua-spinner__content {
2605
- text-align: center;
2606
- }
2607
- .ncua-spinner__content::before {
2608
- content: "";
2609
- display: inline-block;
2610
- border-radius: 50%;
2611
- border-style: solid;
2612
- border-color: var(--gray-100);
2613
- border-top-color: var(--gray-500);
2614
- animation: ncua-spinner-rotate 1s linear infinite;
2615
- }
2616
- .ncua-spinner__text {
2617
- margin: 0;
2618
- color: var(--gray-500);
2619
- }
2620
- .ncua-spinner--xs {
2621
- font-size: 11px;
2622
- }
2623
- .ncua-spinner--xs .ncua-spinner__content::before {
2624
- margin-block-end: 12px;
2625
- width: 16px;
2626
- height: 16px;
2627
- border-width: 2px;
2628
- }
2629
- .ncua-spinner--sm {
2630
- font-size: 14px;
2631
- }
2632
- .ncua-spinner--sm .ncua-spinner__content::before {
2633
- margin-block-end: 16px;
2634
- width: 32px;
2635
- height: 32px;
2636
- border-width: 4px;
2637
- }
2638
- .ncua-spinner--md {
2639
- font-size: 14px;
2640
- }
2641
- .ncua-spinner--md .ncua-spinner__content::before {
2642
- margin-block-end: 16px;
2643
- width: 48px;
2644
- height: 48px;
2645
- border-width: 6px;
2646
- }
2647
- .ncua-spinner--lg {
2648
- font-size: 18px;
2649
- }
2650
- .ncua-spinner--lg .ncua-spinner__content::before {
2651
- margin-block-end: 16px;
2652
- width: 56px;
2653
- height: 56px;
2654
- border-width: 6px;
2655
- }
2656
- .ncua-spinner--xl {
2657
- font-size: 18px;
2658
- }
2659
- .ncua-spinner--xl .ncua-spinner__content::before {
2660
- margin-block-end: 20px;
2661
- width: 64px;
2662
- height: 64px;
2663
- border-width: 8px;
2664
- }
2665
- .ncua-spinner--backdrop {
2666
- content: "";
2667
- position: fixed;
2668
- top: 0;
2669
- left: 0;
2670
- width: 100vw;
2671
- height: 100vh;
2672
- background-color: rgba(0, 0, 0, 0.5);
2673
- z-index: 200;
2674
- }
2675
-
2676
- :root {
2677
- --toggle-sm-width: 28px;
2678
- --toggle-sm-height: 16px;
2679
- --toggle-sm-slider-size: 12px;
2680
- --toggle-sm-slider-top: 2px;
2681
- --toggle-sm-slider-left: 2px;
2682
- --toggle-sm-translate: 12px;
2683
- --toggle-sm-font-size: var(--font-size-xs);
2684
- --toggle-sm-line-height: var(--line-heights-xs);
2685
- --toggle-sm-text-margin: 8px;
2686
- --toggle-md-width: 44px;
2687
- --toggle-md-height: 24px;
2688
- --toggle-md-slider-size: 20px;
2689
- --toggle-md-slider-top: 2px;
2690
- --toggle-md-slider-left: 2px;
2691
- --toggle-md-translate: 20px;
2692
- --toggle-md-font-size: var(--font-size-md);
2693
- --toggle-md-line-height: var(--line-heights-md);
2694
- --toggle-md-text-margin: 12px;
2695
- --toggle-focus-shadow: 0px 0px 0px 3px rgba(242, 244, 247, 0.8);
2696
- --toggle-checked-focus-shadow: 0 0 0 2px rgba(46, 168, 79, 0.2);
2697
- }
2698
-
2699
- .ncua-toggle {
2700
- position: relative;
2701
- display: inline-flex;
2702
- cursor: pointer;
2703
- user-select: none;
2704
- }
2705
- .ncua-toggle__input {
2706
- position: absolute;
2707
- opacity: 0;
2708
- width: 0;
2709
- height: 0;
2710
- }
2711
- .ncua-toggle__switch {
2712
- position: relative;
2713
- display: inline-block;
2714
- background-color: var(--gray-200);
2715
- border-radius: 12px;
2716
- transition: background-color 0.3s, box-shadow 0.3s;
2717
- }
2718
- .ncua-toggle__slider {
2719
- position: absolute;
2720
- background-color: var(--base-white);
2721
- border-radius: 50%;
2722
- transition: transform 0.3s;
2723
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
2724
- }
2725
- .ncua-toggle--sm .ncua-toggle__text-wrapper {
2726
- margin-top: -1px;
2727
- }
2728
- .ncua-toggle__text {
2729
- display: block;
2730
- color: var(--gray-600);
2731
- font-weight: var(--font-weights-commerce-sans-1);
2732
- }
2733
- .ncua-toggle__support-text {
2734
- margin-top: 2px;
2735
- color: var(--gray-400);
2736
- }
2737
- .ncua-toggle--sm .ncua-toggle__switch {
2738
- width: var(--toggle-sm-width);
2739
- height: var(--toggle-sm-height);
2740
- }
2741
- .ncua-toggle--sm .ncua-toggle__slider {
2742
- width: var(--toggle-sm-slider-size);
2743
- height: var(--toggle-sm-slider-size);
2744
- top: var(--toggle-sm-slider-top);
2745
- left: var(--toggle-sm-slider-left);
2746
- }
2747
- .ncua-toggle--sm .ncua-toggle__text-wrapper {
2748
- margin-left: var(--toggle-sm-text-margin);
2749
- font-size: var(--toggle-sm-font-size);
2750
- line-height: var(--toggle-sm-line-height);
2751
- }
2752
- .ncua-toggle--sm.ncua-toggle--checked .ncua-toggle__slider {
2753
- transform: translateX(var(--toggle-sm-translate));
2754
- }
2755
- .ncua-toggle--md .ncua-toggle__switch {
2756
- width: var(--toggle-md-width);
2757
- height: var(--toggle-md-height);
2758
- }
2759
- .ncua-toggle--md .ncua-toggle__slider {
2760
- width: var(--toggle-md-slider-size);
2761
- height: var(--toggle-md-slider-size);
2762
- top: var(--toggle-md-slider-top);
2763
- left: var(--toggle-md-slider-left);
2764
- }
2765
- .ncua-toggle--md .ncua-toggle__text-wrapper {
2766
- margin-left: var(--toggle-md-text-margin);
2767
- font-size: var(--toggle-md-font-size);
2768
- line-height: var(--toggle-md-line-height);
2769
- }
2770
- .ncua-toggle--md.ncua-toggle--checked .ncua-toggle__slider {
2771
- transform: translateX(var(--toggle-md-translate));
2772
- }
2773
- .ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
2774
- background-color: var(--gray-300);
2775
- }
2776
- .ncua-toggle--checked .ncua-toggle__switch {
2777
- background-color: var(--green-500);
2778
- }
2779
- .ncua-toggle--checked:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
2780
- background-color: var(--green-600);
2781
- }
2782
- .ncua-toggle--checked__input:focus + .ncua-toggle__switch {
2783
- box-shadow: var(--toggle-checked-focus-shadow);
2784
- }
2785
- .ncua-toggle__input:focus + .ncua-toggle__switch {
2786
- box-shadow: var(--toggle-focus-shadow);
2787
- }
2788
- .ncua-toggle--disabled {
2789
- cursor: not-allowed;
2790
- }
2791
- .ncua-toggle--disabled .ncua-toggle__switch {
2792
- background-color: var(--gray-100);
2793
- }
2794
- .ncua-toggle--disabled .ncua-toggle__slider {
2795
- background-color: var(--gray-50);
2796
- }
2797
-
2798
- .ncua-date-picker {
2799
- position: relative;
2800
- display: inline-flex;
2801
- }
2802
- .ncua-date-picker .flatpickr-wrapper {
2803
- border: 1px solid var(--gray-200);
2804
- border-radius: 6px;
2805
- font-weight: 400;
2806
- background: var(--base-white);
2807
- box-shadow: var(--shadow-xs);
2808
- color: var(--gray-700);
2809
- }
2810
- .ncua-date-picker .flatpickr-wrapper:focus-within {
2811
- border-color: var(--gray-400);
2812
- }
2813
- .ncua-date-picker__input {
2814
- width: 100%;
2815
- height: 100%;
2816
- padding: 0;
2817
- border: 0;
2818
- outline: none;
2819
- color: inherit;
2820
- vertical-align: top;
2821
- font: inherit;
2822
- }
2823
- .ncua-date-picker__input::placeholder {
2824
- color: var(--gray-700);
2825
- }
2826
- .ncua-date-picker__input:disabled {
2827
- background-color: var(--gray-50);
2828
- border-color: var(--gray-200);
2829
- cursor: default;
2830
- }
2831
- .ncua-date-picker__input:disabled::placeholder {
2832
- color: var(--gray-300);
2833
- }
2834
- .ncua-date-picker__ico {
2835
- position: absolute;
2836
- top: 0;
2837
- right: 0;
2838
- bottom: 0;
2839
- left: auto;
2840
- display: flex;
2841
- align-items: center;
2842
- justify-content: center;
2843
- padding-right: 12px;
2844
- }
2845
- .ncua-date-picker .flatpickr-calendar {
2846
- max-height: none;
2847
- padding-block-start: 12px;
2848
- border-radius: 8px;
2849
- left: 0;
2850
- box-shadow: 1px 0 0 var(--gray-200), -1px 0 0 var(--gray-200), 0 1px 0 var(--gray-200), 0 -1px 0 var(--gray-200), 0 3px 13px rgba(0, 0, 0, 0.08);
2851
- }
2852
- .ncua-date-picker .flatpickr-calendar::before, .ncua-date-picker .flatpickr-calendar::after {
2853
- content: none;
2854
- }
2855
- .ncua-date-picker .numInputWrapper .cur-year {
2856
- margin-inline-start: 4px;
2857
- transform: translateY(2px);
2858
- }
2859
- .ncua-date-picker .numInputWrapper span {
2860
- opacity: 1;
2861
- }
2862
- .ncua-date-picker .flatpickr-months {
2863
- justify-content: space-between;
2864
- margin-inline: auto;
2865
- margin-block-end: 12px;
2866
- }
2867
- .ncua-date-picker .flatpickr-months .flatpickr-prev-month,
2868
- .ncua-date-picker .flatpickr-months .flatpickr-next-month {
2869
- position: initial;
2870
- width: 36px;
2871
- height: 36px;
2872
- }
2873
- .ncua-date-picker .flatpickr-months .flatpickr-prev-month svg,
2874
- .ncua-date-picker .flatpickr-months .flatpickr-next-month svg {
2875
- vertical-align: top;
2876
- transform: translateY(1px);
2877
- }
2878
- .ncua-date-picker .flatpickr-months .flatpickr-prev-month:hover,
2879
- .ncua-date-picker .flatpickr-months .flatpickr-next-month:hover {
2880
- border-radius: 6px;
2881
- background-color: var(--gray-50);
2882
- }
2883
- .ncua-date-picker .flatpickr-months .flatpickr-prev-month:hover svg,
2884
- .ncua-date-picker .flatpickr-months .flatpickr-next-month:hover svg {
2885
- fill: initial;
2886
- }
2887
- .ncua-date-picker .flatpickr-months .flatpickr-month {
2888
- overflow: visible;
2889
- flex: none;
2890
- }
2891
- .ncua-date-picker .flatpickr-current-month {
2892
- position: initial;
2893
- width: auto;
2894
- display: flex;
2895
- padding-block-start: 6px;
2896
- gap: 4px;
2897
- }
2898
- .ncua-date-picker .flatpickr-monthDropdown-months {
2899
- margin: 0;
2900
- padding: 0;
2901
- transform: translateY(-1px);
2902
- }
2903
- .ncua-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months,
2904
- .ncua-date-picker .flatpickr-current-month .cur-year {
2905
- font-weight: 700;
2906
- line-height: 22px;
2907
- }
2908
- .ncua-date-picker .flatpickr-innerContainer {
2909
- justify-content: center;
2910
- }
2911
- .ncua-date-picker .flatpickr-weekdays {
2912
- margin-inline: auto;
2913
- }
2914
- .ncua-date-picker .dayContainer {
2915
- row-gap: 4px;
2916
- }
2917
- .ncua-date-picker .flatpickr-days {
2918
- justify-content: center;
2919
- padding-block-end: 12px;
2920
- }
2921
- .ncua-date-picker .flatpickr-day:hover {
2922
- background-color: var(--gray-50);
2923
- border-color: var(--gray-50);
2924
- }
2925
- .ncua-date-picker .flatpickr-day.selected {
2926
- background-color: var(--gray-500);
2927
- border-color: var(--gray-500);
2928
- }
2929
- .ncua-date-picker .flatpickr-day.selected:hover {
2930
- border-color: var(--gray-700);
2931
- background-color: var(--gray-700);
2932
- }
2933
- .ncua-date-picker .flatpickr-day.today {
2934
- border-color: var(--gray-600);
2935
- }
2936
- .ncua-date-picker--sm {
2937
- width: 138px;
2938
- height: 28px;
2939
- }
2940
- .ncua-date-picker--sm .flatpickr-wrapper {
2941
- height: 100%;
2942
- padding: 5px 10px;
2943
- font-size: var(--font-size-xs);
2944
- }
2945
- .ncua-date-picker--md {
2946
- width: 156px;
2947
- height: 36px;
2948
- }
2949
- .ncua-date-picker--md .flatpickr-wrapper {
2950
- height: 100%;
2951
- padding: 7px 12px;
2952
- font-size: var(--font-size-sm);
2953
- }
2954
- .ncua-date-picker--sm .flatpickr-calendar {
2955
- width: 248px;
2956
- }
2957
- .ncua-date-picker--sm .flatpickr-months,
2958
- .ncua-date-picker--sm .flatpickr-weekdays,
2959
- .ncua-date-picker--sm .flatpickr-days {
2960
- width: 224px;
2961
- }
2962
- .ncua-date-picker--sm .dayContainer {
2963
- max-width: 224px;
2964
- min-width: 224px;
2965
- column-gap: 0;
2966
- font-size: 13px;
2967
- }
2968
- .ncua-date-picker--sm .flatpickr-day {
2969
- max-width: 32px;
2970
- width: 32px;
2971
- height: 32px;
2972
- line-height: 32px;
2973
- }
2974
- .ncua-date-picker--sm .flatpickr-current-month .flatpickr-monthDropdown-months,
2975
- .ncua-date-picker--sm .flatpickr-current-month .cur-year {
2976
- font-size: var(--font-size-sm);
2977
- }
2978
- .ncua-date-picker--md .flatpickr-calendar {
2979
- width: 343px;
2980
- }
2981
- .ncua-date-picker--md .flatpickr-months,
2982
- .ncua-date-picker--md .flatpickr-weekdays,
2983
- .ncua-date-picker--md .flatpickr-days {
2984
- width: 311px;
2985
- }
2986
- .ncua-date-picker--md .dayContainer {
2987
- max-width: 311px;
2988
- min-width: 311px;
2989
- column-gap: 9.83px;
2990
- font-size: 14px;
2991
- }
2992
- .ncua-date-picker--md .flatpickr-day {
2993
- max-width: 36px;
2994
- width: 36px;
2995
- height: 36px;
2996
- line-height: 36px;
2997
- }
2998
- .ncua-date-picker--md .flatpickr-current-month .flatpickr-monthDropdown-months,
2999
- .ncua-date-picker--md .flatpickr-current-month .cur-year {
3000
- font-size: var(--font-size-lg);
3001
- }
3002
- .ncua-date-picker--disabled .flatpickr-wrapper,
3003
- .ncua-date-picker--disabled .ncua-date-picker__input {
3004
- background-color: var(--gray-50);
3005
- }
3006
- .ncua-date-picker--disabled .ncua-date-picker__input {
3007
- color: var(--gray-300);
3008
- }
3009
-
3010
- .ncua-range-date-picker {
3011
- display: inline-flex;
3012
- align-items: center;
3013
- gap: 8px;
3014
- }
3015
-
3016
- .ncua-range-date-picker-with-buttons {
3017
- display: inline-flex;
3018
- align-items: center;
3019
- gap: 16px;
3020
- }
3021
-
3022
- .ncua-carousel-number-group {
3023
- display: inline-flex;
3024
- align-items: center;
3025
- gap: 2px;
3026
- }
3027
- .ncua-carousel-number-group--light .ncua-carousel-number-group__number {
3028
- color: var(--gray-600);
3029
- }
3030
- .ncua-carousel-number-group--light .ncua-carousel-number-group__total {
3031
- color: var(--gray-300);
3032
- }
3033
- .ncua-carousel-number-group--dark .ncua-carousel-number-group__number {
3034
- color: var(--base-white);
3035
- }
3036
- .ncua-carousel-number-group--dark .ncua-carousel-number-group__total {
3037
- color: var(--gray-300);
3038
- }
3039
- .ncua-carousel-number-group--sm {
3040
- font-size: 11px;
3041
- line-height: 14px;
3042
- font-weight: 500;
3043
- }
3044
- .ncua-carousel-number-group.framed {
3045
- border-radius: 13px;
3046
- }
3047
- .ncua-carousel-number-group.framed.ncua-carousel-number-group--light {
3048
- background-color: var(--base-white);
3049
- }
3050
- .ncua-carousel-number-group.framed.ncua-carousel-number-group--dark {
3051
- background-color: rgba(12, 17, 29, 0.6);
3052
- }
3053
- .ncua-carousel-number-group.framed.ncua-carousel-number-group--sm {
3054
- padding: 2px 8px;
3055
- }
3056
-
3057
- .ncua-carousel-arrow {
3058
- display: inline-block;
3059
- border-radius: 999px;
3060
- background-color: #ffffff;
3061
- cursor: pointer;
3062
- }
3063
- .ncua-carousel-arrow__icon {
3064
- display: block;
3065
- }
3066
- .ncua-carousel-arrow--line {
3067
- outline: 1px solid var(--gray-200);
3068
- }
3069
- .ncua-carousel-arrow--md {
3070
- padding: 8px;
3071
- }
3072
- .ncua-carousel-arrow--md .ncua-carousel-arrow__icon {
3073
- width: 16px;
3074
- height: 16px;
3075
- }
3076
-
3077
- .ncua-breadcrumb {
3078
- display: flex;
3079
- align-items: center;
3080
- font-size: var(--font-size-xs);
3081
- }
3082
- .ncua-breadcrumb__list {
3083
- display: flex;
3084
- flex-wrap: wrap;
3085
- align-items: center;
3086
- gap: 32px;
3087
- padding: 0;
3088
- margin: 0;
3089
- list-style: none;
3090
- }
3091
- .ncua-breadcrumb__list-item {
3092
- position: relative;
3093
- display: flex;
3094
- align-items: center;
3095
- height: 28px;
3096
- padding: 4px 6px;
3097
- color: var(--gray-400);
3098
- font-weight: var(--font-weights-commerce-sans-1);
3099
- cursor: pointer;
3100
- }
3101
- .ncua-breadcrumb__list-item:first-child {
3102
- height: 24px;
3103
- padding: 4px;
3104
- }
3105
- .ncua-breadcrumb__list-item--active {
3106
- color: var(--gray-600);
3107
- }
3108
- .ncua-breadcrumb__list-item:hover {
3109
- background-color: var(--gray-100);
3110
- border-radius: 4px;
3111
- }
3112
- .ncua-breadcrumb__list-item:not(:last-child)::after {
3113
- content: "";
3114
- position: absolute;
3115
- right: -24px;
3116
- top: 50%;
3117
- transform: translateY(-50%);
3118
- display: inline-block;
3119
- width: 16px;
3120
- height: 16px;
3121
- background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M6 12L10 8L6 4" stroke="%23D3D4D8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
3122
- background-repeat: no-repeat;
3123
- background-position: center;
3124
- }
3125
- .ncua-breadcrumb__item {
3126
- display: flex;
3127
- align-items: center;
3128
- color: inherit;
3129
- text-decoration: none;
3130
- transition: color 0.2s ease;
3131
- }
3132
- .ncua-breadcrumb__item:hover {
3133
- color: inherit;
3134
- text-decoration: none;
3135
- }
3136
-
3137
- .ncua-badge {
3138
- display: inline-flex;
3139
- align-items: center;
3140
- gap: 2px;
3141
- overflow: hidden;
3142
- border-radius: 16px;
3143
- font-weight: 500;
3144
- }
3145
- .ncua-badge--xs {
3146
- font-size: var(--font-size-xxxs);
3147
- padding: 2px 8px;
3148
- height: 18px;
3149
- line-height: var(--line-heights-xxxs);
3150
- }
3151
- .ncua-badge--sm {
3152
- font-size: var(--font-size-xs);
3153
- padding: 2px 10px;
3154
- height: 22px;
3155
- line-height: var(--line-heights-xs);
3156
- }
3157
- .ncua-badge--md {
3158
- font-size: var(--font-size-sm);
3159
- padding: 2px 10px;
3160
- height: 26px;
3161
- line-height: var(--line-heights-sm);
3162
- }
3163
- .ncua-badge--pill-outline.ncua-badge--neutral {
3164
- color: var(--gray-600);
3165
- border: 1px solid var(--gray-400);
3166
- background-color: var(--base-white);
3167
- }
3168
- .ncua-badge--pill-outline.ncua-badge--error {
3169
- color: var(--primary-red-600);
3170
- border: 1px solid var(--primary-red-400);
3171
- background-color: var(--base-white);
3172
- }
3173
- .ncua-badge--pill-outline.ncua-badge--warning {
3174
- color: var(--orange-600);
3175
- border: 1px solid var(--orange-400);
3176
- background-color: var(--base-white);
3177
- }
3178
- .ncua-badge--pill-outline.ncua-badge--success {
3179
- color: var(--green-600);
3180
- border: 1px solid var(--green-400);
3181
- background-color: var(--base-white);
3182
- }
3183
- .ncua-badge--pill-outline.ncua-badge--blue {
3184
- color: var(--blue-600);
3185
- border: 1px solid var(--blue-400);
3186
- background-color: var(--base-white);
3187
- }
3188
- .ncua-badge--pill-outline.ncua-badge--pink {
3189
- color: var(--pink-600);
3190
- border: 1px solid var(--pink-400);
3191
- background-color: var(--base-white);
3192
- }
3193
- .ncua-badge--pill-outline.ncua-badge--disabled {
3194
- color: var(--gray-300);
3195
- border: 1px solid var(--gray-200);
3196
- background-color: var(--gray-100);
3197
- }
3198
- .ncua-badge--pill-dark-color.ncua-badge--neutral {
3199
- color: var(--base-white);
3200
- background-color: var(--base-black);
3201
- }
3202
- .ncua-badge--pill-dark-color.ncua-badge--error {
3203
- color: var(--base-white);
3204
- background-color: var(--primary-red-500);
3205
- }
3206
- .ncua-badge--pill-dark-color.ncua-badge--warning {
3207
- color: var(--base-white);
3208
- background-color: var(--orange-500);
3209
- }
3210
- .ncua-badge--pill-dark-color.ncua-badge--success {
3211
- color: var(--base-white);
3212
- background-color: var(--green-500);
3213
- }
3214
- .ncua-badge--pill-dark-color.ncua-badge--blue {
3215
- color: var(--base-white);
3216
- background-color: var(--blue-500);
3217
- }
3218
- .ncua-badge--pill-dark-color.ncua-badge--pink {
3219
- color: var(--base-white);
3220
- background-color: var(--pink-500);
3221
- }
3222
- .ncua-badge--pill-dark-color.ncua-badge--disabled {
3223
- color: var(--gray-300);
3224
- background-color: var(--gray-100);
3225
- }
3226
-
3227
- .ncua-badge-group {
3228
- display: inline-flex;
3229
- align-items: center;
3230
- padding: 4px 10px 4px 4px;
3231
- border-radius: 16px;
3232
- }
3233
- .ncua-badge-group__label {
3234
- margin-left: 8px;
3235
- font-weight: var(--font-weights-commerce-sans-1);
3236
- }
3237
- .ncua-badge-group svg {
3238
- margin-left: 4px;
3239
- }
3240
- .ncua-badge-group.ncua-badge-group--neutral {
3241
- color: var(--gray-600);
3242
- background-color: var(--gray-50);
3243
- border: 1px solid var(--gray-100);
3244
- }
3245
- .ncua-badge-group.ncua-badge-group--neutral:hover {
3246
- background-color: var(--gray-100);
3247
- border-color: var(--gray-200);
3248
- }
3249
- .ncua-badge-group.ncua-badge-group--error {
3250
- color: var(--primary-red-600);
3251
- background-color: var(--primary-red-50);
3252
- border: 1px solid var(--primary-red-100);
3253
- }
3254
- .ncua-badge-group.ncua-badge-group--error:hover {
3255
- background-color: var(--primary-red-100);
3256
- border-color: var(--primary-red-200);
3257
- }
3258
- .ncua-badge-group.ncua-badge-group--warning {
3259
- color: var(--orange-600);
3260
- background-color: var(--orange-50);
3261
- border: 1px solid var(--orange-100);
3262
- }
3263
- .ncua-badge-group.ncua-badge-group--warning:hover {
3264
- background-color: var(--orange-100);
3265
- border-color: var(--orange-200);
3266
- }
3267
- .ncua-badge-group.ncua-badge-group--success {
3268
- color: var(--green-600);
3269
- background-color: var(--green-50);
3270
- border: 1px solid var(--green-100);
3271
- }
3272
- .ncua-badge-group.ncua-badge-group--success:hover {
3273
- background-color: var(--green-100);
3274
- border-color: var(--green-200);
3275
- }
3276
- .ncua-badge-group.ncua-badge-group--xs {
3277
- font-size: var(--font-size-xs);
3278
- line-height: var(--line-heights-xs);
3279
- }
3280
- .ncua-badge-group.ncua-badge-group--sm {
3281
- font-size: var(--font-size-sm);
3282
- line-height: var(--line-heights-sm);
3283
- }
3284
-
3285
- .ncua-progress-bar {
3286
- position: relative;
3287
- display: flex;
3288
- flex-direction: column;
3289
- width: 100%;
3290
- }
3291
- .ncua-progress-bar-top-float {
3292
- padding-top: 42px;
3293
- }
3294
- .ncua-progress-bar-bottom-float {
3295
- padding-bottom: 42px;
3296
- }
3297
- .ncua-progress-bar__content {
3298
- display: flex;
3299
- align-items: center;
3300
- width: 100%;
3301
- gap: 8px;
3302
- }
3303
- .ncua-progress-bar__bar {
3304
- flex-grow: 1;
3305
- height: 4px;
3306
- background-color: var(--gray-100);
3307
- border-radius: 5px;
3308
- overflow: hidden;
3309
- }
3310
- .ncua-progress-bar__fill {
3311
- height: 100%;
3312
- background-color: var(--gray-600);
3313
- border-radius: 5px;
3314
- transition: width 0.3s ease;
3315
- }
3316
- .ncua-progress-bar__label {
3317
- font-size: var(--font-size-sm);
3318
- color: var(--gray-700);
3319
- font-weight: var(--font-weights-commerce-sans-1);
3320
- }
3321
- .ncua-progress-bar__label-right {
3322
- min-width: 45px;
3323
- }
3324
- .ncua-progress-bar__label-bottom {
3325
- margin-top: 8px;
3326
- align-self: flex-end;
3327
- }
3328
- .ncua-progress-bar__label-top-float, .ncua-progress-bar__label-bottom-float {
3329
- position: absolute;
3330
- left: var(--progress-value, 0%);
3331
- transform: translateX(-50%);
3332
- transition: left 0.3s ease;
3333
- height: 32px;
3334
- padding: 0 12px;
3335
- line-height: 32px;
3336
- background-color: var(--base-white);
3337
- border-radius: 6px;
3338
- border: 1px solid var(--gray-100);
3339
- font-size: var(--font-size-xxs);
3340
- box-shadow: var(--shadow-lg);
3341
- }
3342
- .ncua-progress-bar__label-top-float {
3343
- top: 0;
3344
- }
3345
- .ncua-progress-bar__label-bottom-float {
3346
- bottom: 0;
3347
- }
3348
-
3349
- .ncua-empty-state {
3350
- display: flex;
3351
- flex-direction: column;
3352
- justify-content: center;
3353
- align-items: center;
3354
- }
3355
- .ncua-empty-state__title {
3356
- color: var(--gray-700);
3357
- font-size: var(--font-size-sm);
3358
- font-weight: var(--font-weights-commerce-sans-2);
3359
- line-height: var(--line-heights-sm);
3360
- }
3361
- .ncua-empty-state__description {
3362
- display: inline-block;
3363
- margin-top: 4px;
3364
- color: var(--gray-400);
3365
- font-size: var(--font-size-xs);
3366
- line-height: var(--line-heights-xs);
3367
- }
3368
- .ncua-empty-state__button-group {
3369
- display: flex;
3370
- gap: 6px;
3371
- margin-top: 16px;
3372
- }
3373
-
3374
- .ncua-tab-button {
3375
- display: inline-flex;
3376
- gap: 8px;
3377
- align-items: center;
3378
- justify-content: center;
3379
- width: 100%;
3380
- font-weight: var(--font-weights-commerce-sans-2);
3381
- color: var(--gray-400);
3382
- border-radius: 6px;
3383
- cursor: pointer;
3384
- background-color: transparent;
3385
- }
3386
- .ncua-tab-button:hover, .ncua-tab-button.is-active {
3387
- color: var(--gray-700);
3388
- }
3389
- .ncua-tab-button--xs {
3390
- padding: 5px 12px;
3391
- height: 34px;
3392
- font-size: var(--font-size-xs);
3393
- }
3394
- .ncua-tab-button--sm {
3395
- padding: 7px 12px;
3396
- height: 38px;
3397
- font-size: var(--font-size-sm);
3398
- }
3399
- .ncua-tab-button--md {
3400
- padding: 9px 14px;
3401
- height: 44px;
3402
- font-size: var(--font-size-md);
3403
- }
3404
- .ncua-tab-button--button-primary:hover, .ncua-tab-button--button-primary.is-active {
3405
- background-color: var(--gray-50);
3406
- }
3407
- .ncua-tab-button--button-primary:focus {
3408
- box-shadow: var(--focus-ring-4px-gray-100);
3409
- }
3410
- .ncua-tab-button--button-white.ncua-tab-button--xs {
3411
- padding: 5px 12px;
3412
- height: 28px;
3413
- }
3414
- .ncua-tab-button--button-white.ncua-tab-button--sm {
3415
- padding: 7px 12px;
3416
- height: 32px;
3417
- }
3418
- .ncua-tab-button--button-white.ncua-tab-button--md {
3419
- padding: 9px 14px;
3420
- height: 40px;
3421
- }
3422
- .ncua-tab-button--button-white:hover {
3423
- box-shadow: var(--shadow-sm);
3424
- }
3425
- .ncua-tab-button--button-white.is-active {
3426
- color: var(--gray-500);
3427
- box-shadow: var(--shadow-sm);
3428
- }
3429
- .ncua-tab-button--underline-fill {
3430
- position: relative;
3431
- border-radius: 0;
3432
- }
3433
- .ncua-tab-button--underline-fill:hover, .ncua-tab-button--underline-fill.is-active, .ncua-tab-button--underline-fill.is-active:focus {
3434
- background-color: var(--gray-100);
3435
- }
3436
- .ncua-tab-button--underline-fill:hover::before, .ncua-tab-button--underline-fill.is-active::before, .ncua-tab-button--underline-fill.is-active:focus::before {
3437
- width: 100%;
3438
- height: 2px;
3439
- content: "";
3440
- background-color: var(--gray-500);
3441
- position: absolute;
3442
- bottom: 0;
3443
- left: 0;
3444
- }
3445
- .ncua-tab-button--underline {
3446
- border-radius: 0;
3447
- }
3448
- .ncua-tab-button--underline:hover, .ncua-tab-button--underline.is-active {
3449
- position: relative;
3450
- }
3451
- .ncua-tab-button--underline:hover::before, .ncua-tab-button--underline.is-active::before {
3452
- width: 100%;
3453
- height: 2px;
3454
- content: "";
3455
- background-color: var(--gray-500);
3456
- position: absolute;
3457
- bottom: 0;
3458
- left: 0;
3459
- }
3460
- .ncua-tab-button--line-vertical {
3461
- border-radius: 0;
3462
- }
3463
- .ncua-tab-button--line-vertical:hover, .ncua-tab-button--line-vertical.is-active, .ncua-tab-button--line-vertical.is-active:focus {
3464
- box-shadow: -2px 0 var(--gray-700);
3465
- }
3466
-
3467
- .ncua-horizontal-tab {
3468
- position: relative;
3469
- overflow-x: auto;
3470
- }
3471
- .ncua-horizontal-tab__item {
3472
- width: auto !important;
3473
- }
3474
- .ncua-horizontal-tab--underline::after, .ncua-horizontal-tab--underline-fill::after {
3475
- position: absolute;
3476
- bottom: 0;
3477
- left: 0;
3478
- width: 100%;
3479
- height: 1px;
3480
- content: "";
3481
- background-color: var(--gray-100);
3482
- }
3483
- .ncua-horizontal-tab--button-primary .swiper-slide:first-child, .ncua-horizontal-tab--button-white .swiper-slide:first-child {
3484
- padding-left: 4px;
3485
- }
3486
- .ncua-horizontal-tab--button-primary .swiper-slide:last-child, .ncua-horizontal-tab--button-white .swiper-slide:last-child {
3487
- padding-right: 4px;
3488
- margin-right: 0;
3489
- }
3490
- .ncua-horizontal-tab--button-primary .swiper-slide {
3491
- padding: 4px 0;
3492
- }
3493
- .ncua-horizontal-tab--button-white {
3494
- display: inline-block;
3495
- background: var(--gray-50);
3496
- border: 1px solid var(--gray-100);
3497
- border-radius: 8px;
3498
- }
3499
- .ncua-horizontal-tab--button-white .swiper-slide {
3500
- padding: 3px 0;
3501
- }
3502
- .ncua-horizontal-tab--button-white .ncua-tab-button {
3503
- background-color: var(--gray-50);
3504
- }
3505
- .ncua-horizontal-tab--button-white .ncua-tab-button:hover, .ncua-horizontal-tab--button-white .ncua-tab-button.is-active {
3506
- background-color: var(--base-white);
3507
- border-radius: 6px;
3508
- box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
3509
- color: var(--gray-500);
3510
- }
3511
- .ncua-horizontal-tab--fullWidth {
3512
- width: 100%;
3513
- }
3514
- .ncua-horizontal-tab--fullWidth .ncua-horizontal-tab__item {
3515
- width: 100% !important;
3516
- }
3517
- .ncua-horizontal-tab--fullWidth .swiper-slide {
3518
- flex-shrink: 1;
3519
- }
3520
- .ncua-horizontal-tab__item:last-child {
3521
- margin-right: 0 !important;
3522
- }
3523
-
3524
- .ncua-vertical-tab {
3525
- position: relative;
3526
- display: flex;
3527
- flex-direction: column;
3528
- gap: 4px;
3529
- }
3530
- .ncua-vertical-tab--button-white {
3531
- padding: 4px;
3532
- background-color: var(--gray-50);
3533
- border: 1px solid var(--gray-100);
3534
- border-radius: 8px;
3535
- }
3536
- .ncua-vertical-tab--button-white .ncua-tab-button {
3537
- background-color: var(--gray-50);
3538
- }
3539
- .ncua-vertical-tab--button-white .ncua-tab-button:hover, .ncua-vertical-tab--button-white .ncua-tab-button.is-active {
3540
- background-color: var(--base-white);
3541
- border-radius: 6px;
3542
- box-shadow: var(--shadow-sm);
3543
- color: var(--gray-500);
3544
- }
3545
- .ncua-vertical-tab .ncua-tab-button {
3546
- justify-content: flex-start;
3547
- }
3548
-
3549
- .ncua-progress-circle {
3550
- position: relative;
3551
- display: inline-flex;
3552
- flex-direction: column;
3553
- align-items: center;
3554
- --circle-radius: 45;
3555
- --circle-circumference: 282.7431;
3556
- --half-circle-circumference: 141.37155;
3557
- }
3558
- .ncua-progress-circle__content {
3559
- position: relative;
3560
- display: flex;
3561
- align-items: center;
3562
- justify-content: center;
3563
- }
3564
- .ncua-progress-circle__svg {
3565
- width: var(--size);
3566
- height: var(--size);
3567
- }
3568
- .ncua-progress-circle-half-circle .ncua-progress-circle__svg {
3569
- height: calc(var(--size) / 2);
3570
- overflow: visible;
3571
- }
3572
-
3573
- .ncua-progress-circle__background {
3574
- stroke: var(--gray-100);
3575
- stroke-linecap: round;
3576
- }
3577
- .ncua-progress-circle__progress {
3578
- stroke: var(--primary-red-450);
3579
- transition: stroke-dashoffset 0.3s ease;
3580
- stroke-linecap: round;
3581
- }
3582
- .ncua-progress-circle__label-container {
3583
- position: absolute;
3584
- top: 50%;
3585
- left: 50%;
3586
- transform: translate(-50%, -50%);
3587
- text-align: center;
3588
- display: flex;
3589
- flex-direction: column;
3590
- align-items: center;
3591
- gap: 2px;
3592
- }
3593
- .ncua-progress-circle__label {
3594
- color: var(--gray-700);
3595
- font-weight: var(--font-weights-commerce-sans-1);
3596
- }
3597
- .ncua-progress-circle__label-text {
3598
- color: var(--gray-500);
3599
- font-weight: var(--font-weights-commerce-sans-1);
3600
- }
3601
- .ncua-progress-circle__outside-label {
3602
- margin-top: 10px;
3603
- font-weight: var(--font-weights-commerce-sans-1);
3604
- text-align: center;
3605
- }
3606
- .ncua-progress-circle-xxs {
3607
- --size: 64px;
3608
- --stroke-width: 6px;
3609
- --radius: calc((64px - 6px) / 2);
3610
- --circumference: calc(2 * 3.14159 * var(--radius));
3611
- }
3612
- .ncua-progress-circle-xxs .ncua-progress-circle__label {
3613
- font-size: var(--font-size-sm);
3614
- line-height: 1.5;
3615
- }
3616
- .ncua-progress-circle-xxs .ncua-progress-circle__label-text {
3617
- font-size: var(--font-size-xs);
3618
- }
3619
- .ncua-progress-circle-xxs .ncua-progress-circle__outside-label {
3620
- font-size: var(--font-size-xs);
3621
- }
3622
- .ncua-progress-circle-xs {
3623
- --size: 160px;
3624
- --stroke-width: 16px;
3625
- --radius: calc((160px - 16px) / 2);
3626
- --circumference: calc(2 * 3.14159 * var(--radius));
3627
- }
3628
- .ncua-progress-circle-xs .ncua-progress-circle__label {
3629
- font-size: var(--font-size-display-xs);
3630
- line-height: 1.3;
3631
- }
3632
- .ncua-progress-circle-xs .ncua-progress-circle__label-text {
3633
- font-size: var(--font-size-xxs);
3634
- }
3635
- .ncua-progress-circle-xs .ncua-progress-circle__outside-label {
3636
- font-size: var(--font-size-xxs);
3637
- }
3638
- .ncua-progress-circle-sm {
3639
- --size: 200px;
3640
- --stroke-width: 20px;
3641
- --radius: calc((200px - 20px) / 2);
3642
- --circumference: calc(2 * 3.14159 * var(--radius));
3643
- }
3644
- .ncua-progress-circle-sm .ncua-progress-circle__label {
3645
- font-size: var(--font-size-display-sm);
3646
- line-height: 1.3;
3647
- }
3648
- .ncua-progress-circle-sm .ncua-progress-circle__label-text {
3649
- font-size: var(--font-size-xs);
3650
- }
3651
- .ncua-progress-circle-sm .ncua-progress-circle__outside-label {
3652
- font-size: var(--font-size-xs);
3653
- }
3654
- .ncua-progress-circle-md {
3655
- --size: 240px;
3656
- --stroke-width: 24px;
3657
- --radius: calc((240px - 24px) / 2);
3658
- --circumference: calc(2 * 3.14159 * var(--radius));
3659
- }
3660
- .ncua-progress-circle-md .ncua-progress-circle__label {
3661
- font-size: var(--font-size-display-md);
3662
- line-height: 1.3;
3663
- }
3664
- .ncua-progress-circle-md .ncua-progress-circle__label-text {
3665
- font-size: var(--font-size-sm);
3666
- }
3667
- .ncua-progress-circle-md .ncua-progress-circle__outside-label {
3668
- font-size: var(--font-size-sm);
3669
- }
3670
- .ncua-progress-circle-lg {
3671
- --size: 280px;
3672
- --stroke-width: 28px;
3673
- --radius: calc((280px - 28px) / 2);
3674
- --circumference: calc(2 * 3.14159 * var(--radius));
3675
- }
3676
- .ncua-progress-circle-lg .ncua-progress-circle__label {
3677
- font-size: var(--font-size-display-lg);
3678
- line-height: 1.3;
3679
- }
3680
- .ncua-progress-circle-lg .ncua-progress-circle__label-text {
3681
- font-size: var(--font-size-sm);
3682
- }
3683
- .ncua-progress-circle-lg .ncua-progress-circle__outside-label {
3684
- font-size: var(--font-size-sm);
3685
- }
3686
- .ncua-progress-circle-half-circle .ncua-progress-circle__label-container {
3687
- top: 80%;
3688
- }