@transferwise/components 0.0.0-experimental-26e03bf → 0.0.0-experimental-c82d979

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 (195) hide show
  1. package/build/calendarInput/CalendarInput.js +159 -0
  2. package/build/calendarInput/CalendarInput.js.map +1 -0
  3. package/build/{dateLookup/DateLookup.messages.js → calendarInput/CalendarInput.messages.js} +1 -1
  4. package/build/calendarInput/CalendarInput.messages.js.map +1 -0
  5. package/build/{dateLookup/DateLookup.messages.mjs → calendarInput/CalendarInput.messages.mjs} +1 -1
  6. package/build/calendarInput/CalendarInput.messages.mjs.map +1 -0
  7. package/build/calendarInput/CalendarInput.mjs +155 -0
  8. package/build/calendarInput/CalendarInput.mjs.map +1 -0
  9. package/build/{dateLookup → calendarInput}/dateHeader/DateHeader.js +4 -4
  10. package/build/calendarInput/dateHeader/DateHeader.js.map +1 -0
  11. package/build/{dateLookup → calendarInput}/dateHeader/DateHeader.mjs +1 -1
  12. package/build/calendarInput/dateHeader/DateHeader.mjs.map +1 -0
  13. package/build/{dateLookup → calendarInput}/dayCalendar/DayCalendar.js +2 -2
  14. package/build/calendarInput/dayCalendar/DayCalendar.js.map +1 -0
  15. package/build/{dateLookup → calendarInput}/dayCalendar/DayCalendar.mjs +1 -1
  16. package/build/calendarInput/dayCalendar/DayCalendar.mjs.map +1 -0
  17. package/build/calendarInput/dayCalendar/table/DayCalendarTable.js.map +1 -0
  18. package/build/calendarInput/dayCalendar/table/DayCalendarTable.mjs.map +1 -0
  19. package/build/calendarInput/getFocusableTime/getFocusableTime.js.map +1 -0
  20. package/build/calendarInput/getFocusableTime/getFocusableTime.mjs.map +1 -0
  21. package/build/calendarInput/getStartOfDay/getStartOfDay.js.map +1 -0
  22. package/build/calendarInput/getStartOfDay/getStartOfDay.mjs.map +1 -0
  23. package/build/{dateLookup → calendarInput}/monthCalendar/MonthCalendar.js +2 -2
  24. package/build/calendarInput/monthCalendar/MonthCalendar.js.map +1 -0
  25. package/build/{dateLookup → calendarInput}/monthCalendar/MonthCalendar.mjs +1 -1
  26. package/build/calendarInput/monthCalendar/MonthCalendar.mjs.map +1 -0
  27. package/build/calendarInput/monthCalendar/table/MonthCalendarTable.js.map +1 -0
  28. package/build/calendarInput/monthCalendar/table/MonthCalendarTable.mjs.map +1 -0
  29. package/build/{dateLookup → calendarInput}/tableLink/TableLink.js +2 -2
  30. package/build/calendarInput/tableLink/TableLink.js.map +1 -0
  31. package/build/{dateLookup → calendarInput}/tableLink/TableLink.mjs +1 -1
  32. package/build/calendarInput/tableLink/TableLink.mjs.map +1 -0
  33. package/build/{dateLookup → calendarInput}/yearCalendar/YearCalendar.js +2 -2
  34. package/build/calendarInput/yearCalendar/YearCalendar.js.map +1 -0
  35. package/build/{dateLookup → calendarInput}/yearCalendar/YearCalendar.mjs +1 -1
  36. package/build/calendarInput/yearCalendar/YearCalendar.mjs.map +1 -0
  37. package/build/calendarInput/yearCalendar/table/YearCalendarTable.js.map +1 -0
  38. package/build/calendarInput/yearCalendar/table/YearCalendarTable.mjs.map +1 -0
  39. package/build/dateLookup/DateLookup.js +28 -165
  40. package/build/dateLookup/DateLookup.js.map +1 -1
  41. package/build/dateLookup/DateLookup.mjs +29 -166
  42. package/build/dateLookup/DateLookup.mjs.map +1 -1
  43. package/build/index.js +2 -0
  44. package/build/index.js.map +1 -1
  45. package/build/index.mjs +1 -0
  46. package/build/index.mjs.map +1 -1
  47. package/build/main.css +97 -106
  48. package/build/prompt/InfoPrompt/InfoPrompt.js +1 -1
  49. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  50. package/build/prompt/InfoPrompt/InfoPrompt.mjs +2 -2
  51. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  52. package/build/styles/calendarInput/CalendarInput.css +83 -0
  53. package/build/styles/dateLookup/DateLookup.css +0 -90
  54. package/build/styles/main.css +97 -106
  55. package/build/types/calendarInput/CalendarInput.d.ts +13 -0
  56. package/build/types/calendarInput/CalendarInput.d.ts.map +1 -0
  57. package/build/types/{dateLookup/DateLookup.messages.d.ts → calendarInput/CalendarInput.messages.d.ts} +1 -1
  58. package/build/types/calendarInput/CalendarInput.messages.d.ts.map +1 -0
  59. package/build/types/calendarInput/dateHeader/DateHeader.d.ts.map +1 -0
  60. package/build/types/calendarInput/dateHeader/index.d.ts.map +1 -0
  61. package/build/types/calendarInput/dayCalendar/DayCalendar.d.ts.map +1 -0
  62. package/build/types/calendarInput/dayCalendar/index.d.ts.map +1 -0
  63. package/build/types/calendarInput/dayCalendar/table/DayCalendarTable.d.ts.map +1 -0
  64. package/build/types/calendarInput/dayCalendar/table/index.d.ts.map +1 -0
  65. package/build/types/calendarInput/getFocusableTime/getFocusableTime.d.ts.map +1 -0
  66. package/build/types/calendarInput/getStartOfDay/getStartOfDay.d.ts.map +1 -0
  67. package/build/types/calendarInput/getStartOfDay/index.d.ts.map +1 -0
  68. package/build/types/calendarInput/index.d.ts +3 -0
  69. package/build/types/calendarInput/index.d.ts.map +1 -0
  70. package/build/types/{dateLookup → calendarInput}/monthCalendar/MonthCalendar.d.ts +1 -1
  71. package/build/types/calendarInput/monthCalendar/MonthCalendar.d.ts.map +1 -0
  72. package/build/types/calendarInput/monthCalendar/index.d.ts.map +1 -0
  73. package/build/types/{dateLookup → calendarInput}/monthCalendar/table/MonthCalendarTable.d.ts +1 -1
  74. package/build/types/calendarInput/monthCalendar/table/MonthCalendarTable.d.ts.map +1 -0
  75. package/build/types/calendarInput/monthCalendar/table/index.d.ts.map +1 -0
  76. package/build/types/calendarInput/tableLink/TableLink.d.ts.map +1 -0
  77. package/build/types/calendarInput/tableLink/index.d.ts.map +1 -0
  78. package/build/types/{dateLookup → calendarInput}/yearCalendar/YearCalendar.d.ts +1 -1
  79. package/build/types/calendarInput/yearCalendar/YearCalendar.d.ts.map +1 -0
  80. package/build/types/calendarInput/yearCalendar/index.d.ts.map +1 -0
  81. package/build/types/{dateLookup → calendarInput}/yearCalendar/table/YearCalendarTable.d.ts +1 -1
  82. package/build/types/calendarInput/yearCalendar/table/YearCalendarTable.d.ts.map +1 -0
  83. package/build/types/calendarInput/yearCalendar/table/index.d.ts.map +1 -0
  84. package/build/types/dateLookup/DateLookup.d.ts +2 -25
  85. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  86. package/build/types/index.d.ts +2 -0
  87. package/build/types/index.d.ts.map +1 -1
  88. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +2 -3
  89. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
  90. package/package.json +3 -3
  91. package/src/calendarInput/CalendarInput.css +83 -0
  92. package/src/calendarInput/CalendarInput.less +79 -0
  93. package/src/calendarInput/CalendarInput.story.tsx +65 -0
  94. package/src/calendarInput/CalendarInput.test.tsx +140 -0
  95. package/src/calendarInput/CalendarInput.tsx +165 -0
  96. package/src/{dateLookup → calendarInput}/dateHeader/DateHeader.tsx +1 -1
  97. package/src/{dateLookup → calendarInput}/dayCalendar/DayCalendar.tsx +1 -1
  98. package/src/calendarInput/index.ts +2 -0
  99. package/src/{dateLookup → calendarInput}/monthCalendar/MonthCalendar.tsx +2 -2
  100. package/src/{dateLookup → calendarInput}/monthCalendar/table/MonthCalendarTable.tsx +1 -1
  101. package/src/{dateLookup → calendarInput}/tableLink/TableLink.tsx +1 -1
  102. package/src/{dateLookup → calendarInput}/yearCalendar/YearCalendar.tsx +2 -2
  103. package/src/{dateLookup → calendarInput}/yearCalendar/table/YearCalendarTable.tsx +1 -1
  104. package/src/dateLookup/DateLookup.css +0 -90
  105. package/src/dateLookup/DateLookup.less +0 -91
  106. package/src/dateLookup/DateLookup.test.tsx +0 -124
  107. package/src/dateLookup/DateLookup.tsx +31 -157
  108. package/src/index.ts +2 -0
  109. package/src/main.css +97 -106
  110. package/src/main.less +1 -0
  111. package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +0 -42
  112. package/src/prompt/InfoPrompt/InfoPrompt.test.tsx +1 -65
  113. package/src/prompt/InfoPrompt/InfoPrompt.tsx +4 -15
  114. package/build/dateLookup/DateLookup.messages.js.map +0 -1
  115. package/build/dateLookup/DateLookup.messages.mjs.map +0 -1
  116. package/build/dateLookup/dateHeader/DateHeader.js.map +0 -1
  117. package/build/dateLookup/dateHeader/DateHeader.mjs.map +0 -1
  118. package/build/dateLookup/dayCalendar/DayCalendar.js.map +0 -1
  119. package/build/dateLookup/dayCalendar/DayCalendar.mjs.map +0 -1
  120. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +0 -1
  121. package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs.map +0 -1
  122. package/build/dateLookup/getFocusableTime/getFocusableTime.js.map +0 -1
  123. package/build/dateLookup/getFocusableTime/getFocusableTime.mjs.map +0 -1
  124. package/build/dateLookup/getStartOfDay/getStartOfDay.js.map +0 -1
  125. package/build/dateLookup/getStartOfDay/getStartOfDay.mjs.map +0 -1
  126. package/build/dateLookup/monthCalendar/MonthCalendar.js.map +0 -1
  127. package/build/dateLookup/monthCalendar/MonthCalendar.mjs.map +0 -1
  128. package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js.map +0 -1
  129. package/build/dateLookup/monthCalendar/table/MonthCalendarTable.mjs.map +0 -1
  130. package/build/dateLookup/tableLink/TableLink.js.map +0 -1
  131. package/build/dateLookup/tableLink/TableLink.mjs.map +0 -1
  132. package/build/dateLookup/yearCalendar/YearCalendar.js.map +0 -1
  133. package/build/dateLookup/yearCalendar/YearCalendar.mjs.map +0 -1
  134. package/build/dateLookup/yearCalendar/table/YearCalendarTable.js.map +0 -1
  135. package/build/dateLookup/yearCalendar/table/YearCalendarTable.mjs.map +0 -1
  136. package/build/types/dateLookup/DateLookup.messages.d.ts.map +0 -1
  137. package/build/types/dateLookup/dateHeader/DateHeader.d.ts.map +0 -1
  138. package/build/types/dateLookup/dateHeader/index.d.ts.map +0 -1
  139. package/build/types/dateLookup/dayCalendar/DayCalendar.d.ts.map +0 -1
  140. package/build/types/dateLookup/dayCalendar/index.d.ts.map +0 -1
  141. package/build/types/dateLookup/dayCalendar/table/DayCalendarTable.d.ts.map +0 -1
  142. package/build/types/dateLookup/dayCalendar/table/index.d.ts.map +0 -1
  143. package/build/types/dateLookup/getFocusableTime/getFocusableTime.d.ts.map +0 -1
  144. package/build/types/dateLookup/getStartOfDay/getStartOfDay.d.ts.map +0 -1
  145. package/build/types/dateLookup/getStartOfDay/index.d.ts.map +0 -1
  146. package/build/types/dateLookup/monthCalendar/MonthCalendar.d.ts.map +0 -1
  147. package/build/types/dateLookup/monthCalendar/index.d.ts.map +0 -1
  148. package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts.map +0 -1
  149. package/build/types/dateLookup/monthCalendar/table/index.d.ts.map +0 -1
  150. package/build/types/dateLookup/tableLink/TableLink.d.ts.map +0 -1
  151. package/build/types/dateLookup/tableLink/index.d.ts.map +0 -1
  152. package/build/types/dateLookup/yearCalendar/YearCalendar.d.ts.map +0 -1
  153. package/build/types/dateLookup/yearCalendar/index.d.ts.map +0 -1
  154. package/build/types/dateLookup/yearCalendar/table/YearCalendarTable.d.ts.map +0 -1
  155. package/build/types/dateLookup/yearCalendar/table/index.d.ts.map +0 -1
  156. /package/build/{dateLookup → calendarInput}/dayCalendar/table/DayCalendarTable.js +0 -0
  157. /package/build/{dateLookup → calendarInput}/dayCalendar/table/DayCalendarTable.mjs +0 -0
  158. /package/build/{dateLookup → calendarInput}/getFocusableTime/getFocusableTime.js +0 -0
  159. /package/build/{dateLookup → calendarInput}/getFocusableTime/getFocusableTime.mjs +0 -0
  160. /package/build/{dateLookup → calendarInput}/getStartOfDay/getStartOfDay.js +0 -0
  161. /package/build/{dateLookup → calendarInput}/getStartOfDay/getStartOfDay.mjs +0 -0
  162. /package/build/{dateLookup → calendarInput}/monthCalendar/table/MonthCalendarTable.js +0 -0
  163. /package/build/{dateLookup → calendarInput}/monthCalendar/table/MonthCalendarTable.mjs +0 -0
  164. /package/build/{dateLookup → calendarInput}/yearCalendar/table/YearCalendarTable.js +0 -0
  165. /package/build/{dateLookup → calendarInput}/yearCalendar/table/YearCalendarTable.mjs +0 -0
  166. /package/build/types/{dateLookup → calendarInput}/dateHeader/DateHeader.d.ts +0 -0
  167. /package/build/types/{dateLookup → calendarInput}/dateHeader/index.d.ts +0 -0
  168. /package/build/types/{dateLookup → calendarInput}/dayCalendar/DayCalendar.d.ts +0 -0
  169. /package/build/types/{dateLookup → calendarInput}/dayCalendar/index.d.ts +0 -0
  170. /package/build/types/{dateLookup → calendarInput}/dayCalendar/table/DayCalendarTable.d.ts +0 -0
  171. /package/build/types/{dateLookup → calendarInput}/dayCalendar/table/index.d.ts +0 -0
  172. /package/build/types/{dateLookup → calendarInput}/getFocusableTime/getFocusableTime.d.ts +0 -0
  173. /package/build/types/{dateLookup → calendarInput}/getStartOfDay/getStartOfDay.d.ts +0 -0
  174. /package/build/types/{dateLookup → calendarInput}/getStartOfDay/index.d.ts +0 -0
  175. /package/build/types/{dateLookup → calendarInput}/monthCalendar/index.d.ts +0 -0
  176. /package/build/types/{dateLookup → calendarInput}/monthCalendar/table/index.d.ts +0 -0
  177. /package/build/types/{dateLookup → calendarInput}/tableLink/TableLink.d.ts +0 -0
  178. /package/build/types/{dateLookup → calendarInput}/tableLink/index.d.ts +0 -0
  179. /package/build/types/{dateLookup → calendarInput}/yearCalendar/index.d.ts +0 -0
  180. /package/build/types/{dateLookup → calendarInput}/yearCalendar/table/index.d.ts +0 -0
  181. /package/src/{dateLookup/DateLookup.messages.ts → calendarInput/CalendarInput.messages.ts} +0 -0
  182. /package/src/{dateLookup → calendarInput}/dateHeader/index.ts +0 -0
  183. /package/src/{dateLookup → calendarInput}/dayCalendar/index.ts +0 -0
  184. /package/src/{dateLookup → calendarInput}/dayCalendar/table/DayCalendarTable.tsx +0 -0
  185. /package/src/{dateLookup → calendarInput}/dayCalendar/table/index.ts +0 -0
  186. /package/src/{dateLookup → calendarInput}/getFocusableTime/getFocusable.test.ts +0 -0
  187. /package/src/{dateLookup → calendarInput}/getFocusableTime/getFocusableTime.tsx +0 -0
  188. /package/src/{dateLookup → calendarInput}/getStartOfDay/getStartOfDay.test.js +0 -0
  189. /package/src/{dateLookup → calendarInput}/getStartOfDay/getStartOfDay.tsx +0 -0
  190. /package/src/{dateLookup → calendarInput}/getStartOfDay/index.ts +0 -0
  191. /package/src/{dateLookup → calendarInput}/monthCalendar/index.ts +0 -0
  192. /package/src/{dateLookup → calendarInput}/monthCalendar/table/index.ts +0 -0
  193. /package/src/{dateLookup → calendarInput}/tableLink/index.ts +0 -0
  194. /package/src/{dateLookup → calendarInput}/yearCalendar/index.ts +0 -0
  195. /package/src/{dateLookup → calendarInput}/yearCalendar/table/index.ts +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { Children, HTMLAttributes, ReactNode, isValidElement, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description content for the prompt (required). Accepts plain text or rich content (ReactNode).\n * If the description contains an interactive element, the `action` prop must not be used simultaneously.\n */\n description: ReactNode;\n className?: string;\n /**\n * Sets the ARIA live region politeness level.\n * - `'polite'` — announced after the current speech (default)\n * - `'assertive'` — interrupts the current speech immediately\n * - `'off'` — disables the live region entirely\n * @default 'polite'\n */\n 'aria-live'?: AriaLive;\n };\n\n/**\n * `InfoPrompt` displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \\@wise/wds-codemods@latest info-prompt`**).\n *\n * Guidance can be found in the [design system](https://docs.wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'aria-live': ariaLive = 'polite',\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const announceOnChange = [\n title,\n Children.toArray(description)\n .map((child) =>\n isValidElement<{ children?: ReactNode }>(child) ? child.props.children : child,\n )\n .join(''),\n action?.label,\n ]\n .filter(Boolean)\n .join('|');\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return (\n <span className=\"wds-info-prompt__media\">\n <GiftBox />\n </span>\n );\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n // Render content directly in LiveRegion\n return (\n <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","announceOnChange","Children","toArray","map","child","isValidElement","props","children","join","label","filter","Boolean","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","asset","GiftBox","StatusIcon","size","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n className?: string;\n /**\n * Sets the ARIA live region politeness level.\n * - `'polite'` — announced after the current speech (default)\n * - `'assertive'` — interrupts the current speech immediately\n * - `'off'` — disables the live region entirely\n * @default 'polite'\n */\n 'aria-live'?: AriaLive;\n };\n\n/**\n * `InfoPrompt` displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \\@wise/wds-codemods@latest info-prompt`**).\n *\n * Guidance can be found in the [design system](https://docs.wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'aria-live': ariaLive = 'polite',\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return (\n <span className=\"wds-info-prompt__media\">\n <GiftBox />\n </span>\n );\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n // Render content directly in LiveRegion\n return (\n <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","announceOnChange","label","filter","Boolean","join","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","StatusIcon","size","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import { useState, Children, isValidElement } from 'react';
1
+ import { useState } from 'react';
2
2
  import '../../common/theme.mjs';
3
3
  import '../../common/direction.mjs';
4
4
  import '@transferwise/neptune-tokens';
@@ -43,7 +43,7 @@ const InfoPrompt = ({
43
43
  ...restProps
44
44
  }) => {
45
45
  const [shouldFire, setShouldFire] = useState();
46
- const announceOnChange = [title, Children.toArray(description).map(child => /*#__PURE__*/isValidElement(child) ? child.props.children : child).join(''), action?.label].filter(Boolean).join('|');
46
+ const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');
47
47
  const statusIconSentiment = sentiment === 'success' ? Sentiment.POSITIVE : sentiment;
