@skyscanner/backpack-web 34.0.0-premajor.1 → 34.0.0

package/bpk-component-info-banner/src/BpkInfoBannerDismissable.d.ts

@@ -1,30 +1,8 @@
-/*
- * 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.
- */
-
 /// <reference types="react" />
 import type { CommonProps, OnDismissHandler } from './common-types';
-
 export type Props = CommonProps & {
-  dismissButtonLabel: string;
-  onDismiss?: OnDismissHandler;
+    dismissButtonLabel: string;
+    onDismiss?: OnDismissHandler;
 };
-declare const BpkInfoBannerDismissable: ({
-  onDismiss,
-  ...rest
-}: Props) => JSX.Element;
+declare const BpkInfoBannerDismissable: ({ onDismiss, ...rest }: Props) => JSX.Element;
 export default BpkInfoBannerDismissable;

package/bpk-component-info-banner/src/BpkInfoBannerExpandable.d.ts

@@ -1,37 +1,11 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { ReactNode } from 'react';
-
-import type { CommonProps, OnExpandToggleHandler } from './common-types';
-
+import type { CommonProps, OnExpandToggleHandler, ExpandableBannerAction } from './common-types';
 export type Props = CommonProps & {
-  children: ReactNode;
-  expanded?: boolean;
-  toggleButtonLabel: string;
-  onExpandToggle?: OnExpandToggleHandler;
-  action?: ExpandableBannerAction;
+    children: ReactNode;
+    expanded?: boolean;
+    toggleButtonLabel: string;
+    onExpandToggle?: OnExpandToggleHandler;
+    action?: ExpandableBannerAction;
 };
-declare const BpkInfoBannerExpandable: ({
-  action,
-  children,
-  expanded,
-  onExpandToggle,
-  ...rest
-}: Props) => JSX.Element;
+declare const BpkInfoBannerExpandable: ({ action, children, expanded, onExpandToggle, ...rest }: Props) => JSX.Element;
 export default BpkInfoBannerExpandable;

package/bpk-component-info-banner/src/BpkInfoBannerInner.d.ts

@@ -1,58 +1,19 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { ReactNode } from 'react';
-
-import type {
-  CommonProps,
-  OnDismissHandler,
-  OnExpandToggleHandler,
-} from './common-types';
-
+import type { CommonProps, OnDismissHandler, OnExpandToggleHandler, ExpandableBannerAction } from './common-types';
 export declare const CONFIGURATION: {
-  readonly NONE: 'none';
-  readonly DISMISSABLE: 'dismissable';
-  readonly EXPANDABLE: 'expandable';
+    readonly NONE: "none";
+    readonly DISMISSABLE: "dismissable";
+    readonly EXPANDABLE: "expandable";
 };
 type Props = CommonProps & {
-  configuration?: (typeof CONFIGURATION)[keyof typeof CONFIGURATION];
-  children?: ReactNode | string;
-  expanded?: boolean;
-  toggleButtonLabel?: string;
-  onExpandToggle?: OnExpandToggleHandler;
-  dismissButtonLabel?: string;
-  onDismiss?: OnDismissHandler;
+    action?: ExpandableBannerAction;
+    configuration?: (typeof CONFIGURATION)[keyof typeof CONFIGURATION];
+    children?: ReactNode | string;
+    expanded?: boolean;
+    toggleButtonLabel?: string;
+    onExpandToggle?: OnExpandToggleHandler;
+    dismissButtonLabel?: string;
+    onDismiss?: OnDismissHandler;
 };
-declare const BpkInfoBannerInner: ({
-  animateOnEnter,
-  animateOnLeave,
-  bannerClassName,
-  children,
-  configuration,
-  dismissButtonLabel,
-  expanded,
-  icon,
-  message,
-  onDismiss,
-  onExpandToggle,
-  show,
-  toggleButtonLabel,
-  type,
-  ...rest
-}: Props) => JSX.Element;
+declare const BpkInfoBannerInner: ({ action, animateOnEnter, animateOnLeave, bannerClassName, children, configuration, dismissButtonLabel, expanded, icon, message, onDismiss, onExpandToggle, show, style, toggleButtonLabel, type, ...rest }: Props) => JSX.Element;
 export default BpkInfoBannerInner;

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -20,7 +20,6 @@
  * `BpkInfoBannerDismissable` and `BpkInfoBannerExpandable`.
  */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -28,13 +27,9 @@ import BpkAnimateHeight from "../../bpk-animate-height";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import ChevronUpIcon from "../../bpk-component-icon/sm/chevron-up";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLink from "../../bpk-component-link";

package/bpk-component-info-banner/src/common-types.d.ts

