@transferwise/components 0.0.0-experimental-3d57e31 → 0.0.0-experimental-0315684

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 (134) hide show
  1. package/build/avatarLayout/AvatarLayout.js +2 -9
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +2 -9
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/button/Button.js +79 -78
  6. package/build/button/Button.js.map +1 -1
  7. package/build/button/Button.mjs +80 -79
  8. package/build/button/Button.mjs.map +1 -1
  9. package/build/criticalBanner/CriticalCommsBanner.js +2 -2
  10. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  11. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
  12. package/build/header/Header.js +2 -2
  13. package/build/header/Header.js.map +1 -1
  14. package/build/header/Header.mjs +1 -1
  15. package/build/index.js +4 -2
  16. package/build/index.js.map +1 -1
  17. package/build/index.mjs +2 -1
  18. package/build/index.mjs.map +1 -1
  19. package/build/link/Link.js +3 -8
  20. package/build/link/Link.js.map +1 -1
  21. package/build/link/Link.mjs +3 -8
  22. package/build/link/Link.mjs.map +1 -1
  23. package/build/main.css +0 -223
  24. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +3 -1
  25. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
  26. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +3 -1
  27. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
  28. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +4 -1
  29. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
  30. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +4 -1
  31. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
  32. package/build/select/Select.js +2 -2
  33. package/build/select/Select.js.map +1 -1
  34. package/build/select/Select.mjs +1 -1
  35. package/build/styles/avatarLayout/AvatarLayout.css +0 -11
  36. package/build/styles/button/Button.css +15 -204
  37. package/build/styles/main.css +0 -223
  38. package/build/table/Table.js +166 -0
  39. package/build/table/Table.js.map +1 -0
  40. package/build/table/Table.messages.js +24 -0
  41. package/build/table/Table.messages.js.map +1 -0
  42. package/build/table/Table.messages.mjs +22 -0
  43. package/build/table/Table.messages.mjs.map +1 -0
  44. package/build/table/Table.mjs +164 -0
  45. package/build/table/Table.mjs.map +1 -0
  46. package/build/table/TableCell.js +86 -0
  47. package/build/table/TableCell.js.map +1 -0
  48. package/build/table/TableCell.mjs +84 -0
  49. package/build/table/TableCell.mjs.map +1 -0
  50. package/build/table/TableHeader.js +57 -0
  51. package/build/table/TableHeader.js.map +1 -0
  52. package/build/table/TableHeader.mjs +55 -0
  53. package/build/table/TableHeader.mjs.map +1 -0
  54. package/build/table/TableRow.js +85 -0
  55. package/build/table/TableRow.js.map +1 -0
  56. package/build/table/TableRow.mjs +83 -0
  57. package/build/table/TableRow.mjs.map +1 -0
  58. package/build/table/TableStatusText.js +54 -0
  59. package/build/table/TableStatusText.js.map +1 -0
  60. package/build/table/TableStatusText.mjs +52 -0
  61. package/build/table/TableStatusText.mjs.map +1 -0
  62. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  63. package/build/types/button/Button.d.ts +23 -2
  64. package/build/types/button/Button.d.ts.map +1 -1
  65. package/build/types/button/index.d.ts +2 -2
  66. package/build/types/button/index.d.ts.map +1 -1
  67. package/build/types/index.d.ts +2 -0
  68. package/build/types/index.d.ts.map +1 -1
  69. package/build/types/link/Link.d.ts +2 -2
  70. package/build/types/link/Link.d.ts.map +1 -1
  71. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
  72. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +2 -6
  73. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
  74. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
  75. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts +0 -1
  76. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -1
  77. package/build/upload/steps/completeStep/completeStep.js +2 -2
  78. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  79. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  80. package/build/upload/steps/processingStep/processingStep.js +2 -2
  81. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  82. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  83. package/build/uploadInput/UploadInput.js +3 -3
  84. package/build/uploadInput/UploadInput.js.map +1 -1
  85. package/build/uploadInput/UploadInput.mjs +1 -1
  86. package/package.json +4 -4
  87. package/src/avatarLayout/AvatarLayout.css +0 -11
  88. package/src/avatarLayout/AvatarLayout.less +1 -18
  89. package/src/avatarLayout/AvatarLayout.tsx +2 -10
  90. package/src/button/Button.css +15 -204
  91. package/src/button/Button.less +14 -211
  92. package/src/button/Button.spec.tsx +227 -75
  93. package/src/button/Button.story.tsx +138 -612
  94. package/src/button/Button.tsx +132 -88
  95. package/src/button/__snapshots__/Button.spec.tsx.snap +309 -0
  96. package/src/button/index.ts +3 -2
  97. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -1
  98. package/src/index.ts +12 -0
  99. package/src/inputs/SelectInput.story.tsx +1 -1
  100. package/src/link/Link.tsx +6 -15
  101. package/src/main.css +0 -223
  102. package/src/main.less +0 -1
  103. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +7 -1
  104. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +2 -7
  105. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +3 -1
  106. package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +8 -1
  107. package/src/primitives/PrimitiveButton/src/PrimitiveButton.types.ts +0 -2
  108. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +5 -2
  109. package/build/button/Button.resolver.js +0 -75
  110. package/build/button/Button.resolver.js.map +0 -1
  111. package/build/button/Button.resolver.mjs +0 -73
  112. package/build/button/Button.resolver.mjs.map +0 -1
  113. package/build/button/LegacyButton.js +0 -114
  114. package/build/button/LegacyButton.js.map +0 -1
  115. package/build/button/LegacyButton.mjs +0 -112
  116. package/build/button/LegacyButton.mjs.map +0 -1
  117. package/build/styles/button/Button.vars.css +0 -39
  118. package/build/styles/button/LegacyButton.css +0 -23
  119. package/build/types/button/Button.resolver.d.ts +0 -33
  120. package/build/types/button/Button.resolver.d.ts.map +0 -1
  121. package/build/types/button/Button.types.d.ts +0 -54
  122. package/build/types/button/Button.types.d.ts.map +0 -1
  123. package/build/types/button/LegacyButton.d.ts +0 -30
  124. package/build/types/button/LegacyButton.d.ts.map +0 -1
  125. package/src/button/Button.resolver.tsx +0 -75
  126. package/src/button/Button.tests.story.tsx +0 -27
  127. package/src/button/Button.types.ts +0 -68
  128. package/src/button/Button.vars.css +0 -39
  129. package/src/button/Button.vars.less +0 -50
  130. package/src/button/LegacyButton.css +0 -23
  131. package/src/button/LegacyButton.less +0 -24
  132. package/src/button/LegacyButton.spec.tsx +0 -146
  133. package/src/button/LegacyButton.story.tsx +0 -225
  134. package/src/button/LegacyButton.tsx +0 -161
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { AnchorElementProps, ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if ((props as AnchorElementProps).href || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","href","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: Props,\n reference,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: Props['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={reference}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
@@ -6,7 +6,7 @@ var clsx = require('clsx');
6
6
  var avatarTypes = require('../avatar/avatarTypes.js');
7
7
  var Avatar = require('../avatar/Avatar.js');
8
8
  var Body = require('../body/Body.js');
9
- var Button_resolver = require('../button/Button.resolver.js');
9
+ var Button = require('../button/Button.js');
10
10
  require('../common/theme.js');
11
11
  require('../common/direction.js');
12
12
  var control = require('../common/propsValues/control.js');
@@ -69,7 +69,7 @@ function CriticalCommsBanner({
69
69
  })]
70
70
  }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
71
71
  className: "critical-comms--cta",
72
- children: /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
72
+ children: /*#__PURE__*/jsxRuntime.jsx(Button, {
73
73
  block: isModern,
74
74
  size: size.Size.SMALL,
75
75
  type: control.ControlType.NEGATIVE,
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport Button from '../button';\nimport { ControlType, Priority, Size, Typography } from '../common';\nimport Title from '../title';\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href: string;\n };\n className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n const { isModern } = useTheme();\n return (\n <div className={clsx('critical-comms', className)}>\n <div className=\"critical-comms-body\">\n <Avatar\n size={Size.MEDIUM}\n type={AvatarType.ICON}\n className={clsx(isModern ? 'm-r-2' : 'm-r-1')}\n backgroundColor={\n isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'\n }\n >\n {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}\n </Avatar>\n <div className=\"critical-comms-content d-flex align-items-center flex-grow-1\">\n <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>\n <Title\n type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}\n className=\"critical-comms--title\"\n >\n {title}\n </Title>\n <Body className=\"critical-comms--subtitle\">{subtitle}</Body>\n </div>\n {action ? (\n <div className=\"critical-comms--cta\">\n <Button\n block={isModern}\n size={Size.SMALL}\n type={ControlType.NEGATIVE}\n priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}\n className=\"cta-btn\"\n onClick={() => {\n if (action) {\n window.location.href = action.href;\n }\n }}\n >\n {action.label}\n </Button>\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","isModern","useTheme","_jsx","clsx","children","_jsxs","Avatar","size","Size","MEDIUM","type","AvatarType","ICON","backgroundColor","AlertCircleFill","DangerIcon","Title","Typography","TITLE_BODY","TITLE_GROUP","Body","Button","block","SMALL","ControlType","NEGATIVE","priority","Priority","SECONDARY","PRIMARY","onClick","window","location","href","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;EAC3F,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,SAAS,EAAEI,SAAI,CAAC,gBAAgB,EAAEJ,SAAS,CAAE;AAAAK,IAAAA,QAAA,eAChDC,eAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,qBAAqB;MAAAK,QAAA,EAAA,cAClCF,cAAA,CAACI,MAAM,EAAA;QACLC,IAAI,EAAEC,SAAI,CAACC,MAAO;QAClBC,IAAI,EAAEC,sBAAU,CAACC,IAAK;QACtBb,SAAS,EAAEI,SAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAE;AAC9Ca,QAAAA,eAAe,EACbb,QAAQ,GAAG,iCAAiC,GAAG,kCAChD;QAAAI,QAAA,EAEAJ,QAAQ,gBAAGE,cAAA,CAACY,qBAAe,EAAA,EAAG,CAAA,gBAAGZ,cAAA,CAACa,WAAU,EAAA;AAACR,UAAAA,IAAI,EAAE,EAAA;SAAG,CAAA;OACjD,CACR,eAAAF,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,8DAA8D;AAAAK,QAAAA,QAAA,gBAC3EC,eAAA,CAAA,KAAA,EAAA;AAAKN,UAAAA,SAAS,EAAEI,SAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE,CAACH,QAAAA;AAAU,WAAA,CAAE;UAAAI,QAAA,EAAA,cAC1DF,cAAA,CAACc,KAAK,EAAA;YACJN,IAAI,EAAEV,QAAQ,GAAGiB,qBAAU,CAACC,UAAU,GAAGD,qBAAU,CAACE,WAAY;AAChEpB,YAAAA,SAAS,EAAC,uBAAuB;AAAAK,YAAAA,QAAA,EAEhCR,KAAAA;AAAK,WACD,CACP,eAAAM,cAAA,CAACkB,IAAI,EAAA;AAACrB,YAAAA,SAAS,EAAC,0BAA0B;AAAAK,YAAAA,QAAA,EAAEP,QAAAA;AAAQ,WAAO,CAC7D,CAAA;AAAA,SAAK,CACL,EAACC,MAAM,gBACLI,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,qBAAqB;UAAAK,QAAA,eAClCF,cAAA,CAACmB,eAAM,EAAA;AACLC,YAAAA,KAAK,EAAEtB,QAAS;YAChBO,IAAI,EAAEC,SAAI,CAACe,KAAM;YACjBb,IAAI,EAAEc,mBAAW,CAACC,QAAS;YAC3BC,QAAQ,EAAE1B,QAAQ,GAAG2B,gBAAQ,CAACC,SAAS,GAAGD,gBAAQ,CAACE,OAAQ;AAC3D9B,YAAAA,SAAS,EAAC,SAAS;YACnB+B,OAAO,EAAEA,MAAK;AACZ,cAAA,IAAIhC,MAAM,EAAE;AACViC,gBAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGnC,MAAM,CAACmC,IAAI,CAAA;AACpC,eAAA;aACA;YAAA7B,QAAA,EAEDN,MAAM,CAACoC,KAAAA;WACF,CAAA;SACL,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CACP,CAAA;KAAK,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport Button from '../button';\nimport { ControlType, Priority, Size, Typography } from '../common';\nimport Title from '../title';\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href: string;\n };\n className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n const { isModern } = useTheme();\n return (\n <div className={clsx('critical-comms', className)}>\n <div className=\"critical-comms-body\">\n <Avatar\n size={Size.MEDIUM}\n type={AvatarType.ICON}\n className={clsx(isModern ? 'm-r-2' : 'm-r-1')}\n backgroundColor={\n isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'\n }\n >\n {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}\n </Avatar>\n <div className=\"critical-comms-content d-flex align-items-center flex-grow-1\">\n <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>\n <Title\n type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}\n className=\"critical-comms--title\"\n >\n {title}\n </Title>\n <Body className=\"critical-comms--subtitle\">{subtitle}</Body>\n </div>\n {action ? (\n <div className=\"critical-comms--cta\">\n <Button\n block={isModern}\n size={Size.SMALL}\n type={ControlType.NEGATIVE}\n priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}\n className=\"cta-btn\"\n onClick={() => {\n if (action) {\n window.location.href = action.href;\n }\n }}\n >\n {action.label}\n </Button>\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","isModern","useTheme","_jsx","clsx","children","_jsxs","Avatar","size","Size","MEDIUM","type","AvatarType","ICON","backgroundColor","AlertCircleFill","DangerIcon","Title","Typography","TITLE_BODY","TITLE_GROUP","Body","Button","block","SMALL","ControlType","NEGATIVE","priority","Priority","SECONDARY","PRIMARY","onClick","window","location","href","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;EAC3F,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,SAAS,EAAEI,SAAI,CAAC,gBAAgB,EAAEJ,SAAS,CAAE;AAAAK,IAAAA,QAAA,eAChDC,eAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,qBAAqB;MAAAK,QAAA,EAAA,cAClCF,cAAA,CAACI,MAAM,EAAA;QACLC,IAAI,EAAEC,SAAI,CAACC,MAAO;QAClBC,IAAI,EAAEC,sBAAU,CAACC,IAAK;QACtBb,SAAS,EAAEI,SAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAE;AAC9Ca,QAAAA,eAAe,EACbb,QAAQ,GAAG,iCAAiC,GAAG,kCAChD;QAAAI,QAAA,EAEAJ,QAAQ,gBAAGE,cAAA,CAACY,qBAAe,EAAA,EAAG,CAAA,gBAAGZ,cAAA,CAACa,WAAU,EAAA;AAACR,UAAAA,IAAI,EAAE,EAAA;SAAG,CAAA;OACjD,CACR,eAAAF,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,8DAA8D;AAAAK,QAAAA,QAAA,gBAC3EC,eAAA,CAAA,KAAA,EAAA;AAAKN,UAAAA,SAAS,EAAEI,SAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE,CAACH,QAAAA;AAAU,WAAA,CAAE;UAAAI,QAAA,EAAA,cAC1DF,cAAA,CAACc,KAAK,EAAA;YACJN,IAAI,EAAEV,QAAQ,GAAGiB,qBAAU,CAACC,UAAU,GAAGD,qBAAU,CAACE,WAAY;AAChEpB,YAAAA,SAAS,EAAC,uBAAuB;AAAAK,YAAAA,QAAA,EAEhCR,KAAAA;AAAK,WACD,CACP,eAAAM,cAAA,CAACkB,IAAI,EAAA;AAACrB,YAAAA,SAAS,EAAC,0BAA0B;AAAAK,YAAAA,QAAA,EAAEP,QAAAA;AAAQ,WAAO,CAC7D,CAAA;AAAA,SAAK,CACL,EAACC,MAAM,gBACLI,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,qBAAqB;UAAAK,QAAA,eAClCF,cAAA,CAACmB,MAAM,EAAA;AACLC,YAAAA,KAAK,EAAEtB,QAAS;YAChBO,IAAI,EAAEC,SAAI,CAACe,KAAM;YACjBb,IAAI,EAAEc,mBAAW,CAACC,QAAS;YAC3BC,QAAQ,EAAE1B,QAAQ,GAAG2B,gBAAQ,CAACC,SAAS,GAAGD,gBAAQ,CAACE,OAAQ;AAC3D9B,YAAAA,SAAS,EAAC,SAAS;YACnB+B,OAAO,EAAEA,MAAK;AACZ,cAAA,IAAIhC,MAAM,EAAE;AACViC,gBAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGnC,MAAM,CAACmC,IAAI,CAAA;AACpC,eAAA;aACA;YAAA7B,QAAA,EAEDN,MAAM,CAACoC,KAAAA;WACF,CAAA;SACL,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CACP,CAAA;KAAK,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
4
4
  import { AvatarType } from '../avatar/avatarTypes.mjs';
5
5
  import Avatar from '../avatar/Avatar.mjs';
6
6
  import Body from '../body/Body.mjs';
7
- import Button from '../button/Button.resolver.mjs';
7
+ import Button from '../button/Button.mjs';
8
8
  import '../common/theme.mjs';
9
9
  import '../common/direction.mjs';
10
10
  import { ControlType, Priority } from '../common/propsValues/control.mjs';
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var clsx = require('clsx');
6
- var Button_resolver = require('../button/Button.resolver.js');
6
+ var Button = require('../button/Button.js');
7
7
  require('../common/theme.js');
8
8
  require('../common/direction.js');
9
9
  require('../common/propsValues/control.js');
@@ -46,7 +46,7 @@ const HeaderAction = ({
46
46
  children: action.text
47
47
  });
48
48
  }
49
- return /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
49
+ return /*#__PURE__*/jsxRuntime.jsx(Button, {
50
50
  className: "np-header__button",
51
51
  priority: "tertiary",
52
52
  size: "sm",
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /**\n * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n /**\n * Override the heading element rendered for the title, useful to specify the semantics of your header.\n *\n * @default \"h5\"\n */\n as?: Heading | 'legend';\n title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,cAAA,CAACO,eAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,cAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;;"}
1
+ {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport Button from '../button';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport type HeaderProps = CommonProps & {\n /**\n * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n /**\n * Override the heading element rendered for the title, useful to specify the semantics of your header.\n *\n * @default \"h5\"\n */\n as?: Heading | 'legend';\n title: string;\n};\n\nconst HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {\n const props = {\n 'aria-label': action['aria-label'],\n };\n\n if ('href' in action) {\n return (\n <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>\n {action.text}\n </Link>\n );\n }\n\n return (\n <Button\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n onClick={action.onClick}\n {...props}\n >\n {action.text}\n </Button>\n );\n};\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header\n *\n */\nexport const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {\n if (!action) {\n return (\n <Title\n as={as}\n type={Typography.TITLE_GROUP}\n className={clsx('np-header', 'np-header__title', className)}\n >\n {title}\n </Title>\n );\n }\n\n if (as === 'legend') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n\n return (\n <div className={clsx('np-header', className)}>\n <Title as={as} type={Typography.TITLE_GROUP} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n};\n\nexport default Header;\n"],"names":["HeaderAction","action","props","_jsx","Link","href","target","onClick","children","text","Button","className","priority","size","Header","as","title","Title","type","Typography","TITLE_GROUP","clsx","console","warn","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,YAAY,GAAGA,CAAC;AAAEC,EAAAA,MAAAA;AAAM,CAAmD,KAAI;AACnF,EAAA,MAAMC,KAAK,GAAG;IACZ,YAAY,EAAED,MAAM,CAAC,YAAY,CAAA;GAClC,CAAA;EAED,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB,oBACEE,cAAA,CAACC,IAAI,EAAA;MAACC,IAAI,EAAEJ,MAAM,CAACI,IAAK;MAACC,MAAM,EAAEL,MAAM,CAACK,MAAO;MAACC,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,MAAA,GAAKL,KAAK;MAAAM,QAAA,EAC/EP,MAAM,CAACQ,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;EAEA,oBACEN,cAAA,CAACO,MAAM,EAAA;AACLC,IAAAA,SAAS,EAAC,mBAAmB;AAC7BC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,IAAI;IACTN,OAAO,EAAEN,MAAM,CAACM,OAAQ;AAAA,IAAA,GACpBL,KAAK;IAAAM,QAAA,EAERP,MAAM,CAACQ,IAAAA;AAAI,GACN,CAAC,CAAA;AAEb,CAAC,CAAA;AAED;;;;AAIG;AACI,MAAMK,MAAM,GAAGA,CAAC;EAAEb,MAAM;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEC,KAAK;AAAEL,EAAAA,SAAAA;AAAS,CAAe,KAAI;EAC7E,IAAI,CAACV,MAAM,EAAE;IACX,oBACEE,cAAA,CAACc,KAAK,EAAA;AACJF,MAAAA,EAAE,EAAEA,EAAG;MACPG,IAAI,EAAEC,qBAAU,CAACC,WAAY;MAC7BT,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAE,kBAAkB,EAAEV,SAAS,CAAE;AAAAH,MAAAA,QAAA,EAE3DQ,KAAAA;AAAK,KACD,CAAC,CAAA;AAEZ,GAAA;EAEA,IAAID,EAAE,KAAK,QAAQ,EAAE;AACnB;AACAO,IAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG,CAAA;AACH,GAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,CAAE;IAAAH,QAAA,EAAA,cAC3CL,cAAA,CAACc,KAAK,EAAA;AAACF,MAAAA,EAAE,EAAEA,EAAG;MAACG,IAAI,EAAEC,qBAAU,CAACC,WAAY;AAACT,MAAAA,SAAS,EAAC,kBAAkB;AAAAH,MAAAA,QAAA,EACtEQ,KAAAA;AAAK,KACD,CACP,eAAAb,cAAA,CAACH,YAAY,EAAA;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAC/B,CAAA,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;;"}
@@ -1,5 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
- import Button from '../button/Button.resolver.mjs';
2
+ import Button from '../button/Button.mjs';
3
3
  import '../common/theme.mjs';
4
4
  import '../common/direction.mjs';
5
5
  import '../common/propsValues/control.mjs';
package/build/index.js CHANGED
@@ -21,7 +21,7 @@ require('react/jsx-runtime');
21
21
  var Image = require('./image/Image.js');
22
22
  require('@transferwise/icons');
23
23
  var Body = require('./body/Body.js');
24
- var Button_resolver = require('./button/Button.resolver.js');
24
+ var Button = require('./button/Button.js');
25
25
  var IconButton = require('./iconButton/IconButton.js');
26
26
  var Carousel = require('./carousel/Carousel.js');
27
27
  var Card = require('./card/Card.js');
@@ -106,6 +106,7 @@ var Tooltip = require('./tooltip/Tooltip.js');
106
106
  var Typeahead = require('./typeahead/Typeahead.js');
107
107
  var Upload = require('./upload/Upload.js');
108
108
  var UploadInput = require('./uploadInput/UploadInput.js');
109
+ var Table = require('./table/Table.js');
109
110
  require('@transferwise/neptune-validation');
110
111
  var useDirection = require('./common/hooks/useDirection/useDirection.js');
111
112
  var useLayout = require('./common/hooks/useLayout/useLayout.js');
@@ -164,7 +165,7 @@ Object.defineProperty(exports, "Breakpoint", {
164
165
  });
165
166
  exports.Image = Image.default;
166
167
  exports.Body = Body;
167
- exports.Button = Button_resolver;
168
+ exports.Button = Button;
168
169
  exports.IconButton = IconButton;
169
170
  exports.Carousel = Carousel;
170
171
  exports.Card = Card;
@@ -271,6 +272,7 @@ Object.defineProperty(exports, "UploadStep", {
271
272
  get: function () { return Upload.UploadStep; }
272
273
  });
273
274
  exports.UploadInput = UploadInput;
275
+ exports.Table = Table;
274
276
  exports.useDirection = useDirection.useDirection;
275
277
  exports.useLayout = useLayout.useLayout;
276
278
  exports.useScreenSize = useScreenSize.useScreenSize;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.mjs CHANGED
@@ -19,7 +19,7 @@ import 'react/jsx-runtime';
19
19
  export { default as Image } from './image/Image.mjs';
20
20
  import '@transferwise/icons';
21
21
  export { default as Body } from './body/Body.mjs';
22
- export { default as Button } from './button/Button.resolver.mjs';
22
+ export { default as Button } from './button/Button.mjs';
23
23
  export { default as IconButton } from './iconButton/IconButton.mjs';
24
24
  export { default as Carousel } from './carousel/Carousel.mjs';
25
25
  export { default as Card } from './card/Card.mjs';
@@ -104,6 +104,7 @@ export { default as Tooltip } from './tooltip/Tooltip.mjs';
104
104
  export { default as Typeahead } from './typeahead/Typeahead.mjs';
105
105
  export { default as Upload, UploadStep } from './upload/Upload.mjs';
106
106
  export { default as UploadInput } from './uploadInput/UploadInput.mjs';
107
+ export { default as Table } from './table/Table.mjs';
107
108
  import '@transferwise/neptune-validation';
108
109
  export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
109
110
  export { useLayout } from './common/hooks/useLayout/useLayout.mjs';
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -3,8 +3,6 @@
3
3
  var icons = require('@transferwise/icons');
4
4
  var clsx = require('clsx');
5
5
  var reactIntl = require('react-intl');
6
- require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
7
- var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
8
6
  var Link_messages = require('./Link.messages.js');
9
7
  var jsxRuntime = require('react/jsx-runtime');
10
8
 
@@ -18,17 +16,14 @@ const Link = ({
18
16
  onClick,
19
17
  ...props
20
18
  }) => {
19
+ const isBlank = target === '_blank';
21
20
  const {
22
21
  formatMessage
23
22
  } = reactIntl.useIntl();
24
- const isBlank = target === '_blank';
25
- const classNames = clsx.clsx('np-link', 'd-inline-flex', {
26
- [`np-text-${type}`]: type
27
- }, className);
28
- return /*#__PURE__*/jsxRuntime.jsxs(PrimitiveAnchor, {
23
+ return /*#__PURE__*/jsxRuntime.jsxs("a", {
29
24
  href: href,
30
25
  target: target,
31
- className: classNames,
26
+ className: clsx.clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
32
27
  "aria-label": ariaLabel,
33
28
  rel: isBlank ? 'noreferrer' : undefined,
34
29
  onClick: onClick,
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,eAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
1
+ {"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const isBlank = target === '_blank';\n\n const { formatMessage } = useIntl();\n\n return (\n <a\n href={href}\n target={target}\n className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </a>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,eAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,SAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
@@ -1,8 +1,6 @@
1
1
  import { NavigateAway } from '@transferwise/icons';
2
2
  import { clsx } from 'clsx';
3
3
  import { useIntl } from 'react-intl';
4
- import '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
5
- import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
6
4
  import messages from './Link.messages.mjs';
7
5
  import { jsxs, jsx } from 'react/jsx-runtime';
8
6
 
@@ -16,17 +14,14 @@ const Link = ({
16
14
  onClick,
17
15
  ...props
18
16
  }) => {
17
+ const isBlank = target === '_blank';
19
18
  const {
20
19
  formatMessage
21
20
  } = useIntl();
22
- const isBlank = target === '_blank';
23
- const classNames = clsx('np-link', 'd-inline-flex', {
24
- [`np-text-${type}`]: type
25
- }, className);
26
- return /*#__PURE__*/jsxs(PrimitiveAnchor, {
21
+ return /*#__PURE__*/jsxs("a", {
27
22
  href: href,
28
23
  target: target,
29
- className: classNames,
24
+ className: clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
30
25
  "aria-label": ariaLabel,
31
26
  rel: isBlank ? 'noreferrer' : undefined,
32
27
  onClick: onClick,
@@ -1 +1 @@
1
- {"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,IAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
1
+ {"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const isBlank = target === '_blank';\n\n const { formatMessage } = useIntl();\n\n return (\n <a\n href={href}\n target={target}\n className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </a>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,IAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,IAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
package/build/main.css CHANGED
@@ -518,18 +518,10 @@ div.critical-comms .critical-comms-body {
518
518
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
519
519
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
520
520
  }
521
- [dir="rtl"] .np-avatar-layout-diagonal-mask {
522
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
523
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
524
- }
525
521
  .np-avatar-layout-diagonal-child {
526
522
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
527
523
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
528
524
  }
529
- [dir="rtl"] .np-avatar-layout-diagonal-child {
530
- margin-left: 0;
531
- margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
532
- }
533
525
  .np-avatar-layout-horizontal {
534
526
  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
535
527
  height: var(--np-avatar-layout-size);
@@ -543,9 +535,6 @@ div.critical-comms .critical-comms-body {
543
535
  .np-avatar-layout-horizontal-child {
544
536
  margin-left: calc(var(--np-avatar-offset) * -1);
545
537
  }
546
- [dir="rtl"] .np-avatar-layout-horizontal-child {
547
- margin-right: calc(var(--np-avatar-offset) * -1);
548
- }
549
538
  .np-icon-button {
550
539
  border: none;
551
540
  }
@@ -716,218 +705,6 @@ div.critical-comms .critical-comms-body {
716
705
  .np-btn.disabled[class] {
717
706
  pointer-events: auto;
718
707
  }
719
- .wds-Button {
720
- --Button-background: var(--color-interactive-accent);
721
- --Button-background-hover: var(--color-interactive-accent-hover);
722
- --Button-background-active: var(--color-interactive-accent-active);
723
- --Button-color: var(--color-interactive-control);
724
- --Button-border-radius: var(--radius-full);
725
- --Button-label-gap: var(--size-4);
726
- --Button-large-padding: var(--size-12) var(--size-16);
727
- --Button-medium-padding: var(--size-8) var(--size-12);
728
- --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
729
- --Button-avatar-border-color: var(--color-border-neutral);
730
- --Button-transition-duration: 150ms;
731
- --Button-transition-easing: ease-in-out;
732
- --Button-secondary-background: var(--color-interactive-neutral);
733
- --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
734
- --Button-secondary-background-active: var(--color-interactive-neutral-active);
735
- --Button-secondary-color: var(--color-interactive-primary);
736
- --Button-tertiary-background: var(--color-background-neutral);
737
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
738
- --Button-tertiary-background-active: var(--color-background-neutral-active);
739
- --Button-tertiary-color: var(--color-content-primary);
740
- --Button-minimal-background: transparent;
741
- --Button-minimal-background-hover: var(--color-background-screen-hover);
742
- --Button-minimal-background-active: var(--color-background-screen-active);
743
- --Button-minimal-color: var(--color-interactive-primary);
744
- --Button-primary-negative-background: var(--color-sentiment-negative-primary);
745
- --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
746
- --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
747
- --Button-primary-negative-color: var(--color-contrast);
748
- --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
749
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
750
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
751
- --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
752
- }
753
- .np-theme-personal--bright-green .wds-Button {
754
- --color-contrast: #FFFFFF;
755
- --Button-secondary-color: var(--color-interactive-control);
756
- --Button-secondary-negative-color: var(--color-contrast);
757
- }
758
- /* Button Styles */
759
- .wds-Button {
760
- display: inline-flex;
761
- flex: none;
762
- width: auto;
763
- align-items: center;
764
- justify-content: center;
765
- vertical-align: middle;
766
- text-align: center;
767
- -webkit-text-decoration: none;
768
- text-decoration: none;
769
- white-space: nowrap;
770
- word-wrap: break-word;
771
- -webkit-appearance: none;
772
- -moz-appearance: none;
773
- appearance: none;
774
- background-color: var(--Button-background);
775
- border: none;
776
- border-radius: var(--Button-border-radius);
777
- color: var(--Button-color);
778
- cursor: pointer;
779
- transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
- }
781
- .wds-Button:hover {
782
- background-color: var(--Button-background-hover);
783
- }
784
- .wds-Button:active {
785
- background-color: var(--Button-background-active);
786
- }
787
- .wds-Button.wds-Button--disabled,
788
- .wds-Button:disabled {
789
- mix-blend-mode: luminosity;
790
- opacity: 0.45;
791
- cursor: not-allowed;
792
- }
793
- .wds-Button.wds-Button--disabled:hover,
794
- .wds-Button:disabled:hover,
795
- .wds-Button.wds-Button--disabled:active,
796
- .wds-Button:disabled:active {
797
- background-color: var(--Button-background);
798
- }
799
- .wds-Button--secondary {
800
- --Button-background: var(--Button-secondary-background);
801
- --Button-background-hover: var(--Button-secondary-background-hover);
802
- --Button-background-active: var(--Button-secondary-background-active);
803
- --Button-color: var(--Button-secondary-color);
804
- }
805
- .wds-Button--tertiary {
806
- --Button-background: var(--Button-tertiary-background);
807
- --Button-background-hover: var(--Button-tertiary-background-hover);
808
- --Button-background-active: var(--Button-tertiary-background-active);
809
- --Button-color: var(--Button-tertiary-color);
810
- }
811
- .wds-Button--tertiary .wds-Button-icon--end {
812
- color: var(--color-interactive-primary);
813
- }
814
- .wds-Button--minimal {
815
- --Button-background: var(--Button-minimal-background);
816
- --Button-background-hover: var(--Button-minimal-background-hover);
817
- --Button-background-active: var(--Button-minimal-background-active);
818
- --Button-color: var(--Button-minimal-color);
819
- -webkit-text-decoration: underline;
820
- text-decoration: underline;
821
- text-underline-offset: 3px;
822
- text-decoration-thickness: 1px;
823
- }
824
- .wds-Button--negative.wds-Button--primary {
825
- --Button-background: var(--Button-primary-negative-background);
826
- --Button-background-hover: var(--Button-primary-negative-background-hover);
827
- --Button-background-active: var(--Button-primary-negative-background-active);
828
- --Button-color: var(--Button-primary-negative-color);
829
- }
830
- .wds-Button--negative.wds-Button--secondary {
831
- --Button-background: var(--Button-secondary-negative-background);
832
- --Button-background-hover: var(--Button-secondary-negative-background-hover);
833
- --Button-background-active: var(--Button-secondary-negative-background-active);
834
- --Button-color: var(--Button-secondary-negative-color);
835
- }
836
- .wds-Button--large {
837
- padding: var(--Button-large-padding);
838
- }
839
- .wds-Button--medium {
840
- padding: var(--Button-medium-padding);
841
- }
842
- .wds-Button--medium:has(.wds-Button-avatars) {
843
- padding-inline-start: 8px;
844
- padding-inline-start: var(--size-8);
845
- }
846
- .wds-Button--medium:has(.wds-Button-icon--end) {
847
- padding-inline-end: 8px;
848
- padding-inline-end: var(--size-8);
849
- }
850
- .wds-Button--medium .wds-Button-icon--start {
851
- margin-inline-end: var(--Button-label-gap);
852
- }
853
- .wds-Button--small {
854
- padding: var(--Button-small-padding);
855
- }
856
- .wds-Button--small:has(.wds-Button-icon--start) {
857
- padding-inline-start: 8px;
858
- padding-inline-start: var(--size-8);
859
- }
860
- .wds-Button--small:has(.wds-Button-icon--end) {
861
- padding-inline-end: 8px;
862
- padding-inline-end: var(--size-8);
863
- }
864
- .wds-Button--block {
865
- width: 100%;
866
- }
867
- .wds-Button-avatars {
868
- display: inline-flex;
869
- }
870
- .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
871
- color: var(--Button-color);
872
- }
873
- .wds-Button-icon {
874
- display: inline-block;
875
- }
876
- .wds-Button-content {
877
- position: relative;
878
- }
879
- .wds-Button-content--loading .wds-Button-label,
880
- .wds-Button-content--loading .wds-Button-media,
881
- .wds-Button-content--loading .wds-Button-icon {
882
- visibility: hidden;
883
- opacity: 0;
884
- }
885
- .wds-Button-label {
886
- display: flex;
887
- justify-content: center;
888
- align-items: center;
889
- gap: var(--Button-label-gap);
890
- position: relative;
891
- }
892
- .wds-Button-loader {
893
- position: absolute;
894
- display: flex;
895
- justify-content: center;
896
- align-items: center;
897
- width: 100%;
898
- height: 100%;
899
- }
900
- .wds-Button-loader .process-circle {
901
- stroke: var(--Button-color);
902
- }
903
- /* RTL Styles */
904
- [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
905
- transform: rotate(180deg);
906
- }
907
- [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
908
- transform: rotate(180deg);
909
- }
910
- /* Avatar border transparency */
911
- /* dark buttons get 20% transparency, light buttons get 12% */
912
- .wds-Button-avatars .np-circle {
913
- --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
914
- }
915
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
916
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
917
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
918
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
919
- --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
920
- }
921
- .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
922
- .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
923
- .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
924
- .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
925
- --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
926
- }
927
- .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
928
- .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
929
- --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
930
- }
931
708
  .np-card {
932
709
  overflow: hidden;
933
710
  transition-property: transform, box-shadow;
@@ -19,7 +19,9 @@ const PrimitiveAnchor = /*#__PURE__*/React.forwardRef(({
19
19
  onKeyDown,
20
20
  ...props
21
21
  }, ref) => {
22
- const anchorClasses = clsx.clsx(className);
22
+ const anchorClasses = clsx.clsx('wds-Anchor', {
23
+ 'wds-Anchor--disabled': disabled
24
+ }, className);
23
25
  const handleClick = React.useCallback(event => {
24
26
  if (disabled) {
25
27
  event.preventDefault();
@@ -1 +1 @@
1
- {"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
1
+ {"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(\n 'wds-Anchor',\n {\n 'wds-Anchor--disabled': disabled,\n },\n className,\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CACxB,YAAY,EACZ;AACE,IAAA,sBAAsB,EAAEX,QAAAA;GACzB,EACDH,SAAS,CACV,CAAA;AAED,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}