@skyscanner/backpack-web 35.5.0 → 35.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/bpk-component-accordion/src/BpkAccordionItem.module.css +1 -1
  2. package/bpk-component-banner-alert/src/withBannerAlertState.d.ts +4 -4
  3. package/bpk-component-button/src/BpkButtonBase.module.css +1 -1
  4. package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css +1 -1
  5. package/bpk-component-calendar/src/BpkCalendarContainer.d.ts +4 -4
  6. package/bpk-component-card/src/BpkDividedCard.module.css +1 -1
  7. package/bpk-component-card-button/src/BpkSaveButton.module.css +1 -1
  8. package/bpk-component-card-list/index.d.ts +2 -0
  9. package/bpk-component-card-list/index.js +20 -0
  10. package/bpk-component-card-list/src/BpkCardList.d.ts +3 -0
  11. package/bpk-component-card-list/src/BpkCardList.js +51 -0
  12. package/bpk-component-card-list/src/BpkCardList.module.css +18 -0
  13. package/bpk-component-card-list/src/common-types.d.ts +8 -0
  14. package/bpk-component-card-list/src/common-types.js +1 -0
  15. package/bpk-component-checkbox/src/BpkCheckbox.module.css +1 -1
  16. package/bpk-component-chip/src/BpkSelectableChip.module.css +1 -1
  17. package/bpk-component-chip-group/src/BpkChipGroup.module.css +1 -1
  18. package/bpk-component-datepicker/src/BpkDatepicker.d.ts +4 -4
  19. package/bpk-component-dialog/src/BpkDialogInner.d.ts +4 -4
  20. package/bpk-component-drawer/src/BpkDrawer.js +2 -1
  21. package/bpk-component-drawer/src/BpkDrawerContent.d.ts +21 -0
  22. package/bpk-component-drawer/src/BpkDrawerContent.js +33 -56
  23. package/bpk-component-drawer/src/BpkDrawerContent.module.css +1 -1
  24. package/bpk-component-image/src/withLazyLoading.d.ts +2 -2
  25. package/bpk-component-image/src/withLoadingBehavior.d.ts +2 -2
  26. package/bpk-component-info-banner/src/withBannerAlertState.d.ts +4 -4
  27. package/bpk-component-input/src/withOpenEvents.d.ts +2 -2
  28. package/bpk-component-label/src/BpkLabel.module.css +1 -1
  29. package/bpk-component-map/src/BpkPriceMarker.module.css +1 -1
  30. package/bpk-component-page-indicator/src/BpkPageIndicator.module.css +1 -1
  31. package/bpk-component-radio/src/BpkRadio.module.css +1 -1
  32. package/bpk-component-rtl-toggle/src/updateOnDirectionChange.d.ts +4 -4
  33. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts +4 -4
  34. package/bpk-component-segmented-control/src/BpkSegmentedControl.module.css +1 -1
  35. package/bpk-component-slider/src/BpkSlider.d.ts +4 -0
  36. package/bpk-component-slider/src/BpkSlider.js +58 -6
  37. package/bpk-component-switch/src/BpkSwitch.module.css +1 -1
  38. package/bpk-component-ticket/src/BpkTicket.js +7 -1
  39. package/bpk-scrim-utils/index.d.ts +4 -4
  40. package/bpk-scrim-utils/src/withScrim.d.ts +4 -4
  41. package/package.json +1 -2
package/bpk-component-accordion/src/BpkAccordionItem.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}
18
+ .bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 hsla(0,0%,100%,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}
package/bpk-component-banner-alert/src/withBannerAlertState.d.ts CHANGED
@@ -25,13 +25,13 @@ declare const withBannerAlertState: <P extends BpkBannerAlertProps>(WrappedCompo
25
25
  } | ((prevState: Readonly<{
26
26
  expanded?: boolean;
27
27
  show?: boolean;
28
- }>, props: Readonly<P & WithBannerAlertStateProps>) => Pick<{
28
+ }>, props: Readonly<P & WithBannerAlertStateProps>) => {
29
29
  expanded?: boolean;
30
30
  show?: boolean;
31
- }, K> | {
31
+ } | Pick<{
32
32
  expanded?: boolean;
33
33
  show?: boolean;
34
- } | null) | Pick<{
34
+ }, K> | null) | Pick<{
35
35
  expanded?: boolean;
36
36
  show?: boolean;
37
37
  }, K> | null, callback?: (() => void) | undefined): void;
@@ -52,7 +52,7 @@ declare const withBannerAlertState: <P extends BpkBannerAlertProps>(WrappedCompo
52
52
  getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
53
53
  expanded?: boolean;
54
54
  show?: boolean;
55
- }>): any | null;
55
+ }>): any;
56
56
  componentDidUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
57
57
  expanded?: boolean;
58
58
  show?: boolean;
