@salutejs/plasma-new-hope 0.325.0-canary.1954.15277675821.0 → 0.325.0-canary.1954.15296930381.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 (423) hide show
  1. package/cjs/components/CodeField/CodeField.css +14 -0
  2. package/cjs/components/CodeField/CodeField.js +290 -0
  3. package/cjs/components/CodeField/CodeField.js.map +1 -0
  4. package/cjs/components/CodeField/CodeField.styles.js +57 -0
  5. package/cjs/components/CodeField/CodeField.styles.js.map +1 -0
  6. package/cjs/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
  7. package/cjs/components/CodeField/CodeField.tokens.js +59 -0
  8. package/cjs/components/CodeField/CodeField.tokens.js.map +1 -0
  9. package/cjs/components/CodeField/utils/constants.js +18 -0
  10. package/cjs/components/CodeField/utils/constants.js.map +1 -0
  11. package/cjs/components/CodeField/utils/handleCodeError.js +55 -0
  12. package/cjs/components/CodeField/utils/handleCodeError.js.map +1 -0
  13. package/cjs/components/CodeField/utils/handleItemError.js +53 -0
  14. package/cjs/components/CodeField/utils/handleItemError.js.map +1 -0
  15. package/cjs/components/CodeField/utils/initialValuesHelper.js +33 -0
  16. package/cjs/components/CodeField/utils/initialValuesHelper.js.map +1 -0
  17. package/cjs/components/{List/variations/_variant → CodeField/variations/_disabled}/base.js +2 -2
  18. package/cjs/components/CodeField/variations/_disabled/base.js.map +1 -0
  19. package/cjs/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
  20. package/cjs/components/CodeField/variations/_shape/base.js +9 -0
  21. package/cjs/components/CodeField/variations/_shape/base.js.map +1 -0
  22. package/cjs/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
  23. package/cjs/components/CodeField/variations/_size/base.js +9 -0
  24. package/cjs/components/CodeField/variations/_size/base.js.map +1 -0
  25. package/cjs/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
  26. package/cjs/components/CodeField/variations/_view/base.js +9 -0
  27. package/cjs/components/CodeField/variations/_view/base.js.map +1 -0
  28. package/cjs/components/CodeField/variations/_view/base_9a5yza.css +1 -0
  29. package/cjs/components/List/List.css +7 -1
  30. package/cjs/components/List/List.js +6 -10
  31. package/cjs/components/List/List.js.map +1 -1
  32. package/cjs/components/List/List.styles.js +1 -1
  33. package/cjs/components/List/List.styles.js.map +1 -1
  34. package/cjs/components/List/List.styles_97b8jq.css +1 -0
  35. package/cjs/components/List/List.tokens.js +5 -2
  36. package/cjs/components/List/List.tokens.js.map +1 -1
  37. package/cjs/components/List/ui/ListItem.css +2 -2
  38. package/cjs/components/List/ui/ListItem.js +2 -1
  39. package/cjs/components/List/ui/ListItem.js.map +1 -1
  40. package/cjs/components/List/ui/ListItem.styles.js +1 -1
  41. package/cjs/components/List/ui/ListItem.styles.js.map +1 -1
  42. package/cjs/components/List/ui/ListItem.styles_106alid.css +2 -0
  43. package/cjs/components/List/variations/_disabled/base.js +1 -1
  44. package/cjs/components/List/variations/_disabled/base.js.map +1 -1
  45. package/cjs/components/List/variations/_disabled/base_1p96e1z.css +1 -0
  46. package/cjs/components/List/variations/_size/base.js +1 -1
  47. package/cjs/components/List/variations/_size/base.js.map +1 -1
  48. package/cjs/components/List/variations/_size/base_jq4nc8.css +1 -0
  49. package/cjs/components/List/variations/_view/base.js +1 -1
  50. package/cjs/components/List/variations/_view/base.js.map +1 -1
  51. package/cjs/components/List/variations/_view/base_1fsqflm.css +1 -0
  52. package/cjs/components/Notification/Notification.css +12 -12
  53. package/cjs/components/Notification/Notification.js +5 -1
  54. package/cjs/components/Notification/Notification.js.map +1 -1
  55. package/cjs/components/Notification/Notification.styles.js +63 -48
  56. package/cjs/components/Notification/Notification.styles.js.map +1 -1
  57. package/cjs/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  58. package/cjs/components/Notification/Notification.types.js.map +1 -1
  59. package/cjs/components/Notification/NotificationsProvider.css +11 -11
  60. package/cjs/components/Notification/variations/_layout/base.js +1 -1
  61. package/cjs/components/Notification/variations/_layout/base.js.map +1 -1
  62. package/cjs/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  63. package/cjs/components/NumberFormat/NumberFormat.js +2 -7
  64. package/cjs/components/NumberFormat/NumberFormat.js.map +1 -1
  65. package/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  66. package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
  67. package/cjs/index.css +36 -15
  68. package/cjs/index.js +10 -0
  69. package/cjs/index.js.map +1 -1
  70. package/emotion/cjs/components/CodeField/CodeField.js +299 -0
  71. package/emotion/cjs/components/CodeField/CodeField.styles.js +65 -0
  72. package/emotion/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
  73. package/emotion/cjs/components/CodeField/CodeField.tokens.js +57 -0
  74. package/emotion/cjs/components/CodeField/CodeField.types.js +5 -0
  75. package/emotion/cjs/components/CodeField/index.js +50 -0
  76. package/emotion/cjs/components/CodeField/utils/constants.js +12 -0
  77. package/emotion/cjs/components/CodeField/utils/handleCodeError.js +58 -0
  78. package/emotion/cjs/components/CodeField/utils/handleItemError.js +56 -0
  79. package/emotion/cjs/components/CodeField/utils/index.js +38 -0
  80. package/emotion/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
  81. package/emotion/cjs/components/CodeField/variations/_disabled/base.js +9 -0
  82. package/emotion/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
  83. package/emotion/cjs/components/CodeField/variations/_shape/base.js +10 -0
  84. package/emotion/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
  85. package/emotion/cjs/components/CodeField/variations/_size/base.js +10 -0
  86. package/emotion/cjs/components/CodeField/variations/_size/tokens.json +19 -0
  87. package/emotion/cjs/components/CodeField/variations/_view/base.js +10 -0
  88. package/emotion/cjs/components/CodeField/variations/_view/tokens.json +0 -0
  89. package/emotion/cjs/components/List/List.js +10 -14
  90. package/emotion/cjs/components/List/List.styles.js +10 -2
  91. package/emotion/cjs/components/List/List.tokens.js +5 -2
  92. package/emotion/cjs/components/List/ui/ListItem.js +2 -1
  93. package/emotion/cjs/components/List/ui/ListItem.styles.js +2 -2
  94. package/emotion/cjs/components/List/variations/_disabled/base.js +3 -1
  95. package/emotion/cjs/components/List/variations/_size/base.js +2 -1
  96. package/emotion/cjs/components/List/variations/_view/base.js +3 -1
  97. package/emotion/cjs/components/Notification/Notification.js +5 -1
  98. package/emotion/cjs/components/Notification/Notification.styles.js +43 -36
  99. package/emotion/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  100. package/emotion/cjs/components/Notification/variations/_layout/base.js +1 -1
  101. package/emotion/cjs/components/NumberFormat/NumberFormat.js +2 -7
  102. package/emotion/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  103. package/emotion/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  104. package/emotion/cjs/examples/fixtures/Notification.js +1 -1
  105. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
  106. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
  107. package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  108. package/emotion/cjs/examples/plasma_b2c/components/List/List.config.js +8 -13
  109. package/emotion/cjs/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  110. package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  111. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  112. package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  113. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
  114. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
  115. package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  116. package/emotion/cjs/examples/plasma_web/components/List/List.config.js +8 -13
  117. package/emotion/cjs/examples/plasma_web/components/List/List.stories.tsx +1 -0
  118. package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  119. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  120. package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  121. package/emotion/cjs/index.js +11 -0
  122. package/emotion/es/components/CodeField/CodeField.js +290 -0
  123. package/emotion/es/components/CodeField/CodeField.styles.js +58 -0
  124. package/emotion/es/components/CodeField/CodeField.template-doc.mdx +150 -0
  125. package/emotion/es/components/CodeField/CodeField.tokens.js +51 -0
  126. package/emotion/es/components/CodeField/CodeField.types.js +1 -0
  127. package/emotion/es/components/CodeField/index.js +3 -0
  128. package/emotion/es/components/CodeField/utils/constants.js +6 -0
  129. package/emotion/es/components/CodeField/utils/handleCodeError.js +52 -0
  130. package/emotion/es/components/CodeField/utils/handleItemError.js +50 -0
  131. package/emotion/es/components/CodeField/utils/index.js +3 -0
  132. package/emotion/es/components/CodeField/utils/initialValuesHelper.js +24 -0
  133. package/emotion/es/components/CodeField/variations/_disabled/base.js +3 -0
  134. package/emotion/es/components/CodeField/variations/_disabled/tokens.json +4 -0
  135. package/emotion/es/components/CodeField/variations/_shape/base.js +4 -0
  136. package/emotion/es/components/CodeField/variations/_shape/tokens.json +1 -0
  137. package/emotion/es/components/CodeField/variations/_size/base.js +4 -0
  138. package/emotion/es/components/CodeField/variations/_size/tokens.json +19 -0
  139. package/emotion/es/components/CodeField/variations/_view/base.js +4 -0
  140. package/emotion/es/components/CodeField/variations/_view/tokens.json +0 -0
  141. package/emotion/es/components/List/List.js +3 -8
  142. package/emotion/es/components/List/List.styles.js +10 -2
  143. package/emotion/es/components/List/List.tokens.js +5 -2
  144. package/emotion/es/components/List/ui/ListItem.js +2 -1
  145. package/emotion/es/components/List/ui/ListItem.styles.js +3 -3
  146. package/emotion/es/components/List/variations/_disabled/base.js +3 -1
  147. package/emotion/es/components/List/variations/_size/base.js +2 -1
  148. package/emotion/es/components/List/variations/_view/base.js +3 -1
  149. package/emotion/es/components/Notification/Notification.js +5 -1
  150. package/emotion/es/components/Notification/Notification.styles.js +43 -36
  151. package/emotion/es/components/Notification/Notification.template-doc.mdx +44 -0
  152. package/emotion/es/components/Notification/variations/_layout/base.js +1 -1
  153. package/emotion/es/components/NumberFormat/NumberFormat.js +2 -7
  154. package/emotion/es/components/NumberInput/ui/Input/Input.js +0 -3
  155. package/emotion/es/components/TextField/TextField.template-doc.mdx +16 -1
  156. package/emotion/es/examples/fixtures/Notification.js +1 -1
  157. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
  158. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
  159. package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  160. package/emotion/es/examples/plasma_b2c/components/List/List.config.js +8 -13
  161. package/emotion/es/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  162. package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  163. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
  164. package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  165. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
  166. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
  167. package/emotion/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  168. package/emotion/es/examples/plasma_web/components/List/List.config.js +8 -13
  169. package/emotion/es/examples/plasma_web/components/List/List.stories.tsx +1 -0
  170. package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  171. package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +23 -22
  172. package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  173. package/emotion/es/index.js +1 -0
  174. package/es/components/CodeField/CodeField.css +14 -0
  175. package/es/components/CodeField/CodeField.js +280 -0
  176. package/es/components/CodeField/CodeField.js.map +1 -0
  177. package/es/components/CodeField/CodeField.styles.js +48 -0
  178. package/es/components/CodeField/CodeField.styles.js.map +1 -0
  179. package/es/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
  180. package/es/components/CodeField/CodeField.tokens.js +54 -0
  181. package/es/components/CodeField/CodeField.tokens.js.map +1 -0
  182. package/es/components/CodeField/utils/constants.js +9 -0
  183. package/es/components/CodeField/utils/constants.js.map +1 -0
  184. package/es/components/CodeField/utils/handleCodeError.js +51 -0
  185. package/es/components/CodeField/utils/handleCodeError.js.map +1 -0
  186. package/es/components/CodeField/utils/handleItemError.js +49 -0
  187. package/es/components/CodeField/utils/handleItemError.js.map +1 -0
  188. package/es/components/CodeField/utils/initialValuesHelper.js +27 -0
  189. package/es/components/CodeField/utils/initialValuesHelper.js.map +1 -0
  190. package/es/components/{List/variations/_variant → CodeField/variations/_disabled}/base.js +2 -2
  191. package/es/components/CodeField/variations/_disabled/base.js.map +1 -0
  192. package/es/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
  193. package/es/components/CodeField/variations/_shape/base.js +5 -0
  194. package/es/components/CodeField/variations/_shape/base.js.map +1 -0
  195. package/es/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
  196. package/es/components/CodeField/variations/_size/base.js +5 -0
  197. package/es/components/CodeField/variations/_size/base.js.map +1 -0
  198. package/es/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
  199. package/es/components/CodeField/variations/_view/base.js +5 -0
  200. package/es/components/CodeField/variations/_view/base.js.map +1 -0
  201. package/es/components/CodeField/variations/_view/base_9a5yza.css +1 -0
  202. package/es/components/List/List.css +7 -1
  203. package/es/components/List/List.js +5 -10
  204. package/es/components/List/List.js.map +1 -1
  205. package/es/components/List/List.styles.js +1 -1
  206. package/es/components/List/List.styles.js.map +1 -1
  207. package/es/components/List/List.styles_97b8jq.css +1 -0
  208. package/es/components/List/List.tokens.js +5 -2
  209. package/es/components/List/List.tokens.js.map +1 -1
  210. package/es/components/List/ui/ListItem.css +2 -2
  211. package/es/components/List/ui/ListItem.js +2 -1
  212. package/es/components/List/ui/ListItem.js.map +1 -1
  213. package/es/components/List/ui/ListItem.styles.js +1 -1
  214. package/es/components/List/ui/ListItem.styles.js.map +1 -1
  215. package/es/components/List/ui/ListItem.styles_106alid.css +2 -0
  216. package/es/components/List/variations/_disabled/base.js +1 -1
  217. package/es/components/List/variations/_disabled/base.js.map +1 -1
  218. package/es/components/List/variations/_disabled/base_1p96e1z.css +1 -0
  219. package/es/components/List/variations/_size/base.js +1 -1
  220. package/es/components/List/variations/_size/base.js.map +1 -1
  221. package/es/components/List/variations/_size/base_jq4nc8.css +1 -0
  222. package/es/components/List/variations/_view/base.js +1 -1
  223. package/es/components/List/variations/_view/base.js.map +1 -1
  224. package/es/components/List/variations/_view/base_1fsqflm.css +1 -0
  225. package/es/components/Notification/Notification.css +12 -12
  226. package/es/components/Notification/Notification.js +5 -1
  227. package/es/components/Notification/Notification.js.map +1 -1
  228. package/es/components/Notification/Notification.styles.js +63 -48
  229. package/es/components/Notification/Notification.styles.js.map +1 -1
  230. package/es/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
  231. package/es/components/Notification/Notification.types.js.map +1 -1
  232. package/es/components/Notification/NotificationsProvider.css +11 -11
  233. package/es/components/Notification/variations/_layout/base.js +1 -1
  234. package/es/components/Notification/variations/_layout/base.js.map +1 -1
  235. package/es/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
  236. package/es/components/NumberFormat/NumberFormat.js +2 -7
  237. package/es/components/NumberFormat/NumberFormat.js.map +1 -1
  238. package/es/components/NumberInput/ui/Input/Input.js +0 -3
  239. package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
  240. package/es/index.css +36 -15
  241. package/es/index.js +3 -0
  242. package/es/index.js.map +1 -1
  243. package/package.json +2 -2
  244. package/styled-components/cjs/components/CodeField/CodeField.js +299 -0
  245. package/styled-components/cjs/components/CodeField/CodeField.styles.js +38 -0
  246. package/styled-components/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
  247. package/styled-components/cjs/components/CodeField/CodeField.tokens.js +57 -0
  248. package/styled-components/cjs/components/CodeField/CodeField.types.js +5 -0
  249. package/styled-components/cjs/components/CodeField/index.js +50 -0
  250. package/styled-components/cjs/components/CodeField/utils/constants.js +12 -0
  251. package/styled-components/cjs/components/CodeField/utils/handleCodeError.js +58 -0
  252. package/styled-components/cjs/components/CodeField/utils/handleItemError.js +56 -0
  253. package/styled-components/cjs/components/CodeField/utils/index.js +38 -0
  254. package/styled-components/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
  255. package/styled-components/cjs/components/{List/variations/_variant → CodeField/variations/_disabled}/base.js +2 -1
  256. package/styled-components/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
  257. package/styled-components/cjs/components/CodeField/variations/_shape/base.js +10 -0
  258. package/styled-components/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
  259. package/styled-components/cjs/components/CodeField/variations/_size/base.js +10 -0
  260. package/styled-components/cjs/components/CodeField/variations/_size/tokens.json +19 -0
  261. package/styled-components/cjs/components/CodeField/variations/_view/base.js +10 -0
  262. package/styled-components/cjs/components/CodeField/variations/_view/tokens.json +0 -0
  263. package/styled-components/cjs/components/List/List.js +10 -14
  264. package/styled-components/cjs/components/List/List.styles.js +1 -2
  265. package/styled-components/cjs/components/List/List.tokens.js +5 -2
  266. package/styled-components/cjs/components/List/ui/ListItem.js +2 -1
  267. package/styled-components/cjs/components/List/ui/ListItem.styles.js +1 -1
  268. package/styled-components/cjs/components/List/variations/_disabled/base.js +3 -1
  269. package/styled-components/cjs/components/List/variations/_size/base.js +2 -1
  270. package/styled-components/cjs/components/List/variations/_view/base.js +3 -1
  271. package/styled-components/cjs/components/Notification/Notification.js +5 -1
  272. package/styled-components/cjs/components/Notification/Notification.styles.js +33 -26
  273. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +44 -0
  274. package/styled-components/cjs/components/Notification/variations/_layout/base.js +1 -1
  275. package/styled-components/cjs/components/NumberFormat/NumberFormat.js +2 -7
  276. package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +0 -3
  277. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +16 -1
  278. package/styled-components/cjs/examples/fixtures/Notification.js +1 -1
  279. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
  280. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
  281. package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  282. package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js +8 -13
  283. package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  284. package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  285. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  286. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  287. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
  288. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
  289. package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  290. package/styled-components/cjs/examples/plasma_web/components/List/List.config.js +8 -13
  291. package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx +1 -0
  292. package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  293. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  294. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  295. package/styled-components/cjs/index.js +11 -0
  296. package/styled-components/es/components/CodeField/CodeField.js +290 -0
  297. package/styled-components/es/components/CodeField/CodeField.styles.js +30 -0
  298. package/styled-components/es/components/CodeField/CodeField.template-doc.mdx +150 -0
  299. package/styled-components/es/components/CodeField/CodeField.tokens.js +51 -0
  300. package/styled-components/es/components/CodeField/CodeField.types.js +1 -0
  301. package/styled-components/es/components/CodeField/index.js +3 -0
  302. package/styled-components/es/components/CodeField/utils/constants.js +6 -0
  303. package/styled-components/es/components/CodeField/utils/handleCodeError.js +52 -0
  304. package/styled-components/es/components/CodeField/utils/handleItemError.js +50 -0
  305. package/styled-components/es/components/CodeField/utils/index.js +3 -0
  306. package/styled-components/es/components/CodeField/utils/initialValuesHelper.js +24 -0
  307. package/styled-components/es/components/CodeField/variations/_disabled/base.js +3 -0
  308. package/styled-components/es/components/CodeField/variations/_disabled/tokens.json +4 -0
  309. package/styled-components/es/components/CodeField/variations/_shape/base.js +4 -0
  310. package/styled-components/es/components/CodeField/variations/_shape/tokens.json +1 -0
  311. package/styled-components/es/components/CodeField/variations/_size/base.js +4 -0
  312. package/styled-components/es/components/CodeField/variations/_size/tokens.json +19 -0
  313. package/styled-components/es/components/CodeField/variations/_view/base.js +4 -0
  314. package/styled-components/es/components/CodeField/variations/_view/tokens.json +0 -0
  315. package/styled-components/es/components/List/List.js +3 -8
  316. package/styled-components/es/components/List/List.styles.js +1 -2
  317. package/styled-components/es/components/List/List.tokens.js +5 -2
  318. package/styled-components/es/components/List/ui/ListItem.js +2 -1
  319. package/styled-components/es/components/List/ui/ListItem.styles.js +2 -2
  320. package/styled-components/es/components/List/variations/_disabled/base.js +3 -1
  321. package/styled-components/es/components/List/variations/_size/base.js +2 -1
  322. package/styled-components/es/components/List/variations/_view/base.js +3 -1
  323. package/styled-components/es/components/Notification/Notification.js +5 -1
  324. package/styled-components/es/components/Notification/Notification.styles.js +33 -26
  325. package/styled-components/es/components/Notification/Notification.template-doc.mdx +44 -0
  326. package/styled-components/es/components/Notification/variations/_layout/base.js +1 -1
  327. package/styled-components/es/components/NumberFormat/NumberFormat.js +2 -7
  328. package/styled-components/es/components/NumberInput/ui/Input/Input.js +0 -3
  329. package/styled-components/es/components/TextField/TextField.template-doc.mdx +16 -1
  330. package/styled-components/es/examples/fixtures/Notification.js +1 -1
  331. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
  332. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
  333. package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
  334. package/styled-components/es/examples/plasma_b2c/components/List/List.config.js +8 -13
  335. package/styled-components/es/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
  336. package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
  337. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
  338. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
  339. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
  340. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
  341. package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
  342. package/styled-components/es/examples/plasma_web/components/List/List.config.js +8 -13
  343. package/styled-components/es/examples/plasma_web/components/List/List.stories.tsx +1 -0
  344. package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
  345. package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -6
  346. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
  347. package/styled-components/es/index.js +1 -0
  348. package/types/components/CodeField/CodeField.d.ts +69 -0
  349. package/types/components/CodeField/CodeField.d.ts.map +1 -0
  350. package/types/components/CodeField/CodeField.styles.d.ts +11 -0
  351. package/types/components/CodeField/CodeField.styles.d.ts.map +1 -0
  352. package/types/components/CodeField/CodeField.tokens.d.ts +52 -0
  353. package/types/components/CodeField/CodeField.tokens.d.ts.map +1 -0
  354. package/types/components/CodeField/CodeField.types.d.ts +93 -0
  355. package/types/components/CodeField/CodeField.types.d.ts.map +1 -0
  356. package/types/components/CodeField/index.d.ts +4 -0
  357. package/types/components/CodeField/index.d.ts.map +1 -0
  358. package/types/components/CodeField/utils/constants.d.ts +7 -0
  359. package/types/components/CodeField/utils/constants.d.ts.map +1 -0
  360. package/types/components/CodeField/utils/handleCodeError.d.ts +15 -0
  361. package/types/components/CodeField/utils/handleCodeError.d.ts.map +1 -0
  362. package/types/components/CodeField/utils/handleItemError.d.ts +14 -0
  363. package/types/components/CodeField/utils/handleItemError.d.ts.map +1 -0
  364. package/types/components/CodeField/utils/index.d.ts +4 -0
  365. package/types/components/CodeField/utils/index.d.ts.map +1 -0
  366. package/types/components/CodeField/utils/initialValuesHelper.d.ts +4 -0
  367. package/types/components/CodeField/utils/initialValuesHelper.d.ts.map +1 -0
  368. package/types/components/CodeField/variations/_disabled/base.d.ts.map +1 -0
  369. package/types/components/CodeField/variations/_shape/base.d.ts +2 -0
  370. package/types/components/CodeField/variations/_shape/base.d.ts.map +1 -0
  371. package/types/components/CodeField/variations/_size/base.d.ts +2 -0
  372. package/types/components/CodeField/variations/_size/base.d.ts.map +1 -0
  373. package/types/components/CodeField/variations/_view/base.d.ts +2 -0
  374. package/types/components/CodeField/variations/_view/base.d.ts.map +1 -0
  375. package/types/components/List/List.d.ts +8 -15
  376. package/types/components/List/List.d.ts.map +1 -1
  377. package/types/components/List/List.styles.d.ts.map +1 -1
  378. package/types/components/List/List.tokens.d.ts +4 -1
  379. package/types/components/List/List.tokens.d.ts.map +1 -1
  380. package/types/components/List/List.types.d.ts +4 -6
  381. package/types/components/List/List.types.d.ts.map +1 -1
  382. package/types/components/List/ui/ListItem.d.ts.map +1 -1
  383. package/types/components/List/ui/ListItem.styles.d.ts +1 -3
  384. package/types/components/List/ui/ListItem.styles.d.ts.map +1 -1
  385. package/types/components/List/ui/ListItem.types.d.ts +2 -3
  386. package/types/components/List/ui/ListItem.types.d.ts.map +1 -1
  387. package/types/components/List/variations/_disabled/base.d.ts.map +1 -1
  388. package/types/components/List/variations/_size/base.d.ts.map +1 -1
  389. package/types/components/List/variations/_view/base.d.ts.map +1 -1
  390. package/types/components/Notification/Notification.d.ts.map +1 -1
  391. package/types/components/Notification/Notification.styles.d.ts +3 -1
  392. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  393. package/types/components/Notification/Notification.types.d.ts +9 -0
  394. package/types/components/Notification/Notification.types.d.ts.map +1 -1
  395. package/types/components/NumberFormat/NumberFormat.d.ts.map +1 -1
  396. package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
  397. package/types/index.d.ts +1 -0
  398. package/types/index.d.ts.map +1 -1
  399. package/cjs/components/List/List.styles_9yg2yl.css +0 -1
  400. package/cjs/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
  401. package/cjs/components/List/variations/_disabled/base_x642ct.css +0 -1
  402. package/cjs/components/List/variations/_size/base_x642ct.css +0 -1
  403. package/cjs/components/List/variations/_variant/base.js.map +0 -1
  404. package/cjs/components/List/variations/_variant/base_x642ct.css +0 -1
  405. package/cjs/components/List/variations/_view/base_x642ct.css +0 -1
  406. package/cjs/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
  407. package/emotion/cjs/components/List/variations/_variant/base.js +0 -8
  408. package/emotion/cjs/components/List/variations/_variant/tokens.json +0 -1
  409. package/emotion/es/components/List/variations/_variant/base.js +0 -2
  410. package/emotion/es/components/List/variations/_variant/tokens.json +0 -1
  411. package/es/components/List/List.styles_9yg2yl.css +0 -1
  412. package/es/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
  413. package/es/components/List/variations/_disabled/base_x642ct.css +0 -1
  414. package/es/components/List/variations/_size/base_x642ct.css +0 -1
  415. package/es/components/List/variations/_variant/base.js.map +0 -1
  416. package/es/components/List/variations/_variant/base_x642ct.css +0 -1
  417. package/es/components/List/variations/_view/base_x642ct.css +0 -1
  418. package/es/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
  419. package/styled-components/cjs/components/List/variations/_variant/tokens.json +0 -1
  420. package/styled-components/es/components/List/variations/_variant/base.js +0 -2
  421. package/styled-components/es/components/List/variations/_variant/tokens.json +0 -1
  422. package/types/components/List/variations/_variant/base.d.ts.map +0 -1
  423. /package/types/components/{List/variations/_variant → CodeField/variations/_disabled}/base.d.ts +0 -0
