@sprinklrjs/spaceweb 10.1.0

package/modal/modal.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ModalProps } from './types';
+declare const _default: React.MemoExoticComponent<{
+    ({ size, role, ariaLabel, overrides, ...props }: ModalProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+}>;
+export default _default;

package/modal/modal.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = (0, tslib_1.__importStar)(require("react"));
+var button_1 = require("../button");
+var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
+var style_1 = require("../style");
+var adapter_1 = require("./adapter");
+var overrides_1 = require("./overrides");
+var styled_components_1 = require("./styled-components");
+var helpers_1 = require("../helpers");
+var CloseButton = function (closeProps) { return ((0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({}, closeProps, { children: (0, jsx_runtime_1.jsx)(close_1.default, {}, void 0) }), void 0)); };
+var Modal = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.role, role = _c === void 0 ? 'dialog' : _c, ariaLabel = _a.ariaLabel, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["size", "role", "ariaLabel", "overrides"]);
+    var utils = (0, style_1.useStyle)();
+    var theme = utils.theme;
+    var sharedProps = (0, helpers_1.add$props)({ dialogSize: size });
+    var _overrides = (0, useConvertOverrides_1.useConvertOverrides)({
+        DialogContainer: { style: overrides_1.getDialogContainerStyles, props: sharedProps },
+        Dialog: {
+            style: overrides_1.getDialogStyles,
+            props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (ariaLabel ? { 'aria-label': ariaLabel } : undefined)), sharedProps),
+        },
+        Close: {
+            component: CloseButton,
+            props: (0, overrides_1.getCloseButtonProps)(utils, sharedProps),
+        },
+        Backdrop: { style: overrides_1.getBackdropStyles, props: sharedProps },
+    }, overrides, [overrides, theme]);
+    // NOTE: `unstable_ModalBackdropScroll` is to make compatible for future version.
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledModal, (0, tslib_1.__assign)({}, props, { size: (0, adapter_1.getWidthFromSize)(utils, size), role: adapter_1.roleMap[role], unstable_ModalBackdropScroll: true, overrides: _overrides }), void 0));
+};
+Modal.displayName = 'Modal';
+exports.default = React.memo(Modal);

package/modal/overrides.d.ts

@@ -0,0 +1,9 @@
+import { IconButtonProps } from '../button/IconButton';
+import { Styles, StyleUtils } from '../types';
+import { SharedProps } from './types';
+export declare const getDialogContainerStyles: Styles;
+export declare const getDialogStyles: Styles;
+export declare const getBackdropStyles: Styles;
+export declare const getCloseButtonProps: ({ px2rem, direction, theme }: StyleUtils, { $dialogSize }: {
+    $dialogSize: SharedProps['$size'];
+}) => IconButtonProps;