@@ -1,50 +1,31 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { FunctionComponent, ReactNode } from 'react';
-
 export declare const ALERT_TYPES: {
-  readonly SUCCESS: 'success',
-  readonly WARNING: 'warning',
-  readonly ERROR: 'error',
-  readonly INFO: 'info',
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+    readonly INFO: "info";
 };
 export declare const STYLE_TYPES: {
-  readonly DEFAULT: 'default',
-  readonly ON_CONTRAST: 'onContrast',
+    DEFAULT: string;
+    ON_CONTRAST: string;
 };
 export type AlertTypeValue = (typeof ALERT_TYPES)[keyof typeof ALERT_TYPES];
 export type StyleTypeValue = (typeof STYLE_TYPES)[keyof typeof STYLE_TYPES];
 export type CommonProps = {
-  type?: AlertTypeValue;
-  message: ReactNode | string;
-  animateOnEnter?: boolean;
-  animateOnLeave?: boolean;
-  show?: boolean;
-  bannerClassName?: string | null;
-  icon?: FunctionComponent<any> | null;
-  style?: StyleTypeValue;
-  [rest: string]: any;
+    type?: AlertTypeValue;
+    message: ReactNode | string;
+    animateOnEnter?: boolean;
+    animateOnLeave?: boolean;
+    show?: boolean;
+    bannerClassName?: string | null;
+    icon?: FunctionComponent<any> | null;
+    style?: StyleTypeValue;
+    [rest: string]: any;
 };
-export type OnExpandToggleHandler =
-  | ((expanded: boolean) => void)
-  | null
-  | undefined;
-export type ExpandableBannerAction = { title: string, callback: () => void } | null | undefined;
+export type OnExpandToggleHandler = ((expanded: boolean) => void) | null | undefined;
+export type ExpandableBannerAction = {
+    title: string;
+    callback: () => void;
+} | null | undefined;
 export type OnDismissHandler = (() => void) | null | undefined;
 export type OnHideHandler = (() => void) | null | undefined;

package/bpk-component-info-banner/src/withBannerAlertState.d.ts

@@ -1,168 +1,95 @@
-/*
- * 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.
- */
-
 /// <reference types="node" />
 import type { ComponentType } from 'react';
 export type WithBannerAlertStateProps = {
-  onHide?: () => void;
-  hideAfter?: number;
+    onHide?: () => void;
+    hideAfter?: number;
 };