package/bpk-component-button/src/BpkButtonBase.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}.bpk-button--featured{composes:bpk-button;color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive{composes:bpk-button;color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--linkOnDark{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--linkOnDark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--linkOnDark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primaryOnDark{composes:bpk-button;color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primaryOnLight{composes:bpk-button;color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{composes:bpk-button;color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondaryOnDark{composes:bpk-button;color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}
18
+ .bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}.bpk-button--featured{composes:bpk-button;color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive{composes:bpk-button;color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--linkOnDark{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--linkOnDark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--linkOnDark:disabled{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primaryOnDark{composes:bpk-button;color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primaryOnLight{composes:bpk-button;color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{composes:bpk-button;color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondaryOnDark{composes:bpk-button;color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}
package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
18
+ .bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
package/bpk-component-calendar/src/BpkCalendarContainer.d.ts CHANGED
@@ -57,7 +57,7 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
57
57
  handleDateKeyDown: (event: KeyboardEvent) => void;
58
58
  render(): import("react/jsx-runtime").JSX.Element;
59
59
  context: unknown;
60
- setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<P>>) => Pick<State, K> | State | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
60
+ setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<P>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
61
61
  forceUpdate(callback?: (() => void) | undefined): void;
62
62
  readonly props: Readonly<CalendarProps<P>>;
63
63
  state: Readonly<State>;
@@ -68,7 +68,7 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
68
68
  shouldComponentUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): boolean;
69
69
  componentWillUnmount?(): void;
70
70
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
71
- getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<P>>, prevState: Readonly<State>): any | null;
71
+ getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<P>>, prevState: Readonly<State>): any;
72
72
  componentDidUpdate?(prevProps: Readonly<CalendarProps<P>>, prevState: Readonly<State>, snapshot?: any): void;
73
73
  componentWillMount?(): void;
74
74
  UNSAFE_componentWillMount?(): void;
@@ -107,7 +107,7 @@ declare const _default: {
107
107
  handleDateKeyDown: (event: KeyboardEvent) => void;
108
108
  render(): import("react/jsx-runtime").JSX.Element;
109
109
  context: unknown;
110
- setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<import("./composeCalendar").Props>>) => Pick<State, K> | State | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
110
+ setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<import("./composeCalendar").Props>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
111
111
  forceUpdate(callback?: (() => void) | undefined): void;
112
112
  readonly props: Readonly<CalendarProps<import("./composeCalendar").Props>>;
113
113
  state: Readonly<State>;
@@ -118,7 +118,7 @@ declare const _default: {
118
118
  shouldComponentUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): boolean;
119
119
  componentWillUnmount?(): void;
120
120
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
121
- getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, prevState: Readonly<State>): any | null;
121
+ getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, prevState: Readonly<State>): any;
122
122
  componentDidUpdate?(prevProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, prevState: Readonly<State>, snapshot?: any): void;
123
123
  componentWillMount?(): void;
124
124
  UNSAFE_componentWillMount?(): void;
package/bpk-component-card/src/BpkDividedCard.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-divided-card--content{display:flex;height:100%;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex;min-width:15rem;max-width:45rem}.bpk-divided-card--horizontal-container{display:flex;min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}
18
+ .bpk-divided-card--content{display:flex;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex}.bpk-divided-card--horizontal-container{display:flex}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}
package/bpk-component-card-button/src/BpkSaveButton.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0);cursor:pointer}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}
18
+ @keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0);cursor:pointer}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:hsla(0,0%,100%,.8)}
package/bpk-component-card-list/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import BpkCardList from "./src/BpkCardList";
2
+ export default BpkCardList;
package/bpk-component-card-list/index.js ADDED
@@ -0,0 +1,20 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ import BpkCardList from "./src/BpkCardList";
20
+ export default BpkCardList;
package/bpk-component-card-list/src/BpkCardList.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type CardListProps from './common-types';
2
+ declare const BpkCardList: (props: CardListProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default BpkCardList;
package/bpk-component-card-list/src/BpkCardList.js ADDED
@@ -0,0 +1,51 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ import { BpkButtonV2 } from "../../bpk-component-button";
20
+ import BpkSectionHeader from "../../bpk-component-section-header";
21
+ import { cssModules } from "../../bpk-react-utils";
22
+ import STYLES from "./BpkCardList.module.css";
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
+ const getClassName = cssModules(STYLES);
25
+ const BpkCardList = props => {
26
+ const {
27
+ buttonHref,
28
+ buttonText,
29
+ description,
30
+ onButtonClick,
31
+ title
32
+ } = props;
33
+ const button = buttonText && /*#__PURE__*/_jsx(BpkButtonV2, {
34
+ onClick: onButtonClick,
35
+ href: buttonHref,
36
+ children: buttonText
37
+ });
38
+ return /*#__PURE__*/_jsxs("div", {
39
+ className: getClassName('bpk-card-list'),
40
+ children: [/*#__PURE__*/_jsx(BpkSectionHeader, {
41
+ title: title,
42
+ description: description,
43
+ button: button
44
+ }), /*#__PURE__*/_jsx("div", {
45
+ className: getClassName('bpk-card-list--card-list'),
46
+ "data-testid": "bpk-card-list--card-list",
47
+ children: "TODO: CARDS"
48
+ })]
49
+ });
50
+ };
51
+ export default BpkCardList;
package/bpk-component-card-list/src/BpkCardList.module.css ADDED
@@ -0,0 +1,18 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+ .bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column}
package/bpk-component-card-list/src/common-types.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ type CardListProps = {
2
+ title: string;
3
+ description?: string;
4
+ buttonText?: string;
5
+ onButtonClick?: () => void;
6
+ buttonHref?: string;
7
+ };
8
+ export default CardListProps;
package/bpk-component-card-list/src/common-types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/bpk-component-checkbox/src/BpkCheckbox.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-checkbox{position:relative;display:inline-block;padding-left:1.75rem;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}html[dir=rtl] .bpk-checkbox{padding-right:1.75rem;padding-left:0}.bpk-checkbox__label{vertical-align:baseline}.bpk-checkbox__label--small{margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-checkbox--white{color:#fff}.bpk-checkbox--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-checkbox--disabled--white{color:rgba(255,255,255,.5)}.bpk-checkbox--invalid input[type=checkbox]{border:.1875rem solid #e70866}.bpk-checkbox__input{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.1875rem solid #626971;border-radius:.25rem;cursor:pointer;vertical-align:text-bottom;appearance:none}html[dir=rtl] .bpk-checkbox__input{right:0;left:auto}@media screen\0 {.bpk-checkbox__input{background:none !important}}.bpk-checkbox__input:checked,.bpk-checkbox__input:indeterminate{background-color:#0062e3;background-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227))}.bpk-checkbox__input:checked:disabled,.bpk-checkbox__input:indeterminate:disabled{border-color:rgba(0,0,0,.2);background:none}.bpk-checkbox__input:checked:not(:indeterminate)::before,.bpk-checkbox__input:checked:not(:indeterminate)::after{position:absolute;content:"";transform:rotate(45deg);border-radius:2px;background-color:#fff}.bpk-checkbox__input:checked:not(:indeterminate)::before{top:.4375rem;left:0;width:.5rem;height:.1875rem}.bpk-checkbox__input:checked:not(:indeterminate)::after{top:.125rem;left:.4375rem;width:.1875rem;height:.6875rem}.bpk-checkbox__input:checked:not(:indeterminate):disabled::before,.bpk-checkbox__input:checked:not(:indeterminate):disabled::after{background-color:rgba(0,0,0,.2)}.bpk-checkbox__input:disabled{border-color:rgba(0,0,0,.2)}.bpk-checkbox__input-indeterminate::before{position:absolute;top:.3125rem;left:.125rem;content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox__input:disabled{cursor:inherit}.bpk-checkbox__input-white{background-color:#fff}.bpk-checkbox__asterisk{color:#e70866}
18
+ .bpk-checkbox{position:relative;display:inline-block;padding-left:1.75rem;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}html[dir=rtl] .bpk-checkbox{padding-right:1.75rem;padding-left:0}.bpk-checkbox__label{vertical-align:baseline}.bpk-checkbox__label--small{margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-checkbox--white{color:#fff}.bpk-checkbox--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-checkbox--disabled--white{color:hsla(0,0%,100%,.5)}.bpk-checkbox--invalid input[type=checkbox]{border:.1875rem solid #e70866}.bpk-checkbox__input{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;border:.1875rem solid #626971;border-radius:.25rem;cursor:pointer;vertical-align:text-bottom;appearance:none}html[dir=rtl] .bpk-checkbox__input{right:0;left:auto}@media screen\0 {.bpk-checkbox__input{background:none !important}}.bpk-checkbox__input:checked,.bpk-checkbox__input:indeterminate{background-color:#0062e3;background-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-checkbox-checked-color, rgb(0, 98, 227))}.bpk-checkbox__input:checked:disabled,.bpk-checkbox__input:indeterminate:disabled{border-color:rgba(0,0,0,.2);background:none}.bpk-checkbox__input:checked:not(:indeterminate)::before,.bpk-checkbox__input:checked:not(:indeterminate)::after{position:absolute;content:"";transform:rotate(45deg);border-radius:2px;background-color:#fff}.bpk-checkbox__input:checked:not(:indeterminate)::before{top:.4375rem;left:0;width:.5rem;height:.1875rem}.bpk-checkbox__input:checked:not(:indeterminate)::after{top:.125rem;left:.4375rem;width:.1875rem;height:.6875rem}.bpk-checkbox__input:checked:not(:indeterminate):disabled::before,.bpk-checkbox__input:checked:not(:indeterminate):disabled::after{background-color:rgba(0,0,0,.2)}.bpk-checkbox__input:disabled{border-color:rgba(0,0,0,.2)}.bpk-checkbox__input-indeterminate::before{position:absolute;top:.3125rem;left:.125rem;content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox__input:disabled{cursor:inherit}.bpk-checkbox__input-white{background-color:#fff}.bpk-checkbox__asterisk{color:#e70866}
package/bpk-component-chip/src/BpkSelectableChip.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}
18
+ .bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}
package/bpk-component-chip-group/src/BpkChipGroup.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-chip-group-container{display:flex;margin:0 -0.25rem;align-items:center;white-space:nowrap}.bpk-chip-group{display:flex;margin:0;padding:.25rem;align-items:baseline;border:none;gap:.5rem}.bpk-chip-group--wrap{padding-top:0;padding-bottom:0;flex-wrap:wrap}.bpk-sticky-chip-container:first-child{margin-inline-start:.25rem}.bpk-sticky-chip-container{margin-inline-end:.25rem;padding-inline-end:.5rem;box-shadow:-1px 0 0 0 #c1c7cf inset}html[dir=rtl] .bpk-sticky-chip-container{box-shadow:1px 0 0 0 #c1c7cf inset}.bpk-sticky-chip-container--on-dark{box-shadow:-1px 0 0 0 rgba(255,255,255,.5) inset}html[dir=rtl] .bpk-sticky-chip-container--on-dark{box-shadow:1px 0 0 0 rgba(255,255,255,.5) inset}
18
+ .bpk-chip-group-container{display:flex;margin:0 -0.25rem;align-items:center;white-space:nowrap}.bpk-chip-group{display:flex;margin:0;padding:.25rem;align-items:baseline;border:none;gap:.5rem}.bpk-chip-group--wrap{padding-top:0;padding-bottom:0;flex-wrap:wrap}.bpk-sticky-chip-container:first-child{margin-inline-start:.25rem}.bpk-sticky-chip-container{margin-inline-end:.25rem;padding-inline-end:.5rem;box-shadow:-1px 0 0 0 #c1c7cf inset}html[dir=rtl] .bpk-sticky-chip-container{box-shadow:1px 0 0 0 #c1c7cf inset}.bpk-sticky-chip-container--on-dark{box-shadow:-1px 0 0 0 hsla(0,0%,100%,.5) inset}html[dir=rtl] .bpk-sticky-chip-container--on-dark{box-shadow:1px 0 0 0 hsla(0,0%,100%,.5) inset}
package/bpk-component-datepicker/src/BpkDatepicker.d.ts CHANGED
@@ -101,13 +101,13 @@ declare class BpkDatepicker extends Component<Props, State> {
101
101
  maxDate: Date;
102
102
  }> & {
103
103
  [rest: string]: any;
104
- }>) => Pick<{
104
+ }>) => {
105
105
  preventKeyboardFocus: boolean;
106
106
  focusedDate: Date;
107
- }, K> | {
107
+ } | Pick<{
108
108
  preventKeyboardFocus: boolean;
109
109
  focusedDate: Date;
110
- } | null) | Pick<{
110
+ }, K> | null) | Pick<{
111
111
  preventKeyboardFocus: boolean;
112
112
  focusedDate: Date;
113
113
  }, K> | null, callback?: (() => void) | undefined): void;
