@skyscanner/backpack-web 42.13.3-dev-v25047225899.1 → 42.14.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 (17) hide show
  1. package/bpk-component-ai-blurb/src/BpkAiBlurbSummary.js +3 -2
  2. package/bpk-component-ai-blurb/src/common-types.d.ts +5 -5
  3. package/bpk-component-button/src/BpkButton.module.css +1 -1
  4. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.js +0 -3
  5. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css +1 -1
  6. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.d.ts +1 -1
  7. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.js +18 -20
  8. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.d.ts +1 -1
  9. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.js +4 -6
  10. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.d.ts +1 -1
  11. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.js +4 -4
  12. package/bpk-component-pagination/src/BpkPaginationPage.module.css +1 -1
  13. package/bpk-mixins/_buttons.scss +1 -1
  14. package/bpk-stylesheets/base.css +1 -1
  15. package/bpk-stylesheets/index.scss +0 -1
  16. package/package.json +1 -1
  17. package/bpk-stylesheets/_variables.scss +0 -232
package/bpk-component-ai-blurb/src/BpkAiBlurbSummary.js CHANGED
@@ -41,8 +41,9 @@ const BpkAiBlurbSummary = props => {
41
41
  textStyle: TEXT_STYLES.caption,
42
42
  children: props.errorText
43
43
  }), /*#__PURE__*/_jsx(BpkLink, {
44
- href: props.errorLinkHref,
45
- children: props.errorLinkText
44
+ as: "button",
45
+ onClick: props.onErrorClick,
46
+ children: props.errorActionText
46
47
  })]
47
48
  });
48
49
  }
package/bpk-component-ai-blurb/src/common-types.d.ts CHANGED
@@ -20,12 +20,12 @@ export type BpkAiBlurbSummaryProps = {
20
20
  } | {
21
21
  /** Controls which content is displayed. */
22
22
  state: 'error';
23
- /** Text displayed before the error link. */
23
+ /** Text displayed before the error action. */
24
24
  errorText: string;
25
- /** Text for the inline error link. */
26
- errorLinkText: string;
27
- /** href for the inline error link. */
28
- errorLinkHref: string;
25
+ /** Text for the inline error action. */
26
+ errorActionText: string;
27
+ /** Called when the inline error action is clicked (e.g. to retry). */
28
+ onErrorClick: () => void;
29
29
  };