-declare const withBannerAlertState: <
-  P extends Partial<
-    import('./common-types').CommonProps & {
-      dismissButtonLabel: string;
-      onDismiss?: import('./common-types').OnDismissHandler;
-    } & {
-      children: import('react').ReactNode;
-      expanded?: boolean | undefined;
-      toggleButtonLabel: string;
-      onExpandToggle?: import('./common-types').OnExpandToggleHandler;
-    }
-  >,
->(
-  WrappedComponent: ComponentType<P>,
-) => {
-  new (props: P & WithBannerAlertStateProps): {
-    hideIntervalId?: NodeJS.Timeout | null | undefined;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    onExpandToggle: () => void;
-    onDismiss: () => void;
-    onHide: () => void;
-    render(): JSX.Element;
-    context: any;
-    setState<
-      K extends keyof {
-        expanded?: boolean | undefined;
-        show?: boolean | undefined;
-      },
-    >(
-      state:
-        | {
+declare const withBannerAlertState: <P extends Partial<import("./common-types").CommonProps & {
+    dismissButtonLabel: string;
+    onDismiss?: import("./common-types").OnDismissHandler;
+} & {
+    children: import("react").ReactNode;
+    expanded?: boolean | undefined;
+    toggleButtonLabel: string;
+    onExpandToggle?: import("./common-types").OnExpandToggleHandler;
+    action?: import("./common-types").ExpandableBannerAction;
+}>>(WrappedComponent: ComponentType<P>) => {
+    new (props: P & WithBannerAlertStateProps): {
+        hideIntervalId?: NodeJS.Timeout | null | undefined;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onExpandToggle: () => void;
+        onDismiss: () => void;
+        onHide: () => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof {
             expanded?: boolean | undefined;
             show?: boolean | undefined;
-          }
-        | ((
-            prevState: Readonly<{
-              expanded?: boolean | undefined;
-              show?: boolean | undefined;
-            }>,
-            props: Readonly<P & WithBannerAlertStateProps>,
-          ) =>
-            | {
-                expanded?: boolean | undefined;
-                show?: boolean | undefined;
-              }
-            | Pick<
-                {
-                  expanded?: boolean | undefined;
-                  show?: boolean | undefined;
-                },
-                K
-              >
-            | null)
-        | Pick<
-            {
-              expanded?: boolean | undefined;
-              show?: boolean | undefined;
-            },
-            K
-          >
-        | null,
-      callback?: (() => void) | undefined,
-    ): void;
-    forceUpdate(callback?: (() => void) | undefined): void;
-    readonly props: Readonly<P & WithBannerAlertStateProps> &
-      Readonly<{
-        children?: import('react').ReactNode;
-      }>;
-    state: Readonly<{
-      expanded?: boolean | undefined;
-      show?: boolean | undefined;
-    }>;
-    refs: {
-      [key: string]: import('react').ReactInstance;
+        }>(state: {
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        } | ((prevState: Readonly<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }>, props: Readonly<P & WithBannerAlertStateProps>) => {
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        } | Pick<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }, K> | null) | Pick<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & WithBannerAlertStateProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextState: Readonly<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }>): any;
+        componentDidUpdate?(prevProps: Readonly<P & WithBannerAlertStateProps>, prevState: Readonly<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextState: Readonly<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithBannerAlertStateProps>, nextState: Readonly<{
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+        }>, nextContext: any): void;
+    };
+    displayName: string;
+    defaultProps: {
+        onDismiss: null;
+        onExpandToggle: null;
+        onHide: null;
+        expanded: boolean;
+        show: boolean;
+        hideAfter: null;
+        animateOnLeave: boolean;
+        children: null;
     };
-    shouldComponentUpdate?(
-      nextProps: Readonly<P & WithBannerAlertStateProps>,
-      nextState: Readonly<{
-        expanded?: boolean | undefined;
-        show?: boolean | undefined;
-      }>,
-      nextContext: any,
-    ): boolean;
-    componentDidCatch?(
-      error: Error,
-      errorInfo: import('react').ErrorInfo,
-    ): void;
-    getSnapshotBeforeUpdate?(
-      prevProps: Readonly<P & WithBannerAlertStateProps>,
-      prevState: Readonly<{
-        expanded?: boolean | undefined;
-        show?: boolean | undefined;
-      }>,
-    ): any;
-    componentDidUpdate?(
-      prevProps: Readonly<P & WithBannerAlertStateProps>,
-      prevState: Readonly<{
-        expanded?: boolean | undefined;
-        show?: boolean | undefined;
-      }>,
-      snapshot?: any,
-    ): void;
-    componentWillMount?(): void;
-    UNSAFE_componentWillMount?(): void;
-    componentWillReceiveProps?(
-      nextProps: Readonly<P & WithBannerAlertStateProps>,
-      nextContext: any,
-    ): void;
-    UNSAFE_componentWillReceiveProps?(
-      nextProps: Readonly<P & WithBannerAlertStateProps>,
-      nextContext: any,
-    ): void;
-    componentWillUpdate?(
-      nextProps: Readonly<P & WithBannerAlertStateProps>,
-      nextState: Readonly<{
-        expanded?: boolean | undefined;
-        show?: boolean | undefined;
-      }>,
-      nextContext: any,
-    ): void;
-    UNSAFE_componentWillUpdate?(
-      nextProps: Readonly<P & WithBannerAlertStateProps>,
-      nextState: Readonly<{
-        expanded?: boolean | undefined;
-        show?: boolean | undefined;
-      }>,
-      nextContext: any,
-    ): void;
-  };
-  displayName: string;
-  defaultProps: {
-    onDismiss: null;
-    onExpandToggle: null;
-    onHide: null;
-    expanded: boolean;
-    show: boolean;
-    hideAfter: null;
-    animateOnLeave: boolean;
-    children: null;
-  };
-  contextType?: import('react').Context<any> | undefined;
+    contextType?: import("react").Context<any> | undefined;
 };
 export default withBannerAlertState;

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

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

package/bpk-component-input/src/BpkInput.d.ts

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

package/bpk-component-input/src/BpkInput.js

@@ -17,12 +17,14 @@
  */
 
 import { Component } from 'react';
+import { withButtonAlignment } from "../../bpk-component-icon";
+import ClearIcon from "../../bpk-component-icon/sm/close-circle";
 import { cssModules } from "../../bpk-react-utils";
