@skyscanner/backpack-web 41.17.0 → 41.19.0

package/bpk-component-chip/src/themeAttributes.js

@@ -16,4 +16,10 @@
  * limitations under the License.
  */
 
-export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
+// Backward-compatible: original 8 selected-state attributes.
+// Do not modify — existing consumers depend on this exact list.
+export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
+export const chipBorderRadiusThemeAttributes = ['chipBorderRadius'];
+export const chipDefaultThemeAttributes = ['chipDefaultBackgroundColor', 'chipDefaultTextColor', 'chipDefaultBorderColor', 'chipDefaultHoverBackgroundColor', 'chipDefaultHoverBorderColor', 'chipDefaultActiveBorderColor', 'chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipDefaultSelectedHoverBackgroundColor', 'chipDefaultSelectedActiveBackgroundColor'];
+export const chipOnDarkThemeAttributes = ['chipOnDarkBackgroundColor', 'chipOnDarkTextColor', 'chipOnDarkBorderColor', 'chipOnDarkHoverBorderColor', 'chipOnDarkActiveBorderColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnDarkSelectedHoverBackgroundColor', 'chipOnDarkSelectedActiveBackgroundColor'];
+export const chipOnImageThemeAttributes = ['chipOnImageBackgroundColor', 'chipOnImageTextColor', 'chipOnImageHoverBackgroundColor', 'chipOnImageActiveBackgroundColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedTextColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor'];

package/bpk-component-pagination/src/BpkPaginationPage.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-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-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){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-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-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}
+.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-component-scrollable-calendar/src/utils.d.ts

@@ -1,3 +1,3 @@
-declare const getMonthsArray: (startDate: Date, count: number) => Date[];
+declare const getMonthsArray: (startDate: Date, count: number) => any[];
 declare const getMonthItemHeights: (months: Date[], weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6, columnCount: number, rowHeight: number, baseMonthItemHeight: number) => number[];
 export { getMonthsArray, getMonthItemHeights };

package/bpk-component-segmented-control/index.d.ts

@@ -2,3 +2,5 @@ import BpkSegmentedControl, { useSegmentedControlPanels, type Props as BpkSegmen
 export type { BpkSegmentControlProps, TabPanelProps };
 export { useSegmentedControlPanels };
 export default BpkSegmentedControl;
+export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from './src/BpkSegmentedControlV2/BpkSegmentedControlV2';
+export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, SegmentTypesV2, } from './src/BpkSegmentedControlV2/common-types';

package/bpk-component-segmented-control/index.js

@@ -18,4 +18,5 @@
 
 import BpkSegmentedControl, { useSegmentedControlPanels } from "./src/BpkSegmentedControl";
 export { useSegmentedControlPanels };
-export default BpkSegmentedControl;
+export default BpkSegmentedControl;
+export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from "./src/BpkSegmentedControlV2/BpkSegmentedControlV2";

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.d.ts

@@ -0,0 +1,19 @@
+import { SEGMENT_TYPES_V2 } from './common-types';
+import type { BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, BpkSegmentedControlV2RootProps } from './common-types';
+declare const BpkSegmentedControlV2Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemControl: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2Indicator: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2: {
+    Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
+    ItemControl: () => import("react/jsx-runtime").JSX.Element;
+    ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
+    Indicator: () => import("react/jsx-runtime").JSX.Element;
+};
+export default BpkSegmentedControlV2;
+export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2, };
+export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, };

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.js

