@skyscanner/backpack-web 42.19.2 → 42.20.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 (19) hide show
  1. package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.d.ts +1 -1
  2. package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css +1 -1
  3. package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.d.ts +1 -1
  4. package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.js +6 -3
  5. package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css +1 -1
  6. package/bpk-component-layout/src/tokens.js +1 -1
  7. package/bpk-component-pagination/index.d.ts +5 -0
  8. package/bpk-component-pagination/src/BpkPagination.d.ts +16 -0
  9. package/bpk-component-pagination/src/BpkPagination.js +3 -20
  10. package/bpk-component-pagination/src/BpkPaginationBreak.d.ts +5 -0
  11. package/bpk-component-pagination/src/BpkPaginationBreak.js +2 -9
  12. package/bpk-component-pagination/src/BpkPaginationList.d.ts +9 -0
  13. package/bpk-component-pagination/src/BpkPaginationList.js +0 -8
  14. package/bpk-component-pagination/src/BpkPaginationNudger.d.ts +8 -0
  15. package/bpk-component-pagination/src/BpkPaginationNudger.js +2 -13
  16. package/bpk-component-pagination/src/BpkPaginationPage.d.ts +8 -0
  17. package/bpk-component-pagination/src/BpkPaginationPage.js +1 -11
  18. package/bpk-component-pagination/src/themeAttributes.d.ts +2 -0
  19. package/package.json +1 -1
