@skyscanner/backpack-web 34.2.0 → 34.4.0

package/bpk-component-autosuggest/src/BpkAutosuggest.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}
+.bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:flex;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -43,11 +43,9 @@ const BpkAutosuggestSuggestion = props => {
     _jsxs("section", {
       className: classNames.join(' '),
       ...rest,
-      children: [icon ? /*#__PURE__*/_jsx(Icon
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
-        className: getClassName('bpk-autosuggest__suggestion-icon')
+      children: [icon ? /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-autosuggest__suggestion-icon'),
+        children: /*#__PURE__*/_jsx(Icon, {})
       }) : null, /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-autosuggest__suggestion-content'),
         children: /*#__PURE__*/_jsxs("div", {

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -60,11 +60,9 @@ const getIconForType = (type, CustomIcon) => {
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);
-
-  // TODO: className to be removed
-  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-  return /*#__PURE__*/_jsx(AlignedIcon, {
-    className: className
+  return /*#__PURE__*/_jsx("span", {
+    className: className,
+    children: /*#__PURE__*/_jsx(AlignedIcon, {})
   });
 };
 const ToggleButton = props => {

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import useMediaQuery from "./useMediaQuery";
 const BREAKPOINTS = {
@@ -31,6 +31,14 @@ const BREAKPOINTS = {
   ABOVE_DESKTOP: breakpoints.breakpointQueryAboveDesktop,
   DESKTOP_ONLY: breakpoints.breakpointQueryDesktopOnly
 };
+const useLegacyWarning = (query, legacy, isClient) => useMemo(() => {
+  if (isClient) {
+    // @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
+    if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
+      console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
+    }
+  }
+}, [isClient, legacy, query]);
 const BpkBreakpoint = ({
   children,
   legacy = false,
@@ -42,16 +50,14 @@ const BpkBreakpoint = ({
    * Consumers of BpkBreakpoint have become reliant on this behaviour particularly when using BpkBreakpoint within a SSR'd application.
    * This shouldn't be removed without a breaking change & understanding how to migrate consumers away from this reliance.
    */
-  const [isClient, setIsClient] = useState(false);
+  const [, updateState] = useState({});
   useEffect(() => {
-    setIsClient(true);
+    updateState({}); // force re-render when on client
   }, []);
   const matches = useMediaQuery(query, matchSSR);
+  const isClient = typeof window !== 'undefined';
+  useLegacyWarning(query, legacy, isClient);
   if (isClient) {
-    // @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
-    if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
-      console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
-    }
     if (typeof children === 'function') {
       return children(matches);
     }

package/bpk-component-button/BpkButtonDestructive.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonDestructive: (props: Props) => JSX.Element;
+export default BpkButtonDestructive;

package/bpk-component-button/BpkButtonDestructive.js

@@ -14,4 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonDestructive";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonDestructive = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  destructive: true
+});
+export default BpkButtonDestructive;

package/bpk-component-button/BpkButtonFeatured.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonFeatured: (props: Props) => JSX.Element;
+export default BpkButtonFeatured;

package/bpk-component-button/BpkButtonFeatured.js

@@ -14,4 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonFeatured";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonFeatured = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  featured: true
+});
+export default BpkButtonFeatured;

package/bpk-component-button/BpkButtonLink.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonLink: (props: Props) => JSX.Element;
+export default BpkButtonLink;

package/bpk-component-button/BpkButtonLink.js

@@ -14,4 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonLink";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonLink = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  link: true
+});
+export default BpkButtonLink;

package/bpk-component-button/BpkButtonLinkOnDark.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonLinkOnDark: (props: Props) => JSX.Element;
+export default BpkButtonLinkOnDark;

package/bpk-component-button/BpkButtonLinkOnDark.js

@@ -14,4 +14,11 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonLinkOnDark";
+ */
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonLinkOnDark = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  linkOnDark: true
+});
+export default BpkButtonLinkOnDark;

package/bpk-component-button/BpkButtonPrimary.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonPrimary: (props: Props) => JSX.Element;
+export default BpkButtonPrimary;

package/bpk-component-button/BpkButtonPrimary.js

@@ -14,4 +14,11 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonPrimary";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonPrimary = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props
+});
+export default BpkButtonPrimary;

package/bpk-component-button/BpkButtonPrimaryOnDark.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonPrimaryOnDark: (props: Props) => JSX.Element;
+export default BpkButtonPrimaryOnDark;

package/bpk-component-button/BpkButtonPrimaryOnDark.js

@@ -14,4 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonPrimaryOnDark";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonPrimaryOnDark = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  primaryOnDark: true
+});
+export default BpkButtonPrimaryOnDark;

