@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/modal/overrides.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCloseButtonProps = exports.getBackdropStyles = exports.getDialogStyles = exports.getDialogContainerStyles = void 0;
+exports.getCloseButtonProps = exports.getDialogStyles = exports.getDialogContainerStyles = void 0;
 var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var getDialogHeightControl = function (_a, _b) {
     var px2rem = _a.px2rem;
     var $dialogSize = _b.$dialogSize;
     switch ($dialogSize) {
         case 'sm':
-            return { maxHeight: px2rem(560) };
+            return { maxHeight: "min(".concat(px2rem(560), ",95%)") };
         case 'md':
-            return { maxHeight: px2rem(660) };
+            return { maxHeight: "min(".concat(px2rem(660), ", 95%)") };
         case 'lg':
             return { height: '90%' };
         case 'fullPage':
@@ -32,7 +33,7 @@ var transitionDuration = function (_a, _b) {
     return ($animate ? { transitionDuration: '200ms' } : {});
 };
 exports.getDialogContainerStyles = [
-    'border-box spr-overlay',
+    'border-box spr-overlay h-full',
     getDialogContainerHeightControl,
     transitionDuration,
 ];
@@ -41,31 +42,21 @@ exports.getDialogStyles = [
     getDialogHeightControl,
     transitionDuration,
 ];
-exports.getBackdropStyles = [transitionDuration];
-var getCloseButtonProps = function (_a, _b) {
-    var _c;
-    var px2rem = _a.px2rem, direction = _a.direction, theme = _a.theme;
+var getCloseButtonProps = function (_a, _b, ariaLabel) {
+    var px2rem = _a.px2rem, theme = _a.theme;
     var $dialogSize = _b.$dialogSize;
-    var buttonDirection = direction === 'rtl' ? 'left' : 'right';
-    return {
+    return ({
         size: 'sm',
+        'aria-label': ariaLabel,
         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': {
+                style: (0, tslib_1.__assign)({ position: 'absolute', top: px2rem(12), right: px2rem(16) }, ($dialogSize === 'fullPage'
+                    ? (0, tslib_1.__assign)((0, tslib_1.__assign)({ top: px2rem(-44), right: px2rem(0), backgroundColor: theme.spr.ui01, color: theme.spr.icon02 }, (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), { ':hover': {
                             color: theme.spr.ui04,
                             backgroundColor: theme.spr.ui06,
-                        },
-                    }
-                    : {})),
+                        } }) : {})),
             },
         },
-    };
+    });
 };
 exports.getCloseButtonProps = getCloseButtonProps;

package/modal/styled-components.d.ts

@@ -1,6 +1,6 @@
-import { ModalProps as BaseModalProps } from 'baseui/modal';
+import { ModalProps as BaseModalProps } from '../baseui/modal';
 import * as React from 'react';
-export { StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+export { StyledRoot, 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;

package/modal/styled-components.js

@@ -1,40 +1,28 @@
 "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"));
+exports.StyledModalFooter = exports.ModalBody = exports.StyledModalHeader = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledRoot = void 0;
+var modal_1 = require("../baseui/modal");
 var style_1 = require("../style");
-var modal_2 = require("baseui/modal");
+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) {
+exports.StyledModal = modal_1.Modal;
+exports.StyledModalHeader = (0, style_1.styled)('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0 pt-4 px-6', 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');
+    return ($noBorder ? 'pb-0' : 'border-b-1 border-solid spr-border-02 pb-4');
 });
-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' });
+exports.ModalBody = (0, style_1.styled)('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow px-6 py-4');
+exports.StyledModalFooter = (0, style_1.styled)('div', 'border-b-0 border-l-0 border-r-0 pb-4 px-6', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({ lineHeight: px2rem(28), textAlign: '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');
+    return ($noBorder ? 'pt-0' : 'border-t-1 border-solid spr-border-02 pt-4');
 });

package/modal/types.d.ts

@@ -1,4 +1,4 @@
-import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from 'baseui/modal';
+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';
@@ -20,5 +20,5 @@ export declare type ModalHeaderProps = SpacewebComponentProps & {
 export declare type ModalFooterProps = SpacewebComponentProps & {
     noBorder?: boolean;
 };
-export type { ModalState } from 'baseui/modal';
-export { CLOSE_SOURCE } from 'baseui/modal';
+export type { ModalState } from '../baseui/modal';
+export { CLOSE_SOURCE } from '../baseui/modal';

package/modal/types.js

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

package/number/Number.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NumberProps } from './types';
+export declare const Number: ({ value, variant, numberOptions }: NumberProps) => JSX.Element;

