@skyscanner/backpack-web 33.6.0 → 33.7.0

package/bpk-component-section-header/index.d.ts

@@ -1,22 +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 BpkSectionHeader, { SECTION_TYPES } from './src/BpkSectionHeader';
-
 export default BpkSectionHeader;
 export { SECTION_TYPES };

package/bpk-component-section-header/src/BpkSectionHeader.d.ts

@@ -1,32 +1,14 @@
-/*
- * 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';
 export declare const SECTION_TYPES: {
-  default: 'default',
-  onDark: 'onDark',
+    readonly default: "default";
+    readonly onDark: "on-dark";
 };
 export type SectionType = (typeof SECTION_TYPES)[keyof typeof SECTION_TYPES];
 type Props = {
-  title: string;
-  description?: string;
-  button?: ReactNode;
-  type?: SectionType;
+    title: string;
+    description?: string;
+    button?: ReactNode;
+    type?: SectionType;
 };
-declare const BpkSectionHeader: ({ title, description, button, type }: Props) => JSX.Element;
+declare const BpkSectionHeader: ({ button, description, title, type, }: Props) => JSX.Element;
 export default BpkSectionHeader;

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

@@ -0,0 +1,3 @@
+import BpkSkeleton from "./src/BpkSkeleton";
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from './src/common-types';
+export default BpkSkeleton;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    skeletonStyle: string;
+    styleObj?: {
+        width: string;
+        height: string;
+    };
+};
+declare const BpkBaseSkeleton: ({ skeletonStyle, styleObj }: Props) => JSX.Element;
+export default BpkBaseSkeleton;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CUSTOM_SIZE_TYPE } from './common-types';
+type Props = {
+    skeletonStyle: string;
+    styleObj?: CUSTOM_SIZE_TYPE;
+};
+declare const BpkBaseSkeleton: ({ skeletonStyle, styleObj, }: Props) => JSX.Element;
+export default BpkBaseSkeleton;

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

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

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

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

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

@@ -0,0 +1,37 @@
+export type CUSTOM_SIZE_TYPE = {
+    width: string;
+    height: string;
+};
+export declare const SIZE_TYPES: {
+    small: 'small';
+    default: 'default';
+    large: 'large';
+};
+export type SizeType = (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES] | CUSTOM_SIZE_TYPE;
+export declare const SKELETON_TYPES: {
+    image: 'image';
+    bodyText: 'bodyText';
+    circle: 'circle';
+    headline: 'headline';
+};
+export type SkeletonType = (typeof SKELETON_TYPES)[keyof typeof SKELETON_TYPES];
+export declare const IMAGE_SKELETON_STYLE: {
+    rounded: 'rounded';
+    default: 'default';
+};
+export type ImageSkeletonStyle = (typeof IMAGE_SKELETON_STYLE)[keyof typeof IMAGE_SKELETON_STYLE];
+type SizeMap = {
+    [SKELETON_TYPES.image]: (typeof SIZE_TYPES)['default'];
+    [SKELETON_TYPES.bodyText]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+    [SKELETON_TYPES.circle]: Exclude<(typeof SIZE_TYPES)[keyof typeof SIZE_TYPES], 'large'>;
+    [SKELETON_TYPES.headline]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+};
+export type ComponentProps = {
+    type: Extract<SkeletonType, 'image'>;
+    size?: SizeMap['image'] | CUSTOM_SIZE_TYPE;
+    style?: ImageSkeletonStyle;
+} | {
+    type: Exclude<keyof SizeMap, 'image'>;
+    size?: SizeMap[keyof SizeMap] | CUSTOM_SIZE_TYPE;
+};
+export {};

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

@@ -0,0 +1,37 @@
+export type CUSTOM_SIZE_TYPE = {
+    width: string;
+    height: string;
+};
+export declare const SIZE_TYPES: {
+    readonly small: "small";
+    readonly default: "default";
+    readonly large: "large";
+};
+export type SizeType = (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES] | CUSTOM_SIZE_TYPE;
+export declare const SKELETON_TYPES: {
+    readonly image: "image";
+    readonly bodyText: "bodyText";
+    readonly circle: "circle";
+    readonly headline: "headline";
+};
+export type SkeletonType = (typeof SKELETON_TYPES)[keyof typeof SKELETON_TYPES];
+export declare const IMAGE_SKELETON_STYLE: {
+    readonly rounded: "rounded";
+    readonly default: "default";
+};
+export type ImageSkeletonStyle = (typeof IMAGE_SKELETON_STYLE)[keyof typeof IMAGE_SKELETON_STYLE];
+type SizeMap = {
+    [SKELETON_TYPES.image]: (typeof SIZE_TYPES)['default'];
+    [SKELETON_TYPES.bodyText]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+    [SKELETON_TYPES.circle]: Exclude<(typeof SIZE_TYPES)[keyof typeof SIZE_TYPES], 'large'>;
+    [SKELETON_TYPES.headline]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+};
+export type ComponentProps = {
+    type: Extract<SkeletonType, 'image'>;
+    size?: SizeMap['image'] | CUSTOM_SIZE_TYPE;
+    style?: ImageSkeletonStyle;
+} | {
+    type: Exclude<keyof SizeMap, 'image'>;
+    size?: SizeMap[keyof SizeMap] | CUSTOM_SIZE_TYPE;
+};
+export {};

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

@@ -0,0 +1,4 @@
+import BpkSlider from './src/BpkSlider';
+import themeAttributes from './src/themeAttributes';
+export default BpkSlider;
+export { themeAttributes };

package/bpk-component-slider/src/BpkSlider.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+type Props = {
+    className?: string | null;
+    [rest: string]: any;
+};
+declare const BpkSlider: {
+    (props: Props): JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        className: null;
+    };
+};
+export default BpkSlider;

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

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

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

@@ -0,0 +1,6 @@
+import BpkExtraLargeSpinner from './src/BpkExtraLargeSpinner';
+import BpkLargeSpinner from './src/BpkLargeSpinner';
+import BpkSpinner from './src/BpkSpinner';
+import SPINNER_TYPES from './src/spinnerTypes';
+import themeAttributes from './src/themeAttributes';
+export { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES, themeAttributes, };

package/bpk-component-spinner/index.js

@@ -14,7 +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 BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
+ */
+
+import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
 import BpkLargeSpinner from "./src/BpkLargeSpinner";
 import BpkSpinner from "./src/BpkSpinner";
 import SPINNER_TYPES from "./src/spinnerTypes";