@@ -0,0 +1,107 @@
1
+ import React, { ComponentProps, useState } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { action } from '@storybook/addon-actions';
4
+ import { getConfigVariations } from '@salutejs/plasma-sb-utils';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+
8
+ import { CodeField } from './CodeField';
9
+ import { config } from './CodeField.config';
10
+
11
+ const onChange = action('onChange');
12
+ const onFullCodeEnter = action('onFullCodeEnter');
13
+
14
+ const { views, sizes } = getConfigVariations(config);
15
+ const codeLengths = [4, 5, 6];
16
+ const shapes = ['default', 'segmented'];
17
+ const captionAlignVariants = ['left', 'center'];
18
+ const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
19
+ const codeErrorBehaviorVariants = ['remove-code', 'keep'];
20
+
21
+ const meta: Meta<typeof CodeField> = {
22
+ title: 'b2c/Data Entry/CodeField',
23
+ component: CodeField,
24
+ decorators: [WithTheme],
25
+ argTypes: {
26
+ view: {
27
+ options: views,
28
+ control: {
29
+ type: 'select',
30
+ },
31
+ },
32
+ size: {
33
+ options: sizes,
34
+ control: {
35
+ type: 'inline-radio',
36
+ },
37
+ },
38
+ shape: {
39
+ options: shapes,
40
+ control: {
41
+ type: 'inline-radio',
42
+ },
43
+ },
44
+ captionAlign: {
45
+ options: captionAlignVariants,
46
+ control: {
47
+ type: 'inline-radio',
48
+ },
49
+ },
50
+ codeLength: {
51
+ options: codeLengths,
52
+ control: {
53
+ type: 'inline-radio',
54
+ },
55
+ },
56
+ itemErrorBehavior: {
57
+ options: itemErrorBehaviorVariants,
58
+ control: {
59
+ type: 'inline-radio',
60
+ },
61
+ },
62
+ codeErrorBehavior: {
63
+ options: codeErrorBehaviorVariants,
64
+ control: {
65
+ type: 'inline-radio',
66
+ },
67
+ },
68
+ },
69
+ parameters: {
70
+ controls: {
71
+ exclude: ['view'],
72
+ },
73
+ },
74
+ };
75
+
76
+ export default meta;
77
+
78
+ type StoryPropsDefault = ComponentProps<typeof CodeField>;
79
+
80
+ const StoryDefault = (args: StoryPropsDefault) => {
81
+ const [value, setValue] = useState('');
82
+
83
+ const handleChange = (newValue: string) => {
84
+ setValue(newValue);
85
+ onChange(newValue);
86
+ };
87
+
88
+ return <CodeField {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
89
+ };
90
+
91
+ export const Default: StoryObj<StoryPropsDefault> = {
92
+ args: {
93
+ view: 'default',
94
+ size: 'm',
95
+ shape: 'default',
96
+ codeLength: 6,
97
+ caption: 'Caption',
98
+ captionAlign: 'center',
99
+ width: '',
100
+ isError: false,
101
+ itemErrorBehavior: 'remove-symbol',
102
+ codeErrorBehavior: 'keep',
103
+ autoFocus: true,
104
+ disabled: false,
105
+ },
106
+ render: StoryDefault,
107
+ };
@@ -3,26 +3,21 @@ import { listTokens } from "../../../../components/List";
3
3
  export var config = {
4
4
  defaults: {
5
5
  view: 'default',
6
- size: 's',
7
- variant: 'normal'
6
+ size: 's'
8
7
  },
9
8
  variations: {
10
9
  view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], listTokens.listItemColor, listTokens.listItemColorHover, listTokens.listItemBackground, listTokens.listItemBackgroundHover, listTokens.listItemBorderColor, listTokens.listItemBorderColorHover)
10
+ "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;", ":0.4;"], listTokens.listItemColor, listTokens.listItemColorHover, listTokens.listItemBackground, listTokens.listItemBackgroundHover, listTokens.listItemBorderColor, listTokens.listItemBorderColorHover, listTokens.listDisabledOpacity)
12
11
  },
