@skyscanner/backpack-web 34.2.0 → 34.4.0

package/bpk-component-button/src/BpkButtonBase.js

@@ -14,17 +14,27 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { propTypes, defaultProps } from "./common-types";
+ */
+import { cssModules } from "../../bpk-react-utils";
+import { propTypes, defaultProps } from "./common-types";
 import COMMON_STYLES from "./BpkButtonBase.module.css";
-
-// This was originally depended upon from the bpk-react-utils package, however
-// we decided to inline it in this particular component so as not to bloat the
-// the bundles of consumers who are not yet on webpack 2
-// We'll revisit this again soon.
 import { jsx as _jsx } from "react/jsx-runtime";
-const cssModules = (styles = {}) => className => styles[className] ? styles[className] : className;
-const getCommonClassName = cssModules(COMMON_STYLES);
-const BpkButton = props => {
+const getClassName = cssModules(COMMON_STYLES);
+
+// This is a duplicate of BpkButtonV2
+// Better to duplicate rather than prematurely align the abstraction between Button and ButtonV2
+export const BUTTON_TYPES = {
+  primary: 'primary',
+  primaryOnDark: 'primary-on-dark',
+  primaryOnLight: 'primary-on-light',
+  secondary: 'secondary',
+  secondaryOnDark: 'secondary-on-dark',
+  destructive: 'destructive',
+  featured: 'featured',
+  link: 'link',
+  linkOnDark: 'link-on-dark'
+};
+const BpkButtonBase = props => {
   const {
     blank,
     children,
@@ -36,58 +46,75 @@ const BpkButton = props => {
     onClick,
     rel: propRel,
     submit,
+    type,
     ...rest
   } = props;
-  const classNames = [getCommonClassName('bpk-button')];
+  const classNames = [];
+  if (type === undefined) {
+    classNames.push('bpk-button');
+  }
+  if (type === BUTTON_TYPES.featured) {
+    classNames.push('bpk-button--featured');
+  }
+  if (type === BUTTON_TYPES.destructive) {
+    classNames.push('bpk-button--destructive');
+  }
+  if (type === BUTTON_TYPES.link) {
+    classNames.push('bpk-button--link');
+  }
+  if (type === BUTTON_TYPES.linkOnDark) {
+    classNames.push('bpk-button--linkOnDark');
+  }
+  if (type === BUTTON_TYPES.primaryOnDark) {
+    classNames.push('bpk-button--primaryOnDark');
+  }
+  if (type === BUTTON_TYPES.primaryOnLight) {
+    classNames.push('bpk-button--primaryOnLight');
+  }
+  if (type === BUTTON_TYPES.secondary) {
+    classNames.push('bpk-button--secondary');
+  }
+  if (type === BUTTON_TYPES.secondaryOnDark) {
+    classNames.push('bpk-button--secondaryOnDark');
+  }
   if (large) {
-    classNames.push(getCommonClassName('bpk-button--large'));
+    classNames.push('bpk-button--large');
   }
   if (iconOnly) {
-    classNames.push(getCommonClassName(large ? 'bpk-button--large-icon-only' : 'bpk-button--icon-only'));
+    classNames.push(large ? 'bpk-button--large-icon-only' : 'bpk-button--icon-only');
   }
   if (className) {
     classNames.push(className);
   }
-  const classNameFinal = classNames.join(' ');
+  const classNameFinal = getClassName(...classNames);
   const target = blank ? '_blank' : null;
   const rel = blank ? propRel || 'noopener noreferrer' : propRel;
   if (!disabled && href) {
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx("a", {
-        href: href,
-        className: classNameFinal,
-        onClick: onClick,
-        target: target,
-        rel: rel,
-        ...rest,
-        children: children
-      })
-    );
-  }
-  const buttonType = submit ? 'submit' : 'button';
-
-  /* eslint-disable react/button-has-type */
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("button", {
-      type: buttonType,
-      disabled: disabled,
+    return /*#__PURE__*/_jsx("a", {
+      href: href,
       className: classNameFinal,
       onClick: onClick,
+      target: target || undefined,
+      rel: rel,
       ...rest,
       children: children
-    })
-  );
-  /* eslint-enable */
+    });
+  }
+  const buttonType = submit ? 'submit' : 'button';
+  return /*#__PURE__*/_jsx("button", {
+    // eslint-disable-next-line react/button-has-type
+    type: buttonType,
+    disabled: disabled,
+    className: classNameFinal,
+    onClick: onClick,
+    ...rest,
+    children: children
+  });
 };