package/modal/overrides.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCloseButtonProps = exports.getBackdropStyles = exports.getDialogStyles = exports.getDialogContainerStyles = void 0;
+var tslib_1 = require("tslib");
+var getDialogHeightControl = function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $dialogSize = _b.$dialogSize;
+    switch ($dialogSize) {
+        case 'sm':
+            return { maxHeight: px2rem(560) };
+        case 'md':
+            return { maxHeight: px2rem(660) };
+        case 'lg':
+            return { height: '90%' };
+        case 'fullPage':
+            return {
+                width: '94vw',
+                height: '88vh',
+                marginTop: px2rem(44),
+            };
+        default:
+            return undefined;
+    }
+};
+var getDialogContainerHeightControl = function (utils, _a) {
+    var $dialogSize = _a.$dialogSize;
+    return ($dialogSize === 'lg' ? 'h-full' : '');
+};
+var transitionDuration = function (_a, _b) {
+    var theme = _a.theme;
+    var $animate = _b.$animate;
+    return ($animate ? { transitionDuration: '200ms' } : {});
+};
+exports.getDialogContainerStyles = [
+    'border-box spr-overlay',
+    getDialogContainerHeightControl,
+    transitionDuration,
+];
+exports.getDialogStyles = [
+    'transform-none flex flex-col spr-shadow-02 rounded-8',
+    getDialogHeightControl,
+    transitionDuration,
+];
+exports.getBackdropStyles = [transitionDuration];
+var getCloseButtonProps = function (_a, _b) {
+    var _c;
+    var px2rem = _a.px2rem, direction = _a.direction, theme = _a.theme;
+    var $dialogSize = _b.$dialogSize;
+    var buttonDirection = direction === 'rtl' ? 'left' : 'right';
+    return {
+        size: 'sm',
+        overrides: {
+            BaseButton: {
+                style: (0, tslib_1.__assign)((_c = { position: 'absolute', top: px2rem(16) }, _c[buttonDirection] = px2rem(20), _c), ($dialogSize === 'fullPage'
+                    ? {
+                        top: px2rem(-44),
+                        right: px2rem(0),
+                        backgroundColor: theme.spr.ui01,
+                        color: theme.spr.icon02,
+                        borderColor: theme.borderColor.transparent,
+                        ':hover': {
+                            color: theme.spr.ui04,
+                            backgroundColor: theme.spr.ui06,
+                        },
+                    }
+                    : {})),
+            },
+        },
+    };
+};
+exports.getCloseButtonProps = getCloseButtonProps;

package/modal/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/modal/index.js"
+}

package/modal/styled-components.d.ts

@@ -0,0 +1,7 @@
+import { ModalProps as BaseModalProps } from 'baseui/modal';
+import * as React from 'react';
+export { StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+export declare const StyledModal: React.ComponentType<BaseModalProps>;
+export declare const StyledModalHeader: import("../style/styled").StyledComponent;
+export declare const ModalBody: import("../style/styled").StyledComponent;
+export declare const StyledModalFooter: import("../style/styled").StyledComponent;

package/modal/styled-components.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledModalFooter = exports.ModalBody = exports.StyledModalHeader = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledClose = exports.StyledBackdrop = exports.StyledRoot = void 0;
+var tslib_1 = require("tslib");
+var modal_1 = require("baseui/modal");
+var withThemeOverride_1 = (0, tslib_1.__importDefault)(require("../helpers/baseui/withThemeOverride"));
+var style_1 = require("../style");
+var modal_2 = require("baseui/modal");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return modal_2.StyledRoot; } });
+Object.defineProperty(exports, "StyledBackdrop", { enumerable: true, get: function () { return modal_2.StyledBackdrop; } });
+Object.defineProperty(exports, "StyledClose", { enumerable: true, get: function () { return modal_2.StyledClose; } });
+Object.defineProperty(exports, "StyledDialog", { enumerable: true, get: function () { return modal_2.StyledDialog; } });
+Object.defineProperty(exports, "StyledDialogContainer", { enumerable: true, get: function () { return modal_2.StyledDialogContainer; } });
+// @ts-ignore
+modal_1.Modal.displayName = 'BaseUIModal';
+exports.StyledModal = (0, withThemeOverride_1.default)(modal_1.Modal, function (theme) { return ({
+    colors: {
+        backgroundPrimary: theme.spr.popup,
+        modalCloseColor: theme.spr.icon02,
+        modalCloseColorHover: theme.spr.icon01,
+        contentPrimary: theme.spr.text01,
+        contentSecondary: theme.spr.text02,
+    },
+}); });
+exports.StyledModalHeader = (0, style_1.styled)('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0', function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $noBorder = _b.$noBorder;
+    return ({ lineHeight: $noBorder ? px2rem(28) : px2rem(24) });
+}, function (utils, _a) {
+    var $noBorder = _a.$noBorder;
+    return ($noBorder ? 'py-6 px-7' : 'border-b-1 border-solid spr-border-02 py-5 px-7');
+});
+exports.ModalBody = (0, style_1.styled)('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow');
+exports.StyledModalFooter = (0, style_1.styled)('div', 'border-b-0 border-l-0 border-r-0', function (_a) {
+    var px2rem = _a.px2rem, direction = _a.direction;
+    return ({ lineHeight: px2rem(28), textAlign: direction === 'rtl' ? 'left' : 'right' });
+}, function (utils, _a) {
+    var $noBorder = _a.$noBorder;
+    return ($noBorder ? 'py-6 px-7' : 'border-t-1 border-solid spr-border-02 py-5 px-7');
+});

