@skyscanner/backpack-web 42.10.0-dev-v24445021679.1 → 42.10.0-dev-v24449077290.1

package/bpk-component-layout/src/BpkBox.js

@@ -17,12 +17,14 @@
  */
 
 import { forwardRef } from 'react';
-import { Box } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
 import STYLES from "./BpkLayout.module.css";
+import RESPONSIVE_STYLES from "./BpkLayoutResponsive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const getResponsiveClassName = cssModules(RESPONSIVE_STYLES);
 export const BpkBox = /*#__PURE__*/forwardRef(({
   backgroundColor,
   children,
@@ -32,17 +34,21 @@ export const BpkBox = /*#__PURE__*/forwardRef(({
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkBox'
   });
-  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    _jsx(Box, {
-      ref: ref,
-      className: classNames,
-      ...getDataComponentAttribute('Box'),
-      ...processedProps,
-      children: children
-    })
-  );
+  const {
+    hasResponsive,
+    passthrough,
+    style
+  } = buildLayoutOutput(processedProps);
+  const colorClasses = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  const responsiveClass = hasResponsive ? getResponsiveClassName('bpk-responsive') : undefined;
+  const className = [colorClasses, responsiveClass].filter(Boolean).join(' ') || undefined;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: className,
+    style: style,
+    ...getDataComponentAttribute('Box'),
+    ...passthrough,
+    children: children
+  });
 });
 BpkBox.displayName = 'BpkBox';

package/bpk-component-layout/src/BpkFlex.js

@@ -17,12 +17,14 @@
  */
 
 import { forwardRef } from 'react';
-import { Flex } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
 import STYLES from "./BpkLayout.module.css";