package/number/Number.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Number = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+//hooks
+var useNumber_1 = require("./useNumber");
+//constants
+var constants_1 = require("./constants");
+var Number = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, numberOptions = _a.numberOptions;
+    var formattedNumber = (0, useNumber_1.useNumber)({ value: value, variant: variant, numberOptions: numberOptions });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedNumber }, void 0);
+};
+exports.Number = Number;

package/number/constants.d.ts

@@ -0,0 +1,2 @@
+import { CompactAutoFormat } from '../utils/intlNumberFormatUtils/types';
+export declare const DEFAULT_VARIANT: CompactAutoFormat;

package/number/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_VARIANT = void 0;
+var types_1 = require("../utils/intlNumberFormatUtils/types");
+exports.DEFAULT_VARIANT = {
+    type: types_1.NUMBER_VARIANTS.COMPACT_AUTO_FORMAT,
+};

package/number/index.d.ts

@@ -0,0 +1,5 @@
+export { Number } from './Number';
+export { useNumber } from './useNumber';
+export { getFormattedNumber } from '../utils/intlNumberFormatUtils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/number/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedNumber = exports.useNumber = exports.Number = void 0;
+var tslib_1 = require("tslib");
+var Number_1 = require("./Number");
+Object.defineProperty(exports, "Number", { enumerable: true, get: function () { return Number_1.Number; } });
+var useNumber_1 = require("./useNumber");
+Object.defineProperty(exports, "useNumber", { enumerable: true, get: function () { return useNumber_1.useNumber; } });
+var intlNumberFormatUtils_1 = require("../utils/intlNumberFormatUtils");
+Object.defineProperty(exports, "getFormattedNumber", { enumerable: true, get: function () { return intlNumberFormatUtils_1.getFormattedNumber; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);
+(0, tslib_1.__exportStar)(require("../utils/intlNumberFormatUtils/types"), exports);

package/number/package.json

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

package/number/types.d.ts

@@ -0,0 +1,6 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare type NumberProps = {
+    value: number;
+    variant?: NumberVariant;
+    numberOptions?: Intl.NumberFormatOptions;
+};

package/number/types.js

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

package/number/useNumber.d.ts

@@ -0,0 +1,2 @@
+import { NumberProps } from './types';
+export declare const useNumber: ({ value, variant, numberOptions }: NumberProps) => string;

package/number/useNumber.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNumber = void 0;
+var locale_1 = require("../locale");
+var intlNumberFormatUtils_1 = require("../utils/intlNumberFormatUtils");
+var constants_1 = require("./constants");
+var useNumber = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, numberOptions = _a.numberOptions;
+    var langCode = (0, locale_1.useLocale)().langCode;
+    return (0, intlNumberFormatUtils_1.getFormattedNumber)({ value: value, locale: langCode, variant: variant, numberOptions: numberOptions });
+};
+exports.useNumber = useNumber;

package/overrides/index.d.ts

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

package/overrides/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOverrides = exports.useOverrides = exports.mergeOverrides = void 0;
+exports.getOverrides = exports.useOverrides = exports.mergeOverride = 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; } });
+Object.defineProperty(exports, "mergeOverride", { enumerable: true, get: function () { return mergeOverrides_1.mergeOverride; } });
 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

@@ -1,3 +1,4 @@
-import { Overrides, OverridesObject } from './types';
+import { Override, OverrideObject, Overrides, OverridesObject } from './types';
+declare const mergeOverride: <T>(_target?: Override<T> | undefined, _source?: Override<T> | undefined) => OverrideObject<T>;
 declare const mergeOverrides: <T>(target: Overrides<T>, source?: Overrides<T>) => OverridesObject<T>;
-export { mergeOverrides };
+export { mergeOverrides, mergeOverride };

package/overrides/mergeOverrides.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeOverrides = void 0;
+exports.mergeOverride = exports.mergeOverrides = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var react_is_1 = require("react-is");
 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 target = (0, react_is_1.isValidElementType)(_target) ? { component: _target } : _target;
+    var source = (0, react_is_1.isValidElementType)(_source) ? { 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
@@ -17,7 +18,7 @@ var mergeOverride = function (_target, _source) {
              * 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))
+            if ((0, react_1.isValidElement)(b) || (0, react_is_1.isValidElementType)(b))
                 return b;
             return undefined;
         });
@@ -34,6 +35,7 @@ var mergeOverride = function (_target, _source) {
     }
     return merged;
 };