package/modal/types.d.ts

@@ -0,0 +1,24 @@
+import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from 'baseui/modal';
+import { Override } from '../overrides';
+import { SpacewebComponentProps } from '../types';
+export declare type Size = 'sm' | 'md' | 'lg' | 'fullPage';
+export declare type Role = 'dialog' | 'alertdialog';
+export declare type SharedProps = Omit<SharedStylePropsArg, '$size'> & {
+    $size?: Size;
+};
+export declare type ModalProps = Omit<BaseModalProps, 'overrides' | 'size' | 'role'> & {
+    overrides?: {
+        [key in keyof ModalOverrides]?: Override<SharedProps & Record<string, any>>;
+    };
+    size?: Size;
+    role?: Role;
+    ariaLabel?: string;
+};
+export declare type ModalHeaderProps = SpacewebComponentProps & {
+    noBorder?: boolean;
+};
+export declare type ModalFooterProps = SpacewebComponentProps & {
+    noBorder?: boolean;
+};
+export type { ModalState } from 'baseui/modal';
+export { CLOSE_SOURCE } from 'baseui/modal';

package/modal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLOSE_SOURCE = void 0;
+var modal_1 = require("baseui/modal");
+Object.defineProperty(exports, "CLOSE_SOURCE", { enumerable: true, get: function () { return modal_1.CLOSE_SOURCE; } });

package/overrides/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export { mergeOverrides } from './mergeOverrides';
+export { useOverrides, getOverrides } from './useOverrides';

package/overrides/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOverrides = exports.useOverrides = exports.mergeOverrides = void 0;
+var tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./types"), exports);
+var mergeOverrides_1 = require("./mergeOverrides");
+Object.defineProperty(exports, "mergeOverrides", { enumerable: true, get: function () { return mergeOverrides_1.mergeOverrides; } });
+var useOverrides_1 = require("./useOverrides");
+Object.defineProperty(exports, "useOverrides", { enumerable: true, get: function () { return useOverrides_1.useOverrides; } });
+Object.defineProperty(exports, "getOverrides", { enumerable: true, get: function () { return useOverrides_1.getOverrides; } });

package/overrides/mergeOverrides.d.ts

@@ -0,0 +1,3 @@
+import { Overrides, OverridesObject } from './types';
+declare const mergeOverrides: <T>(target: Overrides<T>, source?: Overrides<T>) => OverridesObject<T>;
+export { mergeOverrides };

package/overrides/mergeOverrides.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeOverrides = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var mergeWith_1 = (0, tslib_1.__importDefault)(require("lodash/mergeWith"));
+var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
+var useCombinedRef_1 = require("../hooks/useCombinedRef");
+var mergeOverride = function (_target, _source) {
+    var target = typeof _target === 'function' ? { component: _target } : _target;
+    var source = typeof _source === 'function' ? { component: _source } : _source;
+    var merged = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source);
+    if ((target === null || target === void 0 ? void 0 : target.props) && (source === null || source === void 0 ? void 0 : source.props)) {
+        // deep merge
+        merged.props = (0, mergeWith_1.default)({}, target.props, source.props, function (a, b) {
+            /**
+             * React elements are object. _merge deep merges react elements as well, which is not we usually want.
+             * Check tests for more information
+             */
+            if ((0, react_1.isValidElement)(b))
+                return b;
+            return undefined;
+        });
+        if (target.props.ref && source.props.ref) {
+            merged.props.ref = (0, useCombinedRef_1.combineRefs)(target.props.ref, source.props.ref);
+        }
+        if ((0, isObject_1.default)(target.props.overrides) && (0, isObject_1.default)(source.props.overrides)) {
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            merged.props.overrides = mergeOverrides(target.props.overrides, source.props.overrides);
+        }
+    }
+    if ((target === null || target === void 0 ? void 0 : target.style) && (source === null || source === void 0 ? void 0 : source.style)) {
+        merged.style = [target.style, source.style];
+    }
+    return merged;
+};
+var mergeOverrides = function (target, source) {
+    if (source === void 0) { source = {}; }
+    var allIdentifiers = Object.keys((0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source));
+    return allIdentifiers.reduce(function (acc, name) {
+        acc[name] = mergeOverride(target[name], source[name]);
+        return acc;
+    }, {});
+};
+exports.mergeOverrides = mergeOverrides;