@@ -0,0 +1,81 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SegmentGroup } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+import { SEGMENT_TYPES_V2 } from "./common-types";
+import STYLES from "./BpkSegmentedControlV2.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkSegmentedControlV2Root = ({
+  children,
+  defaultValue,
+  label,
+  onChange,
+  shadow = false,
+  type = SEGMENT_TYPES_V2.CanvasDefault,
+  value
+}) => {
+  const containerClass = getClassName('bpk-segmented-control-v2', `bpk-segmented-control-v2--${type}`, shadow && 'bpk-segmented-control-v2--shadow');
+  return /*#__PURE__*/_jsxs(SegmentGroup.Root, {
+    className: containerClass,
+    value: value,
+    defaultValue: defaultValue,
+    onValueChange: onChange ? ({
+      value: selectedValue
+    }) => {
+      if (selectedValue !== null) onChange(selectedValue);
+    } : undefined,
+    orientation: "horizontal",
+    ...getDataComponentAttribute('SegmentedControlV2'),
+    children: [/*#__PURE__*/_jsx(SegmentGroup.Label, {
+      children: label
+    }), children]
+  });
+};
+const BpkSegmentedControlV2Item = ({
+  children,
+  value
+}) => /*#__PURE__*/_jsx(SegmentGroup.Item, {
+  value: value,
+  className: getClassName('bpk-segmented-control-v2__item'),
+  children: children
+});
+const BpkSegmentedControlV2ItemText = ({
+  children
+}) => /*#__PURE__*/_jsx(SegmentGroup.ItemText, {
+  className: getClassName('bpk-segmented-control-v2__item-text'),
+  children: children
+});
+const BpkSegmentedControlV2ItemControl = () => /*#__PURE__*/_jsx(SegmentGroup.ItemControl, {
+  className: getClassName('bpk-segmented-control-v2__item-control')
+});
+const BpkSegmentedControlV2ItemHiddenInput = () => /*#__PURE__*/_jsx(SegmentGroup.ItemHiddenInput, {});
+const BpkSegmentedControlV2Indicator = () => /*#__PURE__*/_jsx(SegmentGroup.Indicator, {
+  className: getClassName('bpk-segmented-control-v2__indicator')
+});
+const BpkSegmentedControlV2 = {
+  Root: BpkSegmentedControlV2Root,
+  Item: BpkSegmentedControlV2Item,
+  ItemText: BpkSegmentedControlV2ItemText,
+  ItemControl: BpkSegmentedControlV2ItemControl,
+  ItemHiddenInput: BpkSegmentedControlV2ItemHiddenInput,
+  Indicator: BpkSegmentedControlV2Indicator
+};
+export default BpkSegmentedControlV2;
+export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2 };

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-segmented-control-v2{position:relative;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;border-radius:.5rem;background-color:#eff3f8;overflow:hidden}.bpk-segmented-control-v2--canvas-default{background-color:#eff3f8}.bpk-segmented-control-v2--canvas-contrast{background-color:#fff}.bpk-segmented-control-v2--canvas-contrast .bpk-segmented-control-v2__indicator{background-color:#fff}.bpk-segmented-control-v2--surface-default{background-color:#eff3f8}.bpk-segmented-control-v2--surface-default .bpk-segmented-control-v2__indicator{background-color:#eff3f8}.bpk-segmented-control-v2--surface-contrast{background-color:hsla(0,0%,100%,.1)}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__indicator{background-color:#024daf}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__item-text{color:#fff;border-inline-start-color:hsla(0,0%,100%,.5)}.bpk-segmented-control-v2--shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control-v2>[data-part=label]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-segmented-control-v2__indicator{position:absolute;top:var(--top);left:var(--left);width:var(--width);height:var(--height);background-color:#05203c;--transition-duration: 0ms}.bpk-segmented-control-v2__item{display:grid;cursor:pointer}.bpk-segmented-control-v2__item:first-of-type .bpk-segmented-control-v2__item-text{border-inline-start:none}.bpk-segmented-control-v2__item:has([data-state=checked]) .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has([data-state=checked])+.bpk-segmented-control-v2__item .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has(:focus-visible){z-index:1;outline:.125rem solid #0062e3;outline-offset:-0.125rem}.bpk-segmented-control-v2__item-control{display:none}.bpk-segmented-control-v2__item-text{padding:.25rem .5rem;display:flex;z-index:1;min-height:2rem;grid-area:1/1;justify-content:center;align-items:center;transition:color 50ms ease-in-out;color:#161616;overflow:hidden;border-inline-start:1px solid #c1c7cf;pointer-events:none;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control-v2__item-text svg{fill:currentcolor}.bpk-segmented-control-v2__item-text[data-state=checked]{color:#fff}

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+export declare const SEGMENT_TYPES_V2: {
+    readonly CanvasDefault: "canvas-default";
+    readonly CanvasContrast: "canvas-contrast";
+    readonly SurfaceDefault: "surface-default";
+    readonly SurfaceContrast: "surface-contrast";
+};
+export type SegmentTypesV2 = (typeof SEGMENT_TYPES_V2)[keyof typeof SEGMENT_TYPES_V2];
+export type BpkSegmentedControlV2RootProps = {
+    /**
+     * Slot content — one or more BpkSegmentedControlV2.Item elements.
+     */
+    children: ReactNode;
+    /**
+     * Controlled selected value. When provided, onChange must also be provided.
+     */
+    value?: string;
+    /**
+     * Initial selected value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Called when the selected segment changes. Receives the value of the newly selected item.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Pre-defined surface theme controlling default token values.
+     * @default 'canvas-default'
+     */
+    type?: SegmentTypesV2;
+    /**
+     * Applies a box shadow to the group container.
+     * @default false
+     */
+    shadow?: boolean;
+    /**
+     * Accessible label for the radiogroup. Always required to satisfy WCAG 4.1.2
+     * (the role="radiogroup" element must have an accessible name).
+     */
+    label: string;
+};
+export type BpkSegmentedControlV2ItemProps = {
+    /**
+     * Unique identifier for this segment within the group.
+     */
+    value: string;
+    /**
+     * Slot content — typically ItemText + ItemControl + ItemHiddenInput.
+     */
+    children: ReactNode;
+};
+export type BpkSegmentedControlV2ItemTextProps = {
+    /**
+     * Visible content of the segment — text, icons, or a combination.
+     */
+    children: ReactNode;
+};

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.js

@@ -0,0 +1,24 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const SEGMENT_TYPES_V2 = {
+  CanvasDefault: 'canvas-default',
+  CanvasContrast: 'canvas-contrast',
+  SurfaceDefault: 'surface-default',
+  SurfaceContrast: 'surface-contrast'
+};

package/bpk-component-table/index.d.ts

@@ -0,0 +1,13 @@
+import BpkTable from './src/BpkTable';
+import BpkTableBody from './src/BpkTableBody';
+import BpkTableCell from './src/BpkTableCell';
+import BpkTableHead from './src/BpkTableHead';
+import BpkTableHeadCell from './src/BpkTableHeadCell';
+import BpkTableRow from './src/BpkTableRow';
+export type { BpkTableProps } from './src/BpkTable';
+export type { BpkTableHeadProps } from './src/BpkTableHead';
+export type { BpkTableBodyProps } from './src/BpkTableBody';
+export type { BpkTableRowProps } from './src/BpkTableRow';
+export type { BpkTableCellProps } from './src/BpkTableCell';
+export type { BpkTableHeadCellProps } from './src/BpkTableHeadCell';
+export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, };