package/bpk-component-button/BpkButtonPrimaryOnLight.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonPrimaryOnLight: (props: Props) => JSX.Element;
+export default BpkButtonPrimaryOnLight;

package/bpk-component-button/BpkButtonPrimaryOnLight.js

@@ -14,4 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonPrimaryOnLight";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonPrimaryOnLight = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  primaryOnLight: true
+});
+export default BpkButtonPrimaryOnLight;

package/bpk-component-button/BpkButtonSecondary.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonSecondary: (props: Props) => JSX.Element;
+export default BpkButtonSecondary;

package/bpk-component-button/BpkButtonSecondary.js

@@ -14,4 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonSecondary";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonSecondary = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  secondary: true
+});
+export default BpkButtonSecondary;

package/bpk-component-button/BpkButtonSecondaryOnDark.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type Props } from './src/BpkButton';
+declare const BpkButtonSecondaryOnDark: (props: Props) => JSX.Element;
+export default BpkButtonSecondaryOnDark;

package/bpk-component-button/BpkButtonSecondaryOnDark.js

@@ -14,4 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export { default } from "./src/BpkButtonSecondaryOnDark";
+ */
+
+import BpkButton from "./src/BpkButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkButtonSecondaryOnDark = props => /*#__PURE__*/_jsx(BpkButton, {
+  ...props,
+  secondaryOnDark: true
+});
+export default BpkButtonSecondaryOnDark;

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

@@ -1,13 +1,13 @@
+import BpkButtonDestructive from './BpkButtonDestructive';
+import BpkButtonFeatured from './BpkButtonFeatured';
+import BpkButtonLink from './BpkButtonLink';
+import BpkButtonLinkOnDark from './BpkButtonLinkOnDark';
+import BpkButtonPrimary from './BpkButtonPrimary';
+import BpkButtonPrimaryOnDark from './BpkButtonPrimaryOnDark';
+import BpkButtonPrimaryOnLight from './BpkButtonPrimaryOnLight';
+import BpkButtonSecondary from './BpkButtonSecondary';
+import BpkButtonSecondaryOnDark from './BpkButtonSecondaryOnDark';
 import BpkButton from './src/BpkButton';
-import BpkButtonDestructive from './src/BpkButtonDestructive';
-import BpkButtonFeatured from './src/BpkButtonFeatured';
-import BpkButtonLink from './src/BpkButtonLink';
-import BpkButtonLinkOnDark from './src/BpkButtonLinkOnDark';
-import BpkButtonPrimary from './src/BpkButtonPrimary';
-import BpkButtonPrimaryOnDark from './src/BpkButtonPrimaryOnDark';
-import BpkButtonPrimaryOnLight from './src/BpkButtonPrimaryOnLight';
-import BpkButtonSecondary from './src/BpkButtonSecondary';
-import BpkButtonSecondaryOnDark from './src/BpkButtonSecondaryOnDark';
 import { BpkButtonV2 } from './src/BpkButtonV2/BpkButton';
 export { BUTTON_TYPES, SIZE_TYPES } from './src/BpkButtonV2/common-types';
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, } from './themeAttributes';

package/bpk-component-button/index.js