-BpkButton.propTypes = {
+BpkButtonBase.propTypes = {
   ...propTypes
 };
-BpkButton.defaultProps = {
+BpkButtonBase.defaultProps = {
   ...defaultProps
 };
-export default BpkButton;
-export { cssModules };
+export default BpkButtonBase;

package/bpk-component-button/src/BpkButtonBase.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
+.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}.bpk-button--featured{composes:bpk-button;color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive{composes:bpk-button;color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--linkOnDark{composes:bpk-button;background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--linkOnDark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--linkOnDark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--linkOnDark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--linkOnDark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--linkOnDark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--linkOnDark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primaryOnDark{composes:bpk-button;color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primaryOnDark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primaryOnDark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primaryOnLight{composes:bpk-button;color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primaryOnLight:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primaryOnLight:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{composes:bpk-button;color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondaryOnDark{composes:bpk-button;color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondaryOnDark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondaryOnDark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}

package/bpk-component-button/src/common-types.d.ts

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import type { ReactNode, SyntheticEvent } from 'react';
+export type Props = {
+    children: ReactNode;
+    href?: string;
+    className?: string;
+    disabled: boolean;
+    onClick?: (event: SyntheticEvent) => unknown;
+    submit: boolean;
+    large: boolean;
+    iconOnly: boolean;
+    blank: boolean;
+    rel?: string;
+};
+export declare const defaultProps: {
+    href: null;
+    className: null;
+    disabled: boolean;
+    onClick: null;
+    submit: boolean;
+    large: boolean;
+    iconOnly: boolean;
+    blank: boolean;
+    rel: null;
+};
+export declare const propTypes: {
+    children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    href: PropTypes.Requireable<string>;
+    className: PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    submit: PropTypes.Requireable<boolean>;
+    large: PropTypes.Requireable<boolean>;
+    iconOnly: PropTypes.Requireable<boolean>;
+    blank: PropTypes.Requireable<boolean>;
+    rel: PropTypes.Requireable<string>;
+};

package/bpk-component-button/src/common-types.js

@@ -14,20 +14,10 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  href: PropTypes.string,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  submit: PropTypes.bool,
-  large: PropTypes.bool,
-  iconOnly: PropTypes.bool,
-  blank: PropTypes.bool,
-  rel: PropTypes.string
-};
-const defaultProps = {
+ */
+
+import PropTypes from 'prop-types';
+export const defaultProps = {
   href: null,
   className: null,
   disabled: false,
@@ -38,4 +28,15 @@ const defaultProps = {
   blank: false,
   rel: null
 };
-export { propTypes, defaultProps };
+export const propTypes = {
+  children: PropTypes.node.isRequired,
+  href: PropTypes.string,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  submit: PropTypes.bool,
+  large: PropTypes.bool,
+  iconOnly: PropTypes.bool,
+  blank: PropTypes.bool,
+  rel: PropTypes.string
+};

package/bpk-component-card/src/BpkCard.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type Props = {
     children: ReactNode | string;
     className?: string | null;

package/bpk-component-card/src/BpkCard.js

@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
+import { useContext } from 'react';
 import { cssModules } from "../../bpk-react-utils";
+import { CardContext } from "./CardContext";
 import STYLES from "./BpkCard.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,7 +31,8 @@ const BpkCard = ({
   padded = true,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-card', atomic && !href && 'bpk-card--atomic-button', padded && 'bpk-card--padded', className);
+  const cardContext = useContext(CardContext);
+  const classNames = getClassName('bpk-card', atomic && !href && 'bpk-card--atomic-button', padded && 'bpk-card--padded', !cardContext.elevated && 'bpk-card--no-elevation', className);
   const atomicProps = {};
   if (href) {
     let blankProps = {};

package/bpk-component-card/src/BpkCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-card--atomic-button{width:100%;padding:0;border:none;background:none;color:inherit;text-align:inherit;cursor:pointer;appearance:none}.bpk-card--padded{padding:1rem}
+.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-card--atomic-button{width:100%;padding:0;border:none;background:none;color:inherit;text-align:inherit;cursor:pointer;appearance:none}.bpk-card--padded{padding:1rem}.bpk-card--no-elevation{box-shadow:none}.bpk-card--no-elevation::after{box-shadow:none}

package/bpk-component-card/src/BpkCardWrapper.js

@@ -17,6 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
+import { CardContext } from "./CardContext";
 import STYLES from "./BpkCardWrapper.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,19 +28,24 @@ const BpkCardWrapper = ({
   header
 }) => {
   const classNames = getClassName('bpk-card-wrapper', className);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
-    style: {
-      // @ts-expect-error TS is reporting this incorrectly as --background-color is valid
-      '--background-color': backgroundColor
+  return /*#__PURE__*/_jsx(CardContext.Provider, {
+    value: {
+      elevated: false
     },
-    children: [/*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-card-wrapper--header'),
-      children: header
-    }), /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-card-wrapper--content'),
-      children: card
-    })]
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames,
+      style: {
+        // @ts-expect-error TS is reporting this incorrectly as --background-color is valid
+        '--background-color': backgroundColor
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-card-wrapper--header'),
+        children: header
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-card-wrapper--content'),
+        children: card
+      })]
+    })
   });
 };
 export default BpkCardWrapper;

package/bpk-component-card/src/BpkDividedCard.d.ts

@@ -12,5 +12,5 @@ export type Props = {
     isElevated?: boolean;
     [rest: string]: any;
 };
-declare const BpkDividedCard: ({ className, href, isElevated, orientation, primaryContent, secondaryContent, ...rest }: Props) => JSX.Element;
+declare const BpkDividedCard: ({ href, isElevated, orientation, primaryContent, secondaryContent, ...rest }: Props) => JSX.Element;
 export default BpkDividedCard;

package/bpk-component-card/src/BpkDividedCard.js

@@ -18,6 +18,7 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkCard from "./BpkCard";
+import { CardContext } from "./CardContext";
 import STYLES from "./BpkDividedCard.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -26,7 +27,6 @@ export const ORIENTATION = {
   vertical: 'vertical'
 };
 const BpkDividedCard = ({
-  className = null,
   href = null,
   isElevated = true,
   orientation = ORIENTATION.horizontal,
@@ -35,24 +35,31 @@ const BpkDividedCard = ({
   ...rest
 }) => {
   const isVertical = orientation === ORIENTATION.vertical;
-  const classNames = getClassName('bpk-divided-card', isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal', !isElevated && 'bpk-divided-card--no-elevation', className);
-  return (
-    /*#__PURE__*/
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    _jsxs(BpkCard, {
-      className: classNames,
-      href: href,
-      padded: false,
-      ...rest,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
-        children: primaryContent
-      }), /*#__PURE__*/_jsx("div", {
-        className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
-        children: secondaryContent
-      })]
+  const containerClassName = getClassName(isVertical ? 'bpk-divided-card--vertical-container' : 'bpk-divided-card--horizontal-container');
+  const contentClassName = getClassName('bpk-divided-card--content', isVertical && 'bpk-divided-card--vertical-content');
+  const secondaryContentClassName = getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal');
+  return /*#__PURE__*/_jsx(CardContext.Provider, {
+    value: {
+      elevated: isElevated
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: containerClassName,
+      children: /*#__PURE__*/_jsx(BpkCard, {
+        href: href,
+        padded: false,
+        ...rest,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: contentClassName,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
+            children: primaryContent
+          }), /*#__PURE__*/_jsx("div", {
+            className: secondaryContentClassName,
+            children: secondaryContent
+          })]
+        })
+      })
     })
-  );
+  });
 };
 export default BpkDividedCard;

package/bpk-component-card/src/BpkDividedCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-divided-card{display:flex;align-items:stretch}.bpk-divided-card--vertical{min-width:15rem;max-width:45rem;flex-direction:column}.bpk-divided-card--horizontal{min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}.bpk-divided-card--no-elevation{box-shadow:none}.bpk-divided-card--no-elevation::after{box-shadow:none}
+.bpk-divided-card--content{display:flex;height:100%;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex;min-width:15rem;max-width:45rem}.bpk-divided-card--horizontal-container{display:flex;min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}

package/bpk-component-card/src/CardContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface BpkCardContext {
+    /**
+     * Indicates if the BpkCard should render elevated from the page or not. Parent card types can specify `false` when they handle elevation internally, rather than BpkCard.
+     * BpkCard will render elevated by default.
+     */
+    elevated: boolean;
+}
+/**
+ * CardContext is an internal context to be used only within Backpack parent Card types (time of writing BpkDividedCard & BpkCardWrapper).
+ * It facillitates the BpkCard to render appropriately when wrapped and/or is rendered indirectly from a parent.
+ */
+export declare const CardContext: import("react").Context<BpkCardContext>;
+export {};

package/{bpk-component-button/src/BpkButtonPrimary.js → bpk-component-card/src/CardContext.js}

@@ -14,19 +14,15 @@
  * 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 BpkButtonBase from "./BpkButtonBase";
-import { defaultProps, propTypes } from "./common-types";
-
-// TODO: BpkButtonBase has the primary button style as it wasn't removed to
-// avoid a breaking change in the mixin. Review after this is tested.
-import { jsx as _jsx } from "react/jsx-runtime";
-const BpkButtonPrimary = props => /*#__PURE__*/_jsx(BpkButtonBase, {
-  ...props
-});
-BpkButtonPrimary.propTypes = {
-  ...propTypes
-};
-BpkButtonPrimary.defaultProps = {
-  ...defaultProps
+ */
+import { createContext } from 'react';
+const defaultContext = {
+  elevated: true
 };
-export default BpkButtonPrimary;
+
+/**
+ * CardContext is an internal context to be used only within Backpack parent Card types (time of writing BpkDividedCard & BpkCardWrapper).
+ * It facillitates the BpkCard to render appropriately when wrapped and/or is rendered indirectly from a parent.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const CardContext = /*#__PURE__*/createContext(defaultContext);

package/bpk-component-card-button/src/BpkSaveButton.js

@@ -17,8 +17,7 @@
  */
 
 import { useState } from 'react';
-import { BpkButtonV2 } from "../../bpk-component-button";
-import { withLargeButtonAlignment } from "../../bpk-component-icon";
+import { colorBlack, colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
 import BpkHeartOutlineIcon from "../../bpk-component-icon/lg/heart--outline";
 import BpkHeartIconSm from "../../bpk-component-icon/sm/heart";
@@ -36,10 +35,10 @@ export const STYLE_TYPES = {
   onDark: 'onDark'
 };
 const getClassName = cssModules(STYLES);
-const AlignedHeartIcon = withLargeButtonAlignment(BpkHeartIcon);
-const AlignedHeartOutlineIcon = withLargeButtonAlignment(BpkHeartOutlineIcon);
-const AlignedHeartIconSm = withLargeButtonAlignment(BpkHeartIconSm);
-const AlignedHeartOutlineIconSm = withLargeButtonAlignment(BpkHeartOutlineIconSm);
+const AlignedHeartIcon = BpkHeartIcon;
+const AlignedHeartOutlineIcon = BpkHeartOutlineIcon;
+const AlignedHeartIconSm = BpkHeartIconSm;
+const AlignedHeartOutlineIconSm = BpkHeartOutlineIconSm;
 const BpkSaveButton = ({
   accessibilityLabel,
   checked,
@@ -47,33 +46,30 @@ const BpkSaveButton = ({
   size = SIZE_TYPES.default,
   style = STYLE_TYPES.default
 }) => {
-  const [toggle, setToggle] = useState(false);
+  const [shouldPlayAnim, setPlayAnim] = useState(false);
   const smallSize = size === SIZE_TYPES.small;
   const HeartIcon = smallSize ? AlignedHeartIconSm : AlignedHeartIcon;
   const HeartOutLineIcon = smallSize ? AlignedHeartOutlineIconSm : AlignedHeartOutlineIcon;
-  return /*#__PURE__*/_jsxs(BpkButtonV2, {
-    "aria-label": accessibilityLabel
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    "aria-label": accessibilityLabel,
     className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
     onClick: e => {
       onCheckedChange(e);
       if (!checked) {
-        setToggle(true);
+        setPlayAnim(true);
       }
     },
-    iconOnly: true,
-    children: [/*#__PURE__*/_jsx(HeartIcon
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartIcon', toggle && checked && 'bpk-save-button__heartIcon--toggle', `bpk-save-button__heartIcon--${checked ? 'show' : 'hide'}`, `bpk-save-button__heartIcon--${style}`)
-    }), /*#__PURE__*/_jsx(HeartOutLineIcon
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartOutlineIcon', `bpk-save-button__heartOutlineIcon--${checked ? 'hide' : 'show'}`, `bpk-save-button__heartOutlineIcon--${style}`)
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName(`bpk-save-button__heartIcon`, checked && shouldPlayAnim && `bpk-save-button__heartIcon--clicked`, `bpk-save-button__heartIcon--${style}`),
+      "data-show": checked,
+      children: /*#__PURE__*/_jsx(HeartIcon, {})
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName(`bpk-save-button__heartOutlineIcon`),
+      "data-show": !checked,
+      children: /*#__PURE__*/_jsx(HeartOutLineIcon, {
+        fill: style === STYLE_TYPES.onDark ? colorWhite : colorBlack
+      })
     })]
   });
 };

package/bpk-component-card-button/src/BpkSaveButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0)}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0)}.bpk-save-button:active{background-color:rgba(0,0,0,0)}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-no-touch-support .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,.8)}
+@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}