package/overrides/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/overrides/index.js"
+}

package/overrides/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author Ivan Torres
+ */
+import * as React from 'react';
+import { Styles } from '../types';
+export declare type StyleOverride<P> = Styles;
+declare type ComponentOverride<P> = React.ComponentType<P> | React.ForwardRefRenderFunction<unknown, P>;
+export interface OverrideObject<P> {
+    component?: ComponentOverride<P>;
+    props?: {
+        [key: string]: unknown;
+    };
+    style?: StyleOverride<P>;
+}
+export declare type Override<P> = OverrideObject<P> | React.ComponentType<P>;
+export interface Overrides<T = unknown> {
+    [key: string]: Override<T> | undefined;
+}
+export interface OverridesObject<T = unknown> {
+    [key: string]: OverrideObject<T>;
+}
+export {};

package/overrides/types.js

@@ -0,0 +1,5 @@
+"use strict";
+/**
+ * @author Ivan Torres
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/overrides/useOverrides.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Override } from './types';
+declare const getOverrides: <T, P>(override: Override<T> | undefined, defaultComponent: React.ComponentType<any>) => [React.ComponentType<P & Record<string, unknown>>, Record<string, unknown>];
+/**
+ * Wrapper on top of getOverrides of baseui.
+ */
+declare const useOverrides: <T, P>(override: Override<T> | undefined, defaultComponent: React.ComponentType<P>) => [React.ComponentType<P & Record<string, unknown>>, Record<string, unknown>];
+export { getOverrides, useOverrides };

package/overrides/useOverrides.js