@@ -16,26 +16,16 @@
  * limitations under the License.
  */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButton from "./src/BpkButton"; // eslint-disable-line import/no-named-as-default, import/no-named-as-default-member
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonDestructive from "./src/BpkButtonDestructive";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonFeatured from "./src/BpkButtonFeatured";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonLink from "./src/BpkButtonLink"; // eslint-disable-line import/no-named-as-default, import/no-named-as-default-member
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonLinkOnDark from "./src/BpkButtonLinkOnDark"; // eslint-disable-line import/no-named-as-default, import/no-named-as-default-member
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonPrimary from "./src/BpkButtonPrimary";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonPrimaryOnDark from "./src/BpkButtonPrimaryOnDark";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonPrimaryOnLight from "./src/BpkButtonPrimaryOnLight";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonSecondary from "./src/BpkButtonSecondary";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkButtonSecondaryOnDark from "./src/BpkButtonSecondaryOnDark";
+import BpkButtonDestructive from "./BpkButtonDestructive";
+import BpkButtonFeatured from "./BpkButtonFeatured";
+import BpkButtonLink from "./BpkButtonLink";
+import BpkButtonLinkOnDark from "./BpkButtonLinkOnDark";
+import BpkButtonPrimary from "./BpkButtonPrimary";
+import BpkButtonPrimaryOnDark from "./BpkButtonPrimaryOnDark";
+import BpkButtonPrimaryOnLight from "./BpkButtonPrimaryOnLight";
+import BpkButtonSecondary from "./BpkButtonSecondary";
+import BpkButtonSecondaryOnDark from "./BpkButtonSecondaryOnDark";
+import BpkButton from "./src/BpkButton";
 import { BpkButtonV2 } from "./src/BpkButtonV2/BpkButton";
 export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButtonV2/common-types";
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes } from "./themeAttributes";

package/bpk-component-button/src/BpkButton.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { type Props as CommonProps } from './common-types';
+export type Props = CommonProps & {
+    primaryOnDark?: boolean;
+    primaryOnLight?: boolean;
+    secondary?: boolean;
+    secondaryOnDark?: boolean;
+    destructive?: boolean;
+    featured?: boolean;
+    link?: boolean;
+    linkOnDark?: boolean;
+};
+declare const BpkButton: {
+    (props: Props): JSX.Element;
+    defaultProps: {
+        primaryOnDark: boolean;
+        primaryOnLight: boolean;
+        secondary: boolean;
+        secondaryOnDark: boolean;
+        destructive: boolean;
+        featured: boolean;
+        link: boolean;
+        linkOnDark: boolean;
+        href: null;
+        className: null;
+        disabled: boolean;
+        onClick: null;
+        submit: boolean;
+        large: boolean;
+        iconOnly: boolean;
+        blank: boolean;
+        rel: null;
+    };
+    propTypes: {
+        primaryOnDark: PropTypes.Requireable<boolean>;
+        primaryOnLight: PropTypes.Requireable<boolean>;
+        secondary: PropTypes.Requireable<boolean>;
+        secondaryOnDark: PropTypes.Requireable<boolean>;
+        destructive: PropTypes.Requireable<boolean>;
+        featured: PropTypes.Requireable<boolean>;
+        link: PropTypes.Requireable<boolean>;
+        linkOnDark: PropTypes.Requireable<boolean>;
+        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>;
+    };
+};
+export default BpkButton;

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