package/bpk-component-close-button/src/BpkCloseButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-0.125rem;margin-left:-0.125rem;padding:0;border:0;background-color:rgba(0,0,0,0);font-size:1.5rem;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-close-button__default{color:#161616;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button__default:active{color:#161616}.bpk-close-button__onDark{color:#fff;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-close-button__onDark:active{color:#fff}.bpk-close-button-icon{fill:currentcolor}
+.bpk-close-button{width:1.5rem;height:1.5rem;padding:0;border:0;background-color:rgba(0,0,0,0);font-size:1.5rem;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-close-button__default{color:#161616;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button__default:active{color:#161616}.bpk-close-button__onDark{color:#fff;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-close-button__onDark:active{color:#fff}.bpk-close-button-icon{fill:currentcolor}

package/bpk-component-description-list/index.d.ts

@@ -0,0 +1,4 @@
+import BpkDescriptionDetails from './src/BpkDescriptionDetails';
+import BpkDescriptionList from './src/BpkDescriptionList';
+import BpkDescriptionTerm from './src/BpkDescriptionTerm';
+export { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails };

package/bpk-component-description-list/src/BpkDescriptionDetails.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode | string;
+    className?: string;
+    [rest: string]: any;
+};
+declare const _default: ({ children, className, ...rest }: Props) => JSX.Element;
+export default _default;

package/bpk-component-description-list/src/BpkDescriptionDetails.js

@@ -16,5 +16,17 @@
  * limitations under the License.
  */
 
-import buildComponent from "./ComponentFactory";
-export default buildComponent('dd', 'bpk-description-list__details');
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkDescriptionList.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export default (({
+  children,
+  className,
+  ...rest
+}) => /*#__PURE__*/_jsx("dd", {
+  className: [getClassName('bpk-description-list__details'), className].filter(x => x) // inline drops the className if undefined
+  .join(' '),
+  ...rest,
+  children: children
+}));

package/bpk-component-description-list/src/BpkDescriptionList.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode | string;
+    className?: string;
+    [rest: string]: any;
+};
+declare const _default: ({ children, className, ...rest }: Props) => JSX.Element;
+export default _default;