@@ -0,0 +1,18 @@
+"use strict";
+/* eslint @typescript-eslint/no-explicit-any: 0 */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverrides = exports.getOverrides = void 0;
+var overrides_1 = require("baseui/helpers/overrides");
+var react_1 = require("react");
+var getOverrides = function (override, defaultComponent) {
+    if (override === void 0) { override = {}; }
+    return (0, overrides_1.getOverrides)(override, defaultComponent);
+};
+exports.getOverrides = getOverrides;
+/**
+ * Wrapper on top of getOverrides of baseui.
+ */
+var useOverrides = function (override, defaultComponent) {
+    return (0, react_1.useMemo)(function () { return getOverrides(override, defaultComponent); }, [override, defaultComponent]);
+};
+exports.useOverrides = useOverrides;

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@sprinklrjs/spaceweb",
+  "version": "10.1.0",
+  "description": "A React Component library implementing Sprinklr's Hyperspace design language",
+  "main": "index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "build:package-json": "node ./scripts/build-package-json.js",
+    "build:icons": "node ./scripts/build-icons.js",
+    "build:cjs": "tsc --module commonjs --outDir ./dist",
+    "build:esm": "tsc --module es2015 --outDir ./dist/esm",
+    "build:assets": "node scripts/build-assets.js",
+    "build:themes": "node scripts/build-themes.js",
+    "build": "yarn clean && yarn build:icons && yarn build:cjs && yarn build:esm && yarn build:assets && yarn build:package-json",
+    "build:watch": "yarn build:cjs --watch",
+    "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
+    "test": "jest ./src",
+    "test:watch": "jest --watch ./src",
+    "test:coverage": "jest ./src --coverage"
+  },
+  "author": "",
+  "license": "ISC",
+  "sideEffects": false,
+  "dependencies": {
+    "@types/react": "^17.0.39",
+    "@types/styletron-engine-atomic": "^1.1.0",
+    "@types/styletron-react": "^5.0.2",
+    "baseui": "~10.9.0",
+    "body-scroll-lock": "3.1.5",
+    "classnames": "2.2.6",
+    "csstype": "^3.0.2",
+    "lodash": "^4.17.15",
+    "memoize-one": "~5.1.1",
+    "react-input-mask": "^2.0.4",
+    "react-transition-group": "4.4.2",
+    "react-virtual": "^2.1.8",
+    "styletron": "~3.0.4",
+    "styletron-engine-atomic": "~1.4.6",
+    "styletron-react": "~5.2.7",
+    "timezone-support": "^2.0.2",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.6.0",
+    "@babel/parser": "^7.7.3",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
+    "@babel/plugin-transform-runtime": "^7.6.0",
+    "@babel/polyfill": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.9.0",
+    "@babel/traverse": "^7.7.0",
+    "@babel/types": "^7.7.1",
+    "@sheerun/mutationobserver-shim": "^0.3.3",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^26.0.24",
+    "@types/lodash": "^4.14.149",
+    "babel-plugin-transform-define": "^1.3.0",
+    "babel-plugin-transform-styletron-display-name": "^1.1.3",
+    "core-js": "^3.8.3",
+    "cross-env": "^6.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "glob": "^7.1.6",
+    "jest": "^26.6.3",
+    "mq-polyfill": "^1.1.8",
+    "postcss": "^7.0.27",
+    "postcss-js": "^2.0.3",
+    "react-test-renderer": "^17.0.2",
+    "ts-jest": "^26.5.6"
+  },
+  "peerDependencies": {
+    "@sprinklrjs/spaceweb-themes": ">=10.0.0 <11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "jest": {
+    "verbose": true,
+    "preset": "ts-jest",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts",
+      "core-js"
+    ],
+    "testMatch": [
+      "**/__tests__/**/*.spec.ts",
+      "**/__tests__/**/*.spec.tsx"
+    ],
+    "watchPathIgnorePatterns": [
+      "dist",
+      "scripts",
+      "config"
+    ],
+    "moduleNameMapper": {
+      "^@sprinklrjs/spaceweb-themes/(.*)$": "<rootDir>/../spaceweb-themes/dist/$1"
+    }
+  }
+}

package/payment-card/basewebAdapters.d.ts

@@ -0,0 +1,7 @@
+import { PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
+import { PaymentCardProps, StatefulPaymentCardProps } from './types';
+declare type AdapterProps = Omit<PaymentCardProps | StatefulPaymentCardProps, 'autoFocus'>;
+declare const usePaymentCardBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, 'size' | 'variant' | 'className' | 'overrides' | 'style' | 'intent'> & {
+    overrides?: BasePaymentCardOverrides;
+};
+export default usePaymentCardBasewebAdapter;

package/payment-card/basewebAdapters.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var context_1 = require("../form-control/context");
+var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("../input/basewebAdapters"));
+var styled_components_1 = require("./styled-components");
+var helpers_1 = require("../helpers");
+var overrides_1 = require("../overrides");
+var usePaymentCardBasewebAdapter = function (props) {
+    var _a = (0, context_1.useContextualFormProps)(props), size = _a.size, variant = _a.variant, intent = _a.intent;
+    var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent });
+    var basePaymentCardStyles = {
+        Input: {
+            style: { paddingLeft: '0px' },
+        },
+        IconWrapper: {
+            style: styled_components_1.getIconWrapperStyles,
+            props: sharedProps,
+        },
+    };
+    var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, props.overrides) }));
+    return adaptedProps;
+};
+exports.default = usePaymentCardBasewebAdapter;

package/payment-card/index.d.ts

@@ -0,0 +1,3 @@
+export { StatefulContainer, valid } from 'baseui/payment-card';
+export { PaymentCard, StatefulPaymentCard } from './paymentCard';
+export * from './types';