package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  declare const BpkCheckboxV2: {
2
- Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
2
+ Root: import("react").ForwardRefExoticComponent<import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps & import("react").RefAttributes<HTMLLabelElement>>;
3
3
  Control: ({ children }: import("./BpkCheckboxV2Control").BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
4
4
  Indicator: () => null;
5
5
  Label: ({ children }: import("./BpkCheckboxV2Label").BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2:has(.bpk-checkbox-v2__hidden-input:focus-visible) .bpk-checkbox-v2__control{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}
18
+ .bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:rgba(0,0,0,0)}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2:has(.bpk-checkbox-v2__hidden-input:focus-visible) .bpk-checkbox-v2__control{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}
package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.d.ts CHANGED
@@ -13,5 +13,5 @@ export type BpkCheckboxV2RootProps = {
13
13
  required?: boolean;
14
14
  value?: string;
15
15
  };
16
- declare const BpkCheckboxV2Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
16
+ declare const BpkCheckboxV2Root: import("react").ForwardRefExoticComponent<BpkCheckboxV2RootProps & import("react").RefAttributes<HTMLLabelElement>>;
17
17
  export default BpkCheckboxV2Root;
package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.js CHANGED
@@ -16,12 +16,13 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
+ import { forwardRef } from 'react';
19
20
  import { Checkbox } from '@ark-ui/react';
20
21
  import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
21
22
  import STYLES from "./BpkCheckboxV2.module.css";
22
23
  import { jsx as _jsx } from "react/jsx-runtime";
23
24
  const getClassName = cssModules(STYLES);
24
- const BpkCheckboxV2Root = ({
25
+ const BpkCheckboxV2Root = /*#__PURE__*/forwardRef(({
25
26
  checked,
26
27
  children,
27
28
  'data-testid': dataTestId,
@@ -33,7 +34,8 @@ const BpkCheckboxV2Root = ({
33
34
  onCheckedChange,
34
35
  required = false,
35
36
  value
36
- }) => /*#__PURE__*/_jsx(Checkbox.Root, {
37
+ }, ref) => /*#__PURE__*/_jsx(Checkbox.Root, {
38
+ ref: ref,
37
39
  className: getClassName('bpk-checkbox-v2'),
38
40
  checked: checked,
39
41
  "data-testid": dataTestId,
@@ -47,5 +49,6 @@ const BpkCheckboxV2Root = ({
47
49
  value: value,
48
50
  ...getDataComponentAttribute('CheckboxV2'),
49
51
  children: children
50
- });
52
+ }));
53
+ BpkCheckboxV2Root.displayName = 'BpkCheckboxV2Root';
51
54
  export default BpkCheckboxV2Root;
package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{transition:background-color 200ms ease-in-out,box-shadow 200ms ease-in-out,color 200ms ease-in-out;border:none;box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars[data-state=checked]{border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){transition:none;box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]){box-shadow:none}.bpk-checkbox-card-root--cars:has(:focus-visible){outline:none;outline-offset:0}@media(hover: hover)and (pointer: fine){.bpk-checkbox-card-root--cars:has(:focus-visible){box-shadow:inset 0 0 0 2px #0062e3}}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
18
+ .bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{transition:background-color 200ms ease-in-out,box-shadow 200ms ease-in-out,color 200ms ease-in-out;border:none;box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars[data-state=checked]{border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){transition:none;box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));opacity:.5}.bpk-checkbox-card-root--cars:has(:focus-visible){outline:none;outline-offset:0}@media(hover: hover)and (pointer: fine){.bpk-checkbox-card-root--cars:has(:focus-visible){box-shadow:inset 0 0 0 2px #0062e3}}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
package/bpk-component-layout/src/tokens.js CHANGED
@@ -150,5 +150,5 @@ export function isValidPositionValue(value) {
150
150
  /^-?\d+(\.\d+)?rem$/.test(value) ||
151
151
  // rem values
152
152
  isPercentage(value) // percentage values
153
- ;
153
+ ;
154
154
  }
package/bpk-component-pagination/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import BpkPagination, { type Props as BpkPaginationProps } from './src/BpkPagination';
2
+ import themeAttributes from './src/themeAttributes';
3
+ export default BpkPagination;
4
+ export type { BpkPaginationProps };
5
+ export { themeAttributes };
package/bpk-component-pagination/src/BpkPagination.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { HTMLAttributes } from 'react';
2
+ type PageLabel = (page: number, isSelected: boolean) => string;
3
+ type NativeNavProps = HTMLAttributes<HTMLElement>;
4
+ export type Props = Omit<NativeNavProps, 'className'> & {
5
+ selectedPageIndex: number;
6
+ pageCount: number;
7
+ previousLabel: string;
8
+ nextLabel: string;
9
+ paginationLabel: string;
10
+ pageLabel: PageLabel;
11
+ onPageChange?: ((nextPageIndex: number) => void) | null;
12
+ visibleRange?: number;
13
+ className?: string | null;
14
+ };
15
+ declare const BpkPagination: (props: Props) => import("react/jsx-runtime").JSX.Element;
16
+ export default BpkPagination;
package/bpk-component-pagination/src/BpkPagination.js CHANGED
@@ -16,7 +16,6 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import PropTypes from 'prop-types';
20
19
  import { cssModules } from "../../bpk-react-utils";
21
20
  import BpkPaginationList from "./BpkPaginationList";
22
21
  import BpkPaginationNudger from "./BpkPaginationNudger";
@@ -31,15 +30,15 @@ const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
31
30
  const BpkPagination = props => {
32
31
  const classNames = [getClassName('bpk-pagination')];
33
32
  const {
34
- className,
33
+ className = null,
35
34
  nextLabel,
36
- onPageChange,
35
+ onPageChange = null,
37
36
  pageCount,
38
37
  pageLabel,
39
38
  paginationLabel,
40
39
  previousLabel,
41
40
  selectedPageIndex,
42
- visibleRange,
41
+ visibleRange = 3,
43
42
  ...rest
44
43
  } = props;
45
44
  if (className) {
@@ -70,20 +69,4 @@ const BpkPagination = props => {
70
69
  })]
71
70
  });
72
71
  };
73
- BpkPagination.propTypes = {
74
- selectedPageIndex: PropTypes.number.isRequired,
75
- onPageChange: PropTypes.func,
76
- pageCount: PropTypes.number.isRequired,
77
- previousLabel: PropTypes.string.isRequired,
78
- nextLabel: PropTypes.string.isRequired,
79
- paginationLabel: PropTypes.string.isRequired,
80
- pageLabel: PropTypes.func.isRequired,
81
- visibleRange: PropTypes.number,
82
- className: PropTypes.string
83
- };
84
- BpkPagination.defaultProps = {
85
- onPageChange: null,
86
- visibleRange: 3,
87
- className: null
88
- };
89
72
  export default BpkPagination;
package/bpk-component-pagination/src/BpkPaginationBreak.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export type Props = {
2
+ breakLabel?: string;
3
+ };
4
+ declare const BpkPaginationBreak: (props: Props) => import("react/jsx-runtime").JSX.Element;
5
+ export default BpkPaginationBreak;
package/bpk-component-pagination/src/BpkPaginationBreak.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  /*
2
3
  * Backpack - Skyscanner's Design System
3
4
  *
@@ -16,20 +17,12 @@
16
17
  * limitations under the License.
17
18
  */
18
19
 
19
- import PropTypes from 'prop-types';
20
- import { jsx as _jsx } from "react/jsx-runtime";
21
20
  const BpkPaginationBreak = props => {
22
21
  const {
23
- breakLabel
22
+ breakLabel = '...'
24
23
  } = props;
25
24
  return /*#__PURE__*/_jsx("div", {
26
25
  children: breakLabel
27
26
  });
28
27
  };
29
- BpkPaginationBreak.propTypes = {
30
- breakLabel: PropTypes.string
31
- };
32
- BpkPaginationBreak.defaultProps = {
33
- breakLabel: '...'
34
- };
35
28
  export default BpkPaginationBreak;
package/bpk-component-pagination/src/BpkPaginationList.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export type Props = {
2
+ selectedPageIndex: number;
3
+ pageCount: number;
4
+ visibleRange: number;
5
+ onPageChange: (nextPageIndex: number) => void;
6
+ pageLabel: (page: number, isSelected: boolean) => string;
7
+ };
8
+ declare const BpkPaginationList: (props: Props) => import("react/jsx-runtime").JSX.Element;
9
+ export default BpkPaginationList;
package/bpk-component-pagination/src/BpkPaginationList.js CHANGED
@@ -16,7 +16,6 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import PropTypes from 'prop-types';
20
19
  import { cssModules } from "../../bpk-react-utils";
21
20
  import BpkPaginationBreak from "./BpkPaginationBreak";
22
21
  import BpkPaginationPage from "./BpkPaginationPage";
@@ -66,11 +65,4 @@ const BpkPaginationList = props => {
66
65
  children: children
67
66
  });
68
67
  };
69
- BpkPaginationList.propTypes = {
70
- selectedPageIndex: PropTypes.number.isRequired,
71
- pageCount: PropTypes.number.isRequired,
72
- visibleRange: PropTypes.number.isRequired,
73
- onPageChange: PropTypes.func.isRequired,
74
- pageLabel: PropTypes.func.isRequired
75
- };
76
68
  export default BpkPaginationList;
package/bpk-component-pagination/src/BpkPaginationNudger.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export type Props = {
2
+ label: string;
3
+ onNudge: () => void;
4
+ forward?: boolean;
5
+ disabled?: boolean;
6
+ };
7
+ declare const BpkPaginationNudger: (props: Props) => import("react/jsx-runtime").JSX.Element;
8
+ export default BpkPaginationNudger;
package/bpk-component-pagination/src/BpkPaginationNudger.js CHANGED
@@ -16,7 +16,6 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import PropTypes from 'prop-types';
20
19
  import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
21
20
  import { withRtlSupport, withButtonAlignment } from "../../bpk-component-icon";
22
21
  import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
@@ -30,8 +29,8 @@ const AlignedArrowRightIcon = withRtlSupport(withButtonAlignment(ArrowRightIcon)
30
29
  const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon, {}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon, {});
31
30
  const BpkPaginationNudger = props => {
32
31
  const {
33
- disabled,
34
- forward,
32
+ disabled = false,
33
+ forward = false,
35
34
  label,
36
35
  onNudge
37
36
  } = props;
@@ -49,14 +48,4 @@ const BpkPaginationNudger = props => {
49
48
  })
50
49
  });
51
50
  };
52
- BpkPaginationNudger.propTypes = {
53
- label: PropTypes.string.isRequired,
54
- onNudge: PropTypes.func.isRequired,
55
- forward: PropTypes.bool,
56
- disabled: PropTypes.bool
57
- };
58
- BpkPaginationNudger.defaultProps = {
59
- forward: false,
60
- disabled: false
61
- };
62
51
  export default BpkPaginationNudger;
package/bpk-component-pagination/src/BpkPaginationPage.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export type Props = {
2
+ page: number;
3
+ onSelect: () => void;
4
+ pageLabel: (page: number, isSelected: boolean) => string;
5
+ isSelected?: boolean;
6
+ };
7
+ declare const BpkPaginationPage: (props: Props) => import("react/jsx-runtime").JSX.Element;
8
+ export default BpkPaginationPage;
package/bpk-component-pagination/src/BpkPaginationPage.js CHANGED
@@ -16,7 +16,6 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import PropTypes from 'prop-types';
20
19
  import { cssModules } from "../../bpk-react-utils";
21
20
  import STYLES from "./BpkPaginationPage.module.css";
22
21
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,7 +23,7 @@ const getClassName = cssModules(STYLES);
24
23
  const BpkPaginationPage = props => {
25
24
  const classNames = [getClassName('bpk-pagination-page')];
26
25
  const {
27
- isSelected,
26
+ isSelected = false,
28
27
  onSelect,
29
28
  page,
30
29
  pageLabel
@@ -44,13 +43,4 @@ const BpkPaginationPage = props => {
44
43
  })
45
44
  });
46
45
  };
47
- BpkPaginationPage.propTypes = {
48
- page: PropTypes.number.isRequired,
49
- onSelect: PropTypes.func.isRequired,
50
- pageLabel: PropTypes.func.isRequired,
51
- isSelected: PropTypes.bool
52
- };
53
- BpkPaginationPage.defaultProps = {
54
- isSelected: false
55
- };
56
46
  export default BpkPaginationPage;
package/bpk-component-pagination/src/themeAttributes.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: string[];
2
+ export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "42.19.2",
3
+ "version": "42.20.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",