+exports.mergeOverride = mergeOverride;
 var mergeOverrides = function (target, source) {
     if (source === void 0) { source = {}; }
     var allIdentifiers = Object.keys((0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source));

package/overrides/useOverrides.js

@@ -2,7 +2,7 @@
 /* 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 overrides_1 = require("../baseui/helpers/overrides");
 var react_1 = require("react");
 var getOverrides = function (override, defaultComponent) {
     if (override === void 0) { override = {}; }

package/package.json

@@ -1,43 +1,59 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "10.1.0",
-  "description": "A React Component library implementing Sprinklr's Hyperspace design language",
+  "version": "12.0.0-ci.0",
+  "description": "Components for SpaceWeb",
   "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:cjs": "yarn run tsc --module commonjs --outDir ./dist",
+    "build:esm": "yarn run 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",
+    "storybook": "start-storybook -p 6006 --no-dll",
+    "build-storybook": "build-storybook --no-dll",
     "test": "jest ./src",
     "test:watch": "jest --watch ./src",
-    "test:coverage": "jest ./src --coverage"
+    "test:coverage": "jest ./src --coverage",
+    "tsc": "../../scripts/tsbuild.sh"
   },
   "author": "",
   "license": "ISC",
   "sideEffects": false,
   "dependencies": {
-    "@types/react": "^17.0.39",
+    "@date-io/date-fns": "^2.6.2",
+    "@tanstack/react-virtual": "3.0.0-beta.18",
+    "@types/react": ">=17.0.39 <19.0.0",
+    "@types/react-color": "^3.0.6",
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
-    "baseui": "~10.9.0",
+    "any-date-parser": "^1.5.4",
     "body-scroll-lock": "3.1.5",
+    "card-validator": "^6.2.0",
     "classnames": "2.2.6",
     "csstype": "^3.0.2",
+    "date-fns": "^2.6.0",
+    "date-fns-tz": "^1.2.2",
     "lodash": "^4.17.15",
     "memoize-one": "~5.1.1",
-    "react-input-mask": "^2.0.4",
+    "polished": "^3.2.0",
+    "popper.js": "^1.16.0",
+    "react-color": "^2.19.3",
+    "react-focus-lock": "^2.7.1",
+    "react-input-mask": "2.0.4",
+    "react-is": "^17.0.2",
+    "react-range": "^1.8.0",
     "react-transition-group": "4.4.2",
-    "react-virtual": "^2.1.8",
+    "react-uid": "^2.3.3",
+    "rtl-css-js": "^1.16.1",
     "styletron": "~3.0.4",
-    "styletron-engine-atomic": "~1.4.6",
-    "styletron-react": "~5.2.7",
-    "timezone-support": "^2.0.2",
+    "styletron-engine-atomic": "~1.5.0",
+    "styletron-react": "~6.1.0",
+    "timezone-support": "2.0.2",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
@@ -54,12 +70,17 @@
     "@babel/traverse": "^7.7.0",
     "@babel/types": "^7.7.1",
     "@sheerun/mutationobserver-shim": "^0.3.3",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/react": "^6.3.12",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.149",
+    "@types/react-is": "^17.0.2",
     "babel-plugin-transform-define": "^1.3.0",
     "babel-plugin-transform-styletron-display-name": "^1.1.3",
     "core-js": "^3.8.3",
@@ -75,16 +96,17 @@
     "ts-jest": "^26.5.6"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": ">=10.0.0 <11.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@sprinklrjs/spaceweb-themes": "12.0.0-ci.0",
+    "react": ">=17.0.2 <19.0.0",
+    "react-dom": ">=17.0.2 <19.0.0"
   },
   "jest": {
     "verbose": true,
     "preset": "ts-jest",
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.ts",
-      "core-js"
+      "core-js",
+      "<rootDir>/../../internals/jest/setupAfterEnv.js"
     ],
     "testMatch": [
       "**/__tests__/**/*.spec.ts",
@@ -99,4 +121,4 @@
       "^@sprinklrjs/spaceweb-themes/(.*)$": "<rootDir>/../spaceweb-themes/dist/$1"
     }
   }
-}
+}

package/payment-card/basewebAdapters.d.ts

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

package/payment-card/basewebAdapters.js

@@ -1,14 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
 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 input_1 = require("../baseui/input");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style");
+var getBasewebPaymentCardSizeMap = function (_size) {
+    switch (_size) {
+        case 'lg':
+            return input_1.SIZE.default;
+        case 'md':
+            return input_1.SIZE.default;
+        case 'sm':
+            return input_1.SIZE.compact;
+        case 'xs':
+            return input_1.SIZE.compact;
+        case 'xxxs':
+            return input_1.SIZE.mini;
+        default:
+            return input_1.SIZE.default;
+    }
+};
 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 _a, _b;