package/payment-card/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulPaymentCard = exports.PaymentCard = exports.valid = exports.StatefulContainer = void 0;
+var tslib_1 = require("tslib");
+var payment_card_1 = require("baseui/payment-card");
+Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return payment_card_1.StatefulContainer; } });
+Object.defineProperty(exports, "valid", { enumerable: true, get: function () { return payment_card_1.valid; } });
+var paymentCard_1 = require("./paymentCard");
+Object.defineProperty(exports, "PaymentCard", { enumerable: true, get: function () { return paymentCard_1.PaymentCard; } });
+Object.defineProperty(exports, "StatefulPaymentCard", { enumerable: true, get: function () { return paymentCard_1.StatefulPaymentCard; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/payment-card/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/payment-card/index.js"
+}

package/payment-card/paymentCard.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { PaymentCardProps, StatefulPaymentCardProps } from './types';
+export declare const PaymentCard: {
+    (props: PaymentCardProps): ReactElement;
+    displayName: string;
+};
+export declare const StatefulPaymentCard: {
+    (props: StatefulPaymentCardProps): ReactElement;
+    displayName: string;
+};

package/payment-card/paymentCard.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatefulPaymentCard = exports.PaymentCard = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var payment_card_1 = require("baseui/payment-card");
+var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("./basewebAdapters"));
+var useAutoFocus_1 = (0, tslib_1.__importDefault)(require("../hooks/useAutoFocus"));
+// @ts-ignore
+payment_card_1.PaymentCard.displayName = 'BasePaymentCard';
+var PaymentCard = function (props) {
+    var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
+    var adaptedProps = (0, basewebAdapters_1.default)(restProps);
+    var inputRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
+    return (0, jsx_runtime_1.jsx)(payment_card_1.PaymentCard, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), void 0);
+};
+exports.PaymentCard = PaymentCard;
+exports.PaymentCard.displayName = 'PaymentCard';
+var StatefulPaymentCard = function (props) {
+    var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
+    var adaptedProps = (0, basewebAdapters_1.default)(restProps);
+    var inputRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: adaptedProps.inputRef });
+    return (0, jsx_runtime_1.jsx)(payment_card_1.StatefulPaymentCard, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), void 0);
+};
+exports.StatefulPaymentCard = StatefulPaymentCard;
+exports.StatefulPaymentCard.displayName = 'StatefulPaymentCard';

package/payment-card/styled-components.d.ts

@@ -0,0 +1,3 @@
+import { StyleFn } from '../types';
+import { SharedProps } from '../input/types';
+export declare const getIconWrapperStyles: StyleFn<SharedProps>;

package/payment-card/styled-components.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconWrapperStyles = void 0;
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var getIconWrapperStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var $size = _b.$size;
+    var styles = {
+        marginLeft: '',
+        marginRight: '',
+    };
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, 'lg');
+    styles.marginLeft = styles.marginRight = inputSizeTheme.paddingX;
+    return styles;
+};
+exports.getIconWrapperStyles = getIconWrapperStyles;

package/payment-card/types.d.ts

@@ -0,0 +1,17 @@
+import { PaymentCardProps as BasePaymentCardProps, StatefulPaymentCardProps as BaseStatefulPaymentCardProps, PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
+import { Override } from '../overrides';
+import { SpacewebComponentProps, Intent } from '../types';
+import { InputSize, InputVariant, SharedProps, FocusPosition } from '../input';
+export declare type PaymentCardOverrides = {
+    [key in keyof BasePaymentCardOverrides]?: Override<SharedProps & Record<string, any>>;
+};
+declare type CommonInputProps = {
+    variant?: InputVariant;
+    size?: InputSize;
+    overrides?: PaymentCardOverrides;
+    intent?: Intent;
+    autoFocus?: FocusPosition;
+};
+export declare type PaymentCardProps = Omit<SpacewebComponentProps<BasePaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export declare type StatefulPaymentCardProps = Omit<SpacewebComponentProps<BaseStatefulPaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export {};

package/payment-card/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });