@transferwise/components 45.14.2 → 45.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +680 -50
- package/build/index.esm.js.map +1 -1
- package/build/index.js +683 -50
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/common/closeButton/CloseButton.css +1 -1
- package/build/styles/inputs/Input.css +1 -1
- package/build/styles/inputs/InputGroup.css +1 -1
- package/build/styles/inputs/SelectInput.css +1 -0
- package/build/styles/inputs/TextArea.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/promoCard/PromoCard.css +1 -1
- package/build/styles/stepper/Stepper.css +1 -1
- package/build/types/common/hooks/useMedia.d.ts +2 -0
- package/build/types/common/hooks/useMedia.d.ts.map +1 -0
- package/build/types/common/hooks/useScreenSize.d.ts +3 -0
- package/build/types/common/hooks/useScreenSize.d.ts.map +1 -0
- package/build/types/common/preventScroll/PreventScroll.d.ts +2 -0
- package/build/types/common/preventScroll/PreventScroll.d.ts.map +1 -0
- package/build/types/dateLookup/dateTrigger/DateTrigger.messages.d.ts +7 -7
- package/build/types/dateLookup/dateTrigger/DateTrigger.messages.d.ts.map +1 -1
- package/build/types/index.d.ts +4 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inputs/Input.d.ts +1 -0
- package/build/types/inputs/Input.d.ts.map +1 -1
- package/build/types/inputs/SearchInput.d.ts +10 -0
- package/build/types/inputs/SearchInput.d.ts.map +1 -0
- package/build/types/inputs/SelectInput.d.ts +41 -0
- package/build/types/inputs/SelectInput.d.ts.map +1 -0
- package/build/types/inputs/_BottomSheet.d.ts +17 -0
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -0
- package/build/types/inputs/_ButtonInput.d.ts +6 -0
- package/build/types/inputs/_ButtonInput.d.ts.map +1 -0
- package/build/types/inputs/_Popover.d.ts +18 -0
- package/build/types/inputs/_Popover.d.ts.map +1 -0
- package/build/types/inputs/_common.d.ts.map +1 -1
- package/build/types/logo/Logo.d.ts.map +1 -1
- package/build/types/stepper/Stepper.d.ts.map +1 -1
- package/build/types/tile/Tile.d.ts.map +1 -1
- package/build/types/utilities/wrapInFragment.d.ts +3 -0
- package/build/types/utilities/wrapInFragment.d.ts.map +1 -0
- package/package.json +26 -20
- package/src/common/closeButton/CloseButton.css +1 -1
- package/src/common/hooks/useMedia.spec.ts +39 -0
- package/src/common/hooks/useMedia.ts +15 -0
- package/src/common/hooks/useScreenSize.ts +7 -0
- package/src/common/preventScroll/PreventScroll.tsx +6 -0
- package/src/decision/Decision.story.js +11 -11
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +12 -12
- package/src/i18n/en.json +1 -0
- package/src/index.ts +8 -0
- package/src/inputs/Input.css +1 -1
- package/src/inputs/Input.less +14 -0
- package/src/inputs/Input.tsx +6 -2
- package/src/inputs/InputGroup.css +1 -1
- package/src/inputs/InputGroup.less +5 -0
- package/src/inputs/SearchInput.story.tsx +40 -0
- package/src/inputs/SearchInput.tsx +35 -0
- package/src/inputs/SelectInput.css +1 -0
- package/src/inputs/SelectInput.less +183 -0
- package/src/inputs/SelectInput.spec.tsx +120 -0
- package/src/inputs/SelectInput.story.tsx +259 -0
- package/src/inputs/SelectInput.tsx +565 -0
- package/src/inputs/TextArea.css +1 -1
- package/src/inputs/TextArea.less +5 -0
- package/src/inputs/_BottomSheet.less +107 -0
- package/src/inputs/_BottomSheet.tsx +128 -0
- package/src/inputs/_ButtonInput.less +7 -0
- package/src/inputs/_ButtonInput.tsx +27 -0
- package/src/inputs/_Popover.less +38 -0
- package/src/inputs/_Popover.tsx +118 -0
- package/src/inputs/_common.less +0 -4
- package/src/inputs/_common.ts +0 -1
- package/src/logo/Logo.js +3 -21
- package/src/logo/__snapshots__/Logo.spec.js.snap +78 -30
- package/src/main.css +1 -1
- package/src/main.less +4 -0
- package/src/promoCard/PromoCard.css +1 -1
- package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap +1 -1
- package/src/ssr.spec.js +7 -0
- package/src/stepper/Stepper.css +1 -1
- package/src/stepper/Stepper.less +1 -9
- package/src/stepper/Stepper.spec.js +4 -4
- package/src/stepper/Stepper.tsx +2 -5
- package/src/tile/Tile.js +5 -11
- package/src/tile/__snapshots__/Tile.spec.js.snap +7 -9
- package/src/utilities/wrapInFragment.tsx +3 -0
- /package/src/dateLookup/dateTrigger/{DateTrigger.messages.js → DateTrigger.messages.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:
|
|
1
|
+
.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:9999px;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-
|
|
1
|
+
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-input::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-input::placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-input--shape-rectangle{border-radius:10px!important;border-radius:var(--radius-small)!important}.np-input--shape-pill{border-radius:9999px!important;border-radius:var(--radius-full)!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-input-group{border-radius:
|
|
1
|
+
.np-input-group{border-radius:9999px;border-radius:var(--radius-full);display:inline-grid;grid-auto-columns:minmax(0,1fr)}.np-input-group>*{grid-column-start:1;grid-row-start:1}.np-input-addon{align-items:center;color:#c9cbce;color:var(--color-interactive-secondary);display:inline-flex;pointer-events:none;transition-duration:.15s;transition-property:color,opacity;transition-timing-function:ease-out;z-index:10}.np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive){mix-blend-mode:luminosity;opacity:.45}.np-input-group:has(>:is(input,button,select):focus-visible) .np-input-addon{color:var(--color-interactive-primary)}.np-input-group:has(>:is(input,button,select):hover) .np-input-addon{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-input-addon--placement-start{justify-self:start}.np-input-addon--placement-end{justify-self:end}.np-input-addon--interactive>*{pointer-events:auto}.np-input-addon--padding-sm{padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8)}.np-input-addon--padding-md{padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16)}.np-input-addon--padding-md.np-input-addon--placement-start{padding-inline-end:8px;padding-inline-end:var(--size-8)}.np-input-addon--padding-md.np-input-addon--placement-end{padding-inline-start:8px;padding-inline-start:var(--size-8)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start-width:1px;height:24px;height:var(--size-24)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-
|
|
1
|
+
.np-form-control{--ring-width:1px;--ring-color:var(--color-interactive-secondary);background-color:transparent;border:none;box-shadow:inset 0 0 0 var(--ring-width) var(--ring-color);color:#37517e;color:var(--color-content-primary);min-height:0;padding-left:16px;padding-left:var(--size-16);padding-right:16px;padding-right:var(--size-16);transition-duration:.3s;transition-property:color,opacity,box-shadow;transition-timing-function:ease-in-out}.np-form-control:focus-visible{outline:none}.np-form-control[aria-invalid=true]{--ring-width:2px;--ring-color:var(--color-sentiment-negative)!important}.np-form-control:hover:enabled{--ring-width:2px;--ring-color:var(--color-interactive-secondary-hover)}.np-form-control:focus:enabled{--ring-width:3px;--ring-color:var(--color-interactive-primary)}.np-form-control--size-auto{padding-bottom:12px;padding-bottom:var(--size-12);padding-top:12px;padding-top:var(--size-12)}.np-form-control--size-lg,.np-form-control--size-md,.np-form-control--size-sm{padding-bottom:0!important;padding-top:0!important}.np-form-control--size-sm{height:32px!important;height:var(--size-32)!important}.np-form-control--size-md{height:48px!important;height:var(--size-48)!important}.np-form-control--size-lg{height:72px!important;height:var(--size-72)!important}.np-text-area{border-radius:10px!important;border-radius:var(--radius-small)!important;min-height:72px;min-height:var(--size-72);overscroll-behavior:none;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}.np-text-area::-moz-placeholder{color:#768e9c;color:var(--color-content-tertiary)}.np-text-area::placeholder{color:#768e9c;color:var(--color-content-tertiary)}
|