+import RESPONSIVE_STYLES from "./BpkLayoutResponsive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const getResponsiveClassName = cssModules(RESPONSIVE_STYLES);
 export const BpkFlex = /*#__PURE__*/forwardRef(({
   align,
   backgroundColor,
@@ -51,15 +53,26 @@ export const BpkFlex = /*#__PURE__*/forwardRef(({
       flexBasis: basis
     }
   });
-  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx(Flex, {
-    ref: ref
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
-    className: classNames,
+  const {
+    hasResponsive,
+    passthrough,
+    style
+  } = buildLayoutOutput(processedProps);
+
+  // If inline, override display via inline style
+  if (inline) {
+    style.display = 'inline-flex';
+  }
+  const colorClasses = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  const baseClass = !inline ? getResponsiveClassName('bpk-layout-flex') : getResponsiveClassName('bpk-layout-inline-flex');
+  const responsiveClass = hasResponsive ? getResponsiveClassName('bpk-responsive') : undefined;
+  const className = [baseClass, colorClasses, responsiveClass].filter(Boolean).join(' ') || undefined;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: className,
+    style: style,
     ...getDataComponentAttribute('Flex'),
-    ...processedProps,
-    display: inline ? 'inline-flex' : undefined,
+    ...passthrough,
     children: children
   });
 });

package/bpk-component-layout/src/BpkGrid.js

@@ -17,12 +17,14 @@
  */
 
 import { forwardRef } from 'react';
-import { Grid } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
 import STYLES from "./BpkLayout.module.css";
+import RESPONSIVE_STYLES from "./BpkLayoutResponsive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const getResponsiveClassName = cssModules(RESPONSIVE_STYLES);
 export const BpkGrid = /*#__PURE__*/forwardRef(({
   align,
   autoColumns,
@@ -57,15 +59,26 @@ export const BpkGrid = /*#__PURE__*/forwardRef(({
       gridRow: row
     }
   });
-  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx(Grid, {
-    ref: ref
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
-    className: classNames,
+  const {
+    hasResponsive,
+    passthrough,
+    style
+  } = buildLayoutOutput(processedProps);
+
+  // If inline, override display via inline style
+  if (inline) {
+    style.display = 'inline-grid';
+  }
+  const colorClasses = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  const baseClass = !inline ? getResponsiveClassName('bpk-layout-grid') : getResponsiveClassName('bpk-layout-inline-grid');
+  const responsiveClass = hasResponsive ? getResponsiveClassName('bpk-responsive') : undefined;
+  const className = [baseClass, colorClasses, responsiveClass].filter(Boolean).join(' ') || undefined;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: className,
+    style: style,
     ...getDataComponentAttribute('Grid'),
-    ...processedProps,
-    display: inline ? 'inline-grid' : undefined,
+    ...passthrough,
     children: children
   });
 });

package/bpk-component-layout/src/BpkGridItem.js

@@ -17,12 +17,14 @@
  */
 
 import { forwardRef } from 'react';
-import { GridItem } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
 import STYLES from "./BpkLayout.module.css";
+import RESPONSIVE_STYLES from "./BpkLayoutResponsive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const getResponsiveClassName = cssModules(RESPONSIVE_STYLES);
 export const BpkGridItem = /*#__PURE__*/forwardRef(({
   area,
   backgroundColor,
@@ -43,21 +45,30 @@ export const BpkGridItem = /*#__PURE__*/forwardRef(({
   }, {
     component: 'BpkGridItem'
   });
-  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx(GridItem, {
-    ref: ref
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
-    className: classNames,
+  const {
+    hasResponsive,
+    passthrough,
+    style
+  } = buildLayoutOutput(processedProps);
+
+  // Apply grid item placement props as inline styles
+  if (area != null) style.gridArea = area;
+  // Use "span N / span N" format to ensure forward-only spanning
+  if (colSpan != null) style.gridColumn = `span ${colSpan}/span ${colSpan}`;
+  if (colStart != null) style.gridColumnStart = String(colStart);
+  if (colEnd != null) style.gridColumnEnd = String(colEnd);
+  if (rowSpan != null) style.gridRow = `span ${rowSpan}/span ${rowSpan}`;
+  if (rowStart != null) style.gridRowStart = String(rowStart);
+  if (rowEnd != null) style.gridRowEnd = String(rowEnd);
+  const colorClasses = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  const responsiveClass = hasResponsive ? getResponsiveClassName('bpk-responsive') : undefined;
+  const className = [colorClasses, responsiveClass].filter(Boolean).join(' ') || undefined;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: className,
+    style: style,
     ...getDataComponentAttribute('GridItem'),
-    ...processedProps,
-    area: area,
-    colEnd: colEnd,
-    colStart: colStart,
-    colSpan: colSpan,
-    rowEnd: rowEnd,
-    rowStart: rowStart,
-    rowSpan: rowSpan,
+    ...passthrough,
     children: children
   });
 });

package/bpk-component-layout/src/BpkLayoutProvider.d.ts

@@ -1,19 +1,18 @@
+import type React from 'react';
 import type { ReactNode } from 'react';
 export interface BpkLayoutProviderProps {
     children: ReactNode;
 }
 /**
- * BpkLayoutProvider - Provides context for Backpack layout components only.
+ * BpkLayoutProvider - Kept for backwards compatibility.
  *
- * Wraps children with the Chakra UI system context configured with Backpack
- * tokens (spacing, breakpoints). This is the minimal provider needed by
- * layout primitives (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.).
+ * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.) no longer
+ * require a provider. They use CSS Modules and inline styles directly.
  *
- * Use this instead of BpkProvider when you only need layout components and
- * want to avoid bundling Ark UI (used by BpkCheckboxV2, BpkSegmentedControlV2,
- * and other Ark-based components).
+ * This component is a passthrough that simply renders its children.
+ * It can be safely removed from your app, but keeping it is harmless.
  *
- * @param {BpkLayoutProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ * @deprecated No provider is needed for layout components.
+ * @returns {ReactNode} The children as-is.
  */
-export declare const BpkLayoutProvider: ({ children, }: BpkLayoutProviderProps) => JSX.Element;
+export declare const BpkLayoutProvider: ({ children, }: BpkLayoutProviderProps) => React.JSX.Element;

package/bpk-component-layout/src/BpkLayoutProvider.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,35 +17,20 @@
  * limitations under the License.
  */
 
-import { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
-import { createBpkConfig } from "./theme";
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Creates a Chakra UI system with Backpack token mappings.
+ * BpkLayoutProvider - Kept for backwards compatibility.
  *
- * Uses `defaultBaseConfig` (conditions + utilities only) instead of
- * `defaultConfig` to avoid bundling ~141KB of unused component recipes.
- * See: https://chakra-ui.com/guides/component-bundle-optimization
- */
-const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
-
-/**
- * BpkLayoutProvider - Provides context for Backpack layout components only.
- *
- * Wraps children with the Chakra UI system context configured with Backpack
- * tokens (spacing, breakpoints). This is the minimal provider needed by
- * layout primitives (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.).
+ * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.) no longer
+ * require a provider. They use CSS Modules and inline styles directly.
  *
- * Use this instead of BpkProvider when you only need layout components and
- * want to avoid bundling Ark UI (used by BpkCheckboxV2, BpkSegmentedControlV2,
- * and other Ark-based components).
+ * This component is a passthrough that simply renders its children.
+ * It can be safely removed from your app, but keeping it is harmless.
  *
- * @param {BpkLayoutProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ * @deprecated No provider is needed for layout components.
+ * @returns {ReactNode} The children as-is.
  */
 export const BpkLayoutProvider = ({
   children
-}) => /*#__PURE__*/_jsx(ChakraProvider, {
-  value: bpkSystem,
+}) => /*#__PURE__*/_jsx(_Fragment, {
   children: children
 });

package/bpk-component-layout/src/BpkLayoutResponsive.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-responsive{padding:var(--bpk-padding);padding-top:var(--bpk-padding-top);padding-right:var(--bpk-padding-right);padding-bottom:var(--bpk-padding-bottom);padding-left:var(--bpk-padding-left);padding-inline-start:var(--bpk-padding-start);padding-inline-end:var(--bpk-padding-end);padding-inline:var(--bpk-padding-inline);margin:var(--bpk-margin);margin-top:var(--bpk-margin-top);margin-right:var(--bpk-margin-right);margin-bottom:var(--bpk-margin-bottom);margin-left:var(--bpk-margin-left);margin-inline-start:var(--bpk-margin-start);margin-inline-end:var(--bpk-margin-end);margin-inline:var(--bpk-margin-inline);gap:var(--bpk-gap);row-gap:var(--bpk-row-gap);column-gap:var(--bpk-column-gap);width:var(--bpk-width);height:var(--bpk-height);min-width:var(--bpk-min-width);min-height:var(--bpk-min-height);max-width:var(--bpk-max-width);max-height:var(--bpk-max-height);top:var(--bpk-top);right:var(--bpk-right);bottom:var(--bpk-bottom);left:var(--bpk-left);display:var(--bpk-display);position:var(--bpk-position);overflow:var(--bpk-overflow);overflow-x:var(--bpk-overflow-x);overflow-y:var(--bpk-overflow-y);flex-direction:var(--bpk-flex-direction);flex-wrap:var(--bpk-flex-wrap);justify-content:var(--bpk-justify-content);align-items:var(--bpk-align-items);align-content:var(--bpk-align-content);flex:var(--bpk-flex);flex-grow:var(--bpk-flex-grow);flex-shrink:var(--bpk-flex-shrink);flex-basis:var(--bpk-flex-basis);order:var(--bpk-order);align-self:var(--bpk-align-self);justify-self:var(--bpk-justify-self);grid-template-columns:var(--bpk-grid-template-columns);grid-template-rows:var(--bpk-grid-template-rows);grid-template-areas:var(--bpk-grid-template-areas);grid-auto-flow:var(--bpk-grid-auto-flow);grid-auto-rows:var(--bpk-grid-auto-rows);grid-auto-columns:var(--bpk-grid-auto-columns);grid-column:var(--bpk-grid-column);grid-row:var(--bpk-grid-row);font-size:var(--bpk-font-size);line-height:var(--bpk-line-height);font-weight:var(--bpk-font-weight);letter-spacing:var(--bpk-letter-spacing);font-family:var(--bpk-font-family)}@media(min-width: 20rem){.bpk-responsive{padding:var(--bpk-padding-sm, var(--bpk-padding))}}@media(min-width: 22.5rem){.bpk-responsive{padding:var(--bpk-padding-md, var(--bpk-padding-sm, var(--bpk-padding)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding:var(--bpk-padding-lg, var(--bpk-padding-md, var(--bpk-padding-sm, var(--bpk-padding))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding:var(--bpk-padding-xl, var(--bpk-padding-lg, var(--bpk-padding-md, var(--bpk-padding-sm, var(--bpk-padding)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding:var(--bpk-padding-2xl, var(--bpk-padding-xl, var(--bpk-padding-lg, var(--bpk-padding-md, var(--bpk-padding-sm, var(--bpk-padding))))))}}@media(min-width: 20rem){.bpk-responsive{padding-top:var(--bpk-padding-top-sm, var(--bpk-padding-top))}}@media(min-width: 22.5rem){.bpk-responsive{padding-top:var(--bpk-padding-top-md, var(--bpk-padding-top-sm, var(--bpk-padding-top)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding-top:var(--bpk-padding-top-lg, var(--bpk-padding-top-md, var(--bpk-padding-top-sm, var(--bpk-padding-top))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding-top:var(--bpk-padding-top-xl, var(--bpk-padding-top-lg, var(--bpk-padding-top-md, var(--bpk-padding-top-sm, var(--bpk-padding-top)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding-top:var(--bpk-padding-top-2xl, var(--bpk-padding-top-xl, var(--bpk-padding-top-lg, var(--bpk-padding-top-md, var(--bpk-padding-top-sm, var(--bpk-padding-top))))))}}@media(min-width: 20rem){.bpk-responsive{padding-right:var(--bpk-padding-right-sm, var(--bpk-padding-right))}}@media(min-width: 22.5rem){.bpk-responsive{padding-right:var(--bpk-padding-right-md, var(--bpk-padding-right-sm, var(--bpk-padding-right)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding-right:var(--bpk-padding-right-lg, var(--bpk-padding-right-md, var(--bpk-padding-right-sm, var(--bpk-padding-right))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding-right:var(--bpk-padding-right-xl, var(--bpk-padding-right-lg, var(--bpk-padding-right-md, var(--bpk-padding-right-sm, var(--bpk-padding-right)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding-right:var(--bpk-padding-right-2xl, var(--bpk-padding-right-xl, var(--bpk-padding-right-lg, var(--bpk-padding-right-md, var(--bpk-padding-right-sm, var(--bpk-padding-right))))))}}@media(min-width: 20rem){.bpk-responsive{padding-bottom:var(--bpk-padding-bottom-sm, var(--bpk-padding-bottom))}}@media(min-width: 22.5rem){.bpk-responsive{padding-bottom:var(--bpk-padding-bottom-md, var(--bpk-padding-bottom-sm, var(--bpk-padding-bottom)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding-bottom:var(--bpk-padding-bottom-lg, var(--bpk-padding-bottom-md, var(--bpk-padding-bottom-sm, var(--bpk-padding-bottom))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding-bottom:var(--bpk-padding-bottom-xl, var(--bpk-padding-bottom-lg, var(--bpk-padding-bottom-md, var(--bpk-padding-bottom-sm, var(--bpk-padding-bottom)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding-bottom:var(--bpk-padding-bottom-2xl, var(--bpk-padding-bottom-xl, var(--bpk-padding-bottom-lg, var(--bpk-padding-bottom-md, var(--bpk-padding-bottom-sm, var(--bpk-padding-bottom))))))}}@media(min-width: 20rem){.bpk-responsive{padding-left:var(--bpk-padding-left-sm, var(--bpk-padding-left))}}@media(min-width: 22.5rem){.bpk-responsive{padding-left:var(--bpk-padding-left-md, var(--bpk-padding-left-sm, var(--bpk-padding-left)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding-left:var(--bpk-padding-left-lg, var(--bpk-padding-left-md, var(--bpk-padding-left-sm, var(--bpk-padding-left))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding-left:var(--bpk-padding-left-xl, var(--bpk-padding-left-lg, var(--bpk-padding-left-md, var(--bpk-padding-left-sm, var(--bpk-padding-left)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding-left:var(--bpk-padding-left-2xl, var(--bpk-padding-left-xl, var(--bpk-padding-left-lg, var(--bpk-padding-left-md, var(--bpk-padding-left-sm, var(--bpk-padding-left))))))}}@media(min-width: 20rem){.bpk-responsive{padding-inline-start:var(--bpk-padding-start-sm, var(--bpk-padding-start))}}@media(min-width: 22.5rem){.bpk-responsive{padding-inline-start:var(--bpk-padding-start-md, var(--bpk-padding-start-sm, var(--bpk-padding-start)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding-inline-start:var(--bpk-padding-start-lg, var(--bpk-padding-start-md, var(--bpk-padding-start-sm, var(--bpk-padding-start))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding-inline-start:var(--bpk-padding-start-xl, var(--bpk-padding-start-lg, var(--bpk-padding-start-md, var(--bpk-padding-start-sm, var(--bpk-padding-start)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding-inline-start:var(--bpk-padding-start-2xl, var(--bpk-padding-start-xl, var(--bpk-padding-start-lg, var(--bpk-padding-start-md, var(--bpk-padding-start-sm, var(--bpk-padding-start))))))}}@media(min-width: 20rem){.bpk-responsive{padding-inline-end:var(--bpk-padding-end-sm, var(--bpk-padding-end))}}@media(min-width: 22.5rem){.bpk-responsive{padding-inline-end:var(--bpk-padding-end-md, var(--bpk-padding-end-sm, var(--bpk-padding-end)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding-inline-end:var(--bpk-padding-end-lg, var(--bpk-padding-end-md, var(--bpk-padding-end-sm, var(--bpk-padding-end))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding-inline-end:var(--bpk-padding-end-xl, var(--bpk-padding-end-lg, var(--bpk-padding-end-md, var(--bpk-padding-end-sm, var(--bpk-padding-end)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding-inline-end:var(--bpk-padding-end-2xl, var(--bpk-padding-end-xl, var(--bpk-padding-end-lg, var(--bpk-padding-end-md, var(--bpk-padding-end-sm, var(--bpk-padding-end))))))}}@media(min-width: 20rem){.bpk-responsive{padding-inline:var(--bpk-padding-inline-sm, var(--bpk-padding-inline))}}@media(min-width: 22.5rem){.bpk-responsive{padding-inline:var(--bpk-padding-inline-md, var(--bpk-padding-inline-sm, var(--bpk-padding-inline)))}}@media(min-width: 32.0625rem){.bpk-responsive{padding-inline:var(--bpk-padding-inline-lg, var(--bpk-padding-inline-md, var(--bpk-padding-inline-sm, var(--bpk-padding-inline))))}}@media(min-width: 48.0625rem){.bpk-responsive{padding-inline:var(--bpk-padding-inline-xl, var(--bpk-padding-inline-lg, var(--bpk-padding-inline-md, var(--bpk-padding-inline-sm, var(--bpk-padding-inline)))))}}@media(min-width: 64.0625rem){.bpk-responsive{padding-inline:var(--bpk-padding-inline-2xl, var(--bpk-padding-inline-xl, var(--bpk-padding-inline-lg, var(--bpk-padding-inline-md, var(--bpk-padding-inline-sm, var(--bpk-padding-inline))))))}}@media(min-width: 20rem){.bpk-responsive{margin:var(--bpk-margin-sm, var(--bpk-margin))}}@media(min-width: 22.5rem){.bpk-responsive{margin:var(--bpk-margin-md, var(--bpk-margin-sm, var(--bpk-margin)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin:var(--bpk-margin-lg, var(--bpk-margin-md, var(--bpk-margin-sm, var(--bpk-margin))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin:var(--bpk-margin-xl, var(--bpk-margin-lg, var(--bpk-margin-md, var(--bpk-margin-sm, var(--bpk-margin)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin:var(--bpk-margin-2xl, var(--bpk-margin-xl, var(--bpk-margin-lg, var(--bpk-margin-md, var(--bpk-margin-sm, var(--bpk-margin))))))}}@media(min-width: 20rem){.bpk-responsive{margin-top:var(--bpk-margin-top-sm, var(--bpk-margin-top))}}@media(min-width: 22.5rem){.bpk-responsive{margin-top:var(--bpk-margin-top-md, var(--bpk-margin-top-sm, var(--bpk-margin-top)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin-top:var(--bpk-margin-top-lg, var(--bpk-margin-top-md, var(--bpk-margin-top-sm, var(--bpk-margin-top))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin-top:var(--bpk-margin-top-xl, var(--bpk-margin-top-lg, var(--bpk-margin-top-md, var(--bpk-margin-top-sm, var(--bpk-margin-top)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin-top:var(--bpk-margin-top-2xl, var(--bpk-margin-top-xl, var(--bpk-margin-top-lg, var(--bpk-margin-top-md, var(--bpk-margin-top-sm, var(--bpk-margin-top))))))}}@media(min-width: 20rem){.bpk-responsive{margin-right:var(--bpk-margin-right-sm, var(--bpk-margin-right))}}@media(min-width: 22.5rem){.bpk-responsive{margin-right:var(--bpk-margin-right-md, var(--bpk-margin-right-sm, var(--bpk-margin-right)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin-right:var(--bpk-margin-right-lg, var(--bpk-margin-right-md, var(--bpk-margin-right-sm, var(--bpk-margin-right))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin-right:var(--bpk-margin-right-xl, var(--bpk-margin-right-lg, var(--bpk-margin-right-md, var(--bpk-margin-right-sm, var(--bpk-margin-right)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin-right:var(--bpk-margin-right-2xl, var(--bpk-margin-right-xl, var(--bpk-margin-right-lg, var(--bpk-margin-right-md, var(--bpk-margin-right-sm, var(--bpk-margin-right))))))}}@media(min-width: 20rem){.bpk-responsive{margin-bottom:var(--bpk-margin-bottom-sm, var(--bpk-margin-bottom))}}@media(min-width: 22.5rem){.bpk-responsive{margin-bottom:var(--bpk-margin-bottom-md, var(--bpk-margin-bottom-sm, var(--bpk-margin-bottom)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin-bottom:var(--bpk-margin-bottom-lg, var(--bpk-margin-bottom-md, var(--bpk-margin-bottom-sm, var(--bpk-margin-bottom))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin-bottom:var(--bpk-margin-bottom-xl, var(--bpk-margin-bottom-lg, var(--bpk-margin-bottom-md, var(--bpk-margin-bottom-sm, var(--bpk-margin-bottom)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin-bottom:var(--bpk-margin-bottom-2xl, var(--bpk-margin-bottom-xl, var(--bpk-margin-bottom-lg, var(--bpk-margin-bottom-md, var(--bpk-margin-bottom-sm, var(--bpk-margin-bottom))))))}}@media(min-width: 20rem){.bpk-responsive{margin-left:var(--bpk-margin-left-sm, var(--bpk-margin-left))}}@media(min-width: 22.5rem){.bpk-responsive{margin-left:var(--bpk-margin-left-md, var(--bpk-margin-left-sm, var(--bpk-margin-left)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin-left:var(--bpk-margin-left-lg, var(--bpk-margin-left-md, var(--bpk-margin-left-sm, var(--bpk-margin-left))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin-left:var(--bpk-margin-left-xl, var(--bpk-margin-left-lg, var(--bpk-margin-left-md, var(--bpk-margin-left-sm, var(--bpk-margin-left)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin-left:var(--bpk-margin-left-2xl, var(--bpk-margin-left-xl, var(--bpk-margin-left-lg, var(--bpk-margin-left-md, var(--bpk-margin-left-sm, var(--bpk-margin-left))))))}}@media(min-width: 20rem){.bpk-responsive{margin-inline-start:var(--bpk-margin-start-sm, var(--bpk-margin-start))}}@media(min-width: 22.5rem){.bpk-responsive{margin-inline-start:var(--bpk-margin-start-md, var(--bpk-margin-start-sm, var(--bpk-margin-start)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin-inline-start:var(--bpk-margin-start-lg, var(--bpk-margin-start-md, var(--bpk-margin-start-sm, var(--bpk-margin-start))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin-inline-start:var(--bpk-margin-start-xl, var(--bpk-margin-start-lg, var(--bpk-margin-start-md, var(--bpk-margin-start-sm, var(--bpk-margin-start)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin-inline-start:var(--bpk-margin-start-2xl, var(--bpk-margin-start-xl, var(--bpk-margin-start-lg, var(--bpk-margin-start-md, var(--bpk-margin-start-sm, var(--bpk-margin-start))))))}}@media(min-width: 20rem){.bpk-responsive{margin-inline-end:var(--bpk-margin-end-sm, var(--bpk-margin-end))}}@media(min-width: 22.5rem){.bpk-responsive{margin-inline-end:var(--bpk-margin-end-md, var(--bpk-margin-end-sm, var(--bpk-margin-end)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin-inline-end:var(--bpk-margin-end-lg, var(--bpk-margin-end-md, var(--bpk-margin-end-sm, var(--bpk-margin-end))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin-inline-end:var(--bpk-margin-end-xl, var(--bpk-margin-end-lg, var(--bpk-margin-end-md, var(--bpk-margin-end-sm, var(--bpk-margin-end)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin-inline-end:var(--bpk-margin-end-2xl, var(--bpk-margin-end-xl, var(--bpk-margin-end-lg, var(--bpk-margin-end-md, var(--bpk-margin-end-sm, var(--bpk-margin-end))))))}}@media(min-width: 20rem){.bpk-responsive{margin-inline:var(--bpk-margin-inline-sm, var(--bpk-margin-inline))}}@media(min-width: 22.5rem){.bpk-responsive{margin-inline:var(--bpk-margin-inline-md, var(--bpk-margin-inline-sm, var(--bpk-margin-inline)))}}@media(min-width: 32.0625rem){.bpk-responsive{margin-inline:var(--bpk-margin-inline-lg, var(--bpk-margin-inline-md, var(--bpk-margin-inline-sm, var(--bpk-margin-inline))))}}@media(min-width: 48.0625rem){.bpk-responsive{margin-inline:var(--bpk-margin-inline-xl, var(--bpk-margin-inline-lg, var(--bpk-margin-inline-md, var(--bpk-margin-inline-sm, var(--bpk-margin-inline)))))}}@media(min-width: 64.0625rem){.bpk-responsive{margin-inline:var(--bpk-margin-inline-2xl, var(--bpk-margin-inline-xl, var(--bpk-margin-inline-lg, var(--bpk-margin-inline-md, var(--bpk-margin-inline-sm, var(--bpk-margin-inline))))))}}@media(min-width: 20rem){.bpk-responsive{gap:var(--bpk-gap-sm, var(--bpk-gap))}}@media(min-width: 22.5rem){.bpk-responsive{gap:var(--bpk-gap-md, var(--bpk-gap-sm, var(--bpk-gap)))}}@media(min-width: 32.0625rem){.bpk-responsive{gap:var(--bpk-gap-lg, var(--bpk-gap-md, var(--bpk-gap-sm, var(--bpk-gap))))}}@media(min-width: 48.0625rem){.bpk-responsive{gap:var(--bpk-gap-xl, var(--bpk-gap-lg, var(--bpk-gap-md, var(--bpk-gap-sm, var(--bpk-gap)))))}}@media(min-width: 64.0625rem){.bpk-responsive{gap:var(--bpk-gap-2xl, var(--bpk-gap-xl, var(--bpk-gap-lg, var(--bpk-gap-md, var(--bpk-gap-sm, var(--bpk-gap))))))}}@media(min-width: 20rem){.bpk-responsive{row-gap:var(--bpk-row-gap-sm, var(--bpk-row-gap))}}@media(min-width: 22.5rem){.bpk-responsive{row-gap:var(--bpk-row-gap-md, var(--bpk-row-gap-sm, var(--bpk-row-gap)))}}@media(min-width: 32.0625rem){.bpk-responsive{row-gap:var(--bpk-row-gap-lg, var(--bpk-row-gap-md, var(--bpk-row-gap-sm, var(--bpk-row-gap))))}}@media(min-width: 48.0625rem){.bpk-responsive{row-gap:var(--bpk-row-gap-xl, var(--bpk-row-gap-lg, var(--bpk-row-gap-md, var(--bpk-row-gap-sm, var(--bpk-row-gap)))))}}@media(min-width: 64.0625rem){.bpk-responsive{row-gap:var(--bpk-row-gap-2xl, var(--bpk-row-gap-xl, var(--bpk-row-gap-lg, var(--bpk-row-gap-md, var(--bpk-row-gap-sm, var(--bpk-row-gap))))))}}@media(min-width: 20rem){.bpk-responsive{column-gap:var(--bpk-column-gap-sm, var(--bpk-column-gap))}}@media(min-width: 22.5rem){.bpk-responsive{column-gap:var(--bpk-column-gap-md, var(--bpk-column-gap-sm, var(--bpk-column-gap)))}}@media(min-width: 32.0625rem){.bpk-responsive{column-gap:var(--bpk-column-gap-lg, var(--bpk-column-gap-md, var(--bpk-column-gap-sm, var(--bpk-column-gap))))}}@media(min-width: 48.0625rem){.bpk-responsive{column-gap:var(--bpk-column-gap-xl, var(--bpk-column-gap-lg, var(--bpk-column-gap-md, var(--bpk-column-gap-sm, var(--bpk-column-gap)))))}}@media(min-width: 64.0625rem){.bpk-responsive{column-gap:var(--bpk-column-gap-2xl, var(--bpk-column-gap-xl, var(--bpk-column-gap-lg, var(--bpk-column-gap-md, var(--bpk-column-gap-sm, var(--bpk-column-gap))))))}}@media(min-width: 20rem){.bpk-responsive{width:var(--bpk-width-sm, var(--bpk-width))}}@media(min-width: 22.5rem){.bpk-responsive{width:var(--bpk-width-md, var(--bpk-width-sm, var(--bpk-width)))}}@media(min-width: 32.0625rem){.bpk-responsive{width:var(--bpk-width-lg, var(--bpk-width-md, var(--bpk-width-sm, var(--bpk-width))))}}@media(min-width: 48.0625rem){.bpk-responsive{width:var(--bpk-width-xl, var(--bpk-width-lg, var(--bpk-width-md, var(--bpk-width-sm, var(--bpk-width)))))}}@media(min-width: 64.0625rem){.bpk-responsive{width:var(--bpk-width-2xl, var(--bpk-width-xl, var(--bpk-width-lg, var(--bpk-width-md, var(--bpk-width-sm, var(--bpk-width))))))}}@media(min-width: 20rem){.bpk-responsive{height:var(--bpk-height-sm, var(--bpk-height))}}@media(min-width: 22.5rem){.bpk-responsive{height:var(--bpk-height-md, var(--bpk-height-sm, var(--bpk-height)))}}@media(min-width: 32.0625rem){.bpk-responsive{height:var(--bpk-height-lg, var(--bpk-height-md, var(--bpk-height-sm, var(--bpk-height))))}}@media(min-width: 48.0625rem){.bpk-responsive{height:var(--bpk-height-xl, var(--bpk-height-lg, var(--bpk-height-md, var(--bpk-height-sm, var(--bpk-height)))))}}@media(min-width: 64.0625rem){.bpk-responsive{height:var(--bpk-height-2xl, var(--bpk-height-xl, var(--bpk-height-lg, var(--bpk-height-md, var(--bpk-height-sm, var(--bpk-height))))))}}@media(min-width: 20rem){.bpk-responsive{min-width:var(--bpk-min-width-sm, var(--bpk-min-width))}}@media(min-width: 22.5rem){.bpk-responsive{min-width:var(--bpk-min-width-md, var(--bpk-min-width-sm, var(--bpk-min-width)))}}@media(min-width: 32.0625rem){.bpk-responsive{min-width:var(--bpk-min-width-lg, var(--bpk-min-width-md, var(--bpk-min-width-sm, var(--bpk-min-width))))}}@media(min-width: 48.0625rem){.bpk-responsive{min-width:var(--bpk-min-width-xl, var(--bpk-min-width-lg, var(--bpk-min-width-md, var(--bpk-min-width-sm, var(--bpk-min-width)))))}}@media(min-width: 64.0625rem){.bpk-responsive{min-width:var(--bpk-min-width-2xl, var(--bpk-min-width-xl, var(--bpk-min-width-lg, var(--bpk-min-width-md, var(--bpk-min-width-sm, var(--bpk-min-width))))))}}@media(min-width: 20rem){.bpk-responsive{min-height:var(--bpk-min-height-sm, var(--bpk-min-height))}}@media(min-width: 22.5rem){.bpk-responsive{min-height:var(--bpk-min-height-md, var(--bpk-min-height-sm, var(--bpk-min-height)))}}@media(min-width: 32.0625rem){.bpk-responsive{min-height:var(--bpk-min-height-lg, var(--bpk-min-height-md, var(--bpk-min-height-sm, var(--bpk-min-height))))}}@media(min-width: 48.0625rem){.bpk-responsive{min-height:var(--bpk-min-height-xl, var(--bpk-min-height-lg, var(--bpk-min-height-md, var(--bpk-min-height-sm, var(--bpk-min-height)))))}}@media(min-width: 64.0625rem){.bpk-responsive{min-height:var(--bpk-min-height-2xl, var(--bpk-min-height-xl, var(--bpk-min-height-lg, var(--bpk-min-height-md, var(--bpk-min-height-sm, var(--bpk-min-height))))))}}@media(min-width: 20rem){.bpk-responsive{max-width:var(--bpk-max-width-sm, var(--bpk-max-width))}}@media(min-width: 22.5rem){.bpk-responsive{max-width:var(--bpk-max-width-md, var(--bpk-max-width-sm, var(--bpk-max-width)))}}@media(min-width: 32.0625rem){.bpk-responsive{max-width:var(--bpk-max-width-lg, var(--bpk-max-width-md, var(--bpk-max-width-sm, var(--bpk-max-width))))}}@media(min-width: 48.0625rem){.bpk-responsive{max-width:var(--bpk-max-width-xl, var(--bpk-max-width-lg, var(--bpk-max-width-md, var(--bpk-max-width-sm, var(--bpk-max-width)))))}}@media(min-width: 64.0625rem){.bpk-responsive{max-width:var(--bpk-max-width-2xl, var(--bpk-max-width-xl, var(--bpk-max-width-lg, var(--bpk-max-width-md, var(--bpk-max-width-sm, var(--bpk-max-width))))))}}@media(min-width: 20rem){.bpk-responsive{max-height:var(--bpk-max-height-sm, var(--bpk-max-height))}}@media(min-width: 22.5rem){.bpk-responsive{max-height:var(--bpk-max-height-md, var(--bpk-max-height-sm, var(--bpk-max-height)))}}@media(min-width: 32.0625rem){.bpk-responsive{max-height:var(--bpk-max-height-lg, var(--bpk-max-height-md, var(--bpk-max-height-sm, var(--bpk-max-height))))}}@media(min-width: 48.0625rem){.bpk-responsive{max-height:var(--bpk-max-height-xl, var(--bpk-max-height-lg, var(--bpk-max-height-md, var(--bpk-max-height-sm, var(--bpk-max-height)))))}}@media(min-width: 64.0625rem){.bpk-responsive{max-height:var(--bpk-max-height-2xl, var(--bpk-max-height-xl, var(--bpk-max-height-lg, var(--bpk-max-height-md, var(--bpk-max-height-sm, var(--bpk-max-height))))))}}@media(min-width: 20rem){.bpk-responsive{top:var(--bpk-top-sm, var(--bpk-top))}}@media(min-width: 22.5rem){.bpk-responsive{top:var(--bpk-top-md, var(--bpk-top-sm, var(--bpk-top)))}}@media(min-width: 32.0625rem){.bpk-responsive{top:var(--bpk-top-lg, var(--bpk-top-md, var(--bpk-top-sm, var(--bpk-top))))}}@media(min-width: 48.0625rem){.bpk-responsive{top:var(--bpk-top-xl, var(--bpk-top-lg, var(--bpk-top-md, var(--bpk-top-sm, var(--bpk-top)))))}}@media(min-width: 64.0625rem){.bpk-responsive{top:var(--bpk-top-2xl, var(--bpk-top-xl, var(--bpk-top-lg, var(--bpk-top-md, var(--bpk-top-sm, var(--bpk-top))))))}}@media(min-width: 20rem){.bpk-responsive{right:var(--bpk-right-sm, var(--bpk-right))}}@media(min-width: 22.5rem){.bpk-responsive{right:var(--bpk-right-md, var(--bpk-right-sm, var(--bpk-right)))}}@media(min-width: 32.0625rem){.bpk-responsive{right:var(--bpk-right-lg, var(--bpk-right-md, var(--bpk-right-sm, var(--bpk-right))))}}@media(min-width: 48.0625rem){.bpk-responsive{right:var(--bpk-right-xl, var(--bpk-right-lg, var(--bpk-right-md, var(--bpk-right-sm, var(--bpk-right)))))}}@media(min-width: 64.0625rem){.bpk-responsive{right:var(--bpk-right-2xl, var(--bpk-right-xl, var(--bpk-right-lg, var(--bpk-right-md, var(--bpk-right-sm, var(--bpk-right))))))}}@media(min-width: 20rem){.bpk-responsive{bottom:var(--bpk-bottom-sm, var(--bpk-bottom))}}@media(min-width: 22.5rem){.bpk-responsive{bottom:var(--bpk-bottom-md, var(--bpk-bottom-sm, var(--bpk-bottom)))}}@media(min-width: 32.0625rem){.bpk-responsive{bottom:var(--bpk-bottom-lg, var(--bpk-bottom-md, var(--bpk-bottom-sm, var(--bpk-bottom))))}}@media(min-width: 48.0625rem){.bpk-responsive{bottom:var(--bpk-bottom-xl, var(--bpk-bottom-lg, var(--bpk-bottom-md, var(--bpk-bottom-sm, var(--bpk-bottom)))))}}@media(min-width: 64.0625rem){.bpk-responsive{bottom:var(--bpk-bottom-2xl, var(--bpk-bottom-xl, var(--bpk-bottom-lg, var(--bpk-bottom-md, var(--bpk-bottom-sm, var(--bpk-bottom))))))}}@media(min-width: 20rem){.bpk-responsive{left:var(--bpk-left-sm, var(--bpk-left))}}@media(min-width: 22.5rem){.bpk-responsive{left:var(--bpk-left-md, var(--bpk-left-sm, var(--bpk-left)))}}@media(min-width: 32.0625rem){.bpk-responsive{left:var(--bpk-left-lg, var(--bpk-left-md, var(--bpk-left-sm, var(--bpk-left))))}}@media(min-width: 48.0625rem){.bpk-responsive{left:var(--bpk-left-xl, var(--bpk-left-lg, var(--bpk-left-md, var(--bpk-left-sm, var(--bpk-left)))))}}@media(min-width: 64.0625rem){.bpk-responsive{left:var(--bpk-left-2xl, var(--bpk-left-xl, var(--bpk-left-lg, var(--bpk-left-md, var(--bpk-left-sm, var(--bpk-left))))))}}@media(min-width: 20rem){.bpk-responsive{display:var(--bpk-display-sm, var(--bpk-display))}}@media(min-width: 22.5rem){.bpk-responsive{display:var(--bpk-display-md, var(--bpk-display-sm, var(--bpk-display)))}}@media(min-width: 32.0625rem){.bpk-responsive{display:var(--bpk-display-lg, var(--bpk-display-md, var(--bpk-display-sm, var(--bpk-display))))}}@media(min-width: 48.0625rem){.bpk-responsive{display:var(--bpk-display-xl, var(--bpk-display-lg, var(--bpk-display-md, var(--bpk-display-sm, var(--bpk-display)))))}}@media(min-width: 64.0625rem){.bpk-responsive{display:var(--bpk-display-2xl, var(--bpk-display-xl, var(--bpk-display-lg, var(--bpk-display-md, var(--bpk-display-sm, var(--bpk-display))))))}}@media(min-width: 20rem){.bpk-responsive{position:var(--bpk-position-sm, var(--bpk-position))}}@media(min-width: 22.5rem){.bpk-responsive{position:var(--bpk-position-md, var(--bpk-position-sm, var(--bpk-position)))}}@media(min-width: 32.0625rem){.bpk-responsive{position:var(--bpk-position-lg, var(--bpk-position-md, var(--bpk-position-sm, var(--bpk-position))))}}@media(min-width: 48.0625rem){.bpk-responsive{position:var(--bpk-position-xl, var(--bpk-position-lg, var(--bpk-position-md, var(--bpk-position-sm, var(--bpk-position)))))}}@media(min-width: 64.0625rem){.bpk-responsive{position:var(--bpk-position-2xl, var(--bpk-position-xl, var(--bpk-position-lg, var(--bpk-position-md, var(--bpk-position-sm, var(--bpk-position))))))}}@media(min-width: 20rem){.bpk-responsive{overflow:var(--bpk-overflow-sm, var(--bpk-overflow))}}@media(min-width: 22.5rem){.bpk-responsive{overflow:var(--bpk-overflow-md, var(--bpk-overflow-sm, var(--bpk-overflow)))}}@media(min-width: 32.0625rem){.bpk-responsive{overflow:var(--bpk-overflow-lg, var(--bpk-overflow-md, var(--bpk-overflow-sm, var(--bpk-overflow))))}}@media(min-width: 48.0625rem){.bpk-responsive{overflow:var(--bpk-overflow-xl, var(--bpk-overflow-lg, var(--bpk-overflow-md, var(--bpk-overflow-sm, var(--bpk-overflow)))))}}@media(min-width: 64.0625rem){.bpk-responsive{overflow:var(--bpk-overflow-2xl, var(--bpk-overflow-xl, var(--bpk-overflow-lg, var(--bpk-overflow-md, var(--bpk-overflow-sm, var(--bpk-overflow))))))}}@media(min-width: 20rem){.bpk-responsive{overflow-x:var(--bpk-overflow-x-sm, var(--bpk-overflow-x))}}@media(min-width: 22.5rem){.bpk-responsive{overflow-x:var(--bpk-overflow-x-md, var(--bpk-overflow-x-sm, var(--bpk-overflow-x)))}}@media(min-width: 32.0625rem){.bpk-responsive{overflow-x:var(--bpk-overflow-x-lg, var(--bpk-overflow-x-md, var(--bpk-overflow-x-sm, var(--bpk-overflow-x))))}}@media(min-width: 48.0625rem){.bpk-responsive{overflow-x:var(--bpk-overflow-x-xl, var(--bpk-overflow-x-lg, var(--bpk-overflow-x-md, var(--bpk-overflow-x-sm, var(--bpk-overflow-x)))))}}@media(min-width: 64.0625rem){.bpk-responsive{overflow-x:var(--bpk-overflow-x-2xl, var(--bpk-overflow-x-xl, var(--bpk-overflow-x-lg, var(--bpk-overflow-x-md, var(--bpk-overflow-x-sm, var(--bpk-overflow-x))))))}}@media(min-width: 20rem){.bpk-responsive{overflow-y:var(--bpk-overflow-y-sm, var(--bpk-overflow-y))}}@media(min-width: 22.5rem){.bpk-responsive{overflow-y:var(--bpk-overflow-y-md, var(--bpk-overflow-y-sm, var(--bpk-overflow-y)))}}@media(min-width: 32.0625rem){.bpk-responsive{overflow-y:var(--bpk-overflow-y-lg, var(--bpk-overflow-y-md, var(--bpk-overflow-y-sm, var(--bpk-overflow-y))))}}@media(min-width: 48.0625rem){.bpk-responsive{overflow-y:var(--bpk-overflow-y-xl, var(--bpk-overflow-y-lg, var(--bpk-overflow-y-md, var(--bpk-overflow-y-sm, var(--bpk-overflow-y)))))}}@media(min-width: 64.0625rem){.bpk-responsive{overflow-y:var(--bpk-overflow-y-2xl, var(--bpk-overflow-y-xl, var(--bpk-overflow-y-lg, var(--bpk-overflow-y-md, var(--bpk-overflow-y-sm, var(--bpk-overflow-y))))))}}@media(min-width: 20rem){.bpk-responsive{flex-direction:var(--bpk-flex-direction-sm, var(--bpk-flex-direction))}}@media(min-width: 22.5rem){.bpk-responsive{flex-direction:var(--bpk-flex-direction-md, var(--bpk-flex-direction-sm, var(--bpk-flex-direction)))}}@media(min-width: 32.0625rem){.bpk-responsive{flex-direction:var(--bpk-flex-direction-lg, var(--bpk-flex-direction-md, var(--bpk-flex-direction-sm, var(--bpk-flex-direction))))}}@media(min-width: 48.0625rem){.bpk-responsive{flex-direction:var(--bpk-flex-direction-xl, var(--bpk-flex-direction-lg, var(--bpk-flex-direction-md, var(--bpk-flex-direction-sm, var(--bpk-flex-direction)))))}}@media(min-width: 64.0625rem){.bpk-responsive{flex-direction:var(--bpk-flex-direction-2xl, var(--bpk-flex-direction-xl, var(--bpk-flex-direction-lg, var(--bpk-flex-direction-md, var(--bpk-flex-direction-sm, var(--bpk-flex-direction))))))}}@media(min-width: 20rem){.bpk-responsive{flex-wrap:var(--bpk-flex-wrap-sm, var(--bpk-flex-wrap))}}@media(min-width: 22.5rem){.bpk-responsive{flex-wrap:var(--bpk-flex-wrap-md, var(--bpk-flex-wrap-sm, var(--bpk-flex-wrap)))}}@media(min-width: 32.0625rem){.bpk-responsive{flex-wrap:var(--bpk-flex-wrap-lg, var(--bpk-flex-wrap-md, var(--bpk-flex-wrap-sm, var(--bpk-flex-wrap))))}}@media(min-width: 48.0625rem){.bpk-responsive{flex-wrap:var(--bpk-flex-wrap-xl, var(--bpk-flex-wrap-lg, var(--bpk-flex-wrap-md, var(--bpk-flex-wrap-sm, var(--bpk-flex-wrap)))))}}@media(min-width: 64.0625rem){.bpk-responsive{flex-wrap:var(--bpk-flex-wrap-2xl, var(--bpk-flex-wrap-xl, var(--bpk-flex-wrap-lg, var(--bpk-flex-wrap-md, var(--bpk-flex-wrap-sm, var(--bpk-flex-wrap))))))}}@media(min-width: 20rem){.bpk-responsive{justify-content:var(--bpk-justify-content-sm, var(--bpk-justify-content))}}@media(min-width: 22.5rem){.bpk-responsive{justify-content:var(--bpk-justify-content-md, var(--bpk-justify-content-sm, var(--bpk-justify-content)))}}@media(min-width: 32.0625rem){.bpk-responsive{justify-content:var(--bpk-justify-content-lg, var(--bpk-justify-content-md, var(--bpk-justify-content-sm, var(--bpk-justify-content))))}}@media(min-width: 48.0625rem){.bpk-responsive{justify-content:var(--bpk-justify-content-xl, var(--bpk-justify-content-lg, var(--bpk-justify-content-md, var(--bpk-justify-content-sm, var(--bpk-justify-content)))))}}@media(min-width: 64.0625rem){.bpk-responsive{justify-content:var(--bpk-justify-content-2xl, var(--bpk-justify-content-xl, var(--bpk-justify-content-lg, var(--bpk-justify-content-md, var(--bpk-justify-content-sm, var(--bpk-justify-content))))))}}@media(min-width: 20rem){.bpk-responsive{align-items:var(--bpk-align-items-sm, var(--bpk-align-items))}}@media(min-width: 22.5rem){.bpk-responsive{align-items:var(--bpk-align-items-md, var(--bpk-align-items-sm, var(--bpk-align-items)))}}@media(min-width: 32.0625rem){.bpk-responsive{align-items:var(--bpk-align-items-lg, var(--bpk-align-items-md, var(--bpk-align-items-sm, var(--bpk-align-items))))}}@media(min-width: 48.0625rem){.bpk-responsive{align-items:var(--bpk-align-items-xl, var(--bpk-align-items-lg, var(--bpk-align-items-md, var(--bpk-align-items-sm, var(--bpk-align-items)))))}}@media(min-width: 64.0625rem){.bpk-responsive{align-items:var(--bpk-align-items-2xl, var(--bpk-align-items-xl, var(--bpk-align-items-lg, var(--bpk-align-items-md, var(--bpk-align-items-sm, var(--bpk-align-items))))))}}@media(min-width: 20rem){.bpk-responsive{align-content:var(--bpk-align-content-sm, var(--bpk-align-content))}}@media(min-width: 22.5rem){.bpk-responsive{align-content:var(--bpk-align-content-md, var(--bpk-align-content-sm, var(--bpk-align-content)))}}@media(min-width: 32.0625rem){.bpk-responsive{align-content:var(--bpk-align-content-lg, var(--bpk-align-content-md, var(--bpk-align-content-sm, var(--bpk-align-content))))}}@media(min-width: 48.0625rem){.bpk-responsive{align-content:var(--bpk-align-content-xl, var(--bpk-align-content-lg, var(--bpk-align-content-md, var(--bpk-align-content-sm, var(--bpk-align-content)))))}}@media(min-width: 64.0625rem){.bpk-responsive{align-content:var(--bpk-align-content-2xl, var(--bpk-align-content-xl, var(--bpk-align-content-lg, var(--bpk-align-content-md, var(--bpk-align-content-sm, var(--bpk-align-content))))))}}@media(min-width: 20rem){.bpk-responsive{flex:var(--bpk-flex-sm, var(--bpk-flex))}}@media(min-width: 22.5rem){.bpk-responsive{flex:var(--bpk-flex-md, var(--bpk-flex-sm, var(--bpk-flex)))}}@media(min-width: 32.0625rem){.bpk-responsive{flex:var(--bpk-flex-lg, var(--bpk-flex-md, var(--bpk-flex-sm, var(--bpk-flex))))}}@media(min-width: 48.0625rem){.bpk-responsive{flex:var(--bpk-flex-xl, var(--bpk-flex-lg, var(--bpk-flex-md, var(--bpk-flex-sm, var(--bpk-flex)))))}}@media(min-width: 64.0625rem){.bpk-responsive{flex:var(--bpk-flex-2xl, var(--bpk-flex-xl, var(--bpk-flex-lg, var(--bpk-flex-md, var(--bpk-flex-sm, var(--bpk-flex))))))}}@media(min-width: 20rem){.bpk-responsive{flex-grow:var(--bpk-flex-grow-sm, var(--bpk-flex-grow))}}@media(min-width: 22.5rem){.bpk-responsive{flex-grow:var(--bpk-flex-grow-md, var(--bpk-flex-grow-sm, var(--bpk-flex-grow)))}}@media(min-width: 32.0625rem){.bpk-responsive{flex-grow:var(--bpk-flex-grow-lg, var(--bpk-flex-grow-md, var(--bpk-flex-grow-sm, var(--bpk-flex-grow))))}}@media(min-width: 48.0625rem){.bpk-responsive{flex-grow:var(--bpk-flex-grow-xl, var(--bpk-flex-grow-lg, var(--bpk-flex-grow-md, var(--bpk-flex-grow-sm, var(--bpk-flex-grow)))))}}@media(min-width: 64.0625rem){.bpk-responsive{flex-grow:var(--bpk-flex-grow-2xl, var(--bpk-flex-grow-xl, var(--bpk-flex-grow-lg, var(--bpk-flex-grow-md, var(--bpk-flex-grow-sm, var(--bpk-flex-grow))))))}}@media(min-width: 20rem){.bpk-responsive{flex-shrink:var(--bpk-flex-shrink-sm, var(--bpk-flex-shrink))}}@media(min-width: 22.5rem){.bpk-responsive{flex-shrink:var(--bpk-flex-shrink-md, var(--bpk-flex-shrink-sm, var(--bpk-flex-shrink)))}}@media(min-width: 32.0625rem){.bpk-responsive{flex-shrink:var(--bpk-flex-shrink-lg, var(--bpk-flex-shrink-md, var(--bpk-flex-shrink-sm, var(--bpk-flex-shrink))))}}@media(min-width: 48.0625rem){.bpk-responsive{flex-shrink:var(--bpk-flex-shrink-xl, var(--bpk-flex-shrink-lg, var(--bpk-flex-shrink-md, var(--bpk-flex-shrink-sm, var(--bpk-flex-shrink)))))}}@media(min-width: 64.0625rem){.bpk-responsive{flex-shrink:var(--bpk-flex-shrink-2xl, var(--bpk-flex-shrink-xl, var(--bpk-flex-shrink-lg, var(--bpk-flex-shrink-md, var(--bpk-flex-shrink-sm, var(--bpk-flex-shrink))))))}}@media(min-width: 20rem){.bpk-responsive{flex-basis:var(--bpk-flex-basis-sm, var(--bpk-flex-basis))}}@media(min-width: 22.5rem){.bpk-responsive{flex-basis:var(--bpk-flex-basis-md, var(--bpk-flex-basis-sm, var(--bpk-flex-basis)))}}@media(min-width: 32.0625rem){.bpk-responsive{flex-basis:var(--bpk-flex-basis-lg, var(--bpk-flex-basis-md, var(--bpk-flex-basis-sm, var(--bpk-flex-basis))))}}@media(min-width: 48.0625rem){.bpk-responsive{flex-basis:var(--bpk-flex-basis-xl, var(--bpk-flex-basis-lg, var(--bpk-flex-basis-md, var(--bpk-flex-basis-sm, var(--bpk-flex-basis)))))}}@media(min-width: 64.0625rem){.bpk-responsive{flex-basis:var(--bpk-flex-basis-2xl, var(--bpk-flex-basis-xl, var(--bpk-flex-basis-lg, var(--bpk-flex-basis-md, var(--bpk-flex-basis-sm, var(--bpk-flex-basis))))))}}@media(min-width: 20rem){.bpk-responsive{order:var(--bpk-order-sm, var(--bpk-order))}}@media(min-width: 22.5rem){.bpk-responsive{order:var(--bpk-order-md, var(--bpk-order-sm, var(--bpk-order)))}}@media(min-width: 32.0625rem){.bpk-responsive{order:var(--bpk-order-lg, var(--bpk-order-md, var(--bpk-order-sm, var(--bpk-order))))}}@media(min-width: 48.0625rem){.bpk-responsive{order:var(--bpk-order-xl, var(--bpk-order-lg, var(--bpk-order-md, var(--bpk-order-sm, var(--bpk-order)))))}}@media(min-width: 64.0625rem){.bpk-responsive{order:var(--bpk-order-2xl, var(--bpk-order-xl, var(--bpk-order-lg, var(--bpk-order-md, var(--bpk-order-sm, var(--bpk-order))))))}}@media(min-width: 20rem){.bpk-responsive{align-self:var(--bpk-align-self-sm, var(--bpk-align-self))}}@media(min-width: 22.5rem){.bpk-responsive{align-self:var(--bpk-align-self-md, var(--bpk-align-self-sm, var(--bpk-align-self)))}}@media(min-width: 32.0625rem){.bpk-responsive{align-self:var(--bpk-align-self-lg, var(--bpk-align-self-md, var(--bpk-align-self-sm, var(--bpk-align-self))))}}@media(min-width: 48.0625rem){.bpk-responsive{align-self:var(--bpk-align-self-xl, var(--bpk-align-self-lg, var(--bpk-align-self-md, var(--bpk-align-self-sm, var(--bpk-align-self)))))}}@media(min-width: 64.0625rem){.bpk-responsive{align-self:var(--bpk-align-self-2xl, var(--bpk-align-self-xl, var(--bpk-align-self-lg, var(--bpk-align-self-md, var(--bpk-align-self-sm, var(--bpk-align-self))))))}}@media(min-width: 20rem){.bpk-responsive{justify-self:var(--bpk-justify-self-sm, var(--bpk-justify-self))}}@media(min-width: 22.5rem){.bpk-responsive{justify-self:var(--bpk-justify-self-md, var(--bpk-justify-self-sm, var(--bpk-justify-self)))}}@media(min-width: 32.0625rem){.bpk-responsive{justify-self:var(--bpk-justify-self-lg, var(--bpk-justify-self-md, var(--bpk-justify-self-sm, var(--bpk-justify-self))))}}@media(min-width: 48.0625rem){.bpk-responsive{justify-self:var(--bpk-justify-self-xl, var(--bpk-justify-self-lg, var(--bpk-justify-self-md, var(--bpk-justify-self-sm, var(--bpk-justify-self)))))}}@media(min-width: 64.0625rem){.bpk-responsive{justify-self:var(--bpk-justify-self-2xl, var(--bpk-justify-self-xl, var(--bpk-justify-self-lg, var(--bpk-justify-self-md, var(--bpk-justify-self-sm, var(--bpk-justify-self))))))}}@media(min-width: 20rem){.bpk-responsive{grid-template-columns:var(--bpk-grid-template-columns-sm, var(--bpk-grid-template-columns))}}@media(min-width: 22.5rem){.bpk-responsive{grid-template-columns:var(--bpk-grid-template-columns-md, var(--bpk-grid-template-columns-sm, var(--bpk-grid-template-columns)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-template-columns:var(--bpk-grid-template-columns-lg, var(--bpk-grid-template-columns-md, var(--bpk-grid-template-columns-sm, var(--bpk-grid-template-columns))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-template-columns:var(--bpk-grid-template-columns-xl, var(--bpk-grid-template-columns-lg, var(--bpk-grid-template-columns-md, var(--bpk-grid-template-columns-sm, var(--bpk-grid-template-columns)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-template-columns:var(--bpk-grid-template-columns-2xl, var(--bpk-grid-template-columns-xl, var(--bpk-grid-template-columns-lg, var(--bpk-grid-template-columns-md, var(--bpk-grid-template-columns-sm, var(--bpk-grid-template-columns))))))}}@media(min-width: 20rem){.bpk-responsive{grid-template-rows:var(--bpk-grid-template-rows-sm, var(--bpk-grid-template-rows))}}@media(min-width: 22.5rem){.bpk-responsive{grid-template-rows:var(--bpk-grid-template-rows-md, var(--bpk-grid-template-rows-sm, var(--bpk-grid-template-rows)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-template-rows:var(--bpk-grid-template-rows-lg, var(--bpk-grid-template-rows-md, var(--bpk-grid-template-rows-sm, var(--bpk-grid-template-rows))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-template-rows:var(--bpk-grid-template-rows-xl, var(--bpk-grid-template-rows-lg, var(--bpk-grid-template-rows-md, var(--bpk-grid-template-rows-sm, var(--bpk-grid-template-rows)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-template-rows:var(--bpk-grid-template-rows-2xl, var(--bpk-grid-template-rows-xl, var(--bpk-grid-template-rows-lg, var(--bpk-grid-template-rows-md, var(--bpk-grid-template-rows-sm, var(--bpk-grid-template-rows))))))}}@media(min-width: 20rem){.bpk-responsive{grid-template-areas:var(--bpk-grid-template-areas-sm, var(--bpk-grid-template-areas))}}@media(min-width: 22.5rem){.bpk-responsive{grid-template-areas:var(--bpk-grid-template-areas-md, var(--bpk-grid-template-areas-sm, var(--bpk-grid-template-areas)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-template-areas:var(--bpk-grid-template-areas-lg, var(--bpk-grid-template-areas-md, var(--bpk-grid-template-areas-sm, var(--bpk-grid-template-areas))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-template-areas:var(--bpk-grid-template-areas-xl, var(--bpk-grid-template-areas-lg, var(--bpk-grid-template-areas-md, var(--bpk-grid-template-areas-sm, var(--bpk-grid-template-areas)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-template-areas:var(--bpk-grid-template-areas-2xl, var(--bpk-grid-template-areas-xl, var(--bpk-grid-template-areas-lg, var(--bpk-grid-template-areas-md, var(--bpk-grid-template-areas-sm, var(--bpk-grid-template-areas))))))}}@media(min-width: 20rem){.bpk-responsive{grid-auto-flow:var(--bpk-grid-auto-flow-sm, var(--bpk-grid-auto-flow))}}@media(min-width: 22.5rem){.bpk-responsive{grid-auto-flow:var(--bpk-grid-auto-flow-md, var(--bpk-grid-auto-flow-sm, var(--bpk-grid-auto-flow)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-auto-flow:var(--bpk-grid-auto-flow-lg, var(--bpk-grid-auto-flow-md, var(--bpk-grid-auto-flow-sm, var(--bpk-grid-auto-flow))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-auto-flow:var(--bpk-grid-auto-flow-xl, var(--bpk-grid-auto-flow-lg, var(--bpk-grid-auto-flow-md, var(--bpk-grid-auto-flow-sm, var(--bpk-grid-auto-flow)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-auto-flow:var(--bpk-grid-auto-flow-2xl, var(--bpk-grid-auto-flow-xl, var(--bpk-grid-auto-flow-lg, var(--bpk-grid-auto-flow-md, var(--bpk-grid-auto-flow-sm, var(--bpk-grid-auto-flow))))))}}@media(min-width: 20rem){.bpk-responsive{grid-auto-rows:var(--bpk-grid-auto-rows-sm, var(--bpk-grid-auto-rows))}}@media(min-width: 22.5rem){.bpk-responsive{grid-auto-rows:var(--bpk-grid-auto-rows-md, var(--bpk-grid-auto-rows-sm, var(--bpk-grid-auto-rows)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-auto-rows:var(--bpk-grid-auto-rows-lg, var(--bpk-grid-auto-rows-md, var(--bpk-grid-auto-rows-sm, var(--bpk-grid-auto-rows))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-auto-rows:var(--bpk-grid-auto-rows-xl, var(--bpk-grid-auto-rows-lg, var(--bpk-grid-auto-rows-md, var(--bpk-grid-auto-rows-sm, var(--bpk-grid-auto-rows)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-auto-rows:var(--bpk-grid-auto-rows-2xl, var(--bpk-grid-auto-rows-xl, var(--bpk-grid-auto-rows-lg, var(--bpk-grid-auto-rows-md, var(--bpk-grid-auto-rows-sm, var(--bpk-grid-auto-rows))))))}}@media(min-width: 20rem){.bpk-responsive{grid-auto-columns:var(--bpk-grid-auto-columns-sm, var(--bpk-grid-auto-columns))}}@media(min-width: 22.5rem){.bpk-responsive{grid-auto-columns:var(--bpk-grid-auto-columns-md, var(--bpk-grid-auto-columns-sm, var(--bpk-grid-auto-columns)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-auto-columns:var(--bpk-grid-auto-columns-lg, var(--bpk-grid-auto-columns-md, var(--bpk-grid-auto-columns-sm, var(--bpk-grid-auto-columns))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-auto-columns:var(--bpk-grid-auto-columns-xl, var(--bpk-grid-auto-columns-lg, var(--bpk-grid-auto-columns-md, var(--bpk-grid-auto-columns-sm, var(--bpk-grid-auto-columns)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-auto-columns:var(--bpk-grid-auto-columns-2xl, var(--bpk-grid-auto-columns-xl, var(--bpk-grid-auto-columns-lg, var(--bpk-grid-auto-columns-md, var(--bpk-grid-auto-columns-sm, var(--bpk-grid-auto-columns))))))}}@media(min-width: 20rem){.bpk-responsive{grid-column:var(--bpk-grid-column-sm, var(--bpk-grid-column))}}@media(min-width: 22.5rem){.bpk-responsive{grid-column:var(--bpk-grid-column-md, var(--bpk-grid-column-sm, var(--bpk-grid-column)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-column:var(--bpk-grid-column-lg, var(--bpk-grid-column-md, var(--bpk-grid-column-sm, var(--bpk-grid-column))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-column:var(--bpk-grid-column-xl, var(--bpk-grid-column-lg, var(--bpk-grid-column-md, var(--bpk-grid-column-sm, var(--bpk-grid-column)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-column:var(--bpk-grid-column-2xl, var(--bpk-grid-column-xl, var(--bpk-grid-column-lg, var(--bpk-grid-column-md, var(--bpk-grid-column-sm, var(--bpk-grid-column))))))}}@media(min-width: 20rem){.bpk-responsive{grid-row:var(--bpk-grid-row-sm, var(--bpk-grid-row))}}@media(min-width: 22.5rem){.bpk-responsive{grid-row:var(--bpk-grid-row-md, var(--bpk-grid-row-sm, var(--bpk-grid-row)))}}@media(min-width: 32.0625rem){.bpk-responsive{grid-row:var(--bpk-grid-row-lg, var(--bpk-grid-row-md, var(--bpk-grid-row-sm, var(--bpk-grid-row))))}}@media(min-width: 48.0625rem){.bpk-responsive{grid-row:var(--bpk-grid-row-xl, var(--bpk-grid-row-lg, var(--bpk-grid-row-md, var(--bpk-grid-row-sm, var(--bpk-grid-row)))))}}@media(min-width: 64.0625rem){.bpk-responsive{grid-row:var(--bpk-grid-row-2xl, var(--bpk-grid-row-xl, var(--bpk-grid-row-lg, var(--bpk-grid-row-md, var(--bpk-grid-row-sm, var(--bpk-grid-row))))))}}@media(min-width: 20rem){.bpk-responsive{font-size:var(--bpk-font-size-sm, var(--bpk-font-size))}}@media(min-width: 22.5rem){.bpk-responsive{font-size:var(--bpk-font-size-md, var(--bpk-font-size-sm, var(--bpk-font-size)))}}@media(min-width: 32.0625rem){.bpk-responsive{font-size:var(--bpk-font-size-lg, var(--bpk-font-size-md, var(--bpk-font-size-sm, var(--bpk-font-size))))}}@media(min-width: 48.0625rem){.bpk-responsive{font-size:var(--bpk-font-size-xl, var(--bpk-font-size-lg, var(--bpk-font-size-md, var(--bpk-font-size-sm, var(--bpk-font-size)))))}}@media(min-width: 64.0625rem){.bpk-responsive{font-size:var(--bpk-font-size-2xl, var(--bpk-font-size-xl, var(--bpk-font-size-lg, var(--bpk-font-size-md, var(--bpk-font-size-sm, var(--bpk-font-size))))))}}@media(min-width: 20rem){.bpk-responsive{line-height:var(--bpk-line-height-sm, var(--bpk-line-height))}}@media(min-width: 22.5rem){.bpk-responsive{line-height:var(--bpk-line-height-md, var(--bpk-line-height-sm, var(--bpk-line-height)))}}@media(min-width: 32.0625rem){.bpk-responsive{line-height:var(--bpk-line-height-lg, var(--bpk-line-height-md, var(--bpk-line-height-sm, var(--bpk-line-height))))}}@media(min-width: 48.0625rem){.bpk-responsive{line-height:var(--bpk-line-height-xl, var(--bpk-line-height-lg, var(--bpk-line-height-md, var(--bpk-line-height-sm, var(--bpk-line-height)))))}}@media(min-width: 64.0625rem){.bpk-responsive{line-height:var(--bpk-line-height-2xl, var(--bpk-line-height-xl, var(--bpk-line-height-lg, var(--bpk-line-height-md, var(--bpk-line-height-sm, var(--bpk-line-height))))))}}@media(min-width: 20rem){.bpk-responsive{font-weight:var(--bpk-font-weight-sm, var(--bpk-font-weight))}}@media(min-width: 22.5rem){.bpk-responsive{font-weight:var(--bpk-font-weight-md, var(--bpk-font-weight-sm, var(--bpk-font-weight)))}}@media(min-width: 32.0625rem){.bpk-responsive{font-weight:var(--bpk-font-weight-lg, var(--bpk-font-weight-md, var(--bpk-font-weight-sm, var(--bpk-font-weight))))}}@media(min-width: 48.0625rem){.bpk-responsive{font-weight:var(--bpk-font-weight-xl, var(--bpk-font-weight-lg, var(--bpk-font-weight-md, var(--bpk-font-weight-sm, var(--bpk-font-weight)))))}}@media(min-width: 64.0625rem){.bpk-responsive{font-weight:var(--bpk-font-weight-2xl, var(--bpk-font-weight-xl, var(--bpk-font-weight-lg, var(--bpk-font-weight-md, var(--bpk-font-weight-sm, var(--bpk-font-weight))))))}}@media(min-width: 20rem){.bpk-responsive{letter-spacing:var(--bpk-letter-spacing-sm, var(--bpk-letter-spacing))}}@media(min-width: 22.5rem){.bpk-responsive{letter-spacing:var(--bpk-letter-spacing-md, var(--bpk-letter-spacing-sm, var(--bpk-letter-spacing)))}}@media(min-width: 32.0625rem){.bpk-responsive{letter-spacing:var(--bpk-letter-spacing-lg, var(--bpk-letter-spacing-md, var(--bpk-letter-spacing-sm, var(--bpk-letter-spacing))))}}@media(min-width: 48.0625rem){.bpk-responsive{letter-spacing:var(--bpk-letter-spacing-xl, var(--bpk-letter-spacing-lg, var(--bpk-letter-spacing-md, var(--bpk-letter-spacing-sm, var(--bpk-letter-spacing)))))}}@media(min-width: 64.0625rem){.bpk-responsive{letter-spacing:var(--bpk-letter-spacing-2xl, var(--bpk-letter-spacing-xl, var(--bpk-letter-spacing-lg, var(--bpk-letter-spacing-md, var(--bpk-letter-spacing-sm, var(--bpk-letter-spacing))))))}}@media(min-width: 20rem){.bpk-responsive{font-family:var(--bpk-font-family-sm, var(--bpk-font-family))}}@media(min-width: 22.5rem){.bpk-responsive{font-family:var(--bpk-font-family-md, var(--bpk-font-family-sm, var(--bpk-font-family)))}}@media(min-width: 32.0625rem){.bpk-responsive{font-family:var(--bpk-font-family-lg, var(--bpk-font-family-md, var(--bpk-font-family-sm, var(--bpk-font-family))))}}@media(min-width: 48.0625rem){.bpk-responsive{font-family:var(--bpk-font-family-xl, var(--bpk-font-family-lg, var(--bpk-font-family-md, var(--bpk-font-family-sm, var(--bpk-font-family)))))}}@media(min-width: 64.0625rem){.bpk-responsive{font-family:var(--bpk-font-family-2xl, var(--bpk-font-family-xl, var(--bpk-font-family-lg, var(--bpk-font-family-md, var(--bpk-font-family-sm, var(--bpk-font-family))))))}}.bpk-layout-flex{display:flex}.bpk-layout-inline-flex{display:inline-flex}.bpk-layout-grid{display:grid}.bpk-layout-inline-grid{display:inline-grid}.bpk-layout-vstack{display:flex;flex-direction:column}.bpk-layout-hstack{display:flex;flex-direction:row}

package/bpk-component-layout/src/BpkProvider.d.ts

@@ -1,18 +1,16 @@
+import type React from 'react';
 import type { ReactNode } from 'react';
 export interface BpkProviderProps {
     children: ReactNode;
 }
 /**
- * BpkProvider - Provides context for both Backpack layout and Ark-based components.
+ * BpkProvider - Provides context for Ark-based components.
  *
- * This is a convenience wrapper that composes:
- * - BpkLayoutProvider (Chakra UI system for layout components: BpkFlex, BpkGrid, etc.)
- * - BpkArkProvider (Ark UI locale for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
- *
- * If you only use layout components and want a smaller bundle, use BpkLayoutProvider
- * directly instead — it does not pull in @ark-ui/react.
+ * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack) no longer require a
+ * provider. This wrapper still sets up BpkArkProvider (Ark UI locale) for
+ * Ark-based components (BpkCheckboxV2, BpkSegmentedControlV2, etc.).
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
+ * @returns {React.JSX.Element} The provider wrapping its children with Ark context.
  */
-export declare const BpkProvider: ({ children }: BpkProviderProps) => JSX.Element;
+export declare const BpkProvider: ({ children }: BpkProviderProps) => React.JSX.Element;

package/bpk-component-layout/src/BpkProvider.js

@@ -20,17 +20,14 @@ import { BpkArkProvider } from "./BpkArkProvider";
 import { BpkLayoutProvider } from "./BpkLayoutProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * BpkProvider - Provides context for both Backpack layout and Ark-based components.
+ * BpkProvider - Provides context for Ark-based components.
  *
- * This is a convenience wrapper that composes:
- * - BpkLayoutProvider (Chakra UI system for layout components: BpkFlex, BpkGrid, etc.)
- * - BpkArkProvider (Ark UI locale for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
- *
- * If you only use layout components and want a smaller bundle, use BpkLayoutProvider
- * directly instead — it does not pull in @ark-ui/react.
+ * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack) no longer require a
+ * provider. This wrapper still sets up BpkArkProvider (Ark UI locale) for
+ * Ark-based components (BpkCheckboxV2, BpkSegmentedControlV2, etc.).
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
+ * @returns {React.JSX.Element} The provider wrapping its children with Ark context.
  */
 export const BpkProvider = ({
   children

package/bpk-component-layout/src/BpkStack.constant.js

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-// these options align with Chakra's StackOption excluding separator
-// TODO: add separator to Stack
+// Public API prop names for BpkStack/BpkHStack/BpkVStack.
+// These are the consumer-facing names; the components map them to CSS-standard
+// names (alignItems, justifyContent, flexWrap, flexDirection) internally.
 const StackOptionKeys = ['align', 'justify', 'wrap', 'direction'];
 export default StackOptionKeys;