@@ -154,7 +154,7 @@ declare class BpkDatepicker extends Component<Props, State> {
154
154
  }>, prevState: Readonly<{
155
155
  preventKeyboardFocus: boolean;
156
156
  focusedDate: Date;
157
- }>): any | null;
157
+ }>): any;
158
158
  componentDidUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
159
159
  onDateClick: ((date: Date) => void) | null;
160
160
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
package/bpk-component-dialog/src/BpkDialogInner.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const _default: {
7
7
  dialogRef: (ref: HTMLElement | null | undefined) => void;
8
8
  render(): import("react/jsx-runtime").JSX.Element;
9
9
  context: unknown;
10
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
10
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
11
11
  forceUpdate(callback?: (() => void) | undefined): void;
12
12
  readonly props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>;
13
13
  state: Readonly<{}>;
@@ -16,7 +16,7 @@ declare const _default: {
16
16
  };
17
17
  shouldComponentUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
18
18
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
19
- getSnapshotBeforeUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any | null;
19
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
20
20
  componentDidUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
21
21
  componentWillMount?(): void;
22
22
  UNSAFE_componentWillMount?(): void;
@@ -32,7 +32,7 @@ declare const _default: {
32
32
  dialogRef: (ref: HTMLElement | null | undefined) => void;
33
33
  render(): import("react/jsx-runtime").JSX.Element;
34
34
  context: unknown;
35
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
35
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
36
36
  forceUpdate(callback?: (() => void) | undefined): void;
37
37
  readonly props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>;
38
38
  state: Readonly<{}>;
@@ -41,7 +41,7 @@ declare const _default: {
41
41
  };
42
42
  shouldComponentUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
43
43
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
44
- getSnapshotBeforeUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any | null;
44
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
45
45
  componentDidUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
46
46
  componentWillMount?(): void;
47
47
  UNSAFE_componentWillMount?(): void;
package/bpk-component-drawer/src/BpkDrawer.js CHANGED
@@ -92,6 +92,7 @@ BpkDrawer.defaultProps = {
92
92
  contentClassName: null,
93
93
  closeLabel: null,
94
94
  closeText: null,
95
- hideTitle: false
95
+ hideTitle: false,
96
+ padded: true
96
97
  };
97
98
  export default BpkDrawer;
package/bpk-component-drawer/src/BpkDrawerContent.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import type { ReactNode } from 'react';
2
+ type Props = {
3
+ children: ReactNode;
4
+ dialogRef: () => React.RefObject<HTMLElement>;
5
+ onCloseAnimationComplete: () => void;
6
+ onClose: () => void;
7
+ id: string;
8
+ title: string;
9
+ className?: string;
10
+ contentClassName?: string;
11
+ closeLabel?: string;
12
+ closeText?: string;
13
+ isDrawerShown?: boolean;
14
+ hideTitle?: boolean;
15
+ closeOnScrimClick?: boolean;
16
+ isIphone?: boolean;
17
+ isIpad?: boolean;
18
+ padded?: boolean;
19
+ };
20
+ declare const BpkDrawerContent: ({ children, className, closeLabel, closeOnScrimClick, closeText, contentClassName, dialogRef, hideTitle, id, isDrawerShown, isIpad, isIphone, onClose, onCloseAnimationComplete, padded, title, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
21
+ export default BpkDrawerContent;
package/bpk-component-drawer/src/BpkDrawerContent.js CHANGED
@@ -14,37 +14,42 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */import PropTypes from 'prop-types';
17
+ */
18
+
19
+ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
18
20
  import Transition from 'react-transition-group/Transition';
19
21
  import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
22
+
23
+ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
20
24
  import BpkCloseButton from "../../bpk-component-close-button";
25
+ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
21
26
  import { BpkButtonLink } from "../../bpk-component-link";
22
27
  import { cssModules } from "../../bpk-react-utils";
23
28
  import STYLES from "./BpkDrawerContent.module.css";
24
29
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
25
30
  const getClassName = cssModules(STYLES);
26
- const BpkDrawerContent = props => {
27
- const {
28
- children,
29
- className,
30
- closeLabel,
31
- closeOnScrimClick,
32
- // Unused from withScrim scrim HOC
33
- closeText,
34
- contentClassName,
35
- dialogRef,
36
- hideTitle,
37
- id,
38
- isDrawerShown,
39
- isIpad,
40
- // Unused from withScrim scrim HOC
41
- isIphone,
42
- // Unused from withScrim scrim HOC
43
- onClose,
44
- onCloseAnimationComplete,
45
- title,
46
- ...rest
47
- } = props;
31
+ const BpkDrawerContent = ({
32
+ children,
33
+ className,
34
+ closeLabel,
35
+ closeOnScrimClick = true,
36
+ // Unused from withScrim scrim HOC
37
+ closeText,
38
+ contentClassName,
39
+ dialogRef,
40
+ hideTitle = false,
41
+ id,
42
+ isDrawerShown = true,
43
+ isIpad = false,
44
+ // Unused from withScrim scrim HOC
45
+ isIphone = false,
46
+ // Unused from withScrim scrim HOC
47
+ onClose,
48
+ onCloseAnimationComplete,
49
+ padded,
50
+ title,
51
+ ...rest
52
+ }) => {
48
53
  const drawerClassNames = [getClassName('bpk-drawer')];
49
54
  const headerClassNames = [getClassName('bpk-drawer__heading')];
50
55
  const contentClassNames = [getClassName('bpk-drawer__content')];
@@ -54,6 +59,9 @@ const BpkDrawerContent = props => {
54
59
  if (hideTitle) {
55
60
  headerClassNames.push(getClassName('bpk-drawer__heading--visually-hidden'));
56
61
  }
62
+ if (padded) {
63
+ contentClassNames.push(getClassName('bpk-drawer__content--padded'));
64
+ }
57
65
  if (contentClassName) {
58
66
  contentClassNames.push(contentClassName);
59
67
  }
@@ -68,12 +76,9 @@ const BpkDrawerContent = props => {
68
76
  exit: true,
69
77
  in: isDrawerShown,
70
78
  onExited: onCloseAnimationComplete,
71
- children: status =>
72
- /*#__PURE__*/
73
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
74
- _jsxs("section", {
79
+ children: status => /*#__PURE__*/_jsxs("section", {
75
80
  id: id,
76
- tabIndex: "-1",
81
+ tabIndex: -1,
77
82
  role: "dialog",
78
83
  "aria-labelledby": headingId,
79
84
  className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`)].join(' '),
@@ -102,32 +107,4 @@ const BpkDrawerContent = props => {
102
107
  }, "dialog")
103
108
  });
104
109
  };
105
- BpkDrawerContent.propTypes = {
106
- children: PropTypes.node.isRequired,
107
- dialogRef: PropTypes.func.isRequired,
108
- onCloseAnimationComplete: PropTypes.func.isRequired,
109
- onClose: PropTypes.func.isRequired,
110
- id: PropTypes.string.isRequired,
111
- title: PropTypes.string.isRequired,
112
- className: PropTypes.string,
113
- contentClassName: PropTypes.string,
114
- closeLabel: PropTypes.string,
115
- closeText: PropTypes.string,
116
- isDrawerShown: PropTypes.bool,
117
- hideTitle: PropTypes.bool,
118
- closeOnScrimClick: PropTypes.bool,
119
- isIphone: PropTypes.bool,
120
- isIpad: PropTypes.bool
121
- };
122
- BpkDrawerContent.defaultProps = {
123
- className: null,
124
- contentClassName: null,
125
- closeLabel: null,
126
- closeText: null,
127
- isDrawerShown: true,
128
- hideTitle: false,
129
- closeOnScrimClick: true,
130
- isIphone: false,
131
- isIpad: false
132
- };
133
110
  export default BpkDrawerContent;
package/bpk-component-drawer/src/BpkDrawerContent.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;padding:1rem;flex:1 1 100%;overflow-y:auto}
18
+ .bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;flex:1 1 100%;overflow-y:auto}.bpk-drawer__content--padded{padding:1rem}
package/bpk-component-image/src/withLazyLoading.d.ts CHANGED
@@ -24,7 +24,7 @@ export default function withLazyLoading<P extends object>(WrappedComponent: Comp
24
24
  isInViewPort: () => boolean;
25
25
  render(): import("react/jsx-runtime").JSX.Element;
26
26
  context: unknown;
27
- setState<K extends "inView">(state: WithLazyLoadingState | ((prevState: Readonly<WithLazyLoadingState>, props: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>) => Pick<WithLazyLoadingState, K> | WithLazyLoadingState | null) | Pick<WithLazyLoadingState, K> | null, callback?: (() => void) | undefined): void;
27
+ setState<K extends "inView">(state: WithLazyLoadingState | ((prevState: Readonly<WithLazyLoadingState>, props: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>) => WithLazyLoadingState | Pick<WithLazyLoadingState, K> | null) | Pick<WithLazyLoadingState, K> | null, callback?: (() => void) | undefined): void;
28
28
  forceUpdate(callback?: (() => void) | undefined): void;
29
29
  readonly props: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>;
30
30
  state: Readonly<WithLazyLoadingState>;
@@ -33,7 +33,7 @@ export default function withLazyLoading<P extends object>(WrappedComponent: Comp
33
33
  };
34
34
  shouldComponentUpdate?(nextProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, nextState: Readonly<WithLazyLoadingState>, nextContext: any): boolean;
35
35
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
36
- getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, prevState: Readonly<WithLazyLoadingState>): any | null;
36
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, prevState: Readonly<WithLazyLoadingState>): any;
37
37
  componentDidUpdate?(prevProps: Readonly<Omit<P, "inView"> & WithLazyLoadingProps>, prevState: Readonly<WithLazyLoadingState>, snapshot?: any): void;
38
38
  componentWillMount?(): void;
39
39
  UNSAFE_componentWillMount?(): void;
package/bpk-component-image/src/withLoadingBehavior.d.ts CHANGED
@@ -11,7 +11,7 @@ export default function withLoadingBehavior<P extends object>(WrappedComponent:
11
11
  onLoad: () => void;
12
12
  render(): import("react/jsx-runtime").JSX.Element;
13
13
  context: unknown;
14
- setState<K extends "loading">(state: State | ((prevState: Readonly<State>, props: Readonly<Omit<P, keyof InjectedProps>>) => Pick<State, K> | State | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
14
+ setState<K extends "loading">(state: State | ((prevState: Readonly<State>, props: Readonly<Omit<P, keyof InjectedProps>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
15
15
  forceUpdate(callback?: (() => void) | undefined): void;
16
16
  readonly props: Readonly<Omit<P, keyof InjectedProps>>;
17
17
  state: Readonly<State>;
@@ -22,7 +22,7 @@ export default function withLoadingBehavior<P extends object>(WrappedComponent:
22
22
  shouldComponentUpdate?(nextProps: Readonly<Omit<P, keyof InjectedProps>>, nextState: Readonly<State>, nextContext: any): boolean;
23
23
  componentWillUnmount?(): void;
24
24
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
25
- getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, keyof InjectedProps>>, prevState: Readonly<State>): any | null;
25
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<P, keyof InjectedProps>>, prevState: Readonly<State>): any;
26
26
  componentDidUpdate?(prevProps: Readonly<Omit<P, keyof InjectedProps>>, prevState: Readonly<State>, snapshot?: any): void;
27
27
  componentWillMount?(): void;
28
28
  UNSAFE_componentWillMount?(): void;
package/bpk-component-info-banner/src/withBannerAlertState.d.ts CHANGED
@@ -25,13 +25,13 @@ declare const withBannerAlertState: <P extends BpkInfoBannerProps>(WrappedCompon
25
25
  } | ((prevState: Readonly<{
26
26
  expanded?: boolean;
27
27
  show?: boolean;
28
- }>, props: Readonly<P & WithBannerAlertStateProps>) => Pick<{
28
+ }>, props: Readonly<P & WithBannerAlertStateProps>) => {
29
29
  expanded?: boolean;
30
30
  show?: boolean;
31
- }, K> | {
31
+ } | Pick<{
32
32
  expanded?: boolean;
33
33
  show?: boolean;
34
- } | null) | Pick<{
34
+ }, K> | null) | Pick<{
35
35
  expanded?: boolean;
36
36
  show?: boolean;
37
37
  }, K> | null, callback?: (() => void) | undefined): void;
@@ -52,7 +52,7 @@ declare const withBannerAlertState: <P extends BpkInfoBannerProps>(WrappedCompon
52
52
  getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
53
53
  expanded?: boolean;
54
54
  show?: boolean;
55
- }>): any | null;
55
+ }>): any;
56
56
  componentDidUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
57
57
  expanded?: boolean;
58
58
  show?: boolean;
package/bpk-component-input/src/withOpenEvents.d.ts CHANGED
@@ -35,7 +35,7 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
35
35
  handleBlur: () => void;
36
36
  render(): ReactElement;
37
37
  context: unknown;
38
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
38
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
39
39
  forceUpdate(callback?: (() => void) | undefined): void;
40
40
  readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
41
41
  state: Readonly<{}>;
@@ -46,7 +46,7 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
46
46
  shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
47
47
  componentWillUnmount?(): void;
48
48
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
49
- getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any | null;
49
+ getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
50
50
  componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
51
51
  componentWillMount?(): void;
52
52
  UNSAFE_componentWillMount?(): void;
package/bpk-component-label/src/BpkLabel.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-label{display:block;color:#161616;font-size:.75rem;font-weight:700;line-height:1rem}.bpk-label--white{color:#fff}.bpk-label--invalid{color:#e70866;color:var(--bpk-form-validation-text-color, rgb(231, 8, 102))}.bpk-label--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-label--disabled--white{color:rgba(255,255,255,.5)}.bpk-label__asterisk{color:#e70866;color:var(--bpk-form-validation-text-color, rgb(231, 8, 102))}
18
+ .bpk-label{display:block;color:#161616;font-size:.75rem;font-weight:700;line-height:1rem}.bpk-label--white{color:#fff}.bpk-label--invalid{color:#e70866;color:var(--bpk-form-validation-text-color, rgb(231, 8, 102))}.bpk-label--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-label--disabled--white{color:hsla(0,0%,100%,.5)}.bpk-label__asterisk{color:#e70866;color:var(--bpk-form-validation-text-color, rgb(231, 8, 102))}
package/bpk-component-map/src/BpkPriceMarker.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-price-marker{display:flex;padding:.125rem .5rem;justify-content:center;align-items:center;border:3px solid;border-radius:.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-default{color:#fff;border-color:#0062e3;border-color:var(--bpk-price-marker-background-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-price-marker-background-color, rgb(0, 98, 227))}.bpk-price-marker-viewed{color:rgba(255,255,255,.8);color:var(--bpk-price-marker-viewed-color, rgba(255, 255, 255, 0.8));border-color:#0062e3;border-color:var(--bpk-price-marker-viewed-border-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-price-marker-viewed-background-color, rgb(0, 98, 227))}.bpk-price-marker-focused{padding:.375rem .5rem;background-color:#fff;border-color:#0062e3;border-color:var(--bpk-price-marker-selected-border-color, rgb(0, 98, 227));color:#0062e3;color:var(--bpk-price-marker-selected-color, rgb(0, 98, 227))}.bpk-price-marker-disabled{z-index:-2;border-color:#fff;background-color:#fff;color:rgba(0,0,0,.2)}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;transform:translate(calc(-50% - 3px), calc(-100% - 3px - 1rem / 2));border:none;background:none}.bpk-price-marker__arrow{position:absolute;top:50%;z-index:-1;width:1rem;height:1rem;transform:rotate(45deg);border-radius:25%;background-color:#0062e3}.bpk-price-marker__arrow-default{background-color:#0062e3;background-color:var(--bpk-price-marker-background-color, rgb(0, 98, 227))}.bpk-price-marker__arrow-viewed{background-color:#0062e3;background-color:var(--bpk-price-marker-viewed-border-color, rgb(0, 98, 227))}.bpk-price-marker__arrow-focused{top:75%;background-color:#0062e3;background-color:var(--bpk-price-marker-selected-border-color, rgb(0, 98, 227))}.bpk-price-marker__arrow-disabled{top:75%;z-index:-3;background-color:#fff}
18
+ .bpk-price-marker{display:flex;padding:.125rem .5rem;justify-content:center;align-items:center;border:3px solid;border-radius:.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-default{color:#fff;border-color:#0062e3;border-color:var(--bpk-price-marker-background-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-price-marker-background-color, rgb(0, 98, 227))}.bpk-price-marker-viewed{color:hsla(0,0%,100%,.8);color:var(--bpk-price-marker-viewed-color, rgba(255, 255, 255, 0.8));border-color:#0062e3;border-color:var(--bpk-price-marker-viewed-border-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-price-marker-viewed-background-color, rgb(0, 98, 227))}.bpk-price-marker-focused{padding:.375rem .5rem;background-color:#fff;border-color:#0062e3;border-color:var(--bpk-price-marker-selected-border-color, rgb(0, 98, 227));color:#0062e3;color:var(--bpk-price-marker-selected-color, rgb(0, 98, 227))}.bpk-price-marker-disabled{z-index:-2;border-color:#fff;background-color:#fff;color:rgba(0,0,0,.2)}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;transform:translate(calc(-50% - 3px), calc(-100% - 3px - 1rem / 2));border:none;background:none}.bpk-price-marker__arrow{position:absolute;top:50%;z-index:-1;width:1rem;height:1rem;transform:rotate(45deg);border-radius:25%;background-color:#0062e3}.bpk-price-marker__arrow-default{background-color:#0062e3;background-color:var(--bpk-price-marker-background-color, rgb(0, 98, 227))}.bpk-price-marker__arrow-viewed{background-color:#0062e3;background-color:var(--bpk-price-marker-viewed-border-color, rgb(0, 98, 227))}.bpk-price-marker__arrow-focused{top:75%;background-color:#0062e3;background-color:var(--bpk-price-marker-selected-border-color, rgb(0, 98, 227))}.bpk-price-marker__arrow-disabled{top:75%;z-index:-3;background-color:#fff}
package/bpk-component-page-indicator/src/BpkPageIndicator.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage{background-color:rgba(255,255,255,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage{background-color:#fff;pointer-events:none}
18
+ .bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage{background-color:#fff;pointer-events:none}
package/bpk-component-radio/src/BpkRadio.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir=rtl] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type=radio]{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,.5)}.bpk-radio--invalid input[type=radio]{border:3px solid #e70866;border-radius:1.5rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #626971;border-radius:1.5rem}html[dir=rtl] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, rgb(0, 98, 227))}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,.2)}.bpk-radio__circle{position:absolute;top:.375rem;left:.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, rgb(0, 98, 227))}html[dir=rtl] .bpk-radio__circle{right:.375rem;left:auto}
18
+ .bpk-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir=rtl] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type=radio]{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-radio--disabled--white{color:hsla(0,0%,100%,.5)}.bpk-radio--invalid input[type=radio]{border:3px solid #e70866;border-radius:1.5rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #626971;border-radius:1.5rem}html[dir=rtl] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, rgb(0, 98, 227))}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,.2)}.bpk-radio__circle{position:absolute;top:.375rem;left:.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, rgb(0, 98, 227))}html[dir=rtl] .bpk-radio__circle{right:.375rem;left:auto}
package/bpk-component-rtl-toggle/src/updateOnDirectionChange.d.ts CHANGED
@@ -6,7 +6,7 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
6
6
  onDirectionChange: () => void;
7
7
  render(): import("react/jsx-runtime").JSX.Element;
8
8
  context: unknown;
9
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
9
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
10
10
  forceUpdate(callback?: (() => void) | undefined): void;
11
11
  readonly props: Readonly<{}>;
12
12
  state: Readonly<{}>;
@@ -15,7 +15,7 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
15
15
  };
16
16
  shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
17
17
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
18
- getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any | null;
18
+ getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
19
19
  componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
20
20
  componentWillMount?(): void;
21
21
  UNSAFE_componentWillMount?(): void;
@@ -30,7 +30,7 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
30
30
  onDirectionChange: () => void;
31
31
  render(): import("react/jsx-runtime").JSX.Element;
32
32
  context: unknown;
33
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
33
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
34
34
  forceUpdate(callback?: (() => void) | undefined): void;
35
35
  readonly props: Readonly<{}>;
36
36
  state: Readonly<{}>;
@@ -39,7 +39,7 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
39
39
  };
40
40
  shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
41
41
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
42
- getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any | null;
42
+ getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
43
43
  componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
44
44
  componentWillMount?(): void;
45
45
  UNSAFE_componentWillMount?(): void;
package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts CHANGED
@@ -46,13 +46,13 @@ declare const _default: {
46
46
  maxDate: Date;
47
47
  }> & {
48
48
  [rest: string]: any;
49
- }>) => Pick<{
49
+ }>) => {
50
50
  preventKeyboardFocus: boolean;
51
51
  focusedDate: Date;
52
- }, K> | {
52
+ } | Pick<{
53
53
  preventKeyboardFocus: boolean;
54
54
  focusedDate: Date;
55
- } | null) | Pick<{
55
+ }, K> | null) | Pick<{
56
56
  preventKeyboardFocus: boolean;
57
57
  focusedDate: Date;
58
58
  }, K> | null, callback?: (() => void) | undefined): void;
@@ -99,7 +99,7 @@ declare const _default: {
99
99
  }>, prevState: Readonly<{
100
100
  preventKeyboardFocus: boolean;
101
101
  focusedDate: Date;
102
- }>): any | null;
102
+ }>): any;
103
103
  componentDidUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
104
104
  onDateClick: ((date: Date) => void) | null;
105
105
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
package/bpk-component-segmented-control/src/BpkSegmentedControl.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-segmented-control-group{display:flex;flex-wrap:nowrap;overflow:hidden;border-radius:.5rem}.bpk-segmented-control-group-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control{min-height:2rem;padding:.5rem 1rem;flex:1;border:none;text-overflow:ellipsis;cursor:pointer;overflow:hidden;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control--canvas-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--canvas-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--canvas-contrast{background-color:#fff;color:#161616}.bpk-segmented-control--canvas-contrast-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--surface-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-contrast{background-color:rgba(255,255,255,.1);color:#fff}.bpk-segmented-control--surface-contrast-selected{background-color:#024daf;color:#fff}.bpk-segmented-control:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid #c1c7cf}.bpk-segmented-control--surface-contrast:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid rgba(255,255,255,.5)}.bpk-segmented-control[class*=rightOfOption]{border-inline-start:none}.bpk-segmented-control:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}html[dir=rtl] .bpk-segmented-control:first-child{border-top-left-radius:0;border-top-right-radius:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:.5rem}.bpk-segmented-control:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}html[dir=rtl] .bpk-segmented-control:last-child{border-top-left-radius:.5rem;border-top-right-radius:0;border-bottom-left-radius:.5rem;border-bottom-right-radius:0}.bpk-segmented-control:focus{border:.125rem solid #0062e3;outline:none}
18
+ .bpk-segmented-control-group{display:flex;flex-wrap:nowrap;overflow:hidden;border-radius:.5rem}.bpk-segmented-control-group-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control{min-height:2rem;padding:.5rem 1rem;flex:1;border:none;text-overflow:ellipsis;cursor:pointer;overflow:hidden;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control--canvas-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--canvas-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--canvas-contrast{background-color:#fff;color:#161616}.bpk-segmented-control--canvas-contrast-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--surface-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-contrast{background-color:hsla(0,0%,100%,.1);color:#fff}.bpk-segmented-control--surface-contrast-selected{background-color:#024daf;color:#fff}.bpk-segmented-control:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid #c1c7cf}.bpk-segmented-control--surface-contrast:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid hsla(0,0%,100%,.5)}.bpk-segmented-control[class*=rightOfOption]{border-inline-start:none}.bpk-segmented-control:first-child{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}html[dir=rtl] .bpk-segmented-control:first-child{border-top-left-radius:0;border-top-right-radius:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:.5rem}.bpk-segmented-control:last-child{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}html[dir=rtl] .bpk-segmented-control:last-child{border-top-left-radius:.5rem;border-top-right-radius:0;border-bottom-left-radius:.5rem;border-bottom-right-radius:0}
package/bpk-component-slider/src/BpkSlider.d.ts CHANGED
@@ -10,6 +10,10 @@ export type Props = {
10
10
  ariaValuetext?: string[];
11
11
  inputProps?: [{
12
12
  [key: string]: any;
13
+ }] | [{
14
+ [key: string]: any;
15
+ }, {
16
+ [key: string]: any;
13
17
  }];
14
18
  [rest: string]: any;
15
19
  };
package/bpk-component-slider/src/BpkSlider.js CHANGED
@@ -18,7 +18,6 @@
18
18
  import { forwardRef, useRef, useEffect } from 'react';
19
19
  import { useComposedRefs } from '@radix-ui/react-compose-refs';
20
20
  import * as Slider from '@radix-ui/react-slider';
21
- import { usePrevious } from '@radix-ui/react-use-previous';
22
21
  import { cssModules, isRTL, setNativeValue } from "../../bpk-react-utils";
23
22
  import STYLES from "./BpkSlider.module.css";
24
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -44,6 +43,7 @@ const BpkSlider = ({
44
43
  callback(val);
45
44
  }
46
45
  };
46
+ const thumbRefs = [useRef(null), useRef(null)];
47
47
  const handleOnChange = sliderValues => {
48
48
  processSliderValues(sliderValues, onChange);
49
49
  };
@@ -71,10 +71,12 @@ const BpkSlider = ({
71
71
  "aria-valuetext": ariaValuetext ? ariaValuetext[index] : val.toString(),
72
72
  className: getClassName('bpk-slider__thumb'),
73
73
  "aria-valuenow": currentValue[index],
74
+ ref: thumbRefs[index],
74
75
  asChild: true,
75
76
  children: /*#__PURE__*/_jsx("span", {
76
77
  children: /*#__PURE__*/_jsx(BubbleInput, {
77
78
  value: currentValue[index],
79
+ thumbRef: thumbRefs[index],
78
80
  ...(inputProps && inputProps[index])
79
81
  })
80
82
  })
@@ -85,20 +87,70 @@ const BpkSlider = ({
85
87
  // Work around until radix-ui/react-slider is updated to accept an inputRef prop https://github.com/radix-ui/primitives/pull/3033
86
88
  const BubbleInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
87
89
  const {
90
+ thumbRef,
88
91
  value,
89
92
  ...inputProps
90
93
  } = props;
91
94
  const ref = useRef();
92
95
  const composedRefs = useComposedRefs(forwardedRef, ref);
93
- const prevValue = usePrevious(value);
94
96
 
95
- // Bubble value change to parents (e.g form change event)
97
+ // This Hook Provides the native behaviour that the input range type would have around the "change" event.
98
+ // When a user changes the value of the slider. The change event is emitted.
96
99
  useEffect(() => {
100
+ // for tests to work the ref is passed into the useEffect rather than the variable of ref.current.
101
+ const thumb = thumbRef.current;
97
102
  const input = ref.current;
98
- if (prevValue !== value) {
99
- setNativeValue(input, `${value}`);
103
+ // thumb should be rendered before adding any eventListeners
104
+ if (thumb) {
105
+ // The interactionEndHandler is used to ensure that the input value is updated
106
+ // and change event fired when the user stops interacting with the thumb
107
+ const interactionEndHandler = event => {
108
+ if (input && (
109
+ // if it's a mouse event, touch event or arrow key event
110
+ event.button > -1 || event.touches?.length > -1 || ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key))) {
111
+ // parseFloat works for both integers and floats and the Slider supports decimal stepping. e.g. 0 - 1
112
+ const newValue = parseFloat(input.getAttribute('value'));
113
+ if (value !== newValue) {
114
+ // newValue is changed if the slider has moved, clicking away from the thumb will not fire the change event
115
+ setNativeValue(input, newValue);
116
+ }
117
+ }
118
+ };
119
+
120
+ // the focusInHandler is used to add event listeners to the document when the thumb is in focus
121
+ // Allows us to track at which moment the user focuses on the thumb
122
+ const focusInHandler = () => {
123
+ // The Controller is needed as we may click more than once when in focus (clicking along the line of slider to move the thumb to that position).
124
+ const controller = new AbortController();
125
+ // On focusout we can then abort the event listeners attached to the thumb and document
126
+ thumb.addEventListener('focusout', () => controller.abort(), {
127
+ once: true // not necessary to fire more than once and will restart on the next focusin
128
+ });
129
+
130
+ // These three EventListeners signal the end of the interaction with the thumb
131
+ document.addEventListener('click', interactionEndHandler, {
132
+ // needed on document as users can drag the thumb while out of the thumb elements mouse area
133
+ signal: controller.signal
134
+ });
135
+ thumb.addEventListener('touchend', interactionEndHandler, {
136
+ signal: controller.signal
137
+ });
138
+ thumb.addEventListener('keyup', interactionEndHandler, {
139
+ signal: controller.signal
140
+ });
141
+ };
142
+
143
+ // Add event listeners to the thumb for when the user starts interacting with the thumb
144
+ thumb.addEventListener('focusin', focusInHandler);
145
+ return () => {
146
+ // clean up event listeners
147
+ if (thumb) {
148
+ thumb.removeEventListener('focusin', focusInHandler);
149
+ }
150
+ };
100
151
  }
101
- }, [prevValue, value]);
152
+ return () => {};
153
+ }, [thumbRef, ref, value]);
102
154
 
103
155
  /**
104
156
  * We purposefully do not use `type="hidden"` here otherwise forms that
package/bpk-component-switch/src/BpkSwitch.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-switch{position:relative;display:flex;align-items:center}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}
18
+ .bpk-switch{position:relative;display:flex;width:fit-content;align-items:center}.bpk-switch:focus-within{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}
package/bpk-component-ticket/src/BpkTicket.js CHANGED
@@ -14,11 +14,17 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */import PropTypes from 'prop-types';
17
+ */
18
+ /* eslint-disable valid-jsdoc */
19
+ import PropTypes from 'prop-types';
18
20
  import { cssModules } from "../../bpk-react-utils";
19
21
  import STYLES from "./BpkTicket.module.css";
20
22
  import { jsx as _jsx } from "react/jsx-runtime";
21
23
  const getClassName = cssModules(STYLES);
24
+ /**
25
+ * @deprecated use bpk-component-card instead
26
+ * @returns {Component} a ticket component
27
+ */
22
28
  const BpkTicket = props => {
23
29
  const {
24
30
  children,
package/bpk-scrim-utils/index.d.ts CHANGED
@@ -10,7 +10,7 @@ declare const _default: {
10
10
  dialogRef: (ref: HTMLElement | null | undefined) => void;
11
11
  render(): import("react/jsx-runtime").JSX.Element;
12
12
  context: unknown;
13
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
13
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
14
14
  forceUpdate(callback?: (() => void) | undefined): void;
15
15
  readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>;
16
16
  state: Readonly<{}>;
@@ -19,7 +19,7 @@ declare const _default: {
19
19
  };
20
20
  shouldComponentUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
21
21
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
22
- getSnapshotBeforeUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any | null;
22
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
23
23
  componentDidUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
24
24
  componentWillMount?(): void;
25
25
  UNSAFE_componentWillMount?(): void;
@@ -35,7 +35,7 @@ declare const _default: {
35
35
  dialogRef: (ref: HTMLElement | null | undefined) => void;
36
36
  render(): import("react/jsx-runtime").JSX.Element;
37
37
  context: unknown;
38
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
38
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
39
39
  forceUpdate(callback?: (() => void) | undefined): void;
40
40
  readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>;
41
41
  state: Readonly<{}>;
@@ -44,7 +44,7 @@ declare const _default: {
44
44
  };
45
45
  shouldComponentUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
46
46
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
47
- getSnapshotBeforeUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any | null;
47
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
48
48
  componentDidUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
49
49
  componentWillMount?(): void;
50
50
  UNSAFE_componentWillMount?(): void;
package/bpk-scrim-utils/src/withScrim.d.ts CHANGED
@@ -28,7 +28,7 @@ declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> |
28
28
  dialogRef: (ref: HTMLElement | null | undefined) => void;
29
29
  render(): import("react/jsx-runtime").JSX.Element;
30
30
  context: unknown;
31
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
31
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
32
32
  forceUpdate(callback?: (() => void) | undefined): void;
33
33
  readonly props: Readonly<Props & Omit<P, "dialogRef">>;
34
34
  state: Readonly<{}>;
@@ -37,7 +37,7 @@ declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> |
37
37
  };
38
38
  shouldComponentUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
39
39
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
40
- getSnapshotBeforeUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any | null;
40
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
41
41
  componentDidUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
42
42
  componentWillMount?(): void;
43
43
  UNSAFE_componentWillMount?(): void;
@@ -53,7 +53,7 @@ declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> |
53
53
  dialogRef: (ref: HTMLElement | null | undefined) => void;
54
54
  render(): import("react/jsx-runtime").JSX.Element;
55
55
  context: unknown;
56
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
56
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
57
57
  forceUpdate(callback?: (() => void) | undefined): void;
58
58
  readonly props: Readonly<Props & Omit<P, "dialogRef">>;
59
59
  state: Readonly<{}>;
@@ -62,7 +62,7 @@ declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> |
62
62
  };
63
63
  shouldComponentUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
64
64
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
65
- getSnapshotBeforeUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any | null;
65
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
66
66
  componentDidUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
67
67
  componentWillMount?(): void;
68
68
  UNSAFE_componentWillMount?(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "35.5.0",
3
+ "version": "35.6.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,7 +26,6 @@
26
26
  "@popperjs/core": "^2.11.8",
27
27
  "@radix-ui/react-compose-refs": "^1.1.0",
28
28
  "@radix-ui/react-slider": "^1.1.2",
29
- "@radix-ui/react-use-previous": "^1.1.0",
30
29
  "@react-google-maps/api": "^2.19.3",
31
30
  "@skyscanner/bpk-foundations-web": "^18.1.0",
32
31
  "@skyscanner/bpk-svgs": "^19.3.0",