@salutejs/plasma-new-hope 0.325.0-canary.1962.15244720089.0 → 0.325.0-canary.1967.15291487889.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (687) hide show
  1. package/cjs/components/Calendar/Calendar.tokens.js +4 -13
  2. package/cjs/components/Calendar/Calendar.tokens.js.map +1 -1
  3. package/cjs/components/Calendar/Calendar.types.js.map +1 -1
  4. package/cjs/components/Calendar/CalendarBase/CalendarBase.css +11 -15
  5. package/cjs/components/Calendar/CalendarBase/CalendarBase.js +9 -3
  6. package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
  7. package/cjs/components/Calendar/CalendarBase/CalendarBase.styles.js +1 -1
  8. package/cjs/components/Calendar/CalendarBase/CalendarBase.styles.js.map +1 -1
  9. package/cjs/components/Calendar/CalendarBase/CalendarBase.styles_fpdm18.css +2 -0
  10. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.css +14 -18
  11. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +9 -3
  12. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
  13. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.styles.js +1 -1
  14. package/cjs/components/Calendar/CalendarDouble/CalendarDouble.styles.js.map +1 -1
  15. package/{es/components/Calendar/CalendarDouble/CalendarDouble.styles_e9ada0.css → cjs/components/Calendar/CalendarDouble/CalendarDouble.styles_dt34s7.css} +2 -2
  16. package/cjs/components/Calendar/hooks/useMonths.js +3 -1
  17. package/cjs/components/Calendar/hooks/useMonths.js.map +1 -1
  18. package/cjs/components/Calendar/hooks/useQuarters.js +4 -2
  19. package/cjs/components/Calendar/hooks/useQuarters.js.map +1 -1
  20. package/cjs/components/Calendar/hooks/useYears.js +3 -1
  21. package/cjs/components/Calendar/hooks/useYears.js.map +1 -1
  22. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.css +6 -7
  23. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +3 -6
  24. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
  25. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +3 -9
  26. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles.js.map +1 -1
  27. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles_445k2m.css +2 -0
  28. package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.css +5 -6
  29. package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -3
  30. package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
  31. package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +1 -7
  32. package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js.map +1 -1
  33. package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_3fk0w8.css +1 -0
  34. package/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.css +5 -6
  35. package/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js +2 -3
  36. package/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js.map +1 -1
  37. package/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js +1 -7
  38. package/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js.map +1 -1
  39. package/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles_g2v0cv.css +1 -0
  40. package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.css +5 -6
  41. package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js +2 -3
  42. package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js.map +1 -1
  43. package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +1 -7
  44. package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles.js.map +1 -1
  45. package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles_97bjgu.css +1 -0
  46. package/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.css +4 -4
  47. package/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js +7 -7
  48. package/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js.map +1 -1
  49. package/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.styles_12b03hz.css +4 -0
  50. package/cjs/components/Calendar/utils/calendarGridHelper.js +10 -2
  51. package/cjs/components/Calendar/utils/calendarGridHelper.js.map +1 -1
  52. package/cjs/components/Calendar/utils/getDateWithModification.js +28 -24
  53. package/cjs/components/Calendar/utils/getDateWithModification.js.map +1 -1
  54. package/cjs/components/CodeField/CodeField.css +14 -0
  55. package/cjs/components/CodeField/CodeField.js +290 -0
  56. package/cjs/components/CodeField/CodeField.js.map +1 -0
  57. package/cjs/components/CodeField/CodeField.styles.js +57 -0
  58. package/cjs/components/CodeField/CodeField.styles.js.map +1 -0
  59. package/cjs/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
  60. package/cjs/components/CodeField/CodeField.tokens.js +59 -0
  61. package/cjs/components/CodeField/CodeField.tokens.js.map +1 -0
  62. package/cjs/components/CodeField/utils/constants.js +18 -0
  63. package/cjs/components/CodeField/utils/constants.js.map +1 -0
  64. package/cjs/components/CodeField/utils/handleCodeError.js +55 -0
  65. package/cjs/components/CodeField/utils/handleCodeError.js.map +1 -0
  66. package/cjs/components/CodeField/utils/handleItemError.js +53 -0
  67. package/cjs/components/CodeField/utils/handleItemError.js.map +1 -0
  68. package/cjs/components/CodeField/utils/initialValuesHelper.js +33 -0
  69. package/cjs/components/CodeField/utils/initialValuesHelper.js.map +1 -0
  70. package/cjs/components/CodeField/variations/_disabled/base.js +9 -0
  71. package/cjs/components/CodeField/variations/_disabled/base.js.map +1 -0
  72. package/cjs/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
  73. package/cjs/components/CodeField/variations/_shape/base.js +9 -0
  74. package/cjs/components/CodeField/variations/_shape/base.js.map +1 -0
  75. package/cjs/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
  76. package/cjs/components/CodeField/variations/_size/base.js +9 -0
  77. package/cjs/components/CodeField/variations/_size/base.js.map +1 -0
  78. package/cjs/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
  79. package/cjs/components/CodeField/variations/_view/base.js +9 -0
  80. package/cjs/components/CodeField/variations/_view/base.js.map +1 -0
  81. package/cjs/components/CodeField/variations/_view/base_9a5yza.css +1 -0
  82. package/cjs/components/DatePicker/DatePicker.tokens.js +9 -11
  83. package/cjs/components/DatePicker/DatePicker.tokens.js.map +1 -1
  84. package/cjs/components/DatePicker/DatePickerBase.styles.js +19 -2
  85. package/cjs/components/DatePicker/DatePickerBase.styles.js.map +1 -1
  86. package/cjs/components/DatePicker/DatePickerBase.styles_10sa0ht.css +2 -0
  87. package/cjs/components/DatePicker/RangeDate/RangeDate.css +21 -25
  88. package/cjs/components/DatePicker/RangeDate/RangeDate.js +22 -10
  89. package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  90. package/cjs/components/DatePicker/RangeDate/RangeDate.styles.js +1 -1
  91. package/cjs/components/DatePicker/RangeDate/RangeDate.styles.js.map +1 -1
  92. package/cjs/components/DatePicker/RangeDate/{RangeDate.styles_vzsqwo.css → RangeDate.styles_1q1mn0z.css} +1 -1
  93. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +19 -23
  94. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +43 -2
  95. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -1
  96. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +38 -5
  97. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js.map +1 -1
  98. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_1n0dbxm.css +2 -0
  99. package/cjs/components/DatePicker/SingleDate/SingleDate.css +19 -23
  100. package/cjs/components/DatePicker/SingleDate/SingleDate.js +31 -7
  101. package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  102. package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  103. package/cjs/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
  104. package/{es/components/DatePicker/SingleDate/SingleDate.styles_4wd0mq.css → cjs/components/DatePicker/SingleDate/SingleDate.styles_7r4r8k.css} +1 -1
  105. package/cjs/components/Notification/Notification.css +12 -12
  106. package/cjs/components/Notification/Notification.js +5 -1
  107. package/cjs/components/Notification/Notification.js.map +1 -1
  108. package/cjs/components/Notification/Notification.styles.js +63 -48
  109. package/cjs/components/Notification/Notification.styles.js.map +1 -1
  110. package/cjs/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  111. package/cjs/components/Notification/Notification.types.js.map +1 -1
  112. package/cjs/components/Notification/NotificationsProvider.css +11 -11
  113. package/cjs/components/Notification/variations/_layout/base.js +1 -1
  114. package/cjs/components/Notification/variations/_layout/base.js.map +1 -1
  115. package/cjs/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  116. package/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  117. package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
  118. package/cjs/components/Pagination/Pagination.css +10 -10
  119. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +10 -10
  120. package/cjs/components/Select/Select.css +10 -10
  121. package/cjs/components/Select/Select.tokens.js +23 -0
  122. package/cjs/components/Select/Select.tokens.js.map +1 -1
  123. package/cjs/components/Select/ui/Inner/Inner.css +10 -10
  124. package/cjs/components/Select/ui/Inner/ui/Item/Item.js +3 -1
  125. package/cjs/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
  126. package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +21 -12
  127. package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
  128. package/{es/components/Select/ui/Inner/ui/Item/Item.styles_1gk72bp.css → cjs/components/Select/ui/Inner/ui/Item/Item.styles_ir8fmi.css} +2 -2
  129. package/cjs/components/Select/ui/VirtualList/VirtualList.css +10 -10
  130. package/cjs/components/Table/Table.css +10 -10
  131. package/cjs/components/Table/ui/Cell/Cell.css +10 -10
  132. package/cjs/components/Table/ui/EditableCell/EditableCell.css +10 -10
  133. package/cjs/components/Table/ui/HeadCell/HeadCell.css +10 -10
  134. package/cjs/components/Table/ui/HeadCell/ui/Filter/Filter.css +10 -10
  135. package/cjs/index.css +60 -49
  136. package/cjs/index.js +10 -0
  137. package/cjs/index.js.map +1 -1
  138. package/emotion/cjs/components/Calendar/Calendar.tokens.js +4 -13
  139. package/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.js +12 -3
  140. package/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.styles.js +2 -2
  141. package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +12 -3
  142. package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.styles.js +7 -7
  143. package/emotion/cjs/components/Calendar/hooks/useMonths.js +3 -1
  144. package/emotion/cjs/components/Calendar/hooks/useQuarters.js +4 -2
  145. package/emotion/cjs/components/Calendar/hooks/useYears.js +3 -1
  146. package/emotion/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +3 -6
  147. package/emotion/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +3 -8
  148. package/emotion/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -3
  149. package/emotion/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +3 -8
  150. package/emotion/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js +2 -3
  151. package/emotion/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js +3 -8
  152. package/emotion/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js +2 -3
  153. package/emotion/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +3 -8
  154. package/emotion/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js +7 -7
  155. package/emotion/cjs/components/Calendar/utils/calendarGridHelper.js +10 -3
  156. package/emotion/cjs/components/Calendar/utils/getDateWithModification.js +28 -24
  157. package/emotion/cjs/components/CodeField/CodeField.js +299 -0
  158. package/emotion/cjs/components/CodeField/CodeField.styles.js +65 -0
  159. package/emotion/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
  160. package/emotion/cjs/components/CodeField/CodeField.tokens.js +57 -0
  161. package/emotion/cjs/components/CodeField/CodeField.types.js +5 -0
  162. package/emotion/cjs/components/CodeField/index.js +50 -0
  163. package/emotion/cjs/components/CodeField/utils/constants.js +12 -0
  164. package/emotion/cjs/components/CodeField/utils/handleCodeError.js +58 -0
  165. package/emotion/cjs/components/CodeField/utils/handleItemError.js +56 -0
  166. package/emotion/cjs/components/CodeField/utils/index.js +38 -0
  167. package/emotion/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
  168. package/emotion/cjs/components/CodeField/variations/_disabled/base.js +9 -0
  169. package/emotion/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
  170. package/emotion/cjs/components/CodeField/variations/_shape/base.js +10 -0
  171. package/emotion/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
  172. package/emotion/cjs/components/CodeField/variations/_size/base.js +10 -0
  173. package/emotion/cjs/components/CodeField/variations/_size/tokens.json +19 -0
  174. package/emotion/cjs/components/CodeField/variations/_view/base.js +10 -0
  175. package/emotion/cjs/components/CodeField/variations/_view/tokens.json +0 -0
  176. package/emotion/cjs/components/DatePicker/DatePicker.tokens.js +9 -12
  177. package/emotion/cjs/components/DatePicker/DatePickerBase.styles.js +9 -3
  178. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +25 -9
  179. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.styles.js +4 -13
  180. package/emotion/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +47 -3
  181. package/emotion/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +14 -2
  182. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +33 -6
  183. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +4 -4
  184. package/emotion/cjs/components/Notification/Notification.js +5 -1
  185. package/emotion/cjs/components/Notification/Notification.styles.js +43 -36
  186. package/emotion/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  187. package/emotion/cjs/components/Notification/variations/_layout/base.js +1 -1
  188. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  189. package/emotion/cjs/components/Select/Select.tokens.js +2 -0
  190. package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.js +3 -1
  191. package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +31 -28
  192. package/emotion/cjs/examples/fixtures/Notification.js +1 -1
  193. package/emotion/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +37 -29
  194. package/emotion/cjs/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +5 -5
  195. package/emotion/cjs/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +5 -5
  196. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
  197. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
  198. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  199. package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
  200. package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +6 -0
  201. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  202. package/emotion/cjs/examples/plasma_b2c/components/Select/Select.config.js +24 -24
  203. package/emotion/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx +37 -29
  204. package/emotion/cjs/examples/plasma_web/components/Calendar/CalendarBase.config.js +5 -5
  205. package/emotion/cjs/examples/plasma_web/components/Calendar/CalendarDouble.config.js +5 -5
  206. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
  207. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
  208. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  209. package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.config.js +7 -7
  210. package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +8 -6
  211. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  212. package/emotion/cjs/examples/plasma_web/components/Select/Select.config.js +24 -24
  213. package/emotion/cjs/index.js +11 -0
  214. package/emotion/es/components/Calendar/Calendar.tokens.js +4 -13
  215. package/emotion/es/components/Calendar/CalendarBase/CalendarBase.js +12 -3
  216. package/emotion/es/components/Calendar/CalendarBase/CalendarBase.styles.js +3 -3
  217. package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js +12 -3
  218. package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js +8 -8
  219. package/emotion/es/components/Calendar/hooks/useMonths.js +3 -1
  220. package/emotion/es/components/Calendar/hooks/useQuarters.js +4 -2
  221. package/emotion/es/components/Calendar/hooks/useYears.js +3 -1
  222. package/emotion/es/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -8
  223. package/emotion/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +2 -7
  224. package/emotion/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -5
  225. package/emotion/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +2 -7
  226. package/emotion/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js +4 -5
  227. package/emotion/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js +2 -7
  228. package/emotion/es/components/Calendar/ui/CalendarYears/CalendarYears.js +4 -5
  229. package/emotion/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +2 -7
  230. package/emotion/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js +7 -7
  231. package/emotion/es/components/Calendar/utils/calendarGridHelper.js +9 -2
  232. package/emotion/es/components/Calendar/utils/getDateWithModification.js +28 -24
  233. package/emotion/es/components/CodeField/CodeField.js +290 -0
  234. package/emotion/es/components/CodeField/CodeField.styles.js +58 -0
  235. package/emotion/es/components/CodeField/CodeField.template-doc.mdx +150 -0
  236. package/emotion/es/components/CodeField/CodeField.tokens.js +51 -0
  237. package/emotion/es/components/CodeField/CodeField.types.js +1 -0
  238. package/emotion/es/components/CodeField/index.js +3 -0
  239. package/emotion/es/components/CodeField/utils/constants.js +6 -0
  240. package/emotion/es/components/CodeField/utils/handleCodeError.js +52 -0
  241. package/emotion/es/components/CodeField/utils/handleItemError.js +50 -0
  242. package/emotion/es/components/CodeField/utils/index.js +3 -0
  243. package/emotion/es/components/CodeField/utils/initialValuesHelper.js +24 -0
  244. package/emotion/es/components/CodeField/variations/_disabled/base.js +3 -0
  245. package/emotion/es/components/CodeField/variations/_disabled/tokens.json +4 -0
  246. package/emotion/es/components/CodeField/variations/_shape/base.js +4 -0
  247. package/emotion/es/components/CodeField/variations/_shape/tokens.json +1 -0
  248. package/emotion/es/components/CodeField/variations/_size/base.js +4 -0
  249. package/emotion/es/components/CodeField/variations/_size/tokens.json +19 -0
  250. package/emotion/es/components/CodeField/variations/_view/base.js +4 -0
  251. package/emotion/es/components/CodeField/variations/_view/tokens.json +0 -0
  252. package/emotion/es/components/DatePicker/DatePicker.tokens.js +8 -11
  253. package/emotion/es/components/DatePicker/DatePickerBase.styles.js +9 -3
  254. package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +26 -10
  255. package/emotion/es/components/DatePicker/RangeDate/RangeDate.styles.js +5 -14
  256. package/emotion/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +46 -4
  257. package/emotion/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +15 -3
  258. package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +34 -7
  259. package/emotion/es/components/DatePicker/SingleDate/SingleDate.styles.js +4 -4
  260. package/emotion/es/components/Notification/Notification.js +5 -1
  261. package/emotion/es/components/Notification/Notification.styles.js +43 -36
  262. package/emotion/es/components/Notification/Notification.template-doc.mdx +44 -0
  263. package/emotion/es/components/Notification/variations/_layout/base.js +1 -1
  264. package/emotion/es/components/NumberInput/ui/Input/Input.js +0 -3
  265. package/emotion/es/components/Select/Select.tokens.js +2 -0
  266. package/emotion/es/components/Select/ui/Inner/ui/Item/Item.js +3 -1
  267. package/emotion/es/components/Select/ui/Inner/ui/Item/Item.styles.js +31 -28
  268. package/emotion/es/examples/fixtures/Notification.js +1 -1
  269. package/emotion/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +37 -29
  270. package/emotion/es/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +5 -5
  271. package/emotion/es/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +5 -5
  272. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
  273. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
  274. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  275. package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +7 -7
  276. package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +6 -0
  277. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  278. package/emotion/es/examples/plasma_b2c/components/Select/Select.config.js +24 -24
  279. package/emotion/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx +37 -29
  280. package/emotion/es/examples/plasma_web/components/Calendar/CalendarBase.config.js +5 -5
  281. package/emotion/es/examples/plasma_web/components/Calendar/CalendarDouble.config.js +5 -5
  282. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
  283. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
  284. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  285. package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.config.js +7 -7
  286. package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +8 -6
  287. package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  288. package/emotion/es/examples/plasma_web/components/Select/Select.config.js +24 -24
  289. package/emotion/es/index.js +2 -1
  290. package/es/components/Calendar/Calendar.tokens.js +4 -13
  291. package/es/components/Calendar/Calendar.tokens.js.map +1 -1
  292. package/es/components/Calendar/Calendar.types.js.map +1 -1
  293. package/es/components/Calendar/CalendarBase/CalendarBase.css +11 -15
  294. package/es/components/Calendar/CalendarBase/CalendarBase.js +9 -4
  295. package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
  296. package/es/components/Calendar/CalendarBase/CalendarBase.styles.js +1 -1
  297. package/es/components/Calendar/CalendarBase/CalendarBase.styles.js.map +1 -1
  298. package/es/components/Calendar/CalendarBase/CalendarBase.styles_fpdm18.css +2 -0
  299. package/es/components/Calendar/CalendarDouble/CalendarDouble.css +14 -18
  300. package/es/components/Calendar/CalendarDouble/CalendarDouble.js +10 -5
  301. package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
  302. package/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js +1 -1
  303. package/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js.map +1 -1
  304. package/{cjs/components/Calendar/CalendarDouble/CalendarDouble.styles_e9ada0.css → es/components/Calendar/CalendarDouble/CalendarDouble.styles_dt34s7.css} +2 -2
  305. package/es/components/Calendar/hooks/useMonths.js +3 -1
  306. package/es/components/Calendar/hooks/useMonths.js.map +1 -1
  307. package/es/components/Calendar/hooks/useQuarters.js +5 -3
  308. package/es/components/Calendar/hooks/useQuarters.js.map +1 -1
  309. package/es/components/Calendar/hooks/useYears.js +3 -1
  310. package/es/components/Calendar/hooks/useYears.js.map +1 -1
  311. package/es/components/Calendar/ui/CalendarDays/CalendarDays.css +6 -7
  312. package/es/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -8
  313. package/es/components/Calendar/ui/CalendarDays/CalendarDays.js.map +1 -1
  314. package/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +4 -9
  315. package/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js.map +1 -1
  316. package/es/components/Calendar/ui/CalendarDays/CalendarDays.styles_445k2m.css +2 -0
  317. package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.css +5 -6
  318. package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -5
  319. package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js.map +1 -1
  320. package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +2 -7
  321. package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js.map +1 -1
  322. package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_3fk0w8.css +1 -0
  323. package/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.css +5 -6
  324. package/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js +4 -5
  325. package/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js.map +1 -1
  326. package/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js +2 -7
  327. package/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js.map +1 -1
  328. package/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles_g2v0cv.css +1 -0
  329. package/es/components/Calendar/ui/CalendarYears/CalendarYears.css +5 -6
  330. package/es/components/Calendar/ui/CalendarYears/CalendarYears.js +4 -5
  331. package/es/components/Calendar/ui/CalendarYears/CalendarYears.js.map +1 -1
  332. package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +2 -7
  333. package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js.map +1 -1
  334. package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles_97bjgu.css +1 -0
  335. package/es/components/Calendar/ui/DateStructureItem/DateStructureItem.css +4 -4
  336. package/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js +7 -7
  337. package/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js.map +1 -1
  338. package/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles_12b03hz.css +4 -0
  339. package/es/components/Calendar/utils/calendarGridHelper.js +10 -3
  340. package/es/components/Calendar/utils/calendarGridHelper.js.map +1 -1
  341. package/es/components/Calendar/utils/getDateWithModification.js +28 -24
  342. package/es/components/Calendar/utils/getDateWithModification.js.map +1 -1
  343. package/es/components/CodeField/CodeField.css +14 -0
  344. package/es/components/CodeField/CodeField.js +280 -0
  345. package/es/components/CodeField/CodeField.js.map +1 -0
  346. package/es/components/CodeField/CodeField.styles.js +48 -0
  347. package/es/components/CodeField/CodeField.styles.js.map +1 -0
  348. package/es/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
  349. package/es/components/CodeField/CodeField.tokens.js +54 -0
  350. package/es/components/CodeField/CodeField.tokens.js.map +1 -0
  351. package/es/components/CodeField/utils/constants.js +9 -0
  352. package/es/components/CodeField/utils/constants.js.map +1 -0
  353. package/es/components/CodeField/utils/handleCodeError.js +51 -0
  354. package/es/components/CodeField/utils/handleCodeError.js.map +1 -0
  355. package/es/components/CodeField/utils/handleItemError.js +49 -0
  356. package/es/components/CodeField/utils/handleItemError.js.map +1 -0
  357. package/es/components/CodeField/utils/initialValuesHelper.js +27 -0
  358. package/es/components/CodeField/utils/initialValuesHelper.js.map +1 -0
  359. package/es/components/CodeField/variations/_disabled/base.js +5 -0
  360. package/es/components/CodeField/variations/_disabled/base.js.map +1 -0
  361. package/es/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
  362. package/es/components/CodeField/variations/_shape/base.js +5 -0
  363. package/es/components/CodeField/variations/_shape/base.js.map +1 -0
  364. package/es/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
  365. package/es/components/CodeField/variations/_size/base.js +5 -0
  366. package/es/components/CodeField/variations/_size/base.js.map +1 -0
  367. package/es/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
  368. package/es/components/CodeField/variations/_view/base.js +5 -0
  369. package/es/components/CodeField/variations/_view/base.js.map +1 -0
  370. package/es/components/CodeField/variations/_view/base_9a5yza.css +1 -0
  371. package/es/components/DatePicker/DatePicker.tokens.js +9 -12
  372. package/es/components/DatePicker/DatePicker.tokens.js.map +1 -1
  373. package/es/components/DatePicker/DatePickerBase.styles.js +19 -2
  374. package/es/components/DatePicker/DatePickerBase.styles.js.map +1 -1
  375. package/es/components/DatePicker/DatePickerBase.styles_10sa0ht.css +2 -0
  376. package/es/components/DatePicker/RangeDate/RangeDate.css +21 -25
  377. package/es/components/DatePicker/RangeDate/RangeDate.js +22 -11
  378. package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  379. package/es/components/DatePicker/RangeDate/RangeDate.styles.js +1 -1
  380. package/es/components/DatePicker/RangeDate/RangeDate.styles.js.map +1 -1
  381. package/es/components/DatePicker/RangeDate/{RangeDate.styles_vzsqwo.css → RangeDate.styles_1q1mn0z.css} +1 -1
  382. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +19 -23
  383. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +43 -3
  384. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js.map +1 -1
  385. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +38 -5
  386. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js.map +1 -1
  387. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_1n0dbxm.css +2 -0
  388. package/es/components/DatePicker/SingleDate/SingleDate.css +19 -23
  389. package/es/components/DatePicker/SingleDate/SingleDate.js +31 -8
  390. package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  391. package/es/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  392. package/es/components/DatePicker/SingleDate/SingleDate.styles.js.map +1 -1
  393. package/{cjs/components/DatePicker/SingleDate/SingleDate.styles_4wd0mq.css → es/components/DatePicker/SingleDate/SingleDate.styles_7r4r8k.css} +1 -1
  394. package/es/components/Notification/Notification.css +12 -12
  395. package/es/components/Notification/Notification.js +5 -1
  396. package/es/components/Notification/Notification.js.map +1 -1
  397. package/es/components/Notification/Notification.styles.js +63 -48
  398. package/es/components/Notification/Notification.styles.js.map +1 -1
  399. package/es/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  400. package/es/components/Notification/Notification.types.js.map +1 -1
  401. package/es/components/Notification/NotificationsProvider.css +11 -11
  402. package/es/components/Notification/variations/_layout/base.js +1 -1
  403. package/es/components/Notification/variations/_layout/base.js.map +1 -1
  404. package/es/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  405. package/es/components/NumberInput/ui/Input/Input.js +0 -3
  406. package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
  407. package/es/components/Pagination/Pagination.css +10 -10
  408. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +10 -10
  409. package/es/components/Select/Select.css +10 -10
  410. package/es/components/Select/Select.tokens.js +23 -1
  411. package/es/components/Select/Select.tokens.js.map +1 -1
  412. package/es/components/Select/ui/Inner/Inner.css +10 -10
  413. package/es/components/Select/ui/Inner/ui/Item/Item.js +3 -1
  414. package/es/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
  415. package/es/components/Select/ui/Inner/ui/Item/Item.styles.js +22 -13
  416. package/es/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
  417. package/{cjs/components/Select/ui/Inner/ui/Item/Item.styles_1gk72bp.css → es/components/Select/ui/Inner/ui/Item/Item.styles_ir8fmi.css} +2 -2
  418. package/es/components/Select/ui/VirtualList/VirtualList.css +10 -10
  419. package/es/components/Table/Table.css +10 -10
  420. package/es/components/Table/ui/Cell/Cell.css +10 -10
  421. package/es/components/Table/ui/EditableCell/EditableCell.css +10 -10
  422. package/es/components/Table/ui/HeadCell/HeadCell.css +10 -10
  423. package/es/components/Table/ui/HeadCell/ui/Filter/Filter.css +10 -10
  424. package/es/index.css +60 -49
  425. package/es/index.js +3 -0
  426. package/es/index.js.map +1 -1
  427. package/package.json +2 -2
  428. package/styled-components/cjs/components/Calendar/Calendar.tokens.js +4 -13
  429. package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +12 -3
  430. package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.styles.js +1 -1
  431. package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +12 -3
  432. package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.styles.js +2 -2
  433. package/styled-components/cjs/components/Calendar/hooks/useMonths.js +3 -1
  434. package/styled-components/cjs/components/Calendar/hooks/useQuarters.js +4 -2
  435. package/styled-components/cjs/components/Calendar/hooks/useYears.js +3 -1
  436. package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js +3 -6
  437. package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +4 -8
  438. package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js +2 -3
  439. package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +2 -6
  440. package/styled-components/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js +2 -3
  441. package/styled-components/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js +2 -6
  442. package/styled-components/cjs/components/Calendar/ui/CalendarYears/CalendarYears.js +2 -3
  443. package/styled-components/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +2 -6
  444. package/styled-components/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js +3 -3
  445. package/styled-components/cjs/components/Calendar/utils/calendarGridHelper.js +10 -3
  446. package/styled-components/cjs/components/Calendar/utils/getDateWithModification.js +28 -24
  447. package/styled-components/cjs/components/CodeField/CodeField.js +299 -0
  448. package/styled-components/cjs/components/CodeField/CodeField.styles.js +38 -0
  449. package/styled-components/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
  450. package/styled-components/cjs/components/CodeField/CodeField.tokens.js +57 -0
  451. package/styled-components/cjs/components/CodeField/CodeField.types.js +5 -0
  452. package/styled-components/cjs/components/CodeField/index.js +50 -0
  453. package/styled-components/cjs/components/CodeField/utils/constants.js +12 -0
  454. package/styled-components/cjs/components/CodeField/utils/handleCodeError.js +58 -0
  455. package/styled-components/cjs/components/CodeField/utils/handleItemError.js +56 -0
  456. package/styled-components/cjs/components/CodeField/utils/index.js +38 -0
  457. package/styled-components/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
  458. package/styled-components/cjs/components/CodeField/variations/_disabled/base.js +9 -0
  459. package/styled-components/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
  460. package/styled-components/cjs/components/CodeField/variations/_shape/base.js +10 -0
  461. package/styled-components/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
  462. package/styled-components/cjs/components/CodeField/variations/_size/base.js +10 -0
  463. package/styled-components/cjs/components/CodeField/variations/_size/tokens.json +19 -0
  464. package/styled-components/cjs/components/CodeField/variations/_view/base.js +10 -0
  465. package/styled-components/cjs/components/CodeField/variations/_view/tokens.json +0 -0
  466. package/styled-components/cjs/components/DatePicker/DatePicker.tokens.js +9 -12
  467. package/styled-components/cjs/components/DatePicker/DatePickerBase.styles.js +8 -2
  468. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +25 -9
  469. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.styles.js +1 -1
  470. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +47 -3
  471. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +14 -2
  472. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +33 -6
  473. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  474. package/styled-components/cjs/components/Notification/Notification.js +5 -1
  475. package/styled-components/cjs/components/Notification/Notification.styles.js +33 -26
  476. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  477. package/styled-components/cjs/components/Notification/variations/_layout/base.js +1 -1
  478. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  479. package/styled-components/cjs/components/Select/Select.tokens.js +2 -0
  480. package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js +3 -1
  481. package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +21 -18
  482. package/styled-components/cjs/examples/fixtures/Notification.js +1 -1
  483. package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +37 -29
  484. package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +4 -4
  485. package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +4 -4
  486. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
  487. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
  488. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  489. package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +4 -4
  490. package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +6 -0
  491. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  492. package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js +10 -10
  493. package/styled-components/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx +37 -29
  494. package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarBase.config.js +4 -4
  495. package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarDouble.config.js +4 -4
  496. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
  497. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
  498. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  499. package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.config.js +4 -4
  500. package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +8 -6
  501. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  502. package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js +10 -10
  503. package/styled-components/cjs/index.js +11 -0
  504. package/styled-components/es/components/Calendar/Calendar.tokens.js +4 -13
  505. package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +12 -3
  506. package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.styles.js +2 -2
  507. package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +12 -3
  508. package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.styles.js +3 -3
  509. package/styled-components/es/components/Calendar/hooks/useMonths.js +3 -1
  510. package/styled-components/es/components/Calendar/hooks/useQuarters.js +4 -2
  511. package/styled-components/es/components/Calendar/hooks/useYears.js +3 -1
  512. package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js +5 -8
  513. package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.styles.js +3 -7
  514. package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js +4 -5
  515. package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js +1 -5
  516. package/styled-components/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js +4 -5
  517. package/styled-components/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.js +1 -5
  518. package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.js +4 -5
  519. package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js +1 -5
  520. package/styled-components/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js +3 -3
  521. package/styled-components/es/components/Calendar/utils/calendarGridHelper.js +9 -2
  522. package/styled-components/es/components/Calendar/utils/getDateWithModification.js +28 -24
  523. package/styled-components/es/components/CodeField/CodeField.js +290 -0
  524. package/styled-components/es/components/CodeField/CodeField.styles.js +30 -0
  525. package/styled-components/es/components/CodeField/CodeField.template-doc.mdx +150 -0
  526. package/styled-components/es/components/CodeField/CodeField.tokens.js +51 -0
  527. package/styled-components/es/components/CodeField/CodeField.types.js +1 -0
  528. package/styled-components/es/components/CodeField/index.js +3 -0
  529. package/styled-components/es/components/CodeField/utils/constants.js +6 -0
  530. package/styled-components/es/components/CodeField/utils/handleCodeError.js +52 -0
  531. package/styled-components/es/components/CodeField/utils/handleItemError.js +50 -0
  532. package/styled-components/es/components/CodeField/utils/index.js +3 -0
  533. package/styled-components/es/components/CodeField/utils/initialValuesHelper.js +24 -0
  534. package/styled-components/es/components/CodeField/variations/_disabled/base.js +3 -0
  535. package/styled-components/es/components/CodeField/variations/_disabled/tokens.json +4 -0
  536. package/styled-components/es/components/CodeField/variations/_shape/base.js +4 -0
  537. package/styled-components/es/components/CodeField/variations/_shape/tokens.json +1 -0
  538. package/styled-components/es/components/CodeField/variations/_size/base.js +4 -0
  539. package/styled-components/es/components/CodeField/variations/_size/tokens.json +19 -0
  540. package/styled-components/es/components/CodeField/variations/_view/base.js +4 -0
  541. package/styled-components/es/components/CodeField/variations/_view/tokens.json +0 -0
  542. package/styled-components/es/components/DatePicker/DatePicker.tokens.js +8 -11
  543. package/styled-components/es/components/DatePicker/DatePickerBase.styles.js +8 -2
  544. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +26 -10
  545. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.styles.js +2 -2
  546. package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js +46 -4
  547. package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +15 -3
  548. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +34 -7
  549. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js +1 -1
  550. package/styled-components/es/components/Notification/Notification.js +5 -1
  551. package/styled-components/es/components/Notification/Notification.styles.js +33 -26
  552. package/styled-components/es/components/Notification/Notification.template-doc.mdx +44 -0
  553. package/styled-components/es/components/Notification/variations/_layout/base.js +1 -1
  554. package/styled-components/es/components/NumberInput/ui/Input/Input.js +0 -3
  555. package/styled-components/es/components/Select/Select.tokens.js +2 -0
  556. package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.js +3 -1
  557. package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js +21 -18
  558. package/styled-components/es/examples/fixtures/Notification.js +1 -1
  559. package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +37 -29
  560. package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +4 -4
  561. package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +4 -4
  562. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
  563. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
  564. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  565. package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js +4 -4
  566. package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +6 -0
  567. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  568. package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js +10 -10
  569. package/styled-components/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx +37 -29
  570. package/styled-components/es/examples/plasma_web/components/Calendar/CalendarBase.config.js +4 -4
  571. package/styled-components/es/examples/plasma_web/components/Calendar/CalendarDouble.config.js +4 -4
  572. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
  573. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
  574. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  575. package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.config.js +4 -4
  576. package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +8 -6
  577. package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  578. package/styled-components/es/examples/plasma_web/components/Select/Select.config.js +10 -10
  579. package/styled-components/es/index.js +2 -1
  580. package/types/components/Calendar/Calendar.tokens.d.ts +3 -12
  581. package/types/components/Calendar/Calendar.tokens.d.ts.map +1 -1
  582. package/types/components/Calendar/Calendar.types.d.ts +4 -0
  583. package/types/components/Calendar/Calendar.types.d.ts.map +1 -1
  584. package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
  585. package/types/components/Calendar/CalendarBase/CalendarBase.styles.d.ts.map +1 -1
  586. package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
  587. package/types/components/Calendar/CalendarDouble/CalendarDouble.styles.d.ts.map +1 -1
  588. package/types/components/Calendar/hooks/types.d.ts +7 -2
  589. package/types/components/Calendar/hooks/types.d.ts.map +1 -1
  590. package/types/components/Calendar/hooks/useMonths.d.ts +1 -1
  591. package/types/components/Calendar/hooks/useMonths.d.ts.map +1 -1
  592. package/types/components/Calendar/hooks/useQuarters.d.ts +1 -1
  593. package/types/components/Calendar/hooks/useQuarters.d.ts.map +1 -1
  594. package/types/components/Calendar/hooks/useYears.d.ts +1 -1
  595. package/types/components/Calendar/hooks/useYears.d.ts.map +1 -1
  596. package/types/components/Calendar/ui/CalendarDays/CalendarDays.d.ts.map +1 -1
  597. package/types/components/Calendar/ui/CalendarDays/CalendarDays.styles.d.ts +0 -1
  598. package/types/components/Calendar/ui/CalendarDays/CalendarDays.styles.d.ts.map +1 -1
  599. package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.d.ts.map +1 -1
  600. package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.d.ts +0 -1
  601. package/types/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.d.ts.map +1 -1
  602. package/types/components/Calendar/ui/CalendarQuarters/CalendarQuarters.d.ts.map +1 -1
  603. package/types/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.d.ts +0 -1
  604. package/types/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles.d.ts.map +1 -1
  605. package/types/components/Calendar/ui/CalendarYears/CalendarYears.d.ts.map +1 -1
  606. package/types/components/Calendar/ui/CalendarYears/CalendarYears.styles.d.ts +0 -1
  607. package/types/components/Calendar/ui/CalendarYears/CalendarYears.styles.d.ts.map +1 -1
  608. package/types/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.d.ts.map +1 -1
  609. package/types/components/Calendar/utils/calendarGridHelper.d.ts +1 -0
  610. package/types/components/Calendar/utils/calendarGridHelper.d.ts.map +1 -1
  611. package/types/components/Calendar/utils/getDateWithModification.d.ts.map +1 -1
  612. package/types/components/CodeField/CodeField.d.ts +69 -0
  613. package/types/components/CodeField/CodeField.d.ts.map +1 -0
  614. package/types/components/CodeField/CodeField.styles.d.ts +11 -0
  615. package/types/components/CodeField/CodeField.styles.d.ts.map +1 -0
  616. package/types/components/CodeField/CodeField.tokens.d.ts +52 -0
  617. package/types/components/CodeField/CodeField.tokens.d.ts.map +1 -0
  618. package/types/components/CodeField/CodeField.types.d.ts +93 -0
  619. package/types/components/CodeField/CodeField.types.d.ts.map +1 -0
  620. package/types/components/CodeField/index.d.ts +4 -0
  621. package/types/components/CodeField/index.d.ts.map +1 -0
  622. package/types/components/CodeField/utils/constants.d.ts +7 -0
  623. package/types/components/CodeField/utils/constants.d.ts.map +1 -0
  624. package/types/components/CodeField/utils/handleCodeError.d.ts +15 -0
  625. package/types/components/CodeField/utils/handleCodeError.d.ts.map +1 -0
  626. package/types/components/CodeField/utils/handleItemError.d.ts +14 -0
  627. package/types/components/CodeField/utils/handleItemError.d.ts.map +1 -0
  628. package/types/components/CodeField/utils/index.d.ts +4 -0
  629. package/types/components/CodeField/utils/index.d.ts.map +1 -0
  630. package/types/components/CodeField/utils/initialValuesHelper.d.ts +4 -0
  631. package/types/components/CodeField/utils/initialValuesHelper.d.ts.map +1 -0
  632. package/types/components/CodeField/variations/_disabled/base.d.ts +2 -0
  633. package/types/components/CodeField/variations/_disabled/base.d.ts.map +1 -0
  634. package/types/components/CodeField/variations/_shape/base.d.ts +2 -0
  635. package/types/components/CodeField/variations/_shape/base.d.ts.map +1 -0
  636. package/types/components/CodeField/variations/_size/base.d.ts +2 -0
  637. package/types/components/CodeField/variations/_size/base.d.ts.map +1 -0
  638. package/types/components/CodeField/variations/_view/base.d.ts +2 -0
  639. package/types/components/CodeField/variations/_view/base.d.ts.map +1 -0
  640. package/types/components/DatePicker/DatePicker.tokens.d.ts +7 -10
  641. package/types/components/DatePicker/DatePicker.tokens.d.ts.map +1 -1
  642. package/types/components/DatePicker/DatePickerBase.styles.d.ts +4 -1
  643. package/types/components/DatePicker/DatePickerBase.styles.d.ts.map +1 -1
  644. package/types/components/DatePicker/DatePickerBase.types.d.ts +18 -0
  645. package/types/components/DatePicker/DatePickerBase.types.d.ts.map +1 -1
  646. package/types/components/DatePicker/RangeDate/RangeDate.d.ts +1 -1
  647. package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
  648. package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts.map +1 -1
  649. package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts +1 -1
  650. package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.d.ts.map +1 -1
  651. package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.d.ts +16 -3
  652. package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.d.ts.map +1 -1
  653. package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.d.ts +12 -20
  654. package/types/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.d.ts.map +1 -1
  655. package/types/components/DatePicker/SingleDate/SingleDate.d.ts +1 -1
  656. package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
  657. package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
  658. package/types/components/Notification/Notification.d.ts.map +1 -1
  659. package/types/components/Notification/Notification.styles.d.ts +3 -1
  660. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  661. package/types/components/Notification/Notification.types.d.ts +9 -0
  662. package/types/components/Notification/Notification.types.d.ts.map +1 -1
  663. package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
  664. package/types/components/Select/Select.tokens.d.ts +2 -0
  665. package/types/components/Select/Select.tokens.d.ts.map +1 -1
  666. package/types/components/Select/ui/Inner/ui/Item/Item.styles.d.ts +3 -1
  667. package/types/components/Select/ui/Inner/ui/Item/Item.styles.d.ts.map +1 -1
  668. package/types/index.d.ts +1 -0
  669. package/types/index.d.ts.map +1 -1
  670. package/cjs/components/Calendar/CalendarBase/CalendarBase.styles_zk3a46.css +0 -2
  671. package/cjs/components/Calendar/ui/CalendarDays/CalendarDays.styles_1oq8sud.css +0 -3
  672. package/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_1v3msg.css +0 -2
  673. package/cjs/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles_14gqhct.css +0 -2
  674. package/cjs/components/Calendar/ui/CalendarYears/CalendarYears.styles_1d4ov6t.css +0 -2
  675. package/cjs/components/Calendar/ui/DateStructureItem/DateStructureItem.styles_1hkk03u.css +0 -4
  676. package/cjs/components/DatePicker/DatePickerBase.styles_1a5ddg3.css +0 -2
  677. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_1fhuiqs.css +0 -2
  678. package/cjs/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
  679. package/es/components/Calendar/CalendarBase/CalendarBase.styles_zk3a46.css +0 -2
  680. package/es/components/Calendar/ui/CalendarDays/CalendarDays.styles_1oq8sud.css +0 -3
  681. package/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles_1v3msg.css +0 -2
  682. package/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.styles_14gqhct.css +0 -2
  683. package/es/components/Calendar/ui/CalendarYears/CalendarYears.styles_1d4ov6t.css +0 -2
  684. package/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles_1hkk03u.css +0 -4
  685. package/es/components/DatePicker/DatePickerBase.styles_1a5ddg3.css +0 -2
  686. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_1fhuiqs.css +0 -2
  687. package/es/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