13
12
  size: {
14
- xs: /*#__PURE__*/css(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
15
- s: /*#__PURE__*/css(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
16
- m: /*#__PURE__*/css(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
17
- l: /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
18
- xl: /*#__PURE__*/css(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight)
19
- },
20
- variant: {
21
- normal: /*#__PURE__*/css(["", ":0.4;", ":0rem;"], listTokens.listDisabledOpacity, listTokens.listItemVariantDifference),
22
- tight: /*#__PURE__*/css(["", ":0.25rem;", ":0.4;"], listTokens.listItemVariantDifference, listTokens.listDisabledOpacity)
13
+ xs: /*#__PURE__*/css(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
14
+ s: /*#__PURE__*/css(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
15
+ m: /*#__PURE__*/css(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
16
+ l: /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
17
+ xl: /*#__PURE__*/css(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight)
23
18
  },
24
19
  disabled: {
25
- "true": /*#__PURE__*/css(["", ":red;"], listTokens.listItemBackground)
20
+ "true": /*#__PURE__*/css([""])
26
21
  }
27
22
  }
28
23
  };
@@ -44,6 +44,7 @@ export const Default: Story = {
44
44
  view: 'default',
45
45
  size: 'm',
46
46
  variant: 'normal',
47
+ disabled: false,
47
48
  },
48
49
  render: ({ view, size, ...rest }: StoryProps) => {
49
50
  return (
@@ -167,12 +167,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
167
167
  placement?: NotificationPlacement;
168
168
  };
169
169
 
170
- const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
170
+ const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
171
171
  const count = useRef(0);
172
172
  const handleClick = useCallback(() => {
173
173
  addNotification(
174
174
  {
175
175
  icon: <IconDisclosureRight color="inherit" />,
176
+ width,
177
+ maxWidth,
176
178
  ...rest,
177
179
  ...getNotificationProps(count.current),
178
180
  },
@@ -210,6 +212,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
210
212
  role: 'alert',
211
213
  layout: 'vertical',
212
214
  placement: 'bottom-right',
215
+ width: '',
216
+ maxWidth: '',
213
217
  },
214
218
  render: (args) => <StoryLiveDemo {...args} />,
215
219
  };
@@ -14,6 +14,7 @@ export var config = {
14
14
  negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.clearColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.clearPlaceholderColor, tokens.clearPlaceholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
15
15
  },
16
16
  size: {
17
+ xl: /*#__PURE__*/css(["", ":4rem;", ":1.3125rem 1.125rem;", ":0.375rem;", ":1rem;", ":-0.0625rem 0.5rem -0.0625rem 0rem;", ":-0.0625rem 0rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.82rem -2.938rem auto auto;", ":0.82rem -2.063rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.8125rem 0 0.125rem 0;", ":1.813rem 0 0.813rem 0;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.125rem;", ":1rem;", ":0.625rem;", ":auto;", ":3.25rem;", ":0 0.75rem 0 1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.75rem auto auto -0.875rem;", ":1.75rem -0.875rem auto auto;", ":1.75rem -2.488rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.chipGap, tokens.chipMarginRight, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight),
17
18
  l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":-0.0625rem -0.438rem -0.0625rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.563rem -2.938rem auto auto;", ":0.563rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0 0.75rem 0 1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.5rem auto auto -0.875rem;", ":1.5rem -0.875rem auto auto;", ":1.5rem -2.488rem auto auto;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.rightContentWithHintMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight, tokens.textBeforeMargin, tokens.textAfterMargin),
18
19
  m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":-0.125rem -0.438rem -0.125rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.312rem -2.813rem auto auto;", ":0.312rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0 0.625rem 0 0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.6875rem auto auto;", ":1.25rem auto auto -0.875rem;", ":1.25rem -0.875rem auto auto;", ":1.25rem -2.488rem auto auto;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.rightContentWithHintMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight, tokens.textBeforeMargin, tokens.textAfterMargin),
19
20
  s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":-0.1875rem -0.438rem -0.1875rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.062rem -2.688rem auto auto;", ":0.062rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0 0.5rem 0 0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.3125rem auto auto -0.6875rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.063rem auto auto -0.75rem;", ":1.063rem -0.75rem auto auto;", ":1.063rem -2.238rem auto auto;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.rightContentWithHintMargin, tokens.contentRightWrapperGap, tokens.contentRightWrapperMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.clearHintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, tokens.clearIndicatorHintInnerRight, tokens.textBeforeMargin, tokens.textAfterMargin),
@@ -35,7 +36,7 @@ export var config = {
35
36
  negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipCloseIconColor, tokens.chipOpacityReadonly)
36
37
  },
37
38
  hintView: {
38
- "default": /*#__PURE__*/css(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card);"], tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
39
+ "default": /*#__PURE__*/css(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card-brightness);"], tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
39
40
  },
40
41
  hintSize: {
41
42
  m: /*#__PURE__*/css(["", ":0.6875rem;", ":0.875rem;", ":0.6875rem;", ":0.875rem;", ":2.5rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.375rem;", ":1.25rem;", ":1.25rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");", ":0.5rem;", ":0.625rem;"], tokens.tooltipPaddingTop, tokens.tooltipPaddingRight, tokens.tooltipPaddingBottom, tokens.tooltipPaddingLeft, tokens.tooltipMinHeight, tokens.tooltipBorderRadius, tokens.tooltipTextFontFamily, tokens.tooltipTextFontSize, tokens.tooltipTextFontStyle, tokens.tooltipTextFontWeight, tokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLineHeight, tokens.tooltipContentLeftMargin, tokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskImage, tokens.tooltipArrowHeight, tokens.tooltipArrowEdgeMargin),
@@ -1,13 +1,14 @@
1
1
  import React, { ComponentProps, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
- import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
4
+ import { IconPlaceholder, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { WithTheme } from '../../../_helpers';
7
7
  import { IconCross, IconLock } from '../../../../components/_Icon';
8
8
  import type { PopoverPlacement } from '../Popover/Popover';
9
9
 
10
10
  import { TextField } from './TextField';
11
+ import { config } from './TextField.config';
11
12
 
12
13
  const onChange = action('onChange');
13
14
  const onFocus = action('onFocus');
@@ -15,8 +16,8 @@ const onBlur = action('onBlur');
15
16
  const onSearch = action('onSearch');
16
17
  const onChipsChange = action('onChipsChange');
17
18
 
18
- const sizes = ['l', 'm', 's', 'xs'];
19
- const views = ['default', 'positive', 'warning', 'negative'];
19
+ const { views, sizes } = getConfigVariations(config);
20
+
20
21
  const chipViews = ['default', 'secondary', 'accent', 'positive', 'warning', 'negative'];
21
22
  const hintViews = ['default'];
22
23
  const hintSizes = ['m', 's'];
@@ -63,6 +64,10 @@ const meta: Meta<typeof TextField> = {
63
64
  control: {
64
65
  type: 'select',
65
66
  },
67
+ if: {
68
+ arg: 'optional',
69
+ truthy: false,
70
+ },
66
71
  },
67
72
  required: {
68
73
  control: {
@@ -328,7 +333,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
328
333
  },
329
334
  parameters: {
330
335
  controls: {
331
- exclude: ['chipType'],
336
+ exclude: ['chipType', 'chipView'],
332
337
  },
333
338
  },
334
339
  render: (args) => <StoryDemo {...args} />,
@@ -0,0 +1,25 @@
1
+ import { css } from 'styled-components';
2
+ import { codeFieldTokens as tokens } from "../../../../components/CodeField";
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'l',
7
+ shape: 'default'
8
+ },
9
+ variations: {
10
+ view: {
11
+ "default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-negative);"], tokens.caretColor, tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.borderErrorColor)
12
+ },
13
+ size: {
14
+ l: /*#__PURE__*/css(["", ":0.875rem;", ":0.125rem;", ":0.25rem;", ":2.75rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.063rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.codeItemWidth, tokens.codeItemHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.borderWidth, tokens.borderRadius, tokens.borderRadiusSegmented, tokens.segmentedSideBorderRadius),
15
+ m: /*#__PURE__*/css(["", ":0.75rem;", ":0.125rem;", ":0.25rem;", ":2.375rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.063rem;", ":0.75rem;", ":0.25rem;", ":0.75rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.codeItemWidth, tokens.codeItemHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.borderWidth, tokens.borderRadius, tokens.borderRadiusSegmented, tokens.segmentedSideBorderRadius)
16
+ },
17
+ shape: {
18
+ "default": /*#__PURE__*/css([""]),
19
+ segmented: /*#__PURE__*/css([""])
20
+ },
21
+ disabled: {
22
+ "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
23
+ }
24
+ }
25
+ };
@@ -0,0 +1,5 @@
1
+ import { codeFieldConfig } from "../../../../components/CodeField";
2
+ import { component, mergeConfig } from "../../../../engines";
3
+ import { config } from "./CodeField.config";
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(codeFieldConfig, config);
5
+ export var CodeField = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,107 @@
1
+ import React, { ComponentProps, useState } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { action } from '@storybook/addon-actions';
4
+ import { getConfigVariations } from '@salutejs/plasma-sb-utils';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+
8
+ import { CodeField } from './CodeField';
9
+ import { config } from './CodeField.config';
10
+
11
+ const onChange = action('onChange');
12
+ const onFullCodeEnter = action('onFullCodeEnter');
13
+
14
+ const { views, sizes } = getConfigVariations(config);
15
+ const codeLengths = [4, 5, 6];
16
+ const shapes = ['default', 'segmented'];
17
+ const captionAlignVariants = ['left', 'center'];
18
+ const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
19
+ const codeErrorBehaviorVariants = ['remove-code', 'keep'];
20
+
21
+ const meta: Meta<typeof CodeField> = {
22
+ title: 'web/Data Entry/CodeField',
23
+ component: CodeField,
24
+ decorators: [WithTheme],
25
+ argTypes: {
26
+ view: {
27
+ options: views,
28
+ control: {
29
+ type: 'select',
30
+ },
31
+ },
32
+ size: {
33
+ options: sizes,
34
+ control: {
35
+ type: 'inline-radio',
36
+ },
37
+ },
38
+ shape: {
39
+ options: shapes,
40
+ control: {
41
+ type: 'inline-radio',
42
+ },
43
+ },
44
+ captionAlign: {
45
+ options: captionAlignVariants,
46
+ control: {
47
+ type: 'inline-radio',
48
+ },
49
+ },
50
+ codeLength: {
51
+ options: codeLengths,
52
+ control: {
53
+ type: 'inline-radio',
54
+ },
55
+ },
56
+ itemErrorBehavior: {
57
+ options: itemErrorBehaviorVariants,
58
+ control: {
59
+ type: 'inline-radio',
60
+ },
61
+ },
62
+ codeErrorBehavior: {
63
+ options: codeErrorBehaviorVariants,
64
+ control: {
65
+ type: 'inline-radio',
66
+ },
67
+ },
68
+ },
69
+ parameters: {
70
+ controls: {
71
+ exclude: ['view'],
72
+ },
73
+ },
74
+ };
75
+
76
+ export default meta;
77
+
78
+ type StoryPropsDefault = ComponentProps<typeof CodeField>;
79
+
80
+ const StoryDefault = (args: StoryPropsDefault) => {
81
+ const [value, setValue] = useState('');
82
+
83
+ const handleChange = (newValue: string) => {
84
+ setValue(newValue);
85
+ onChange(newValue);
86
+ };
87
+
88
+ return <CodeField {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
89
+ };
90
+
91
+ export const Default: StoryObj<StoryPropsDefault> = {
92
+ args: {
93
+ view: 'default',
94
+ size: 'm',
95
+ shape: 'default',
96
+ codeLength: 6,
97
+ caption: 'Caption',
98
+ captionAlign: 'center',
99
+ width: '',
100
+ isError: false,
101
+ itemErrorBehavior: 'remove-symbol',
102
+ codeErrorBehavior: 'keep',
103
+ autoFocus: true,
104
+ disabled: false,
105
+ },
106
+ render: StoryDefault,
107
+ };
@@ -3,26 +3,21 @@ import { listTokens } from "../../../../components/List";
3
3
  export var config = {
4
4
  defaults: {
5
5
  view: 'default',
6
- size: 's',
7
- variant: 'normal'
6
+ size: 's'
8
7
  },
9
8
  variations: {
10
9
  view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], listTokens.listItemColor, listTokens.listItemColorHover, listTokens.listItemBackground, listTokens.listItemBackgroundHover, listTokens.listItemBorderColor, listTokens.listItemBorderColorHover)
10
+ "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;", ":0.4;"], listTokens.listItemColor, listTokens.listItemColorHover, listTokens.listItemBackground, listTokens.listItemBackgroundHover, listTokens.listItemBorderColor, listTokens.listItemBorderColorHover, listTokens.listDisabledOpacity)
12
11
  },
13
12
  size: {
14
- xs: /*#__PURE__*/css(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
15
- s: /*#__PURE__*/css(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
16
- m: /*#__PURE__*/css(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
17
- l: /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
18
- xl: /*#__PURE__*/css(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight)
19
- },
20
- variant: {
21
- normal: /*#__PURE__*/css(["", ":0.4;", ":0rem;"], listTokens.listDisabledOpacity, listTokens.listItemVariantDifference),
22
- tight: /*#__PURE__*/css(["", ":0.25rem;", ":0.4;"], listTokens.listItemVariantDifference, listTokens.listDisabledOpacity)
13
+ xs: /*#__PURE__*/css(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
14
+ s: /*#__PURE__*/css(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
15
+ m: /*#__PURE__*/css(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
16
+ l: /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
17
+ xl: /*#__PURE__*/css(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemTightDifference, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight)
23
18
  },
24
19
  disabled: {
25
- "true": /*#__PURE__*/css(["", ":red;"], listTokens.listItemBackground)
20
+ "true": /*#__PURE__*/css([""])
26
21
  }
27
22
  }
28
23
  };
@@ -44,6 +44,7 @@ export const Default: Story = {
44
44
  view: 'default',
45
45
  size: 'm',
46
46
  variant: 'normal',
47
+ disabled: false,
47
48
  },
48
49
  render: ({ view, size, ...rest }: StoryProps) => {
49
50
  return (
@@ -170,12 +170,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
170
170
  placement?: NotificationPlacement;
171
171
  };
172
172
 
173
- const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
173
+ const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
174
174
  const count = useRef(0);
175
175
  const handleClick = useCallback(() => {
176
176
  addNotification(
177
177
  {
178
178
  icon: <IconDisclosureRight color="inherit" />,
179
+ width,
180
+ maxWidth,
179
181
  ...rest,
180
182
  ...getNotificationProps(count.current),
181
183
  },
@@ -213,6 +215,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
213
215
  role: 'alert',
214
216
  layout: 'vertical',
215
217
  placement: 'bottom-right',
218
+ width: '',
219
+ maxWidth: '',
216
220
  },
217
221
  render: (args) => <StoryLiveDemo {...args} />,
218
222
  };