@@ -14,10 +14,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-
-// eslint-disable-next-line import/no-cycle
-import { BpkButtonPrimary, BpkButtonPrimaryOnDark, BpkButtonPrimaryOnLight, BpkButtonSecondary, BpkButtonSecondaryOnDark, BpkButtonDestructive, BpkButtonLink, BpkButtonLinkOnDark, BpkButtonFeatured } from "../index";
+ */
+import PropTypes from 'prop-types';
+import BpkButtonBase, { BUTTON_TYPES } from "./BpkButtonBase";
 import { propTypes, defaultProps } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButton = props => {
@@ -33,60 +32,57 @@ const BpkButton = props => {
     ...rest
   } = props;
   if (primaryOnDark) {
-    return /*#__PURE__*/_jsx(BpkButtonPrimaryOnDark, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.primaryOnDark,
       ...rest
     });
   }
   if (primaryOnLight) {
-    return /*#__PURE__*/_jsx(BpkButtonPrimaryOnLight, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.primaryOnLight,
       ...rest
     });
   }
   if (secondary) {
-    return /*#__PURE__*/_jsx(BpkButtonSecondary, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.secondary,
       ...rest
     });
   }
   if (secondaryOnDark) {
-    return /*#__PURE__*/_jsx(BpkButtonSecondaryOnDark, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.secondaryOnDark,
       ...rest
     });
   }
   if (destructive) {
-    return /*#__PURE__*/_jsx(BpkButtonDestructive, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.destructive,
       ...rest
     });
   }
   if (featured) {
-    return /*#__PURE__*/_jsx(BpkButtonFeatured, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.featured,
       ...rest
     });
   }
   if (link) {
-    return /*#__PURE__*/_jsx(BpkButtonLink, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.link,
       ...rest
     });
   }
   if (linkOnDark) {
-    return /*#__PURE__*/_jsx(BpkButtonLinkOnDark, {
+    return /*#__PURE__*/_jsx(BpkButtonBase, {
+      type: BUTTON_TYPES.linkOnDark,
       ...rest
     });
   }
-  return /*#__PURE__*/_jsx(BpkButtonPrimary, {
+  return /*#__PURE__*/_jsx(BpkButtonBase, {
     ...rest
   });
 };
-BpkButton.propTypes = {
-  ...propTypes,
-  primaryOnDark: PropTypes.bool,
-  primaryOnLight: PropTypes.bool,
-  secondary: PropTypes.bool,
-  secondaryOnDark: PropTypes.bool,
-  destructive: PropTypes.bool,
-  featured: PropTypes.bool,
-  link: PropTypes.bool,
-  linkOnDark: PropTypes.bool
-};
 BpkButton.defaultProps = {
   ...defaultProps,
   primaryOnDark: false,
@@ -98,4 +94,15 @@ BpkButton.defaultProps = {
   link: false,
   linkOnDark: false
 };
+BpkButton.propTypes = {
+  ...propTypes,
+  primaryOnDark: PropTypes.bool,
+  primaryOnLight: PropTypes.bool,
+  secondary: PropTypes.bool,
+  secondaryOnDark: PropTypes.bool,
+  destructive: PropTypes.bool,
+  featured: PropTypes.bool,
+  link: PropTypes.bool,
+  linkOnDark: PropTypes.bool
+};
 export default BpkButton;

package/bpk-component-button/src/BpkButtonBase.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { type Props } from './common-types';
+export declare const BUTTON_TYPES: {
+    readonly primary: "primary";
+    readonly primaryOnDark: "primary-on-dark";
+    readonly primaryOnLight: "primary-on-light";
+    readonly secondary: "secondary";
+    readonly secondaryOnDark: "secondary-on-dark";
+    readonly destructive: "destructive";
+    readonly featured: "featured";
+    readonly link: "link";
+    readonly linkOnDark: "link-on-dark";
+};
+type ValueOf<T> = T[keyof T];
+declare const BpkButtonBase: {
+    (props: Props & {
+        type?: ValueOf<{
+            readonly primary: "primary";
+            readonly primaryOnDark: "primary-on-dark";
+            readonly primaryOnLight: "primary-on-light";
+            readonly secondary: "secondary";
+            readonly secondaryOnDark: "secondary-on-dark";
+            readonly destructive: "destructive";
+            readonly featured: "featured";
+            readonly link: "link";
+            readonly linkOnDark: "link-on-dark";
+        }> | undefined;
+    }): JSX.Element;
+    propTypes: {
+        children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
+        href: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        disabled: import("prop-types").Requireable<boolean>;
+        onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        submit: import("prop-types").Requireable<boolean>;
+        large: import("prop-types").Requireable<boolean>;
+        iconOnly: import("prop-types").Requireable<boolean>;
+        blank: import("prop-types").Requireable<boolean>;
+        rel: import("prop-types").Requireable<string>;
+    };
+    defaultProps: {
+        href: null;
+        className: null;
+        disabled: boolean;
+        onClick: null;
+        submit: boolean;
+        large: boolean;
+        iconOnly: boolean;
+        blank: boolean;
+        rel: null;
+    };
+};
+export default BpkButtonBase;