package/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import SPINNER_TYPES from './spinnerTypes';
+type Props = {
+    type: keyof typeof SPINNER_TYPES;
+    className?: string;
+};
+declare const BpkExtraLargeSpinner: {
+    (props: Props): JSX.Element;
+    propTypes: {
+        type: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        type: string;
+        className: null;
+    };
+};
+export default BpkExtraLargeSpinner;

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -15,7 +15,9 @@ import React from "react";
  * 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 PropTypes from 'prop-types';
 var XlSpinner = function XlSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -88,9 +90,7 @@ const BpkExtraLargeSpinner = props => {
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
-    children: /*#__PURE__*/_jsx(XlSpinner
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    , {
+    children: /*#__PURE__*/_jsx(XlSpinner, {
       ...rest
     })
   });

package/bpk-component-spinner/src/BpkLargeSpinner.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import SPINNER_TYPES from './spinnerTypes';
+type Props = {
+    type: keyof typeof SPINNER_TYPES;
+    className?: string;
+    alignToButton: boolean;
+};
+declare const BpkLargeSpinner: {
+    (props: Props): JSX.Element;
+    propTypes: {
+        type: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        alignToButton: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        type: string;
+        className: null;
+        alignToButton: boolean;
+    };
+};
+export default BpkLargeSpinner;

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -15,7 +15,9 @@ import React from "react";
  * 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 PropTypes from 'prop-types';
 var LgSpinner = function LgSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -89,9 +91,7 @@ const BpkLargeSpinner = props => {
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--large', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-large-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
-    children: /*#__PURE__*/_jsx(LgSpinner
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    , {
+    children: /*#__PURE__*/_jsx(LgSpinner, {
       ...rest
     })
   });

package/bpk-component-spinner/src/BpkSpinner.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import SPINNER_TYPES from './spinnerTypes';
+type Props = {
+    type: keyof typeof SPINNER_TYPES;
+    className?: string;
+    alignToButton: boolean;
+};
+declare const BpkSpinner: {
+    (props: Props): JSX.Element;
+    propTypes: {
+        type: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        alignToButton: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        type: string;
+        className: null;
+        alignToButton: boolean;
+    };
+};
+export default BpkSpinner;

package/bpk-component-spinner/src/BpkSpinner.js

@@ -15,7 +15,9 @@ import React from "react";
  * 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 PropTypes from 'prop-types';
 var SmSpinner = function SmSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -76,9 +78,7 @@ const BpkSpinner = props => {
   const classNames = getClassName('bpk-spinner', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
-    children: /*#__PURE__*/_jsx(SmSpinner
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    , {
+    children: /*#__PURE__*/_jsx(SmSpinner, {
       ...rest
     })
   });

package/bpk-component-spinner/src/spinnerTypes.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    primary: string;
+    light: string;
+    dark: string;
+};
+export default _default;

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

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

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

@@ -1,21 +1,3 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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 BpkSwapButton, { type Props as BpkSwapButtonProps, SWAPBUTTON_STYLES } from './src/BpkSwapButton';
 export type { BpkSwapButtonProps };
 export default BpkSwapButton;

package/bpk-component-swap-button/src/BpkSwapButton.d.ts

@@ -1,21 +1,4 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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" />
 export declare const SWAPBUTTON_STYLES: {
     surfaceContrast: string;
     canvasDefault: string;
@@ -27,9 +10,5 @@ export type Props = {
     ariaLabel: string;
     swapButtonStyle?: SwapButtonStyle;
 };
-declare const BpkSwapButton: ({
-    ariaLabel,
-    onClick,
-    swapButtonStyle,
-} : Props) => JSX.Element;
+declare const BpkSwapButton: (props: Props) => JSX.Element;
 export default BpkSwapButton;

package/bpk-component-swap-button/src/BpkSwapButton.js

@@ -17,8 +17,6 @@
  */
 
 import { useState } from 'react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import SwapVertical from "../../bpk-component-icon/sm/swap--vertical";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSwapButton.module.css";

package/bpk-component-text/index.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, { TEXT_STYLES } from './src/BpkText';
 export default component;
 export { TEXT_STYLES };

package/bpk-component-text/src/BpkText.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 type { ReactNode } from 'react';
 export declare const TEXT_STYLES: {
     readonly xs: "xs";
@@ -46,7 +28,7 @@ export declare const TEXT_STYLES: {
     readonly hero4: "hero-4";
     readonly hero5: "hero-5";
 };
-export type TextStyle = typeof TEXT_STYLES[keyof typeof TEXT_STYLES];
+export type TextStyle = (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];
 export type Tag = 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 type Props = {
     children: ReactNode;
@@ -56,5 +38,5 @@ type Props = {
     id?: string;
     [rest: string]: any;
 };
-declare const BpkText: ({ textStyle, tagName: TagName, className, children, ...rest }: Props) => JSX.Element;
+declare const BpkText: ({ children, className, tagName: TagName, textStyle, ...rest }: Props) => JSX.Element;
 export default BpkText;

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

@@ -1,24 +1,6 @@
-/*
- * 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 BpkTooltipPortal from './src/BpkTooltipPortal';
-import type { Props } from './src/BpkTooltipPortal';
 import { TOOLTIP_TYPES } from './src/constants';
+import type { Props } from './src/BpkTooltipPortal';
 export type BpkTooltipPortalProps = Props;
 export default BpkTooltipPortal;
 export { TOOLTIP_TYPES };

package/bpk-component-tooltip/src/BpkTooltip.d.ts

@@ -1,27 +1,9 @@
-/*
- * 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 { TOOLTIP_TYPES } from './constants';
 export type TooltipProps = {
     id: string;
     children: ReactNode | string;
-    type?: typeof TOOLTIP_TYPES[keyof typeof TOOLTIP_TYPES];
+    type?: (typeof TOOLTIP_TYPES)[keyof typeof TOOLTIP_TYPES];
     padded?: boolean;
     className?: string | null;
 };

package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts

@@ -1,24 +1,6 @@
-/*
- * 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 { createPopper } from '@popperjs/core';
 import { Component } from 'react';
 import type { ReactNode, ReactElement } from 'react';
+import { createPopper } from '@popperjs/core';
 import type { TooltipProps } from './BpkTooltip';
 export type Props = TooltipProps & {
     /**

package/bpk-component-tooltip/src/constants.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.
- */
-
 export declare const ARROW_ID = "js-bpk-popover-arrow";
 export declare const TOOLTIP_TYPES: {
     readonly light: "light";

package/bpk-mixins/_forms.scss

@@ -186,11 +186,27 @@
   right: bpk-spacing-md();
   height: $bpk-input-height;
 
+  // remove any default button styling
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: tokens.$bpk-text-secondary-day;
+  cursor: pointer;
+  appearance: none; // hidden by default
+
   @include bpk-rtl {
     right: inherit;
     left: bpk-spacing-md();
   }
 
+  @include utils.bpk-hover {
+    color: tokens.$bpk-text-primary-day;
+  }
+
+  &:active {
+    color: tokens.$bpk-text-primary-day;
+  }
+
   &--large {
     right: bpk-spacing-base();
     height: $bpk-input-large-height;