@skyscanner/backpack-web 42.1.0 → 42.3.0

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Description/BpkModalV3Description.js

@@ -0,0 +1,28 @@
+/*
+ * 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 { Dialog } from '@ark-ui/react';
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Description = ({
+  children
+}) => /*#__PURE__*/_jsx(Dialog.Description, {
+  ...getDataComponentAttribute('ModalV3Description'),
+  children: children
+});
+export default BpkModalV3Description;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Header/BpkModalV3Header.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type BpkModalV3HeaderProps = {
+    children: ReactNode;
+};
+declare const BpkModalV3Header: ({ children }: BpkModalV3HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Header;
+export type { BpkModalV3HeaderProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Header/BpkModalV3Header.js

@@ -0,0 +1,34 @@
+/*
+ * 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 { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { useModalType } from "../BpkModalV3Context";
+import STYLES from "./BpkModalV3Header.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Header = ({
+  children
+}) => {
+  const type = useModalType();
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-modal-v3__header', `bpk-modal-v3__header--${type}`),
+    ...getDataComponentAttribute('ModalV3Header'),
+    children: children
+  });
+};
+export default BpkModalV3Header;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Header/BpkModalV3Header.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-modal-v3__header{display:flex;padding:1.5rem;align-items:flex-start;flex-shrink:0;gap:.25rem}.bpk-modal-v3__header--sheet,.bpk-modal-v3__header--full{padding-bottom:1rem}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3HeroImage/BpkModalV3HeroImage.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+type BpkModalV3HeroImageProps = {
+    src: string;
+    alt: string;
+    height?: string;
+    children?: ReactNode;
+};
+declare const BpkModalV3HeroImage: ({ alt, children, height, src, }: BpkModalV3HeroImageProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3HeroImage;
+export type { BpkModalV3HeroImageProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3HeroImage/BpkModalV3HeroImage.js

@@ -0,0 +1,44 @@
+/*
+ * 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 { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import STYLES from "./BpkModalV3HeroImage.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3HeroImage = ({
+  alt,
+  children,
+  height,
+  src
+}) => {
+  const style = height ? {
+    height,
+    flex: 'none'
+  } : undefined;
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-modal-v3__hero-image'),
+    style: style,
+    ...getDataComponentAttribute('ModalV3HeroImage'),
+    children: [/*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: alt,
+      className: getClassName('bpk-modal-v3__hero-image-img')
+    }), children]
+  });
+};
+export default BpkModalV3HeroImage;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3HeroImage/BpkModalV3HeroImage.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-modal-v3__hero-image{position:relative;flex:1;overflow:hidden}.bpk-modal-v3__hero-image-img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Portal/BpkModalV3Portal.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type BpkModalV3PortalProps = {
+    children: ReactNode;
+};
+declare const BpkModalV3Portal: ({ children }: BpkModalV3PortalProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Portal;
+export type { BpkModalV3PortalProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Portal/BpkModalV3Portal.js

@@ -0,0 +1,26 @@
+/*
+ * 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 { Portal } from '@ark-ui/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Portal = ({
+  children
+}) => /*#__PURE__*/_jsx(Portal, {
+  children: children
+});
+export default BpkModalV3Portal;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/BpkModalV3Root.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type BpkModalV3Type } from '../common-types';
+type BpkModalV3RootProps = {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (details: {
+        open: boolean;
+    }) => void;
+    type?: BpkModalV3Type;
+};
+declare const BpkModalV3Root: ({ children, onOpenChange, open, type, }: BpkModalV3RootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Root;
+export type { BpkModalV3RootProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/BpkModalV3Root.js

@@ -0,0 +1,67 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { Dialog } from '@ark-ui/react';
+import { durationBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { ModalTypeProvider } from "../BpkModalV3Context";
+import { MODAL_V3_TYPES } from "../common-types";
+import useBodyLock from "./useBodyLock";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Root = ({
+  children,
+  onOpenChange,
+  open,
+  type = MODAL_V3_TYPES.default
+}) => {
+  const [internalOpen, setInternalOpen] = useState(open ?? false);
+  const isOpen = open ?? internalOpen;
+  const [bodyLockOpen, setBodyLockOpen] = useState(isOpen);
+  useEffect(() => {
+    if (isOpen) {
+      setBodyLockOpen(true);
+    } else {
+      const timer = setTimeout(() => setBodyLockOpen(false), parseInt(durationBase, 10));
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [isOpen]);
+  useBodyLock(type === MODAL_V3_TYPES.chatbot && bodyLockOpen);
+  const handleOpenChange = details => {
+    if (open === undefined) {
+      setInternalOpen(details.open);
+    }
+    onOpenChange?.(details);
+  };
+  return /*#__PURE__*/_jsx(Dialog.Root, {
+    ...(open !== undefined && {
+      open
+    }),
+    onOpenChange: handleOpenChange,
+    children: /*#__PURE__*/_jsx(ModalTypeProvider, {
+      value: type,
+      children: /*#__PURE__*/_jsx("div", {
+        "data-type": type,
+        ...getDataComponentAttribute('ModalV3'),
+        children: children
+      })
+    })
+  });
+};
+export default BpkModalV3Root;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/useBodyLock.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Locks body scroll when the modal is open, preventing background scroll and
+ * iOS Safari bounce effects. Restores all body styles and scroll position on
+ * cleanup.
+ * @param {boolean} isLocked - Whether the body scroll should be locked.
+ * @returns {void}
+ */
+declare const useBodyLock: (isLocked: boolean) => void;
+export default useBodyLock;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/useBodyLock.js

@@ -0,0 +1,69 @@
+/*
+ * 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 { useEffect, useRef } from 'react';
+
+/**
+ * Locks body scroll when the modal is open, preventing background scroll and
+ * iOS Safari bounce effects. Restores all body styles and scroll position on
+ * cleanup.
+ * @param {boolean} isLocked - Whether the body scroll should be locked.
+ * @returns {void}
+ */
+const useBodyLock = isLocked => {
+  const savedScrollYRef = useRef(0);
+  const savedBodyStylesRef = useRef(null);
+  useEffect(() => {
+    if (!isLocked) {
+      return undefined;
+    }
+    const {
+      body
+    } = document;
+    const currentScrollY = window.scrollY;
+    savedScrollYRef.current = currentScrollY;
+    savedBodyStylesRef.current = {
+      overflow: body.style.overflow || '',
+      position: body.style.position || '',
+      top: body.style.top || '',
+      width: body.style.width || '',
+      touchAction: body.style.touchAction || '',
+      overscrollBehavior: body.style.overscrollBehavior || ''
+    };
+    body.style.overflow = 'hidden';
+    body.style.position = 'fixed';
+    body.style.top = `-${currentScrollY}px`;
+    body.style.width = '100%';
+    body.style.touchAction = 'none';
+    body.style.overscrollBehavior = 'contain';
+    return () => {
+      if (savedBodyStylesRef.current) {
+        const saved = savedBodyStylesRef.current;
+        body.style.overflow = saved.overflow;
+        body.style.position = saved.position;
+        body.style.top = saved.top;
+        body.style.width = saved.width;
+        body.style.touchAction = saved.touchAction;
+        body.style.overscrollBehavior = saved.overscrollBehavior;
+        savedBodyStylesRef.current = null;
+        window.scrollTo(0, savedScrollYRef.current);
+      }
+    };
+  }, [isLocked]);
+};
+export default useBodyLock;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Scrim/BpkModalV3Scrim.d.ts

@@ -0,0 +1,2 @@
+declare const BpkModalV3Scrim: () => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Scrim;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Scrim/BpkModalV3Scrim.js

@@ -0,0 +1,32 @@
+/*
+ * 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 { Dialog } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { useModalType } from "../BpkModalV3Context";
+import STYLES from "./BpkModalV3Scrim.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Scrim = () => {
+  const type = useModalType();
+  return /*#__PURE__*/_jsx(Dialog.Backdrop, {
+    className: getClassName('bpk-modal-v3__scrim', type === 'full' && 'bpk-modal-v3__scrim--full', type === 'chatbot' && 'bpk-modal-v3__scrim--chatbot'),
+    ...getDataComponentAttribute('ModalV3Scrim')
+  });
+};
+export default BpkModalV3Scrim;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Scrim/BpkModalV3Scrim.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-modal-v3__scrim{position:fixed;z-index:1100;transition:opacity 200ms ease-in-out;background-color:rgba(0,0,0,.7);opacity:0;inset:0;pointer-events:none}.bpk-modal-v3__scrim[data-state=open]{opacity:1;pointer-events:auto}.bpk-modal-v3__scrim[data-state=closed]{opacity:0}.bpk-modal-v3__scrim--full{display:none}.bpk-modal-v3__scrim--chatbot{transition:none}.bpk-modal-v3__scrim--chatbot[data-state=open]{animation:bpk-scrim-fade-in 200ms ease-in-out forwards}.bpk-modal-v3__scrim--chatbot[data-state=closed]{animation:bpk-scrim-fade-out 400ms ease-in-out both}@keyframes bpk-scrim-fade-in{from{opacity:0}to{opacity:1}}@keyframes bpk-scrim-fade-out{from{opacity:1}to{opacity:0}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__scrim{transition:none;animation:none}}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Title/BpkModalV3Title.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type BpkModalV3TitleProps = {
+    children: ReactNode;
+};
+declare const BpkModalV3Title: ({ children }: BpkModalV3TitleProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Title;
+export type { BpkModalV3TitleProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Title/BpkModalV3Title.js

@@ -0,0 +1,31 @@
+/*
+ * 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 { Dialog } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import STYLES from "./BpkModalV3Title.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Title = ({
+  children
+}) => /*#__PURE__*/_jsx(Dialog.Title, {
+  className: getClassName('bpk-modal-v3__title'),
+  ...getDataComponentAttribute('ModalV3Title'),
+  children: children
+});
+export default BpkModalV3Title;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Title/BpkModalV3Title.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-modal-v3__title{min-width:0;margin:0;flex:1;font-size:inherit;font-weight:inherit}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Trigger/BpkModalV3Trigger.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+type BpkModalV3TriggerProps = {
+    children: ReactNode;
+    asChild?: boolean;
+};
+declare const BpkModalV3Trigger: ({ asChild, children, }: BpkModalV3TriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Trigger;
+export type { BpkModalV3TriggerProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Trigger/BpkModalV3Trigger.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { Dialog } from '@ark-ui/react';
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Trigger = ({
+  asChild,
+  children
+}) => /*#__PURE__*/_jsx(Dialog.Trigger, {
+  asChild: asChild,
+  ...getDataComponentAttribute('ModalV3Trigger'),
+  children: children
+});
+export default BpkModalV3Trigger;

package/bpk-component-modal/src/BpkModalV3/common-types.d.ts

@@ -0,0 +1,7 @@
+export declare const MODAL_V3_TYPES: {
+    readonly default: "default";
+    readonly full: "full";
+    readonly sheet: "sheet";
+    readonly chatbot: "chatbot";
+};
+export type BpkModalV3Type = (typeof MODAL_V3_TYPES)[keyof typeof MODAL_V3_TYPES];

package/bpk-component-modal/src/BpkModalV3/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 MODAL_V3_TYPES = {
+  default: 'default',
+  full: 'full',
+  sheet: 'sheet',
+  chatbot: 'chatbot'
+};

package/bpk-component-page-indicator/src/NavButton.d.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import { BUTTON_TYPES } from '../../bpk-component-button';
 export declare const DIRECTIONS: {
     readonly PREV: "PREV";
@@ -11,7 +12,7 @@ type Props = {
     currentIndex: number;
     direction: Direction;
     disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
     type?: ButtonType;
 };
 declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, type, }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { SegmentGroup } from '@ark-ui/react';
+import { useRef } from 'react';
+import { SegmentGroup, useLocaleContext } from '@ark-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { SEGMENT_TYPES_V2 } from "./common-types";
 import STYLES from "./BpkSegmentedControlV2.module.css";
@@ -31,22 +32,42 @@ const BpkSegmentedControlV2Root = ({
   type = SEGMENT_TYPES_V2.CanvasDefault,
   value
 }) => {
+  const {
+    dir
+  } = useLocaleContext();
+  // Tracks the last user-selected value so it can be restored after a key={dir}
+  // remount. Without this, uncontrolled usage would reset to defaultValue on every
+  // direction change.
+  const lastValueRef = useRef(defaultValue);
   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]
-  });
+  return (
+    /*#__PURE__*/
+    // key={dir} is required because Zag.js measures the indicator position via
+    // el.offsetLeft (a physical pixel value) and only re-syncs when `value` changes —
+    // it has no listener on locale/direction. When direction changes, LocaleProvider
+    // updates the locale context but Zag's internal indicatorRect stays stale, leaving
+    // the sliding indicator visually offset. Forcing a remount via key={dir} restarts
+    // the Zag machine, which re-measures offsetLeft in the new layout direction.
+    // See: decisions/rtl-ark-localeprovider.md — "Zag machine indicator pattern"
+    _jsxs(SegmentGroup.Root, {
+      className: containerClass,
+      value: value,
+      defaultValue: lastValueRef.current,
+      onValueChange: ({
+        value: selectedValue
+      }) => {
+        if (selectedValue !== null) {
+          lastValueRef.current = selectedValue;
+          if (onChange) onChange(selectedValue);
+        }
+      },
+      orientation: "horizontal",
+      ...getDataComponentAttribute('SegmentedControlV2'),
+      children: [/*#__PURE__*/_jsx(SegmentGroup.Label, {
+        children: label
+      }), children]
+    }, dir)
+  );
 };
 const BpkSegmentedControlV2Item = ({
   children,

package/bpk-component-skeleton/src/BpkBaseSkeleton.d.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 type Props = {
     skeletonStyle: string;
     styleObj?: {

package/bpk-component-skeleton/src/BpkSkeleton.d.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ComponentProps } from './common-types';
 declare const BpkSkeleton: (props: ComponentProps) => JSX.Element;
 export default BpkSkeleton;