48
48
  const handleTouchStart = () => {
49
49
  setShouldFire(true);
@@ -1 +1 @@
1
- {"version":3,"file":"InfoPrompt.mjs","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { Children, HTMLAttributes, ReactNode, isValidElement, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description content for the prompt (required). Accepts plain text or rich content (ReactNode).\n * If the description contains an interactive element, the `action` prop must not be used simultaneously.\n */\n description: ReactNode;\n className?: string;\n /**\n * Sets the ARIA live region politeness level.\n * - `'polite'` — announced after the current speech (default)\n * - `'assertive'` — interrupts the current speech immediately\n * - `'off'` — disables the live region entirely\n * @default 'polite'\n */\n 'aria-live'?: AriaLive;\n };\n\n/**\n * `InfoPrompt` displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \\@wise/wds-codemods@latest info-prompt`**).\n *\n * Guidance can be found in the [design system](https://docs.wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'aria-live': ariaLive = 'polite',\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const announceOnChange = [\n title,\n Children.toArray(description)\n .map((child) =>\n isValidElement<{ children?: ReactNode }>(child) ? child.props.children : child,\n )\n .join(''),\n action?.label,\n ]\n .filter(Boolean)\n .join('|');\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return (\n <span className=\"wds-info-prompt__media\">\n <GiftBox />\n </span>\n );\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n // Render content directly in LiveRegion\n return (\n <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","announceOnChange","Children","toArray","map","child","isValidElement","props","children","join","label","filter","Boolean","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","asset","GiftBox","StatusIcon","size","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"InfoPrompt.mjs","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n className?: string;\n /**\n * Sets the ARIA live region politeness level.\n * - `'polite'` — announced after the current speech (default)\n * - `'assertive'` — interrupts the current speech immediately\n * - `'off'` — disables the live region entirely\n * @default 'polite'\n */\n 'aria-live'?: AriaLive;\n };\n\n/**\n * `InfoPrompt` displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \\@wise/wds-codemods@latest info-prompt`**).\n *\n * Guidance can be found in the [design system](https://docs.wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'aria-live': ariaLive = 'polite',\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return (\n <span className=\"wds-info-prompt__media\">\n <GiftBox />\n </span>\n );\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n // Render content directly in LiveRegion\n return (\n <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","announceOnChange","label","filter","Boolean","join","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","StatusIcon","size","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick"],"mappings":"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"}
@@ -0,0 +1,83 @@
1
+ .tw-date-lookup-calendar {
2
+ min-width: 300px;
3
+ text-align: center;
4
+ table-layout: fixed;
5
+ border: none;
6
+ background-color: inherit;
7
+ }
8
+ .tw-date-lookup-calendar thead {
9
+ background-color: transparent;
10
+ background-color: initial;
11
+ }
12
+ .tw-date-lookup-calendar > tbody > tr > td.weekend button {
13
+ color: #5d7079;
14
+ color: var(--color-content-secondary);
15
+ }
16
+ .tw-date-lookup-calendar > tbody > tr > td {
17
+ border: none;
18
+ padding: 4px;
19
+ padding: var(--size-4);
20
+ }
21
+ @media (max-width: 320px) {
22
+ .tw-date-lookup-calendar > tbody > tr > td {
23
+ padding: 0;
24
+ }
25
+ }
26
+ .tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
27
+ padding: 1px;
28
+ }
29
+ .tw-date-lookup-calendar > tbody > tr > td button {
30
+ width: 100%;
31
+ padding: 4px 0;
32
+ padding: var(--size-4) 0;
33
+ color: #0097c7;
34
+ color: var(--color-content-accent);
35
+ border: transparent;
36
+ border-radius: 10px;
37
+ border-radius: var(--radius-small);
38
+ background-color: transparent;
39
+ font-weight: 600;
40
+ font-weight: var(--font-weight-semi-bold);
41
+ color: #37517e;
42
+ color: var(--color-content-primary);
43
+ }
44
+ @media (max-width: 320px) {
45
+ .tw-date-lookup-calendar > tbody > tr > td button {
46
+ padding: 0;
47
+ }
48
+ }
49
+ .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
50
+ height: 40px;
51
+ height: var(--size-40);
52
+ border-radius: 9999px;
53
+ border-radius: var(--radius-full);
54
+ line-height: 40px;
55
+ line-height: var(--size-40);
56
+ width: 40px;
57
+ width: var(--size-40);
58
+ padding: 0;
59
+ display: inline-flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ }
63
+ .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
64
+ -webkit-text-decoration: underline;
65
+ text-decoration: underline;
66
+ text-decoration-thickness: 2px;
67
+ text-underline-offset: 4px;
68
+ }
69
+ .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
70
+ .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
71
+ background-color: var(--color-background-screen-hover);
72
+ }
73
+ .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
74
+ background-color: var(--color-interactive-primary);
75
+ color: var(--color-interactive-contrast);
76
+ }
77
+ .tw-date-lookup-calendar abbr {
78
+ -webkit-text-decoration: none;
79
+ text-decoration: none;
80
+ }
81
+ .tw-date-lookup-header-current-container {
82
+ display: inline;
83
+ }
@@ -1,93 +1,3 @@
1
1
  .tw-date-lookup-menu {
2
2
  width: 400px;
3
3
  }
4
- .tw-date-lookup-calendar {
5
- min-width: 300px;
6
- text-align: center;
7
- table-layout: fixed;
8
- background-color: inherit;
9
- }
10
- .tw-date-lookup-calendar > tbody > tr > td.weekend button {
11
- color: #5d7079;
12
- color: var(--color-content-secondary);
13
- }
14
- .tw-date-lookup-calendar > tbody > tr > td {
15
- padding: 4px;
16
- padding: var(--size-4);
17
- }
18
- @media (max-width: 320px) {
19
- .tw-date-lookup-calendar > tbody > tr > td {
20
- padding: 0;
21
- }
22
- }
23
- .tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
24
- padding: 1px;
25
- }
26
- .tw-date-lookup-calendar > tbody > tr > td button {
27
- width: 100%;
28
- padding: 4px 0;
29
- padding: var(--size-4) 0;
30
- color: #0097c7;
31
- color: var(--color-content-accent);
32
- border: transparent;
33
- border-radius: 10px;
34
- border-radius: var(--radius-small);
35
- background-color: transparent;
36
- font-weight: 600;
37
- font-weight: var(--font-weight-semi-bold);
38
- color: #37517e;
39
- color: var(--color-content-primary);
40
- }
41
- @media (max-width: 320px) {
42
- .tw-date-lookup-calendar > tbody > tr > td button {
43
- padding: 0;
44
- }
45
- }
46
- .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
47
- height: 40px;
48
- height: var(--size-40);
49
- border-radius: 9999px;
50
- border-radius: var(--radius-full);
51
- line-height: 40px;
52
- line-height: var(--size-40);
53
- width: 40px;
54
- width: var(--size-40);
55
- padding: 0;
56
- display: inline-flex;
57
- align-items: center;
58
- justify-content: center;
59
- }
60
- .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
61
- -webkit-text-decoration: underline;
62
- text-decoration: underline;
63
- text-decoration-thickness: 2px;
64
- text-underline-offset: 4px;
65
- }
66
- .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
67
- .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
68
- background-color: var(--color-background-screen-hover);
69
- }
70
- .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
71
- background-color: var(--color-interactive-primary);
72
- color: var(--color-interactive-contrast);
73
- }
74
- .tw-date-lookup-calendar abbr {
75
- -webkit-text-decoration: none;
76
- text-decoration: none;
77
- }
78
- .tw-date-lookup-header-current-container {
79
- display: inline;
80
- }
81
- .np-theme-personal.tw-date-lookup-menu .table-bordered,
82
- .np-theme-personal .tw-date-lookup-menu .table-bordered {
83
- border: none;
84
- }
85
- .np-theme-personal.tw-date-lookup-menu thead,
86
- .np-theme-personal .tw-date-lookup-menu thead {
87
- background-color: transparent;
88
- background-color: initial;
89
- }
90
- .np-theme-personal.tw-date-lookup-menu td,
91
- .np-theme-personal .tw-date-lookup-menu td {
92
- border: none;
93
- }
@@ -27180,6 +27180,103 @@ a[data-toggle="tooltip"] {
27180
27180
  scale: -1 1;
27181
27181
  }
27182
27182
 
27183
+ .tw-date-lookup-calendar {
27184
+ min-width: 300px;
27185
+ text-align: center;
27186
+ table-layout: fixed;
27187
+ border: none;
27188
+ background-color: inherit;
27189
+ }
27190
+
27191
+ .tw-date-lookup-calendar thead {
27192
+ background-color: transparent;
27193
+ background-color: initial;
27194
+ }
27195
+
27196
+ .tw-date-lookup-calendar > tbody > tr > td.weekend button {
27197
+ color: #5d7079;
27198
+ color: var(--color-content-secondary);
27199
+ }
27200
+
27201
+ .tw-date-lookup-calendar > tbody > tr > td {
27202
+ border: none;
27203
+ padding: 4px;
27204
+ padding: var(--size-4);
27205
+ }
27206
+
27207
+ @media (max-width: 320px) {
27208
+ .tw-date-lookup-calendar > tbody > tr > td {
27209
+ padding: 0;
27210
+ }
27211
+ }
27212
+
27213
+ .tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
27214
+ padding: 1px;
27215
+ }
27216
+
27217
+ .tw-date-lookup-calendar > tbody > tr > td button {
27218
+ width: 100%;
27219
+ padding: 4px 0;
27220
+ padding: var(--size-4) 0;
27221
+ color: #0097c7;
27222
+ color: var(--color-content-accent);
27223
+ border: transparent;
27224
+ border-radius: 10px;
27225
+ border-radius: var(--radius-small);
27226
+ background-color: transparent;
27227
+ font-weight: 600;
27228
+ font-weight: var(--font-weight-semi-bold);
27229
+ color: #37517e;
27230
+ color: var(--color-content-primary);
27231
+ }
27232
+
27233
+ @media (max-width: 320px) {
27234
+ .tw-date-lookup-calendar > tbody > tr > td button {
27235
+ padding: 0;
27236
+ }
27237
+ }
27238
+
27239
+ .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
27240
+ height: 40px;
27241
+ height: var(--size-40);
27242
+ border-radius: 9999px;
27243
+ border-radius: var(--radius-full);
27244
+ line-height: 40px;
27245
+ line-height: var(--size-40);
27246
+ width: 40px;
27247
+ width: var(--size-40);
27248
+ padding: 0;
27249
+ display: inline-flex;
27250
+ align-items: center;
27251
+ justify-content: center;
27252
+ }
27253
+
27254
+ .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
27255
+ -webkit-text-decoration: underline;
27256
+ text-decoration: underline;
27257
+ text-decoration-thickness: 2px;
27258
+ text-underline-offset: 4px;
27259
+ }
27260
+
27261
+ .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
27262
+ .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
27263
+ background-color: var(--color-background-screen-hover);
27264
+ }
27265
+
27266
+ .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
27267
+ background-color: var(--color-interactive-primary);
27268
+ color: var(--color-interactive-contrast);
27269
+ }
27270
+
27271
+ .tw-date-lookup-calendar abbr {
27272
+ -webkit-text-decoration: none;
27273
+ text-decoration: none;
27274
+ }
27275
+
27276
+ .tw-date-lookup-header-current-container {
27277
+ display: inline;
27278
+ }
27279
+
27183
27280
  .np-card {
27184
27281
  overflow: hidden;
27185
27282
  transition-property: transform, box-shadow;
@@ -28317,112 +28414,6 @@ button.np-option {
28317
28414
  width: 400px;
28318
28415
  }
28319
28416
 
28320
- .tw-date-lookup-calendar {
28321
- min-width: 300px;
28322
- text-align: center;
28323
- table-layout: fixed;
28324
- background-color: inherit;
28325
- }
28326
-
28327
- .tw-date-lookup-calendar > tbody > tr > td.weekend button {
28328
- color: #5d7079;
28329
- color: var(--color-content-secondary);
28330
- }
28331
-
28332
- .tw-date-lookup-calendar > tbody > tr > td {
28333
- padding: 4px;
28334
- padding: var(--size-4);
28335
- }
28336
-
28337
- @media (max-width: 320px) {
28338
- .tw-date-lookup-calendar > tbody > tr > td {
28339
- padding: 0;
28340
- }
28341
- }
28342
-
28343
- .tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
28344
- padding: 1px;
28345
- }
28346
-
28347
- .tw-date-lookup-calendar > tbody > tr > td button {
28348
- width: 100%;
28349
- padding: 4px 0;
28350
- padding: var(--size-4) 0;
28351
- color: #0097c7;
28352
- color: var(--color-content-accent);
28353
- border: transparent;
28354
- border-radius: 10px;
28355
- border-radius: var(--radius-small);
28356
- background-color: transparent;
28357
- font-weight: 600;
28358
- font-weight: var(--font-weight-semi-bold);
28359
- color: #37517e;
28360
- color: var(--color-content-primary);
28361
- }
28362
-
28363
- @media (max-width: 320px) {
28364
- .tw-date-lookup-calendar > tbody > tr > td button {
28365
- padding: 0;
28366
- }
28367
- }
28368
-
28369
- .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
28370
- height: 40px;
28371
- height: var(--size-40);
28372
- border-radius: 9999px;
28373
- border-radius: var(--radius-full);
28374
- line-height: 40px;
28375
- line-height: var(--size-40);
28376
- width: 40px;
28377
- width: var(--size-40);
28378
- padding: 0;
28379
- display: inline-flex;
28380
- align-items: center;
28381
- justify-content: center;
28382
- }
28383
-
28384
- .tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
28385
- -webkit-text-decoration: underline;
28386
- text-decoration: underline;
28387
- text-decoration-thickness: 2px;
28388
- text-underline-offset: 4px;
28389
- }
28390
-
28391
- .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
28392
- .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
28393
- background-color: var(--color-background-screen-hover);
28394
- }
28395
-
28396
- .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
28397
- background-color: var(--color-interactive-primary);
28398
- color: var(--color-interactive-contrast);
28399
- }
28400
-
28401
- .tw-date-lookup-calendar abbr {
28402
- -webkit-text-decoration: none;
28403
- text-decoration: none;
28404
- }
28405
-
28406
- .tw-date-lookup-header-current-container {
28407
- display: inline;
28408
- }
28409
-
28410
- .np-theme-personal.tw-date-lookup-menu .table-bordered,
28411
- .np-theme-personal .tw-date-lookup-menu .table-bordered {
28412
- border: none;
28413
- }
28414
-
28415
- .np-theme-personal.tw-date-lookup-menu thead,
28416
- .np-theme-personal .tw-date-lookup-menu thead {
28417
- background-color: transparent;
28418
- background-color: initial;
28419
- }
28420
-
28421
- .np-theme-personal.tw-date-lookup-menu td,
28422
- .np-theme-personal .tw-date-lookup-menu td {
28423
- border: none;
28424
- }
28425
-
28426
28417
  .np-date-trigger {
28427
28418
  overflow: hidden;
28428
28419
  text-overflow: ellipsis;
@@ -0,0 +1,13 @@
1
+ import { MonthFormat } from '../common';
2
+ export interface CalendarInputProps {
3
+ value: Date | null;
4
+ min?: Date | null;
5
+ max?: Date | null;
6
+ monthFormat?: `${MonthFormat}`;
7
+ placeholder?: string;
8
+ onChange: (date: Date | null) => void;
9
+ onSelect?: (date: Date) => void;
10
+ }
11
+ declare const CalendarInput: ({ value, min: minProp, max: maxProp, monthFormat, placeholder, onChange, onSelect, }: CalendarInputProps) => import("react").JSX.Element;
12
+ export default CalendarInput;
13
+ //# sourceMappingURL=CalendarInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CalendarInput.d.ts","sourceRoot":"","sources":["../../../src/calendarInput/CalendarInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAOxC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,aAAa,GAAI,sFAQpB,kBAAkB,gCAuIpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -41,4 +41,4 @@ declare const _default: {
41
41
  };
42
42
  };
43
43
  export default _default;
44
- //# sourceMappingURL=DateLookup.messages.d.ts.map
44
+ //# sourceMappingURL=CalendarInput.messages.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CalendarInput.messages.d.ts","sourceRoot":"","sources":["../../../src/calendarInput/CalendarInput.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAyCG"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateHeader.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/dateHeader/DateHeader.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/dateHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DayCalendar.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/dayCalendar/DayCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACnE;;;;AAiDD,wBAAuC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/dayCalendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DayCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/calendarInput/dayCalendar/table/DayCalendarTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AASpE,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC;;;;AA0ID,wBAA4C"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/calendarInput/dayCalendar/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getFocusableTime.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/getFocusableTime/getFocusableTime.tsx"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,MAAM,GAAG,SAAS,CAM9E"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getStartOfDay.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/getStartOfDay/getStartOfDay.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,eAK9C"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/getStartOfDay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default } from './CalendarInput';
2
+ export type { CalendarInputProps } from './CalendarInput';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/calendarInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
@@ -4,7 +4,7 @@ interface MonthCalendarProps extends WrappedComponentProps {
4
4
  min: Date | null;
5
5
  max: Date | null;
6
6
  viewYear: number;
7
- placeholder: string;
7
+ placeholder?: string;
8
8
  onSelect: () => void;
9
9
  onLabelClick: () => void;
10
10
  onViewDateUpdate: (date: {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MonthCalendar.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/monthCalendar/MonthCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAO/D,UAAU,kBAAmB,SAAQ,qBAAqB;IACxD,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;;;;AAgDD,wBAAyC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/monthCalendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
@@ -3,7 +3,7 @@ interface MonthCalendarTableProps {
3
3
  min: Date | null;
4
4
  max: Date | null;
5
5
  viewYear: number;
6
- placeholder: string;
6
+ placeholder?: string;
7
7
  onSelect: (date: number) => void;
8
8
  }
9
9
  declare const MonthCalendarTable: ({ selectedDate, min, max, viewYear, placeholder, onSelect, }: MonthCalendarTableProps) => import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/calendarInput/monthCalendar/table/MonthCalendarTable.tsx"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAMD,QAAA,MAAM,kBAAkB,GAAI,8DAOzB,uBAAuB,gCAyDzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/calendarInput/monthCalendar/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/tableLink/TableLink.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,SAAS,GAAI,gFAUhB,cAAc,gCA8ChB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
@@ -4,7 +4,7 @@ interface YearCalendarProps extends WrappedComponentProps {
4
4
  min: Date | null;
5
5
  max: Date | null;
6
6
  viewYear: number;
7
- placeholder: string;
7
+ placeholder?: string;
8
8
  onSelect: () => void;
9
9
  onViewDateUpdate: (date: {
10
10
  year: number;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"YearCalendar.d.ts","sourceRoot":"","sources":["../../../../src/calendarInput/yearCalendar/YearCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAO/D,UAAU,iBAAkB,SAAQ,qBAAqB;IACvD,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACpD;;;;AA6CD,wBAAwC"}