-import BpkClearButton from "./BpkClearButton";
 import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
 import STYLES from "./BpkInput.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const ClearButtonIcon = withButtonAlignment(ClearIcon);
 class BpkInput extends Component {
   static defaultProps = defaultProps;
   constructor(props) {
@@ -118,9 +120,11 @@ class BpkInput extends Component {
     };
     return clearable ? /*#__PURE__*/_jsxs("div", {
       className: containerClassNames.join(' '),
-      children: [renderedInput, value.length > 0 && /*#__PURE__*/_jsx(BpkClearButton, {
+      children: [renderedInput, value.length > 0 && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        title: clearButtonLabel || '',
+        "aria-label": clearButtonLabel || '',
         tabIndex: -1,
-        label: clearButtonLabel || '',
         onMouseDown: onMouseDown,
         onClick: e => {
           if (ref) {
@@ -138,11 +142,13 @@ class BpkInput extends Component {
               persistClearButton: false
             });
           }
-        }
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
-        className: clearButtonClassNames.join(' ')
+        },
+        className: clearButtonClassNames.join(' '),
+        children: /*#__PURE__*/_jsx(ClearButtonIcon, {
+          focusable: "false" // prevents focus on IE11
+          ,
+          fill: "currentcolor"
+        })
       })]
     }) : renderedInput;
   }

package/bpk-component-input/src/BpkInput.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.25rem;background:#fff;color:#161616;appearance:none}.bpk-input::placeholder{color:#626971}.bpk-input:disabled{border-color:#eff3f8;background:#fff;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-input[type=number]{-moz-appearance:textfield}.bpk-input[type=number]::-webkit-inner-spin-button,.bpk-input[type=number]::-webkit-outer-spin-button{appearance:none}html[dir=rtl] .bpk-input[type=number],html[dir=rtl] .bpk-input[type=tel],html[dir=rtl] .bpk-input[type=email]{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:.5rem;height:2.25rem}html[dir=rtl] .bpk-input__clear-button{right:inherit;left:.5rem}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir=rtl] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1rem 1rem}html[dir=rtl] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right .5rem center;background-size:1rem 1rem;border-color:#e70866;border-color:var(--bpk-input-invalid-border-color, rgb(231, 8, 102))}html[dir=rtl] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--clearable{padding-right:2rem}html[dir=rtl] .bpk-input--clearable{padding-right:.5rem;padding-left:2rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--large{height:3rem;padding-right:1rem;padding-left:1rem}.bpk-input--large.bpk-input--valid,.bpk-input--large.bpk-input--invalid,.bpk-input--large.bpk-input--clearable{padding-right:2.5rem;background-position:right 1rem center}html[dir=rtl] .bpk-input--large.bpk-input--valid,html[dir=rtl] .bpk-input--large.bpk-input--invalid,html[dir=rtl] .bpk-input--large.bpk-input--clearable{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir=rtl] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir=rtl] .bpk-input--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir=rtl] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir=rtl] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir=rtl] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .25rem .25rem 0}html[dir=rtl] .bpk-input--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-input--docked-last:focus{position:relative}.bpk-input--with-open-events{cursor:pointer}
+.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.25rem;background:#fff;color:#161616;appearance:none}.bpk-input::placeholder{color:#626971}.bpk-input:disabled{border-color:#eff3f8;background:#fff;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-input[type=number]{-moz-appearance:textfield}.bpk-input[type=number]::-webkit-inner-spin-button,.bpk-input[type=number]::-webkit-outer-spin-button{appearance:none}html[dir=rtl] .bpk-input[type=number],html[dir=rtl] .bpk-input[type=tel],html[dir=rtl] .bpk-input[type=email]{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input[data-openable]{cursor:pointer}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:.5rem;height:2.25rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none}html[dir=rtl] .bpk-input__clear-button{right:inherit;left:.5rem}.bpk-no-touch-support .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-input__clear-button:active{color:#161616}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir=rtl] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1rem 1rem}html[dir=rtl] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right .5rem center;background-size:1rem 1rem;border-color:#e70866;border-color:var(--bpk-input-invalid-border-color, rgb(231, 8, 102))}html[dir=rtl] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--clearable{padding-right:2rem}html[dir=rtl] .bpk-input--clearable{padding-right:.5rem;padding-left:2rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--large{height:3rem;padding-right:1rem;padding-left:1rem}.bpk-input--large.bpk-input--valid,.bpk-input--large.bpk-input--invalid,.bpk-input--large.bpk-input--clearable{padding-right:2.5rem;background-position:right 1rem center}html[dir=rtl] .bpk-input--large.bpk-input--valid,html[dir=rtl] .bpk-input--large.bpk-input--invalid,html[dir=rtl] .bpk-input--large.bpk-input--clearable{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir=rtl] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir=rtl] .bpk-input--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir=rtl] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir=rtl] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir=rtl] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .25rem .25rem 0}html[dir=rtl] .bpk-input--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-input--docked-last:focus{position:relative}

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

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

package/bpk-component-input/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;