package/bpk-component-table/index.js

@@ -14,7 +14,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkTable from "./src/BpkTable";
+ */
+
+import BpkTable from "./src/BpkTable";
 import BpkTableBody from "./src/BpkTableBody";
 import BpkTableCell from "./src/BpkTableCell";
 import BpkTableHead from "./src/BpkTableHead";

package/bpk-component-table/src/BpkTable.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableProps extends Omit<HTMLAttributes<HTMLTableElement>, 'className'> {
+    /** The content of the table */
+    children: ReactNode;
+    className?: string | null;
+}
+declare const BpkTable: ({ children, className, ...rest }: BpkTableProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTable;

package/bpk-component-table/src/BpkTable.js

@@ -14,7 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,18 +26,10 @@ const BpkTable = ({
   ...rest
 }) => {
   const classNames = getClassName('bpk-table', className);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _jsx("table", {
-      className: classNames,
-      ...rest,
-      children: children
-    })
-  );
-};
-BpkTable.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
+  return /*#__PURE__*/_jsx("table", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkTable;

package/bpk-component-table/src/BpkTableBody.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** The content of the table */
+    children: ReactNode;
+}
+declare const BpkTableBody: (props: BpkTableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableBody;

package/bpk-component-table/src/BpkTableBody.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,12 +15,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
+ */
+
 const BpkTableBody = props => /*#__PURE__*/_jsx("tbody", {
   ...props
 });
-BpkTableBody.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default BpkTableBody;

package/bpk-component-table/src/BpkTableCell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableCellProps extends Omit<HTMLAttributes<HTMLTableCellElement>, 'className'> {
+    /** The content of the table */
+    children: ReactNode;
+    className?: string | null;
+    wordBreak?: boolean;
+}
+declare const BpkTableCell: ({ children, className, wordBreak, ...rest }: BpkTableCellProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableCell;

package/bpk-component-table/src/BpkTableCell.js

@@ -14,7 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,19 +28,10 @@ const BpkTableCell = ({
 }) => {
   const classes = ['bpk-table__cell', wordBreak && 'bpk-table__cell--wordBreak', className];
   const classNames = getClassName(...classes);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _jsx("td", {
-      className: classNames,
-      ...rest,
-      children: children
-    })
-  );
-};
-BpkTableCell.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  wordBreak: PropTypes.bool
+  return /*#__PURE__*/_jsx("td", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkTableCell;

package/bpk-component-table/src/BpkTableHead.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** The content of the table */
+    children: ReactNode;
+}
+declare const BpkTableHead: (props: BpkTableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableHead;

package/bpk-component-table/src/BpkTableHead.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,12 +15,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
+ */
+
 const BpkTableHead = props => /*#__PURE__*/_jsx("thead", {
   ...props
 });
-BpkTableHead.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default BpkTableHead;

package/bpk-component-table/src/BpkTableHeadCell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableHeadCellProps extends Omit<HTMLAttributes<HTMLTableCellElement>, 'className'> {
+    /** The content of the table */
+    children: ReactNode;
+    className?: string | null;
+    wordBreak?: boolean;
+}
+declare const BpkTableHeadCell: ({ children, className, wordBreak, ...rest }: BpkTableHeadCellProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableHeadCell;

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -14,7 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,9 +34,4 @@ const BpkTableHeadCell = ({
     children: children
   });
 };
-BpkTableHeadCell.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  wordBreak: PropTypes.bool
-};
 export default BpkTableHeadCell;

package/bpk-component-table/src/BpkTableRow.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** The content of the table */
+    children: ReactNode;
+}
+declare const BpkTableRow: (props: BpkTableRowProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableRow;

package/bpk-component-table/src/BpkTableRow.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,12 +15,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
+ */
+
 const BpkTableRow = props => /*#__PURE__*/_jsx("tr", {
   ...props
 });
-BpkTableRow.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default BpkTableRow;

package/bpk-component-thumb-button/index.d.ts

@@ -0,0 +1,3 @@
+import BpkThumbButton from './src/BpkThumbButton';
+export type { BpkThumbButtonProps, ThumbsButtonType } from './src/BpkThumbButton';
+export default BpkThumbButton;

package/bpk-component-thumb-button/index.js

@@ -0,0 +1,20 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkThumbButton from "./src/BpkThumbButton";
+export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.d.ts

@@ -0,0 +1,21 @@
+export type ThumbsButtonType = 'up' | 'down';
+export type BpkThumbButtonProps = {
+    /**
+     * Accessibility label for screen readers (REQUIRED).
+     */
+    accessibilityLabel: string;
+    /**
+     * Click handler callback.
+     */
+    onClick: (type: ThumbsButtonType) => void;
+    /**
+     * Whether the thumb is in selected state.
+     */
+    selected?: boolean;
+    /**
+     * Type of thumb icon to display.
+     */
+    type: ThumbsButtonType;
+};
+declare const BpkThumbButton: ({ accessibilityLabel, onClick, selected, type, }: BpkThumbButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.js

@@ -0,0 +1,52 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ThumbsDownIcon from "../../bpk-component-icon/lg/thumbs-down";
+import ThumbsUpIcon from "../../bpk-component-icon/lg/thumbs-up";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import STYLES from "./BpkThumbButton.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkThumbButton = ({
+  accessibilityLabel,
+  onClick,
+  selected = false,
+  type
+}) => {
+  const Icon = type === 'up' ? ThumbsUpIcon : ThumbsDownIcon;
+  const classNames = getClassName('bpk-thumb-button', selected && 'bpk-thumb-button--selected');
+  const handleClick = event => {
+    event.stopPropagation();
+    onClick(type);
+  };
+  const iconClassNames = getClassName('bpk-thumb-button__icon');
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: classNames,
+    onClick: handleClick,
+    "aria-label": accessibilityLabel,
+    "aria-pressed": selected,
+    "data-testid": `bpk-thumb-button-${type}`,
+    ...getDataComponentAttribute('ThumbButton'),
+    children: /*#__PURE__*/_jsx("span", {
+      className: iconClassNames,
+      children: /*#__PURE__*/_jsx(Icon, {})
+    })
+  });
+};
+export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-thumb-button{display:flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;transition:all 200ms ease-in-out;border:none;background:rgba(0,0,0,0);color:rgba(0,0,0,.2);cursor:pointer;appearance:none;position:relative}.bpk-thumb-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}@media(prefers-reduced-motion: reduce){.bpk-thumb-button{transition:none}}.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button__icon{display:flex;fill:currentcolor}