+    var contextualProps = (0, context_1.useContextualFormProps)(props);
+    var sharedProps = (0, helpers_1.add$props)((0, pick_1.default)(contextualProps, ['size', 'variant', 'intent']));
+    var theme = (0, style_1.useStyle)().theme;
+    var _size = (_b = (_a = contextualProps.size) !== null && _a !== void 0 ? _a : sharedProps.$size) !== null && _b !== void 0 ? _b : (0, themeHelpers_1.getDefaultSize)(theme);
     var basePaymentCardStyles = {
         Input: {
             style: { paddingLeft: '0px' },
@@ -18,7 +41,7 @@ var usePaymentCardBasewebAdapter = function (props) {
             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;
+    var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, contextualProps), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, contextualProps.overrides) }));
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, adaptedProps), { size: getBasewebPaymentCardSizeMap(_size) });
 };
 exports.default = usePaymentCardBasewebAdapter;

package/payment-card/index.d.ts

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

package/payment-card/index.js

@@ -2,7 +2,7 @@
 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");
+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");

package/payment-card/paymentCard.js

@@ -3,7 +3,7 @@ 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 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

package/payment-card/styled-components.js

@@ -1,16 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIconWrapperStyles = void 0;
+var tslib_1 = require("tslib");
 var themeHelpers_1 = require("../helpers/themeHelpers");
+// todo: fix this and derive from input styles
+var SIZES_STYLES_MAP = {
+    xxxs: {
+        height: '22px',
+    },
+    xs: {
+        height: '30px',
+    },
+    sm: {
+        height: '34px',
+    },
+    md: {
+        height: '38px',
+    },
+    lg: {
+        height: '38px',
+    },
+};
 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');
+    var styles = (0, tslib_1.__assign)({ marginLeft: '', marginRight: '', lineHeight: '', fontSize: '', borderRadius: '' }, SIZES_STYLES_MAP[$size]);
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme));
     styles.marginLeft = styles.marginRight = inputSizeTheme.paddingX;
+    styles.fontSize = inputSizeTheme.fontSize;
+    styles.lineHeight = inputSizeTheme.lineHeight;
+    styles.borderRadius = (inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.borderRadius) || theme.input.borderRadius;
     return styles;
 };
 exports.getIconWrapperStyles = getIconWrapperStyles;

package/payment-card/types.d.ts

@@ -1,4 +1,5 @@
-import { PaymentCardProps as BasePaymentCardProps, StatefulPaymentCardProps as BaseStatefulPaymentCardProps, PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
+import { Ref } from 'react';
+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';
@@ -11,7 +12,8 @@ declare type CommonInputProps = {
     overrides?: PaymentCardOverrides;
     intent?: Intent;
     autoFocus?: FocusPosition;
+    inputRef?: Ref<HTMLInputElement>;
 };
-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 declare type PaymentCardProps = Omit<SpacewebComponentProps<BasePaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus' | 'inputRef'> & CommonInputProps;
+export declare type StatefulPaymentCardProps = Omit<SpacewebComponentProps<BaseStatefulPaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus' | 'inputRef'> & CommonInputProps;
 export {};

package/phone-input/country-select-container.js

@@ -12,6 +12,6 @@ var CountrySelectContainer = function (props) {
     var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CountrySelectContainer, styled_components_1.StyledCountrySelectContainer), 2), CountrySelectComponent = _a[0], countrySelectContainerProps = _a[1];
     var countrySelectProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { overrides: (0, pick_1.default)(overrides, ['CountrySelect', 'FlagContainer']) });
     var dialCodeProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, pick_1.default)(props, ['size', 'value'])), { overrides: (0, pick_1.default)(overrides, ['DialCode']) });
-    return ((0, jsx_runtime_1.jsxs)(CountrySelectComponent, (0, tslib_1.__assign)({}, countrySelectContainerProps, { children: [(0, jsx_runtime_1.jsx)(country_select_1.default, (0, tslib_1.__assign)({}, countrySelectProps), void 0), (0, jsx_runtime_1.jsx)(dial_code_1.default, (0, tslib_1.__assign)({}, dialCodeProps), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(CountrySelectComponent, (0, tslib_1.__assign)({ dir: "ltr" }, countrySelectContainerProps, { children: [(0, jsx_runtime_1.jsx)(country_select_1.default, (0, tslib_1.__assign)({}, countrySelectProps), void 0), (0, jsx_runtime_1.jsx)(dial_code_1.default, (0, tslib_1.__assign)({}, dialCodeProps), void 0)] }), void 0));
 };
 exports.default = CountrySelectContainer;