@@ -0,0 +1,58 @@
1
+ import _styled from "@emotion/styled/base";
2
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
3
+ import { css } from '@emotion/react';
4
+ import { classes, tokens } from "./CodeField.tokens";
5
+ export var base = /*#__PURE__*/css("display:flex;flex-direction:column;justify-content:center;width:min-content;align-items:center;&.", classes.captionAlignLeft, "{align-items:start;};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL0NvZGVGaWVsZC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL0NvZGVGaWVsZC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDb2RlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVHcm91cCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuZXhwb3J0IGNvbnN0IFNlcGFyYXRvciA9IHN0eWxlZC5kaXZgXG4gICAgd2lkdGg6IHZhcigke3Rva2Vucy5zZXBhcmF0b3JXaWR0aH0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1JbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgYm9yZGVyOiAwO1xuICAgIHBhZGRpbmc6IDA7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2FwdGlvbldyYXBwZXIgPSBzdHlsZWQuZGl2PHsgY2FwdGlvbkFsaWduOiAnbGVmdCcgfCAnY2VudGVyJzsgd2lkdGhWYWx1ZT86IHN0cmluZyB9PmBcbiAgICB0ZXh0LWFsaWduOiAkeyh7IGNhcHRpb25BbGlnbiB9KSA9PiBjYXB0aW9uQWxpZ259O1xuICAgIGFsaWduLXNlbGY6ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgd2lkdGg6ICR7KHsgd2lkdGhWYWx1ZSB9KSA9PiB3aWR0aFZhbHVlIHx8ICdhdXRvJ307XG4gICAgd2hpdGUtc3BhY2U6IHByZS1saW5lO1xuYDtcbiJdfQ== */"));
6
+ export var CodeWrapper = /*#__PURE__*/_styled("div", {
7
+ target: "eytpek44",
8
+ label: "plasma-new-hope__CodeWrapper"
9
+ })(process.env.NODE_ENV === "production" ? {
10
+ name: "s5xdrg",
11
+ styles: "display:flex;align-items:center"
12
+ } : {
13
+ name: "s5xdrg",
14
+ styles: "display:flex;align-items:center",
15
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL0NvZGVGaWVsZC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJxQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0NvZGVGaWVsZC9Db2RlRmllbGQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuL0NvZGVGaWVsZC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgd2lkdGg6IG1pbi1jb250ZW50O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAmLiR7Y2xhc3Nlcy5jYXB0aW9uQWxpZ25MZWZ0fSB7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb2RlR3JvdXAgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBTZXBhcmF0b3IgPSBzdHlsZWQuZGl2YFxuICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuc2VwYXJhdG9yV2lkdGh9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuYDtcblxuZXhwb3J0IGNvbnN0IENhcHRpb25XcmFwcGVyID0gc3R5bGVkLmRpdjx7IGNhcHRpb25BbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcic7IHdpZHRoVmFsdWU/OiBzdHJpbmcgfT5gXG4gICAgdGV4dC1hbGlnbjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICBhbGlnbi1zZWxmOiAkeyh7IGNhcHRpb25BbGlnbiB9KSA9PiBjYXB0aW9uQWxpZ259O1xuICAgIHdpZHRoOiAkeyh7IHdpZHRoVmFsdWUgfSkgPT4gd2lkdGhWYWx1ZSB8fCAnYXV0byd9O1xuICAgIHdoaXRlLXNwYWNlOiBwcmUtbGluZTtcbmA7XG4iXX0= */",
16
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
17
+ });
18
+ export var CodeGroup = /*#__PURE__*/_styled("div", {
19
+ target: "eytpek43",
20
+ label: "plasma-new-hope__CodeGroup"
21
+ })(process.env.NODE_ENV === "production" ? {
22
+ name: "s5xdrg",
23
+ styles: "display:flex;align-items:center"
24
+ } : {
25
+ name: "s5xdrg",
26
+ styles: "display:flex;align-items:center",
27
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL0NvZGVGaWVsZC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JtQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0NvZGVGaWVsZC9Db2RlRmllbGQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuL0NvZGVGaWVsZC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgd2lkdGg6IG1pbi1jb250ZW50O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAmLiR7Y2xhc3Nlcy5jYXB0aW9uQWxpZ25MZWZ0fSB7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb2RlR3JvdXAgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBTZXBhcmF0b3IgPSBzdHlsZWQuZGl2YFxuICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuc2VwYXJhdG9yV2lkdGh9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuYDtcblxuZXhwb3J0IGNvbnN0IENhcHRpb25XcmFwcGVyID0gc3R5bGVkLmRpdjx7IGNhcHRpb25BbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcic7IHdpZHRoVmFsdWU/OiBzdHJpbmcgfT5gXG4gICAgdGV4dC1hbGlnbjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICBhbGlnbi1zZWxmOiAkeyh7IGNhcHRpb25BbGlnbiB9KSA9PiBjYXB0aW9uQWxpZ259O1xuICAgIHdpZHRoOiAkeyh7IHdpZHRoVmFsdWUgfSkgPT4gd2lkdGhWYWx1ZSB8fCAnYXV0byd9O1xuICAgIHdoaXRlLXNwYWNlOiBwcmUtbGluZTtcbmA7XG4iXX0= */",
28
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
29
+ });
30
+ export var Separator = /*#__PURE__*/_styled("div", {
31
+ target: "eytpek42",
32
+ label: "plasma-new-hope__Separator"
33
+ })("width:var(", tokens.separatorWidth, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL0NvZGVGaWVsZC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJtQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0NvZGVGaWVsZC9Db2RlRmllbGQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuL0NvZGVGaWVsZC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgd2lkdGg6IG1pbi1jb250ZW50O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAmLiR7Y2xhc3Nlcy5jYXB0aW9uQWxpZ25MZWZ0fSB7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb2RlR3JvdXAgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBTZXBhcmF0b3IgPSBzdHlsZWQuZGl2YFxuICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuc2VwYXJhdG9yV2lkdGh9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuYDtcblxuZXhwb3J0IGNvbnN0IENhcHRpb25XcmFwcGVyID0gc3R5bGVkLmRpdjx7IGNhcHRpb25BbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcic7IHdpZHRoVmFsdWU/OiBzdHJpbmcgfT5gXG4gICAgdGV4dC1hbGlnbjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICBhbGlnbi1zZWxmOiAkeyh7IGNhcHRpb25BbGlnbiB9KSA9PiBjYXB0aW9uQWxpZ259O1xuICAgIHdpZHRoOiAkeyh7IHdpZHRoVmFsdWUgfSkgPT4gd2lkdGhWYWx1ZSB8fCAnYXV0byd9O1xuICAgIHdoaXRlLXNwYWNlOiBwcmUtbGluZTtcbmA7XG4iXX0= */"));
34
+ export var ItemInput = /*#__PURE__*/_styled("input", {
35
+ target: "eytpek41",
36
+ label: "plasma-new-hope__ItemInput"
37
+ })(process.env.NODE_ENV === "production" ? {
38
+ name: "1bnqsy",
39
+ styles: "box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center"
40
+ } : {
41
+ name: "1bnqsy",
42
+ styles: "box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center",
43
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL0NvZGVGaWVsZC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JxQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0NvZGVGaWVsZC9Db2RlRmllbGQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuL0NvZGVGaWVsZC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgd2lkdGg6IG1pbi1jb250ZW50O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAmLiR7Y2xhc3Nlcy5jYXB0aW9uQWxpZ25MZWZ0fSB7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb2RlR3JvdXAgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBTZXBhcmF0b3IgPSBzdHlsZWQuZGl2YFxuICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuc2VwYXJhdG9yV2lkdGh9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuYDtcblxuZXhwb3J0IGNvbnN0IENhcHRpb25XcmFwcGVyID0gc3R5bGVkLmRpdjx7IGNhcHRpb25BbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcic7IHdpZHRoVmFsdWU/OiBzdHJpbmcgfT5gXG4gICAgdGV4dC1hbGlnbjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICBhbGlnbi1zZWxmOiAkeyh7IGNhcHRpb25BbGlnbiB9KSA9PiBjYXB0aW9uQWxpZ259O1xuICAgIHdpZHRoOiAkeyh7IHdpZHRoVmFsdWUgfSkgPT4gd2lkdGhWYWx1ZSB8fCAnYXV0byd9O1xuICAgIHdoaXRlLXNwYWNlOiBwcmUtbGluZTtcbmA7XG4iXX0= */",
44
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
45
+ });
46
+ export var CaptionWrapper = /*#__PURE__*/_styled("div", {
47
+ target: "eytpek40",
48
+ label: "plasma-new-hope__CaptionWrapper"
49
+ })("text-align:", function (_ref) {
50
+ var captionAlign = _ref.captionAlign;
51
+ return captionAlign;
52
+ }, ";align-self:", function (_ref2) {
53
+ var captionAlign = _ref2.captionAlign;
54
+ return captionAlign;
55
+ }, ";width:", function (_ref3) {
56
+ var widthValue = _ref3.widthValue;
57
+ return widthValue || 'auto';
58
+ }, ";white-space:pre-line;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL0NvZGVGaWVsZC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUNrRyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0NvZGVGaWVsZC9Db2RlRmllbGQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuL0NvZGVGaWVsZC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgd2lkdGg6IG1pbi1jb250ZW50O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAmLiR7Y2xhc3Nlcy5jYXB0aW9uQWxpZ25MZWZ0fSB7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb2RlR3JvdXAgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBTZXBhcmF0b3IgPSBzdHlsZWQuZGl2YFxuICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuc2VwYXJhdG9yV2lkdGh9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuYDtcblxuZXhwb3J0IGNvbnN0IENhcHRpb25XcmFwcGVyID0gc3R5bGVkLmRpdjx7IGNhcHRpb25BbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcic7IHdpZHRoVmFsdWU/OiBzdHJpbmcgfT5gXG4gICAgdGV4dC1hbGlnbjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICBhbGlnbi1zZWxmOiAkeyh7IGNhcHRpb25BbGlnbiB9KSA9PiBjYXB0aW9uQWxpZ259O1xuICAgIHdpZHRoOiAkeyh7IHdpZHRoVmFsdWUgfSkgPT4gd2lkdGhWYWx1ZSB8fCAnYXV0byd9O1xuICAgIHdoaXRlLXNwYWNlOiBwcmUtbGluZTtcbmA7XG4iXX0= */"));
@@ -0,0 +1,150 @@
1
+ ---
2
+ id: codefield
3
+ title: CodeField
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # CodeField
9
+ Компонент `CodeField` используется для ввода OTP-кодов.
10
+
11
+ <Description name="CodeField" />
12
+ <PropsTable name="CodeField" />
13
+
14
+ ## Примеры
15
+
16
+ ### Размер
17
+ Размер задается с помощью свойства `size`.
18
+ Ширина компонента так же может регулироваться при помощи свойства `width`:
19
+
20
+ ```tsx live
21
+ import React from 'react';
22
+ import { CodeField } from '@salutejs/{{ package }}';
23
+
24
+ export function App() {
25
+ return (
26
+ <div style=\{{ flexDirection: 'column', gap: '2rem' }}>
27
+ <CodeField
28
+ size="l"
29
+ caption="Осталось попыток: 4"
30
+ captionAlign="center"
31
+ />
32
+ <CodeField
33
+ size="m"
34
+ caption="Чтобы выслать вам код повторно подождите: 20 секунд"
35
+ captionAlign="left"
36
+ />
37
+ <CodeField
38
+ width="25"
39
+ caption="Не передавайте никому код из СМС. Иначе ваш аккаунт могут взломать"
40
+ captionAlign="center"
41
+ />
42
+ </div>
43
+ );
44
+ }
45
+ ```
46
+
47
+ ### Форма компонента и длина кода
48
+ Форма компонента задается с помощью свойства `shape`, а длина кода с помощью `codeLength`:
49
+
50
+ ```tsx live
51
+ import React from 'react';
52
+ import { CodeField } from '@salutejs/{{ package }}';
53
+
54
+ export function App() {
55
+ return (
56
+ <div style=\{{ flexDirection: 'column', gap: '2rem' }}>
57
+ <div style=\{{ display: 'flex', gap: '2rem' }}>
58
+ <CodeField shape="default" codeLength={4} />
59
+ <CodeField shape="segmented" codeLength={4} />
60
+ </div>
61
+ <div style=\{{ display: 'flex', gap: '2rem' }}>
62
+ <CodeField shape="default" codeLength={5} />
63
+ <CodeField shape="segmented" codeLength={5} />
64
+ </div>
65
+ <div style=\{{ display: 'flex', gap: '2rem' }}>
66
+ <CodeField shape="default" codeLength={6} />
67
+ <CodeField shape="segmented" codeLength={6} />
68
+ </div>
69
+ </div>
70
+ );
71
+ }
72
+ ```
73
+
74
+ ### Допустимые символы и поведение ячейки при вводе некорректного символа
75
+ За допустимые символы для ввода отвечает свойство `allowedSymbols`. Задается строкой или регулярным выражением.
76
+ Библиотека экспортирует наиболее используемые вариации допустимых символов:
77
+ `import { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from '@salutejs/{{ package }}';`
78
+
79
+ Поведение ячейки при вводе некорректного символа регулируется свойством `itemErrorBehavior`:
80
+
81
+ ```tsx live
82
+ import React from 'react';
83
+ import { CodeField } from '@salutejs/{{ package }}';
84
+
85
+ export function App() {
86
+ return (
87
+ <div>
88
+ <CodeField value="123" itemErrorBehavior="remove-symbol" />
89
+ <CodeField value="123" itemErrorBehavior="keep" />
90
+ <CodeField value="123" itemErrorBehavior="forbid-enter" />
91
+ </div>
92
+ );
93
+ }
94
+ ```
95
+
96
+ ### Поведение компонента при вводе некорректного кода и индикация ошибки
97
+ При заполнении всех полей ввода срабатывает колбэк `onFullCodeEnter`.
98
+ При неверном вводе кода, поведние компонента управляется с помощью свойства `codeErrorBehavior`.
99
+ Индикация ошибки происходит с помощью флага `isError` и колбека `setIsError`:
100
+
101
+ ```tsx live
102
+ import React, { useState, useRef, Dispatch, SetStateAction } from 'react';
103
+ import { CodeField } from '@salutejs/{{ package }}';
104
+
105
+ export function App() {
106
+ const [disabledFirst, setDisabledFirst] = useState(false);
107
+ const [isErrorFirst, setIsErrorFirst] = useState(false);
108
+
109
+ const [disabledSecond, setDisabledSecond] = useState(false);
110
+ const [isErrorSecond, setIsErrorSecond] = useState(false);
111
+
112
+ const onFullCodeEnter = (
113
+ code: string,
114
+ errorSetter: Dispatch<SetStateAction<boolean>>,
115
+ disableSetter: Dispatch<SetStateAction<boolean>>
116
+ ) => {
117
+ disableSetter(true);
118
+
119
+ // имитация запроса на сервер
120
+ setTimeout(() => {
121
+ disableSetter(false);
122
+
123
+ if (code !== '123456') {
124
+ errorSetter(true);
125
+ }
126
+ }, 3000)
127
+ }
128
+
129
+ return (
130
+ <div style=\{{ flexDirection: 'column', gap: '2rem' }}>
131
+ <CodeField
132
+ itemErrorBehavior="remove-symbol"
133
+ codeErrorBehavior="remove-code"
134
+ disabled={disabledFirst}
135
+ isError={isErrorFirst}
136
+ setIsError={setIsErrorFirst}
137
+ onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorFirst, setDisabledFirst)}
138
+ />
139
+ <CodeField
140
+ itemErrorBehavior="remove-symbol"
141
+ codeErrorBehavior="keep"
142
+ disabled={disabledSecond}
143
+ isError={isErrorSecond}
144
+ setIsError={setIsErrorSecond}
145
+ onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorSecond, setDisabledSecond)}
146
+ />
147
+ </div>
148
+ );
149
+ }
150
+ ```
@@ -0,0 +1,51 @@
1
+ export var classes = {
2
+ itemError: 'codefield-item-error',
3
+ itemErrorAnimation: 'codefield-item-error-animation',
4
+ itemErrorFade: 'codefield-item-error-fade',
5
+ captionError: 'codefield-caption-error',
6
+ codeError: 'codefield-code-error',
7
+ codeErrorAnimation: 'codefield-code-error-animation',
8
+ codeErrorFade: 'codefield-code-error-fade',
9
+ captionAlignLeft: 'codefield-caption-align-left',
10
+ hoverEnabled: 'codefield-item-hover-enabled',
11
+ segmented: 'codefield-shape-segmented',
12
+ "default": 'codefield-shape-default',
13
+ disabled: 'codefield-disabled'
14
+ };
15
+ export var tokens = {
16
+ captionGap: '--plasma-codefield-caption-gap',
17
+ codeItemsGap: '--plasma-codefield-code-item-gap',
18
+ separatorWidth: '--plasma-codefield-separator-width',
19
+ codeItemWidth: '--plasma-codefield-item-width',
20
+ codeItemHeight: '--plasma-codefield-item-height',
21
+ fontFamily: '--plasma-codefield-font-family',
22
+ fontStyle: '--plasma-codefield-font-style',
23
+ fontSize: '--plasma-codefield-font-size',
24
+ fontWeight: '--plasma-codefield-font-weight',
25
+ letterSpacing: '--plasma-codefield-letter-spacing',
26
+ lineHeight: '--plasma-codefield-line-height',
27
+ captionFontFamily: '--plasma-codefield-caption-font-family',
28
+ captionFontSize: '--plasma-codefield-caption-font-style',
29
+ captionFontStyle: '--plasma-codefield-caption-font-size',
30
+ captionFontWeight: '--plasma-codefield-caption-font-weight',
31
+ captionLetterSpacing: '--plasma-codefield-caption-letter-spacing',
32
+ captionLineHeight: '--plasma-codefield-caption-line-height',
33
+ borderRadius: '--plasma-codefield-code-item-border-radius',
34
+ borderRadiusSegmented: '--plasma-codefield-code-item-border-radius-segmented',
35
+ segmentedSideBorderRadius: '--plasma-codefield-code-item-segmented-side-border-radius',
36
+ captionColor: '--plasma-codefield-caption-color',
37
+ captionColorError: '--plasma-codefield-caption-color-error',
38
+ codeColor: '--plasma-codefield-code-color',
39
+ codeColorError: '--plasma-codefield-code-color-error',
40
+ backgroundColor: '--plasma-codefield-background-color',
41
+ backgroundColorHover: '--plasma-codefield-background-color-hover',
42
+ backgroundColorFocus: '--plasma-codefield-background-color-focus',
43
+ backgroundErrorColor: '--plasma-codefield-background-error-color',
44
+ borderWidth: '--plasma-codefield-border-width',
45
+ borderColor: '--plasma-codefield-border-color',
46
+ borderColorHover: '--plasma-codefield-border-color-hover',
47
+ borderColorFocus: '--plasma-codefield-border-color-focus',
48
+ borderErrorColor: '--plasma-codefield-border-error-color',
49
+ caretColor: '--plasma-codefield-caret-color',
50
+ disabledOpacity: '--plasma-codefield-disabled-opacity'
51
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,3 @@
1
+ export { codeFieldRoot, codeFieldConfig } from "./CodeField";
2
+ export { tokens as codeFieldTokens, classes as codeFieldClasses } from "./CodeField.tokens";
3
+ export { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from "./utils/constants";
@@ -0,0 +1,6 @@
1
+ export var ONLY_DIGITS_PATTERN = '^\\d+$';
2
+ export var ONLY_CHARS_PATTERN = '^[a-zA-Z]+$';
3
+ export var ONLY_DIGITS_AND_CHARS_PATTERN = '^[a-zA-Z0-9]+$';
4
+ export var FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete'];
5
+ export var BACKSPACE_KEY = 'Backspace';
6
+ export var ANIMATION_TIMEOUT = 300;
@@ -0,0 +1,52 @@
1
+ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
2
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
+ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
5
+ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
6
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
+ import { classes } from "../CodeField.tokens";
8
+ import { ANIMATION_TIMEOUT } from "./constants";
9
+ import { getCodeValue } from "./initialValuesHelper";
10
+ export var handleCodeError = function handleCodeError(_ref) {
11
+ var _captionRef$current, _captionRef$current2;
12
+ var codeLength = _ref.codeLength,
13
+ codeErrorBehavior = _ref.codeErrorBehavior,
14
+ currentCode = _ref.currentCode,
15
+ inputRefs = _ref.inputRefs,
16
+ inputContainerRef = _ref.inputContainerRef,
17
+ captionRef = _ref.captionRef,
18
+ setCode = _ref.setCode,
19
+ codeSetter = _ref.codeSetter;
20
+ if (!inputContainerRef.current) {
21
+ return;
22
+ }
23
+ switch (codeErrorBehavior) {
24
+ case 'keep':
25
+ inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation);
26
+ (_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.add(classes.captionError);
27
+ setTimeout(function () {
28
+ var _inputContainerRef$cu;
29
+ var newCode = _toConsumableArray(currentCode);
30
+ newCode.pop();
31
+ codeSetter(newCode);
32
+ setCode(currentCode);
33
+ (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 || _inputContainerRef$cu.classList.remove(classes.codeErrorAnimation);
34
+ setTimeout(function () {
35
+ var _inputRefs$current, _inputRefs$current2;
36
+ (_inputRefs$current = inputRefs.current[inputRefs.current.length - 1]) === null || _inputRefs$current === void 0 || _inputRefs$current.setSelectionRange(0, 1);
37
+ (_inputRefs$current2 = inputRefs.current[inputRefs.current.length - 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
38
+ }, 0);
39
+ }, ANIMATION_TIMEOUT);
40
+ break;
41
+ case 'remove-code':
42
+ default:
43
+ inputContainerRef.current.classList.add(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
44
+ (_captionRef$current2 = captionRef.current) === null || _captionRef$current2 === void 0 || _captionRef$current2.classList.add(classes.captionError);
45
+ setTimeout(function () {
46
+ var _inputRefs$current$, _inputContainerRef$cu2;
47
+ codeSetter(getCodeValue(codeLength, ''));
48
+ (_inputRefs$current$ = inputRefs.current[0]) === null || _inputRefs$current$ === void 0 || _inputRefs$current$.focus();
49
+ (_inputContainerRef$cu2 = inputContainerRef.current) === null || _inputContainerRef$cu2 === void 0 || _inputContainerRef$cu2.classList.remove(classes.codeError, classes.codeErrorAnimation, classes.codeErrorFade);
50
+ }, ANIMATION_TIMEOUT);
51
+ }
52
+ };
@@ -0,0 +1,50 @@
1
+ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
2
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
+ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
5
+ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
6
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
+ import { classes } from "../CodeField.tokens";
8
+ import { ANIMATION_TIMEOUT } from "./constants";
9
+ export var handleItemError = function handleItemError(_ref) {
10
+ var _inputRefs$current$in, _inputRefs$current$in4;
11
+ var currentSymbol = _ref.currentSymbol,
12
+ itemErrorBehavior = _ref.itemErrorBehavior,
13
+ index = _ref.index,
14
+ newCode = _ref.newCode,
15
+ inputRefs = _ref.inputRefs,
16
+ setCode = _ref.setCode,
17
+ codeSetter = _ref.codeSetter;
18
+ if (!inputRefs.current[index] || currentSymbol === ' ') {
19
+ return;
20
+ }
21
+ switch (itemErrorBehavior) {
22
+ case 'keep':
23
+ setCode(newCode);
24
+ (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.add(classes.itemError, classes.itemErrorAnimation);
25
+ setTimeout(function () {
26
+ var _inputRefs$current$in2;
27
+ (_inputRefs$current$in2 = inputRefs.current[index]) === null || _inputRefs$current$in2 === void 0 || _inputRefs$current$in2.classList.remove(classes.itemErrorAnimation);
28
+ setTimeout(function () {
29
+ var _inputRefs$current$in3;
30
+ return (_inputRefs$current$in3 = inputRefs.current[index]) === null || _inputRefs$current$in3 === void 0 ? void 0 : _inputRefs$current$in3.setSelectionRange(0, 1);
31
+ }, 0);
32
+ }, ANIMATION_TIMEOUT);
33
+ break;
34
+ case 'forbid-enter':
35
+ newCode[index] = '';
36
+ codeSetter(newCode);
37
+ break;
38
+ case 'remove-symbol':
39
+ default:
40
+ setCode(newCode);
41
+ (_inputRefs$current$in4 = inputRefs.current[index]) === null || _inputRefs$current$in4 === void 0 || _inputRefs$current$in4.classList.add(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
42
+ setTimeout(function () {
43
+ var _inputRefs$current$in5;
44
+ var updatedCode = _toConsumableArray(newCode);
45
+ updatedCode[index] = '';
46
+ codeSetter(updatedCode);
47
+ (_inputRefs$current$in5 = inputRefs.current[index]) === null || _inputRefs$current$in5 === void 0 || _inputRefs$current$in5.classList.remove(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
48
+ }, ANIMATION_TIMEOUT);
49
+ }
50
+ };
@@ -0,0 +1,3 @@
1
+ export { getFieldPattern, getPlaceholderValue, getCodeValue } from "./initialValuesHelper";
2
+ export { handleItemError } from "./handleItemError";
3
+ export { handleCodeError } from "./handleCodeError";
@@ -0,0 +1,24 @@
1
+ export var getFieldPattern = function getFieldPattern(allowedSymbols) {
2
+ if (!allowedSymbols) {
3
+ return null;
4
+ }
5
+ if (typeof allowedSymbols === 'string') {
6
+ return new RegExp(allowedSymbols, 'g');
7
+ }
8
+ return allowedSymbols;
9
+ };
10
+ export var getCodeValue = function getCodeValue(codeLength, value) {
11
+ if (!value.length) {
12
+ return new Array(codeLength).fill('');
13
+ }
14
+ return value.slice(0, codeLength).split('');
15
+ };
16
+ export var getPlaceholderValue = function getPlaceholderValue(codeLength, placeholder) {
17
+ if (!placeholder || typeof placeholder !== 'string') {
18
+ return null;
19
+ }
20
+ if (placeholder.length === 1) {
21
+ return Array(codeLength).fill(placeholder);
22
+ }
23
+ return placeholder.slice(0, codeLength).split('');
24
+ };
@@ -0,0 +1,3 @@
1
+ import { css } from '@emotion/react';
2
+ import { tokens } from "../../CodeField.tokens";
3
+ export var base = /*#__PURE__*/css("&&[disabled]{opacity:var(", tokens.disabledOpacity, ");cursor:not-allowed;&>*{pointer-events:none;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL3ZhcmlhdGlvbnMvX2Rpc2FibGVkL2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXVCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL3ZhcmlhdGlvbnMvX2Rpc2FibGVkL2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uL0NvZGVGaWVsZC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAmJltkaXNhYmxlZF0ge1xuICAgICAgICBvcGFjaXR5OiB2YXIoJHt0b2tlbnMuZGlzYWJsZWRPcGFjaXR5fSk7XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG5cbiAgICAgICAgJiA+ICoge1xuICAgICAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgICAgIH1cbiAgICB9XG5gO1xuIl19 */"));
@@ -0,0 +1,4 @@
1
+ {
2
+ "type": "boolean",
3
+ "tokens": ["--plasma-codefield-disabled-opacity"]
4
+ }
@@ -0,0 +1,4 @@
1
+ import { css } from '@emotion/react';
2
+ import { tokens, classes } from "../../CodeField.tokens";
3
+ import { ItemInput } from "../../CodeField.styles";
4
+ export var base = /*#__PURE__*/css(ItemInput, "{border-radius:var(", tokens.borderRadius, ");&.", classes.segmented, "{border-radius:var(", tokens.borderRadiusSegmented, ");&:first-child{border-top-left-radius:var(", tokens.segmentedSideBorderRadius, ");border-bottom-left-radius:var(", tokens.segmentedSideBorderRadius, ");}&:last-child{border-top-right-radius:var(", tokens.segmentedSideBorderRadius, ");border-bottom-right-radius:var(", tokens.segmentedSideBorderRadius, ");}}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL3ZhcmlhdGlvbnMvX3NoYXBlL2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL3ZhcmlhdGlvbnMvX3NoYXBlL2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHRva2VucywgY2xhc3NlcyB9IGZyb20gJy4uLy4uL0NvZGVGaWVsZC50b2tlbnMnO1xuaW1wb3J0IHsgSXRlbUlucHV0IH0gZnJvbSAnLi4vLi4vQ29kZUZpZWxkLnN0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgICR7SXRlbUlucHV0fSB7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KTtcblxuICAgICAgICAmLiR7Y2xhc3Nlcy5zZWdtZW50ZWR9IHtcbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXNTZWdtZW50ZWR9KTtcblxuICAgICAgICAgICAgJjpmaXJzdC1jaGlsZCB7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogdmFyKCR7dG9rZW5zLnNlZ21lbnRlZFNpZGVCb3JkZXJSYWRpdXN9KTtcbiAgICAgICAgICAgICAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiB2YXIoJHt0b2tlbnMuc2VnbWVudGVkU2lkZUJvcmRlclJhZGl1c30pO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOmxhc3QtY2hpbGQge1xuICAgICAgICAgICAgICAgIGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiB2YXIoJHt0b2tlbnMuc2VnbWVudGVkU2lkZUJvcmRlclJhZGl1c30pO1xuICAgICAgICAgICAgICAgIGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiB2YXIoJHt0b2tlbnMuc2VnbWVudGVkU2lkZUJvcmRlclJhZGl1c30pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuYDtcbiJdfQ== */"));
@@ -0,0 +1 @@
1
+ ["--plasma-codefield-code-item-border-radius", "--plasma-codefield-code-item-segmented-side-border-radius"]
@@ -0,0 +1,4 @@
1
+ import { css } from '@emotion/react';
2
+ import { CaptionWrapper, CodeGroup, CodeWrapper, ItemInput } from "../../CodeField.styles";
3
+ import { tokens } from "../../CodeField.tokens";
4
+ export var base = /*#__PURE__*/css("gap:var(", tokens.captionGap, ");", CodeWrapper, ",", CodeGroup, "{gap:var(", tokens.codeItemsGap, ");}", ItemInput, "{width:var(", tokens.codeItemWidth, ");height:var(", tokens.codeItemHeight, ");font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.letterSpacing, ");line-height:var(", tokens.lineHeight, ");}", CaptionWrapper, "{font-family:var(", tokens.captionFontFamily, ");font-size:var(", tokens.captionFontSize, ");font-style:var(", tokens.captionFontStyle, ");font-weight:var(", tokens.captionFontWeight, ");letter-spacing:var(", tokens.captionLetterSpacing, ");line-height:var(", tokens.captionLineHeight, ");};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL3ZhcmlhdGlvbnMvX3NpemUvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvdmFyaWF0aW9ucy9fc2l6ZS9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBDYXB0aW9uV3JhcHBlciwgQ29kZUdyb3VwLCBDb2RlV3JhcHBlciwgSXRlbUlucHV0IH0gZnJvbSAnLi4vLi4vQ29kZUZpZWxkLnN0eWxlcyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuLi8uLi9Db2RlRmllbGQudG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZ2FwOiB2YXIoJHt0b2tlbnMuY2FwdGlvbkdhcH0pO1xuXG4gICAgJHtDb2RlV3JhcHBlcn0sICR7Q29kZUdyb3VwfSB7XG4gICAgICAgIGdhcDogdmFyKCR7dG9rZW5zLmNvZGVJdGVtc0dhcH0pO1xuICAgIH1cblxuICAgICR7SXRlbUlucHV0fSB7XG4gICAgICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuY29kZUl0ZW1XaWR0aH0pO1xuICAgICAgICBoZWlnaHQ6IHZhcigke3Rva2Vucy5jb2RlSXRlbUhlaWdodH0pO1xuXG4gICAgICAgIGZvbnQtZmFtaWx5OiB2YXIoJHt0b2tlbnMuZm9udEZhbWlseX0pO1xuICAgICAgICBmb250LXNpemU6IHZhcigke3Rva2Vucy5mb250U2l6ZX0pO1xuICAgICAgICBmb250LXN0eWxlOiB2YXIoJHt0b2tlbnMuZm9udFN0eWxlfSk7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiB2YXIoJHt0b2tlbnMuZm9udFdlaWdodH0pO1xuICAgICAgICBsZXR0ZXItc3BhY2luZzogdmFyKCR7dG9rZW5zLmxldHRlclNwYWNpbmd9KTtcbiAgICAgICAgbGluZS1oZWlnaHQ6IHZhcigke3Rva2Vucy5saW5lSGVpZ2h0fSk7XG4gICAgfVxuXG4gICAgJHtDYXB0aW9uV3JhcHBlcn0ge1xuICAgICAgICBmb250LWZhbWlseTogdmFyKCR7dG9rZW5zLmNhcHRpb25Gb250RmFtaWx5fSk7XG4gICAgICAgIGZvbnQtc2l6ZTogdmFyKCR7dG9rZW5zLmNhcHRpb25Gb250U2l6ZX0pO1xuICAgICAgICBmb250LXN0eWxlOiB2YXIoJHt0b2tlbnMuY2FwdGlvbkZvbnRTdHlsZX0pO1xuICAgICAgICBmb250LXdlaWdodDogdmFyKCR7dG9rZW5zLmNhcHRpb25Gb250V2VpZ2h0fSk7XG4gICAgICAgIGxldHRlci1zcGFjaW5nOiB2YXIoJHt0b2tlbnMuY2FwdGlvbkxldHRlclNwYWNpbmd9KTtcbiAgICAgICAgbGluZS1oZWlnaHQ6IHZhcigke3Rva2Vucy5jYXB0aW9uTGluZUhlaWdodH0pO1xuICAgIH1cbmA7XG4iXX0= */"));
@@ -0,0 +1,19 @@
1
+ [
2
+ "--plasma-codefield-caption-gap",
3
+ "--plasma-codefield-code-item-gap",
4
+ "--plasma-codefield-separator-width",
5
+ "--plasma-codefield-item-width",
6
+ "--plasma-codefield-item-height",
7
+ "--plasma-codefield-font-family",
8
+ "--plasma-codefield-font-style",
9
+ "--plasma-codefield-font-size",
10
+ "--plasma-codefield-font-weight",
11
+ "--plasma-codefield-letter-spacing",
12
+ "--plasma-codefield-line-height",
13
+ "--plasma-codefield-caption-font-family",
14
+ "--plasma-codefield-caption-font-style",
15
+ "--plasma-codefield-caption-font-size",
16
+ "--plasma-codefield-caption-font-weight",
17
+ "--plasma-codefield-caption-letter-spacing",
18
+ "--plasma-codefield-caption-line-height"
19
+ ]
@@ -0,0 +1,4 @@
1
+ import { css } from '@emotion/react';
2
+ import { CaptionWrapper, ItemInput } from "../../CodeField.styles";
3
+ import { classes, tokens } from "../../CodeField.tokens";
4
+ export var base = /*#__PURE__*/css(CaptionWrapper, "{color:var(", tokens.captionColor, ");&.", classes.captionError, "{color:var(", tokens.captionColorError, ");}}", ItemInput, "{color:var(", tokens.codeColor, ");caret-color:var(", tokens.caretColor, ");background-color:var(", tokens.backgroundColor, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", tokens.borderColor, ");}&:hover{.", classes.hoverEnabled, "{background-color:var(", tokens.backgroundColorHover, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", tokens.borderColorHover, ");}}&:focus-within{", ItemInput, ":focus-within{background-color:var(", tokens.backgroundColorFocus, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", tokens.borderColorFocus, ");}}&& .", classes.codeErrorAnimation, "{animation:shakingError 0.3s forwards;}&& .", classes.codeError, "{", ItemInput, "{color:var(", tokens.codeColorError, ");background-color:var(", tokens.backgroundErrorColor, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", tokens.borderErrorColor, ");}&:focus-within{", ItemInput, "{background-color:var(", tokens.backgroundErrorColor, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", tokens.borderErrorColor, ");}}&.", classes.codeErrorFade, "{", ItemInput, "{animation:fadeError 0.3s forwards;}}}&& .", classes.itemErrorAnimation, "{animation:shakingError 0.3s forwards;}&& .", classes.itemError, ",&& .", classes.itemError, ":focus-within{color:var(", tokens.codeColorError, ");background-color:var(", tokens.backgroundErrorColor, ");box-shadow:inset 0 0 0 var(", tokens.borderWidth, ") var(", tokens.borderErrorColor, ");&.", classes.codeErrorFade, "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", tokens.codeColorError, ");}100%{color:transparent;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQ29kZUZpZWxkL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBDYXB0aW9uV3JhcHBlciwgSXRlbUlucHV0IH0gZnJvbSAnLi4vLi4vQ29kZUZpZWxkLnN0eWxlcyc7XG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuLi8uLi9Db2RlRmllbGQudG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgJHtDYXB0aW9uV3JhcHBlcn0ge1xuICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmNhcHRpb25Db2xvcn0pO1xuXG4gICAgICAgICYuJHtjbGFzc2VzLmNhcHRpb25FcnJvcn0ge1xuICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5jYXB0aW9uQ29sb3JFcnJvcn0pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgJHtJdGVtSW5wdXR9IHtcbiAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5jb2RlQ29sb3J9KTtcbiAgICAgICAgY2FyZXQtY29sb3I6IHZhcigke3Rva2Vucy5jYXJldENvbG9yfSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmJvcmRlcldpZHRofSkgdmFyKCR7dG9rZW5zLmJvcmRlckNvbG9yfSk7XG4gICAgfVxuXG4gICAgJjpob3ZlciB7XG4gICAgICAgIC4ke2NsYXNzZXMuaG92ZXJFbmFibGVkfSB7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICAgICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigke3Rva2Vucy5ib3JkZXJXaWR0aH0pIHZhcigke3Rva2Vucy5ib3JkZXJDb2xvckhvdmVyfSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgICR7SXRlbUlucHV0fTpmb2N1cy13aXRoaW4ge1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmJhY2tncm91bmRDb2xvckZvY3VzfSk7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCB2YXIoJHt0b2tlbnMuYm9yZGVyV2lkdGh9KSB2YXIoJHt0b2tlbnMuYm9yZGVyQ29sb3JGb2N1c30pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgJiYgLiR7Y2xhc3Nlcy5jb2RlRXJyb3JBbmltYXRpb259IHtcbiAgICAgICAgYW5pbWF0aW9uOiBzaGFraW5nRXJyb3IgMC4zcyBmb3J3YXJkcztcbiAgICB9XG5cbiAgICAmJiAuJHtjbGFzc2VzLmNvZGVFcnJvcn0ge1xuICAgICAgICAke0l0ZW1JbnB1dH0ge1xuICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5jb2RlQ29sb3JFcnJvcn0pO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmJhY2tncm91bmRFcnJvckNvbG9yfSk7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCB2YXIoJHt0b2tlbnMuYm9yZGVyV2lkdGh9KSB2YXIoJHt0b2tlbnMuYm9yZGVyRXJyb3JDb2xvcn0pO1xuICAgICAgICB9XG5cbiAgICAgICAgJjpmb2N1cy13aXRoaW4ge1xuICAgICAgICAgICAgJHtJdGVtSW5wdXR9IHtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZEVycm9yQ29sb3J9KTtcbiAgICAgICAgICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCB2YXIoJHt0b2tlbnMuYm9yZGVyV2lkdGh9KSB2YXIoJHt0b2tlbnMuYm9yZGVyRXJyb3JDb2xvcn0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuY29kZUVycm9yRmFkZX0ge1xuICAgICAgICAgICAgJHtJdGVtSW5wdXR9IHtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IGZhZGVFcnJvciAwLjNzIGZvcndhcmRzO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgJiYgLiR7Y2xhc3Nlcy5pdGVtRXJyb3JBbmltYXRpb259IHtcbiAgICAgICAgYW5pbWF0aW9uOiBzaGFraW5nRXJyb3IgMC4zcyBmb3J3YXJkcztcbiAgICB9XG5cbiAgICAmJiAuJHtjbGFzc2VzLml0ZW1FcnJvcn0sICYmIC4ke2NsYXNzZXMuaXRlbUVycm9yfTpmb2N1cy13aXRoaW4ge1xuICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmNvZGVDb2xvckVycm9yfSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kRXJyb3JDb2xvcn0pO1xuICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCB2YXIoJHt0b2tlbnMuYm9yZGVyV2lkdGh9KSB2YXIoJHt0b2tlbnMuYm9yZGVyRXJyb3JDb2xvcn0pO1xuXG4gICAgICAgICYuJHtjbGFzc2VzLmNvZGVFcnJvckZhZGV9IHtcbiAgICAgICAgICAgIGFuaW1hdGlvbjogc2hha2luZ0Vycm9yIDAuM3MgZm9yd2FyZHMgZmFkZUVycm9yIDAuM3MgZm9yd2FyZHM7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBAa2V5ZnJhbWVzIHNoYWtpbmdFcnJvciB7XG4gICAgICAgIDE0JSB7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTAuMTI1cmVtKTtcbiAgICAgICAgfVxuICAgICAgICAyOCUge1xuICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDAuMTI1cmVtKTtcbiAgICAgICAgfVxuICAgICAgICA0MiUge1xuICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC0wLjEyNXJlbSk7XG4gICAgICAgIH1cbiAgICAgICAgNTclIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwLjEyNXJlbSk7XG4gICAgICAgIH1cbiAgICAgICAgNzElIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMC4xMjVyZW0pO1xuICAgICAgICB9XG4gICAgICAgIDg1JSB7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMC4xMjVyZW0pO1xuICAgICAgICB9XG4gICAgICAgIDEwMCUge1xuICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC0wLjEyNXJlbSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBAa2V5ZnJhbWVzIGZhZGVFcnJvciB7XG4gICAgICAgIDUwJSB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmNvZGVDb2xvckVycm9yfSk7XG4gICAgICAgIH1cbiAgICAgICAgMTAwJSB7XG4gICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgIH1cbiAgICB9XG5gO1xuIl19 */"));
@@ -1,7 +1,12 @@
1
1
  export var classes = {
2
2
  datePickerError: 'date-picker-error',
3
3
  datePickerSuccess: 'date-picker-success',
4
- datePickerRoot: 'date-picker-root'
4
+ datePickerRoot: 'date-picker-root',
5
+ datePickerstretched: 'date-picker-stretched',
6
+ datePickerCalendarstretched: 'date-picker-calendar-stretched'
7
+ };
8
+ export var pivateTokens = {
9
+ calendarDoubleWidth: '--plasma_private-calendar-double-width'
5
10
  };
6
11
  export var tokens = {
7
12
  width: '--plasma-date-picker-width',
@@ -126,14 +131,12 @@ export var tokens = {
126
131
  calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
127
132
  calendarShadow: '--plasma-date-picker-calendar-shadow',
128
133
  calendarBorderRadius: '--plasma-date-picker-calendar-border-radius',
129
- calendarWidth: '--plasma-date-picker-calendar-width',
130
- calendarHeight: '--plasma-date-picker-calendar-height',
134
+ calendarContainerWidth: '--plasma-date-picker-calendar-container-width',
135
+ calendarContainerHeight: '--plasma-date-picker-calendar-container-height',
131
136
  calendarBorderWidth: '--plasma-date-picker-calendar-border-width',
132
137
  calendarBorderColor: '--plasma-date-picker-calendar-border-color',
133
138
  calendarYearsPadding: '--plasma-date-picker-calendar__years-padding',
134
139
  calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius',
135
- calendarYearItemWidth: '--plasma-date-picker-calendar__year-item-width',
136
- calendarYearItemHeight: '--plasma-date-picker-calendar__year-item-height',
137
140
  calendarYearFontFamily: '--plasma-date-picker-calendar__year-font-family',
138
141
  calendarYearFontSize: '--plasma-date-picker-calendar__year-font-size',
139
142
  calendarYearFontStyle: '--plasma-date-picker-calendar__year-font-style',
@@ -143,8 +146,6 @@ export var tokens = {
143
146
  calendarYearSelectedFontWeight: '--plasma-date-picker-calendar__year-selected-font-weight',
144
147
  calendarMonthsPadding: '--plasma-date-picker-calendar__months-padding',
145
148
  calendarMonthItemBorderRadius: '--plasma-date-picker-calendar__month-item-border-radius',
146
- calendarMonthItemWidth: '--plasma-date-picker-calendar__month-item-width',
147
- calendarMonthItemHeight: '--plasma-date-picker-calendar__month-item-height',
148
149
  calendarMonthFontFamily: '--plasma-date-picker-calendar__month-font-family',
149
150
  calendarMonthFontSize: '--plasma-date-picker-calendar__month-font-size',
150
151
  calendarMonthFontStyle: '--plasma-date-picker-calendar__month-font-style',
@@ -154,8 +155,6 @@ export var tokens = {
154
155
  calendarMonthSelectedFontWeight: '--plasma-date-picker-calendar__month-selected-font-weight',
155
156
  calendarQuartersPadding: '--plasma-date-picker-calendar__quarters-padding',
156
157
  calendarQuarterItemBorderRadius: '--plasma-date-picker-calendar__quarter-item-border-radius',
157
- calendarQuarterItemWidth: '--plasma-date-picker-calendar__quarter-item-width',
158
- calendarQuarterItemHeight: '--plasma-date-picker-calendar__quarter-item-height',
159
158
  calendarQuarterFontFamily: '--plasma-date-picker-calendar__quarter-font-family',
160
159
  calendarQuarterFontSize: '--plasma-date-picker-calendar__quarter-font-size',
161
160
  calendarQuarterFontStyle: '--plasma-date-picker-calendar__quarter-font-style',
@@ -165,8 +164,6 @@ export var tokens = {
165
164
  calendarQuarterSelectedFontWeight: '--plasma-date-picker-calendar__quarter-selected-font-weight',
166
165
  calendarDaysPadding: '--plasma-date-picker-calendar__days-padding',
167
166
  calendarDayItemBorderRadius: '--plasma-date-picker-calendar__day-item-border-radius',
168
- calendarDayItemWidth: '--plasma-date-picker-calendar__day-item-width',
169
- calendarDayItemHeight: '--plasma-date-picker-calendar__day-item-height',
170
167
  calendarDayFontFamily: '--plasma-date-picker-calendar__day-font-family',
171
168
  calendarDayFontSize: '--plasma-date-picker-calendar__day-font-size',
172
169
  calendarDayFontStyle: '--plasma-date-picker-calendar__day-font-style',