30
30
  export type BpkAiBlurbFeedbackProps = {
31
31
  /** Text displayed before a vote is cast. e.g. "Was this helpful?" — not translated by Backpack. */
package/bpk-component-button/src/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;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);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-component-button-colour-bg-primary, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.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.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}@media(hover: hover){.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined{background-size:0 1px}.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit--alternate{background-size:100% 1px}}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.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){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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-button--destructive.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.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--destructive.bpk-button--loading:disabled{background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.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){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.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--featured.bpk-button--loading:disabled{background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.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,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.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,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.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,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.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){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.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-dark.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.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){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.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--primary-on-light.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.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){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button--has-icon{display:inline-flex;align-items:center;gap:.5rem}.bpk-button--full-width.bpk-button--has-icon{display:flex;justify-content:center}.bpk-button__leading-icon,.bpk-button__trailing-icon{display:inline-flex;flex-shrink:0;text-decoration:none}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}
18
+ .bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);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){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.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.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}@media(hover: hover){.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined{background-size:0 1px}.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit--alternate{background-size:100% 1px}}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.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){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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-button--destructive.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.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--destructive.bpk-button--loading:disabled{background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.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){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.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--featured.bpk-button--loading:disabled{background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.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,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.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,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.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,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.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){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.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-dark.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.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){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.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--primary-on-light.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.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){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.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){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button--has-icon{display:inline-flex;align-items:center;gap:.5rem}.bpk-button--full-width.bpk-button--has-icon{display:flex;justify-content:center}.bpk-button__leading-icon,.bpk-button__trailing-icon{display:inline-flex;flex-shrink:0;text-decoration:none}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.js CHANGED
@@ -19,10 +19,7 @@
19
19
  import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
20
20
  import { BpkFlex, BpkSpacing } from "../../../bpk-component-layout";
21
21
  import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../../bpk-component-text";
22
- import { cssModules } from "../../../bpk-react-utils";
23
- import STYLES from "./BpkComparisonTable.module.css";
24
22
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
25
- const getClassName = cssModules(STYLES);
26
23
  const BpkComparisonTableColumnHeaderPlaceholder = ({
27
24
  addMoreDescription,
28
25
  addMoreLinkText,
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.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-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}
18
+ .bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;min-width:0;flex-shrink:1;aspect-ratio:62/28}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{height:100%;object-fit:contain}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;min-width:0;flex-shrink:1;border:.0625rem dashed #c1c7cf;aspect-ratio:62/28;border-radius:.25rem}
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import type { BpkComparisonTrayItemProps } from './common-types';
2
- declare function BpkComparisonTrayItem({ item, onRemove, removeLabel }: BpkComparisonTrayItemProps): import("react/jsx-runtime").JSX.Element;
2
+ declare const BpkComparisonTrayItem: ({ item, onRemove, removeLabel }: BpkComparisonTrayItemProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default BpkComparisonTrayItem;
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.js CHANGED
@@ -22,27 +22,25 @@ import { cssModules } from "../../../bpk-react-utils";
22
22
  import STYLES from "./BpkComparisonTray.module.css";
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  const getClassName = cssModules(STYLES);
25
- function BpkComparisonTrayItem({
25
+ const BpkComparisonTrayItem = ({
26
26
  item,
27
27
  onRemove,
28
28
  removeLabel
29
- }) {
30
- return /*#__PURE__*/_jsxs("div", {
31
- className: getClassName('bpk-comparison-tray__item'),
32
- children: [/*#__PURE__*/_jsx("div", {
33
- className: getClassName('bpk-comparison-tray__item-image-container'),
34
- children: /*#__PURE__*/_jsx(BpkImage, {
35
- src: item.image,
36
- altText: item.imageAlt ?? item.label,
37
- aspectRatio: 62 / 28
38
- })
39
- }), /*#__PURE__*/_jsx("button", {
40
- type: "button",
41
- className: getClassName('bpk-comparison-tray__item-close'),
42
- "aria-label": removeLabel,
43
- onClick: () => onRemove(item.id),
44
- children: /*#__PURE__*/_jsx(CloseIcon, {})
45
- })]
46
- });
47
- }
29
+ }) => /*#__PURE__*/_jsxs("div", {
30
+ className: getClassName('bpk-comparison-tray__item'),
31
+ children: [/*#__PURE__*/_jsx("div", {
32
+ className: getClassName('bpk-comparison-tray__item-image-container'),
33
+ children: /*#__PURE__*/_jsx(BpkImage, {
34
+ src: item.image,
35
+ altText: item.imageAlt ?? item.label,
36
+ aspectRatio: 62 / 28
37
+ })
38
+ }), /*#__PURE__*/_jsx("button", {
39
+ type: "button",
40
+ className: getClassName('bpk-comparison-tray__item-close'),
41
+ "aria-label": removeLabel,
42
+ onClick: () => onRemove(item.id),
43
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
44
+ })]
45
+ });
48
46
  export default BpkComparisonTrayItem;
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare function BpkComparisonTrayItemPlaceholder(): import("react/jsx-runtime").JSX.Element;
1
+ declare const BpkComparisonTrayItemPlaceholder: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default BpkComparisonTrayItemPlaceholder;
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.js CHANGED
@@ -20,10 +20,8 @@ import { cssModules } from "../../../bpk-react-utils";
20
20
  import STYLES from "./BpkComparisonTray.module.css";
21
21
  import { jsx as _jsx } from "react/jsx-runtime";
22
22
  const getClassName = cssModules(STYLES);
23
- function BpkComparisonTrayItemPlaceholder() {
24
- return /*#__PURE__*/_jsx("div", {
25
- className: getClassName('bpk-comparison-tray__item-placeholder'),
26
- "aria-hidden": "true"
27
- });
28
- }
23
+ const BpkComparisonTrayItemPlaceholder = () => /*#__PURE__*/_jsx("div", {
24
+ className: getClassName('bpk-comparison-tray__item-placeholder'),
25
+ "aria-hidden": "true"
26
+ });
29
27
  export default BpkComparisonTrayItemPlaceholder;
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import type { BpkComparisonTrayRootProps } from './common-types';
2
- declare function BpkComparisonTrayRoot({ ariaLabel, compareLabel, items, onCompare, onRemove, removeLabel, }: BpkComparisonTrayRootProps): import("react/jsx-runtime").JSX.Element;
2
+ declare const BpkComparisonTrayRoot: ({ ariaLabel, compareLabel, items, onCompare, onRemove, removeLabel, }: BpkComparisonTrayRootProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default BpkComparisonTrayRoot;
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.js CHANGED
@@ -26,14 +26,14 @@ import STYLES from "./BpkComparisonTray.module.css";
26
26
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
27
27
  const getClassName = cssModules(STYLES);
28
28
  const MAX_ITEMS = 3;
29
- function BpkComparisonTrayRoot({
29
+ const BpkComparisonTrayRoot = ({
30
30
  ariaLabel,
31
31
  compareLabel,
32
32
  items,
33
33
  onCompare,
34
34
  onRemove,
35
35
  removeLabel
36
- }) {
36
+ }) => {
37
37
  const displayItems = Array.from({
38
38
  length: MAX_ITEMS
39
39
  }, (_value, index) => items[index] ?? null);
@@ -45,7 +45,7 @@ function BpkComparisonTrayRoot({
45
45
  role: "region",
46
46
  "aria-label": ariaLabel,
47
47
  children: /*#__PURE__*/_jsxs(BpkCardV2.Body, {
48
- templateColumns: "1fr auto",
48
+ templateColumns: "minmax(0, 1fr) auto",
49
49
  align: "center",
50
50
  gap: BpkSpacing.Base,
51
51
  children: [/*#__PURE__*/_jsx(BpkCardV2.Section, {
@@ -71,5 +71,5 @@ function BpkComparisonTrayRoot({
71
71
  })
72
72
  })
73
73
  });
74
- }
74
+ };
75
75
  export default BpkComparisonTrayRoot;
package/bpk-component-pagination/src/BpkPaginationPage.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-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);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-component-button-colour-bg-primary, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-pagination-page: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-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-pagination-page.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{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));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-pagination-page--not-selected: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-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-pagination-page--not-selected.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
18
+ .bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);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-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-pagination-page: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-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-pagination-page.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{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));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-pagination-page--not-selected: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-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-pagination-page--not-selected.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
package/bpk-mixins/_buttons.scss CHANGED
@@ -164,7 +164,7 @@
164
164
  );
165
165
  @include utils.bpk-themeable-property(
166
166
  background-color,
167
- --bpk-component-button-colour-bg-primary,
167
+ --bpk-button-primary-background-color,
168
168
  tokens.$bpk-private-button-primary-normal-background-day
169
169
  );
170
170
 
package/bpk-stylesheets/base.css CHANGED
@@ -16,4 +16,4 @@
16
16
  * See the License for the specific language governing permissions and
17
17
  * limitations under the License.
18
18
  *
19
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:root{--bpk-canvas-contrast: #eff3f8;--bpk-canvas-default: #ffffff;--bpk-component-badge-colour-bg-default: #eff3f8;--bpk-component-badge-colour-bg-inverse: #ffffff;--bpk-component-badge-colour-bg-outline: rgba(255, 255, 255, 0);--bpk-component-badge-colour-bg-subtle: #eff3f8;--bpk-component-badge-colour-stroke-outline: #ffffff;--bpk-component-badge-dimension-padding-horizontal-default: 0.5rem;--bpk-component-badge-dimension-padding-horizontal-subtle: 0.5rem;--bpk-component-badge-typography-tmp-badge-label: 0.875rem;--bpk-component-badge-typography-tmp-badge-line-height: 0;--bpk-component-button-colour-bg-destructive: #e0e4e9;--bpk-component-button-colour-bg-destructive-pressed: #e70866;--bpk-component-button-colour-bg-disabled: #e0e4e9;--bpk-component-button-colour-bg-feature-pressed: #024daf;--bpk-component-button-colour-bg-featured: #0062e3;--bpk-component-button-colour-bg-footer: rgba(255, 255, 255, 0);--bpk-component-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);--bpk-component-button-colour-bg-primary: #ff1f8f;--bpk-component-button-colour-bg-primary-on-dark: #ffffff;--bpk-component-button-colour-bg-primary-on-dark-pressed: #c1c7cf;--bpk-component-button-colour-bg-primary-on-light: #ffffff;--bpk-component-button-colour-bg-primary-on-light-pressed: #154679;--bpk-component-button-colour-bg-secondary: #e0e4e9;--bpk-component-button-colour-bg-secondary-pressed: #c1c7cf;--bpk-component-button-colour-bg-secondary-on-contrast: #e0e4e9;--bpk-component-button-colour-bg-secondary-on-contrast-pressed: #c1c7cf;--bpk-component-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);--bpk-component-button-colour-bg-secondary-on-dark-disabled: #0b121d;--bpk-component-button-colour-bg-secondary-on-dark-pressed: #04182d;--bpk-component-button-colour-text-disruptive: #e70866;--bpk-component-button-colour-text-feature: #ffffff;--bpk-component-button-colour-text-footer: rgba(255, 255, 255, 0);--bpk-component-button-colour-text-link-on-dark: #ffffff;--bpk-component-button-colour-text-secondary: #161616;--bpk-component-button-dimension-min-height-default: 2.25rem;--bpk-component-button-dimension-min-height-large: 3rem;--bpk-component-button-dimension-min-weight-large: 3rem;--bpk-component-button-dimension-padding-horizontal-default: 1rem;--bpk-component-button-dimension-padding-horizontal-large: 1rem;--bpk-component-button-dimension-radius: 0.5rem;--bpk-component-button-typography-tmp-default-label: 1rem;--bpk-component-card-button-contained-fill: rgba(255, 255, 255, 0.8);--bpk-component-chip-group-colour-fill-icon-hover-on-image: #eff3f8;--bpk-component-chip-group-colour-fill-icon-off-on-image: #ffffff;--bpk-component-chip-group-colour-fill-icon-on-default: #05203c;--bpk-component-chip-group-colour-fill-icon-on-on-dark: #ffffff;--bpk-component-chip-group-colour-fill-icon-on-on-image: #05203c;--bpk-component-chip-group-colour-stroke-icon-hover-default: #05203c;--bpk-component-chip-group-colour-stroke-icon-hover-on-dark: #ffffff;--bpk-component-chip-group-colour-stroke-icon-off-default: #c1c7cf;--bpk-component-chip-group-colour-stroke-icon-off-on-dark: rgba(255, 255, 255, 0.5);--bpk-component-chip-group-dimensions-min-height: 2.25rem;--bpk-component-chip-colour-bg-default-on: #05203c;--bpk-component-chip-colour-bg-default-dismissible-hover: #05203c;--bpk-component-chip-colour-bg-on-dark-off: rgba(255, 255, 255, 0);--bpk-component-chip-colour-bg-on-dark-on: rgba(255, 255, 255, 0);--bpk-component-chip-colour-bg-on-dark-dismissible-hover: #ffffff;--bpk-component-chip-colour-bg-on-image-on: #eff3f8;--bpk-component-chip-colour-bg-on-image-dismissible-hover: #05203c;--bpk-component-chip-colour-border-default-hover: #05203c;--bpk-component-chip-colour-border-default-off: #c1c7cf;--bpk-component-chip-colour-border-default-dismissible-hover: rgba(255, 255, 255, 0);--bpk-component-chip-colour-border-on-dark-hover: #ffffff;--bpk-component-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.5);--bpk-component-chip-colour-border-on-dark-disimissible-hover: rgba(255, 255, 255, 0);--bpk-component-chip-colour-disabled: #e0e4e9;--bpk-component-chip-colour-fill-hover-on-canvas-contrast-new: rgba(255, 255, 255, 0);--bpk-component-chip-colour-fill-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);--bpk-component-chip-colour-fill-on-on-canvas-contrast-new: rgba(255, 255, 255, 0);--bpk-component-chip-colour-fill-on-on-dark: #ffffff;--bpk-component-chip-colour-stroke-hover-on-canvas-contrast-new: rgba(255, 255, 255, 0);--bpk-component-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);--bpk-component-chip-colour-text-hover-dismissible-default: #ffffff;--bpk-component-chip-colour-text-hover-dismissible-on-contrast: #161616;--bpk-component-chip-colour-text-icon-on-contrast-dismissible: #626971;--bpk-component-chip-colour-text-icon-on-dismissible: rgba(255, 255, 255, 0.5);--bpk-component-chip-colour-text-icon-on-image-dismissible: #626971;--bpk-component-chip-colour-text-on: #ffffff;--bpk-component-chip-colour-text-on-contrast: #161616;--bpk-component-chip-colour-text-on-image: #ffffff;--bpk-component-chip-dimension-min-height-width: 2rem;--bpk-component-chip-dimension-radius: 0.5rem;--bpk-component-date-selector-cheapest-month-highlight: #154679;--bpk-component-date-selector-flexible-date-card: #eff3f8;--bpk-component-dimension-padding-veritcal: 0;--bpk-component-info-banner-default: #eff3f8;--bpk-component-info-banner-on-contrast: #ffffff;--bpk-component-i-os-tab-bar-fill: rgba(255, 255, 255, 0.8);--bpk-component-map-cluster-pin: #05203c;--bpk-component-map-cluster-pin-previous-selection: #94c3ff;--bpk-component-map-marker-viewed: rgba(255, 255, 255, 0.8);--bpk-component-map-poi-pin: #8e47ba;--bpk-component-map-previous-selection: #cfe4ff;--bpk-component-navigation-tabs-hover: #154679;--bpk-component-navigation-tabs-outline: rgba(255, 255, 255, 0.2);--bpk-component-navigation-tabs-selected: #024daf;--bpk-component-rating-bar-default: #e0e4e9;--bpk-component-rating-bar-on-contrast: #ffffff;--bpk-component-segmented-control-canvas-default: #eff3f8;--bpk-component-segmented-control-surface-contrast: rgba(255, 255, 255, 0.1);--bpk-component-segmented-control-surface-contrast-on: #024daf;--bpk-component-shadow-large-blur: 0.875rem;--bpk-component-shadow-large-color: rgba(22, 22, 22, 0.25);--bpk-component-shadow-large-position-x: 0;--bpk-component-shadow-large-position-y: 0.25rem;--bpk-component-shadow-large-spread: 0;--bpk-component-shadow-small-blur: 0.1875rem;--bpk-component-shadow-small-color: rgba(22, 22, 22, 0.25);--bpk-component-shadow-small-position-x: 0;--bpk-component-shadow-small-position-y: 0.0625rem;--bpk-component-shadow-small-spread: 0;--bpk-component-shadow-xl-blur: 3.125rem;--bpk-component-shadow-xl-color: rgba(22, 22, 22, 0.25);--bpk-component-shadow-xl-position-x: 0;--bpk-component-shadow-xl-position-y: 0.75rem;--bpk-component-shadow-xl-spread: 0;--bpk-component-skeleton-on-dark: rgba(255, 255, 255, 0.1);--bpk-component-switch-android-switch-default-disabled: rgba(0, 0, 0, 0.2);--bpk-component-switch-android-switch-knob-disabled: rgba(255, 255, 255, 0.5);--bpk-component-switch-android-switch-on-contrast-fill-disabled: rgba(255, 255, 255, 0.1);--bpk-component-switch-android-switch-on-contrast-off: rgba(255, 255, 255, 0.8);--bpk-component-switch-ios-switch-default-off: #626971;--bpk-component-switch-ios-switch-disabled: #e0e4e9;--bpk-component-switch-ios-switch-on-contrast-off: rgba(255, 255, 255, 0.2);--bpk-component-trip-advisor: #00aa6c;--bpk-core-accent: #0062e3;--bpk-core-eco: #0fa1a9;--bpk-core-primary: #05203c;--bpk-other-line: #c1c7cf;--bpk-other-line-on-dark: rgba(255, 255, 255, 0.5);--bpk-other-overlay: rgba(0, 0, 0, 0.2);--bpk-other-scrim: rgba(0, 0, 0, 0.7);--bpk-other-shadow: rgba(22, 22, 22, 0.25);--bpk-status-danger-fill: #ffe9f9;--bpk-status-danger-spot: #e70866;--bpk-status-success-fill: #d4fff2;--bpk-status-success-spot: #0c838a;--bpk-status-warning-fill: #fff7cf;--bpk-status-warning-spot: #f55d42;--bpk-surface-promo: #0062e3;--bpk-surface-contrast: #05203c;--bpk-surface-default: #ffffff;--bpk-surface-elevated: #ffffff;--bpk-surface-hero: #0062e3;--bpk-surface-highlight: #e0e4e9;--bpk-surface-low-contrast: #f7f9fb;--bpk-surface-subtle: #e3f0ff;--bpk-surface-tint: rgba(255, 255, 255, 0.1);--bpk-text-deprecated-link: #0062e3;--bpk-text-hero: #0062e3;--bpk-text-disabled: rgba(0, 0, 0, 0.2);--bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);--bpk-text-error: #e70866;--bpk-text-inverse: #ffffff;--bpk-text-on-dark: #ffffff;--bpk-text-on-light: #161616;--bpk-text-primary: #161616;--bpk-text-secondary: #626971;--bpk-text-success: #0c838a;--bpk-typography-family-sans-serif: "Skyscanner Relative";--bpk-typography-family-serif: Larken;--bpk-typography-kerning-default: 0;--bpk-typography-kerning-loose: 0;--bpk-typography-kerning-tight: 0;--bpk-typography-style-body: 400;--bpk-typography-style-headline: 700;--bpk-typography-style-hero: 900;--bpk-typography-style-label: 43.75rem;--bpk-typography-style-subhead: 18.75rem}[data-theme=dark]{--bpk-canvas-contrast: #010913;--bpk-canvas-default: #010913;--bpk-component-badge-colour-bg-default: #243346;--bpk-component-badge-colour-bg-inverse: #243346;--bpk-component-badge-colour-bg-outline: rgba(255, 255, 255, 0);--bpk-component-badge-colour-bg-subtle: #243346;--bpk-component-badge-colour-stroke-outline: #ffffff;--bpk-component-badge-dimension-padding-horizontal-default: 0.5rem;--bpk-component-badge-dimension-padding-horizontal-subtle: 0.5rem;--bpk-component-badge-typography-tmp-badge-label: 0.875rem;--bpk-component-badge-typography-tmp-badge-line-height: 0;--bpk-component-button-colour-bg-destructive: #e0e4e9;--bpk-component-button-colour-bg-destructive-pressed: #ff649c;--bpk-component-button-colour-bg-disabled: #0b121d;--bpk-component-button-colour-bg-feature-pressed: #d1f7ff;--bpk-component-button-colour-bg-featured: #d1f7ff;--bpk-component-button-colour-bg-footer: rgba(255, 255, 255, 0);--bpk-component-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);--bpk-component-button-colour-bg-primary: #024daf;--bpk-component-button-colour-bg-primary-on-dark: #ffffff;--bpk-component-button-colour-bg-primary-on-dark-pressed: #c1c7cf;--bpk-component-button-colour-bg-primary-on-light: #ffffff;--bpk-component-button-colour-bg-primary-on-light-pressed: #002b4b;--bpk-component-button-colour-bg-secondary: #243346;--bpk-component-button-colour-bg-secondary-pressed: #010913;--bpk-component-button-colour-bg-secondary-on-contrast: #243346;--bpk-component-button-colour-bg-secondary-on-contrast-pressed: #010913;--bpk-component-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);--bpk-component-button-colour-bg-secondary-on-dark-disabled: #0b121d;--bpk-component-button-colour-bg-secondary-on-dark-pressed: rgba(255, 255, 255, 0.2);--bpk-component-button-colour-text-disruptive: #ff649c;--bpk-component-button-colour-text-feature: #010913;--bpk-component-button-colour-text-footer: rgba(255, 255, 255, 0);--bpk-component-button-colour-text-link-on-dark: #ffffff;--bpk-component-button-colour-text-secondary: #ffffff;--bpk-component-button-dimension-min-height-default: 2.25rem;--bpk-component-button-dimension-min-height-large: 3rem;--bpk-component-button-dimension-min-weight-large: 3rem;--bpk-component-button-dimension-padding-horizontal-default: 1rem;--bpk-component-button-dimension-padding-horizontal-large: 1rem;--bpk-component-button-dimension-radius: 0.5rem;--bpk-component-button-typography-tmp-default-label: 1rem;--bpk-core-primary: #054184;--bpk-surface-contrast: #010913;--bpk-surface-default: #131d2b;--bpk-text-on-dark: #ffffff;--bpk-text-primary: #ffffff}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack, "Skyscanner Relative", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible,button:focus-visible,[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.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)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
19
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack, "Skyscanner Relative", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible,button:focus-visible,[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.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)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
package/bpk-stylesheets/index.scss CHANGED
@@ -19,7 +19,6 @@
19
19
  @use '../bpk-mixins/tokens';
20
20
  @use '../bpk-mixins/utils';
21
21
  @use './normalize';
22
- @use './variables';
23
22
 
24
23
  // stylelint-disable-next-line selector-max-type
25
24
  html {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "42.13.3-dev-v25047225899.1",
3
+ "version": "42.14.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
package/bpk-stylesheets/_variables.scss DELETED
@@ -1,232 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- *
4
- * FAKE DATA for CLOV-1413 consumer-inclusion verification only.
5
- * Source: https://github.com/Skyscanner/gert-playground/pull/16
6
- * NOTE: --bpk-component-button-colour-bg-primary is deliberately
7
- * set to Bright Pink (#FF1F8F) instead of Dark Sky to visually prove
8
- * the variable is delivered via `@skyscanner/backpack-web/bpk-stylesheets`.
9
- */
10
-
11
- :root {
12
- --bpk-canvas-contrast: #eff3f8;
13
- --bpk-canvas-default: #ffffff;
14
- --bpk-component-badge-colour-bg-default: #eff3f8;
15
- --bpk-component-badge-colour-bg-inverse: #ffffff;
16
- --bpk-component-badge-colour-bg-outline: rgba(255, 255, 255, 0);
17
- --bpk-component-badge-colour-bg-subtle: #eff3f8;
18
- --bpk-component-badge-colour-stroke-outline: #ffffff;
19
- --bpk-component-badge-dimension-padding-horizontal-default: 0.5rem;
20
- --bpk-component-badge-dimension-padding-horizontal-subtle: 0.5rem;
21
- --bpk-component-badge-typography-tmp-badge-label: 0.875rem;
22
- --bpk-component-badge-typography-tmp-badge-line-height: 0;
23
- --bpk-component-button-colour-bg-destructive: #e0e4e9;
24
- --bpk-component-button-colour-bg-destructive-pressed: #e70866;
25
- --bpk-component-button-colour-bg-disabled: #e0e4e9;
26
- --bpk-component-button-colour-bg-feature-pressed: #024daf;
27
- --bpk-component-button-colour-bg-featured: #0062e3;
28
- --bpk-component-button-colour-bg-footer: rgba(255, 255, 255, 0);
29
- --bpk-component-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);
30
- --bpk-component-button-colour-bg-primary: #ff1f8f;
31
- --bpk-component-button-colour-bg-primary-on-dark: #ffffff;
32
- --bpk-component-button-colour-bg-primary-on-dark-pressed: #c1c7cf;
33
- --bpk-component-button-colour-bg-primary-on-light: #ffffff;
34
- --bpk-component-button-colour-bg-primary-on-light-pressed: #154679;
35
- --bpk-component-button-colour-bg-secondary: #e0e4e9;
36
- --bpk-component-button-colour-bg-secondary-pressed: #c1c7cf;
37
- --bpk-component-button-colour-bg-secondary-on-contrast: #e0e4e9;
38
- --bpk-component-button-colour-bg-secondary-on-contrast-pressed: #c1c7cf;
39
- --bpk-component-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);
40
- --bpk-component-button-colour-bg-secondary-on-dark-disabled: #0b121d;
41
- --bpk-component-button-colour-bg-secondary-on-dark-pressed: #04182d;
42
- --bpk-component-button-colour-text-disruptive: #e70866;
43
- --bpk-component-button-colour-text-feature: #ffffff;
44
- --bpk-component-button-colour-text-footer: rgba(255, 255, 255, 0);
45
- --bpk-component-button-colour-text-link-on-dark: #ffffff;
46
- --bpk-component-button-colour-text-secondary: #161616;
47
- --bpk-component-button-dimension-min-height-default: 2.25rem;
48
- --bpk-component-button-dimension-min-height-large: 3rem;
49
- --bpk-component-button-dimension-min-weight-large: 3rem;
50
- --bpk-component-button-dimension-padding-horizontal-default: 1rem;
51
- --bpk-component-button-dimension-padding-horizontal-large: 1rem;
52
- --bpk-component-button-dimension-radius: 0.5rem;
53
- --bpk-component-button-typography-tmp-default-label: 1rem;
54
- --bpk-component-card-button-contained-fill: rgba(255, 255, 255, 0.8);
55
- --bpk-component-chip-group-colour-fill-icon-hover-on-image: #eff3f8;
56
- --bpk-component-chip-group-colour-fill-icon-off-on-image: #ffffff;
57
- --bpk-component-chip-group-colour-fill-icon-on-default: #05203c;
58
- --bpk-component-chip-group-colour-fill-icon-on-on-dark: #ffffff;
59
- --bpk-component-chip-group-colour-fill-icon-on-on-image: #05203c;
60
- --bpk-component-chip-group-colour-stroke-icon-hover-default: #05203c;
61
- --bpk-component-chip-group-colour-stroke-icon-hover-on-dark: #ffffff;
62
- --bpk-component-chip-group-colour-stroke-icon-off-default: #c1c7cf;
63
- --bpk-component-chip-group-colour-stroke-icon-off-on-dark: rgba(255, 255, 255, 0.5);
64
- --bpk-component-chip-group-dimensions-min-height: 2.25rem;
65
- --bpk-component-chip-colour-bg-default-on: #05203c;
66
- --bpk-component-chip-colour-bg-default-dismissible-hover: #05203c;
67
- --bpk-component-chip-colour-bg-on-dark-off: rgba(255, 255, 255, 0);
68
- --bpk-component-chip-colour-bg-on-dark-on: rgba(255, 255, 255, 0);
69
- --bpk-component-chip-colour-bg-on-dark-dismissible-hover: #ffffff;
70
- --bpk-component-chip-colour-bg-on-image-on: #eff3f8;
71
- --bpk-component-chip-colour-bg-on-image-dismissible-hover: #05203c;
72
- --bpk-component-chip-colour-border-default-hover: #05203c;
73
- --bpk-component-chip-colour-border-default-off: #c1c7cf;
74
- --bpk-component-chip-colour-border-default-dismissible-hover: rgba(255, 255, 255, 0);
75
- --bpk-component-chip-colour-border-on-dark-hover: #ffffff;
76
- --bpk-component-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.5);
77
- --bpk-component-chip-colour-border-on-dark-disimissible-hover: rgba(255, 255, 255, 0);
78
- --bpk-component-chip-colour-disabled: #e0e4e9;
79
- --bpk-component-chip-colour-fill-hover-on-canvas-contrast-new: rgba(255, 255, 255, 0);
80
- --bpk-component-chip-colour-fill-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
81
- --bpk-component-chip-colour-fill-on-on-canvas-contrast-new: rgba(255, 255, 255, 0);
82
- --bpk-component-chip-colour-fill-on-on-dark: #ffffff;
83
- --bpk-component-chip-colour-stroke-hover-on-canvas-contrast-new: rgba(255, 255, 255, 0);
84
- --bpk-component-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
85
- --bpk-component-chip-colour-text-hover-dismissible-default: #ffffff;
86
- --bpk-component-chip-colour-text-hover-dismissible-on-contrast: #161616;
87
- --bpk-component-chip-colour-text-icon-on-contrast-dismissible: #626971;
88
- --bpk-component-chip-colour-text-icon-on-dismissible: rgba(255, 255, 255, 0.5);
89
- --bpk-component-chip-colour-text-icon-on-image-dismissible: #626971;
90
- --bpk-component-chip-colour-text-on: #ffffff;
91
- --bpk-component-chip-colour-text-on-contrast: #161616;
92
- --bpk-component-chip-colour-text-on-image: #ffffff;
93
- --bpk-component-chip-dimension-min-height-width: 2rem;
94
- --bpk-component-chip-dimension-radius: 0.5rem;
95
- --bpk-component-date-selector-cheapest-month-highlight: #154679;
96
- --bpk-component-date-selector-flexible-date-card: #eff3f8;
97
- --bpk-component-dimension-padding-veritcal: 0;
98
- --bpk-component-info-banner-default: #eff3f8;
99
- --bpk-component-info-banner-on-contrast: #ffffff;
100
- --bpk-component-i-os-tab-bar-fill: rgba(255, 255, 255, 0.8);
101
- --bpk-component-map-cluster-pin: #05203c;
102
- --bpk-component-map-cluster-pin-previous-selection: #94c3ff;
103
- --bpk-component-map-marker-viewed: rgba(255, 255, 255, 0.8);
104
- --bpk-component-map-poi-pin: #8e47ba;
105
- --bpk-component-map-previous-selection: #cfe4ff;
106
- --bpk-component-navigation-tabs-hover: #154679;
107
- --bpk-component-navigation-tabs-outline: rgba(255, 255, 255, 0.2);
108
- --bpk-component-navigation-tabs-selected: #024daf;
109
- --bpk-component-rating-bar-default: #e0e4e9;
110
- --bpk-component-rating-bar-on-contrast: #ffffff;
111
- --bpk-component-segmented-control-canvas-default: #eff3f8;
112
- --bpk-component-segmented-control-surface-contrast: rgba(255, 255, 255, 0.1);
113
- --bpk-component-segmented-control-surface-contrast-on: #024daf;
114
- --bpk-component-shadow-large-blur: 0.875rem;
115
- --bpk-component-shadow-large-color: rgba(22, 22, 22, 0.25);
116
- --bpk-component-shadow-large-position-x: 0;
117
- --bpk-component-shadow-large-position-y: 0.25rem;
118
- --bpk-component-shadow-large-spread: 0;
119
- --bpk-component-shadow-small-blur: 0.1875rem;
120
- --bpk-component-shadow-small-color: rgba(22, 22, 22, 0.25);
121
- --bpk-component-shadow-small-position-x: 0;
122
- --bpk-component-shadow-small-position-y: 0.0625rem;
123
- --bpk-component-shadow-small-spread: 0;
124
- --bpk-component-shadow-xl-blur: 3.125rem;
125
- --bpk-component-shadow-xl-color: rgba(22, 22, 22, 0.25);
126
- --bpk-component-shadow-xl-position-x: 0;
127
- --bpk-component-shadow-xl-position-y: 0.75rem;
128
- --bpk-component-shadow-xl-spread: 0;
129
- --bpk-component-skeleton-on-dark: rgba(255, 255, 255, 0.1);
130
- --bpk-component-switch-android-switch-default-disabled: rgba(0, 0, 0, 0.2);
131
- --bpk-component-switch-android-switch-knob-disabled: rgba(255, 255, 255, 0.5);
132
- --bpk-component-switch-android-switch-on-contrast-fill-disabled: rgba(255, 255, 255, 0.1);
133
- --bpk-component-switch-android-switch-on-contrast-off: rgba(255, 255, 255, 0.8);
134
- --bpk-component-switch-ios-switch-default-off: #626971;
135
- --bpk-component-switch-ios-switch-disabled: #e0e4e9;
136
- --bpk-component-switch-ios-switch-on-contrast-off: rgba(255, 255, 255, 0.2);
137
- --bpk-component-trip-advisor: #00aa6c;
138
- --bpk-core-accent: #0062e3;
139
- --bpk-core-eco: #0fa1a9;
140
- --bpk-core-primary: #05203c;
141
- --bpk-other-line: #c1c7cf;
142
- --bpk-other-line-on-dark: rgba(255, 255, 255, 0.5);
143
- --bpk-other-overlay: rgba(0, 0, 0, 0.2);
144
- --bpk-other-scrim: rgba(0, 0, 0, 0.7);
145
- --bpk-other-shadow: rgba(22, 22, 22, 0.25);
146
- --bpk-status-danger-fill: #ffe9f9;
147
- --bpk-status-danger-spot: #e70866;
148
- --bpk-status-success-fill: #d4fff2;
149
- --bpk-status-success-spot: #0c838a;
150
- --bpk-status-warning-fill: #fff7cf;
151
- --bpk-status-warning-spot: #f55d42;
152
- --bpk-surface-promo: #0062e3;
153
- --bpk-surface-contrast: #05203c;
154
- --bpk-surface-default: #ffffff;
155
- --bpk-surface-elevated: #ffffff;
156
- --bpk-surface-hero: #0062e3;
157
- --bpk-surface-highlight: #e0e4e9;
158
- --bpk-surface-low-contrast: #f7f9fb;
159
- --bpk-surface-subtle: #e3f0ff;
160
- --bpk-surface-tint: rgba(255, 255, 255, 0.1);
161
- --bpk-text-deprecated-link: #0062e3;
162
- --bpk-text-hero: #0062e3;
163
- --bpk-text-disabled: rgba(0, 0, 0, 0.2);
164
- --bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
165
- --bpk-text-error: #e70866;
166
- --bpk-text-inverse: #ffffff;
167
- --bpk-text-on-dark: #ffffff;
168
- --bpk-text-on-light: #161616;
169
- --bpk-text-primary: #161616;
170
- --bpk-text-secondary: #626971;
171
- --bpk-text-success: #0c838a;
172
- --bpk-typography-family-sans-serif: 'Skyscanner Relative';
173
- --bpk-typography-family-serif: Larken;
174
- --bpk-typography-kerning-default: 0;
175
- --bpk-typography-kerning-loose: 0;
176
- --bpk-typography-kerning-tight: 0;
177
- --bpk-typography-style-body: 400;
178
- --bpk-typography-style-headline: 700;
179
- --bpk-typography-style-hero: 900;
180
- --bpk-typography-style-label: 43.75rem;
181
- --bpk-typography-style-subhead: 18.75rem;
182
- }
183
-
184
- [data-theme="dark"] {
185
- --bpk-canvas-contrast: #010913;
186
- --bpk-canvas-default: #010913;
187
- --bpk-component-badge-colour-bg-default: #243346;
188
- --bpk-component-badge-colour-bg-inverse: #243346;
189
- --bpk-component-badge-colour-bg-outline: rgba(255, 255, 255, 0);
190
- --bpk-component-badge-colour-bg-subtle: #243346;
191
- --bpk-component-badge-colour-stroke-outline: #ffffff;
192
- --bpk-component-badge-dimension-padding-horizontal-default: 0.5rem;
193
- --bpk-component-badge-dimension-padding-horizontal-subtle: 0.5rem;
194
- --bpk-component-badge-typography-tmp-badge-label: 0.875rem;
195
- --bpk-component-badge-typography-tmp-badge-line-height: 0;
196
- --bpk-component-button-colour-bg-destructive: #e0e4e9;
197
- --bpk-component-button-colour-bg-destructive-pressed: #ff649c;
198
- --bpk-component-button-colour-bg-disabled: #0b121d;
199
- --bpk-component-button-colour-bg-feature-pressed: #d1f7ff;
200
- --bpk-component-button-colour-bg-featured: #d1f7ff;
201
- --bpk-component-button-colour-bg-footer: rgba(255, 255, 255, 0);
202
- --bpk-component-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);
203
- --bpk-component-button-colour-bg-primary: #024daf;
204
- --bpk-component-button-colour-bg-primary-on-dark: #ffffff;
205
- --bpk-component-button-colour-bg-primary-on-dark-pressed: #c1c7cf;
206
- --bpk-component-button-colour-bg-primary-on-light: #ffffff;
207
- --bpk-component-button-colour-bg-primary-on-light-pressed: #002b4b;
208
- --bpk-component-button-colour-bg-secondary: #243346;
209
- --bpk-component-button-colour-bg-secondary-pressed: #010913;
210
- --bpk-component-button-colour-bg-secondary-on-contrast: #243346;
211
- --bpk-component-button-colour-bg-secondary-on-contrast-pressed: #010913;
212
- --bpk-component-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);
213
- --bpk-component-button-colour-bg-secondary-on-dark-disabled: #0b121d;
214
- --bpk-component-button-colour-bg-secondary-on-dark-pressed: rgba(255, 255, 255, 0.2);
215
- --bpk-component-button-colour-text-disruptive: #ff649c;
216
- --bpk-component-button-colour-text-feature: #010913;
217
- --bpk-component-button-colour-text-footer: rgba(255, 255, 255, 0);
218
- --bpk-component-button-colour-text-link-on-dark: #ffffff;
219
- --bpk-component-button-colour-text-secondary: #ffffff;
220
- --bpk-component-button-dimension-min-height-default: 2.25rem;
221
- --bpk-component-button-dimension-min-height-large: 3rem;
222
- --bpk-component-button-dimension-min-weight-large: 3rem;
223
- --bpk-component-button-dimension-padding-horizontal-default: 1rem;
224
- --bpk-component-button-dimension-padding-horizontal-large: 1rem;
225
- --bpk-component-button-dimension-radius: 0.5rem;
226
- --bpk-component-button-typography-tmp-default-label: 1rem;
227
- --bpk-core-primary: #054184;
228
- --bpk-surface-contrast: #010913;
229
- --bpk-surface-default: #131d2b;
230
- --bpk-text-on-dark: #ffffff;
231
- --bpk-text-primary: #ffffff;
232
- }