@xfers/design-system 4.5.0 → 4.6.0-dev.155be4f22f

package/dist/index.js

@@ -16,8 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.Coachmark = exports.Timeline = exports.SummaryCard = exports.Spin = exports.ErrorPage = exports.Tooltip = exports.CopyBox = exports.Section = exports.Banner = exports.Note = exports.ContentBreakdown = exports.Hidden = exports.Link = exports.Divider = exports.EmptyData = exports.SmallP = exports.P1Bold = exports.P1 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Checkbox = exports.DatePicker = exports.Timer = exports.Tabs = exports.Table = exports.Steps = exports.Select = exports.RangePicker = exports.Radio = exports.Pagination = exports.DeprecatedModal = exports.Modal = exports.Tag = exports.Input = exports.Form = exports.DynamicSelect = exports.Dropdown = exports.Carousel = exports.Chart = exports.Card = exports.BadgeIcon = exports.Accordion = exports.ActionCard = exports.ActionButton = exports.Button = exports.Alert = void 0;
-exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = void 0;
+exports.getCoachmarkJoyrideConfig = exports.Coachmark = exports.Timeline = exports.SummaryCard = exports.Spin = exports.ErrorPage = exports.Tooltip = exports.CopyBox = exports.Section = exports.Banner = exports.Note = exports.ContentBreakdown = exports.Hidden = exports.Link = exports.Divider = exports.EmptyData = exports.SmallP = exports.P1Bold = exports.P1 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Checkbox = exports.DatePicker = exports.Timer = exports.Tabs = exports.Table = exports.Steps = exports.Select = exports.RangePicker = exports.Radio = exports.Pagination = exports.DeprecatedModal = exports.Modal = exports.Tag = exports.InputWithButton = exports.Input = exports.Form = exports.DynamicSelect = exports.Dropdown = exports.Carousel = exports.Chart = exports.Card = exports.BadgeIcon = exports.Accordion = exports.ActionCard = exports.ActionButton = exports.Button = exports.Alert = void 0;
+exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = exports.MaterialSymbols = void 0;
 // Components
 var Alert_1 = require("./components/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.default; } });
@@ -45,6 +45,8 @@ var Form_1 = require("./components/Form");
 Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.default; } });
 var Input_1 = require("./components/Input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.default; } });
+var InputWithButton_1 = require("./components/InputWithButton");
+Object.defineProperty(exports, "InputWithButton", { enumerable: true, get: function () { return InputWithButton_1.default; } });
 var Tag_1 = require("./components/Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.default; } });
 var Modal_1 = require("./components/Modal");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/shared/TypographyStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.SECONDARY_FONT = exports.MAIN_FONT = void 0;
+exports.LINE_HEIGHT = exports.SIZE_CONFIG = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.SECONDARY_FONT = exports.MAIN_FONT = void 0;
 exports.MAIN_FONT = 'Hanken Grotesk';
 exports.SECONDARY_FONT = 'Red Hat Display';
 exports.FALLBACK_FONT = 'Inter';
@@ -24,6 +24,18 @@ var FONT_SIZE;
     FONT_SIZE["SMALL"] = "12px";
     FONT_SIZE["SMALL_MOBILE"] = "14px";
 })(FONT_SIZE || (exports.FONT_SIZE = FONT_SIZE = {}));
+exports.SIZE_CONFIG = {
+    large: {
+        height: '48px',
+        borderRadius: '12px',
+        padding: '12px 16px',
+    },
+    small: {
+        height: '36px',
+        borderRadius: '8px',
+        padding: '8px 12px',
+    },
+};
 var LINE_HEIGHT;
 (function (LINE_HEIGHT) {
     LINE_HEIGHT["H1"] = "29px";

package/dist/shared/TypographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypographyStyles.js","sourceRoot":"","sources":["../../src/shared/TypographyStyles.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,gBAAgB,CAAA;AAC5B,QAAA,cAAc,GAAG,iBAAiB,CAAA;AAClC,QAAA,aAAa,GAAG,OAAO,CAAA;AAEpC,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAU,CAAA;IACV,mDAAY,CAAA;IACZ,qDAAa,CAAA;AACf,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB;AAED,IAAY,SAYX;AAZD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,2BAAc,CAAA;IACd,kCAAqB,CAAA;AACvB,CAAC,EAZW,SAAS,yBAAT,SAAS,QAYpB;AAED,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,6BAAc,CAAA;IACd,oCAAqB,CAAA;AACvB,CAAC,EAZW,WAAW,2BAAX,WAAW,QAYtB"}
+{"version":3,"file":"TypographyStyles.js","sourceRoot":"","sources":["../../src/shared/TypographyStyles.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,gBAAgB,CAAA;AAC5B,QAAA,cAAc,GAAG,iBAAiB,CAAA;AAClC,QAAA,aAAa,GAAG,OAAO,CAAA;AAEpC,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAU,CAAA;IACV,mDAAY,CAAA;IACZ,qDAAa,CAAA;AACf,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB;AAED,IAAY,SAYX;AAZD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,2BAAc,CAAA;IACd,kCAAqB,CAAA;AACvB,CAAC,EAZW,SAAS,yBAAT,SAAS,QAYpB;AAIY,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,WAAW;KACrB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,UAAU;KACpB;CACF,CAAA;AAED,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,6BAAc,CAAA;IACd,oCAAqB,CAAA;AACvB,CAAC,EAZW,WAAW,2BAAX,WAAW,QAYtB"}

package/dist/types/components/DatePicker/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import 'antd/es/date-picker/style/css';
+import { InputSize } from '../Input/inputStyles';
 type Props = {
     placeholder?: string;
     format?: string;
@@ -11,6 +12,12 @@ type Props = {
     value?: any;
     label?: string;
     required?: boolean;
+    optional?: boolean;
+    size?: InputSize;
+    error?: boolean;
+    helperText?: string;
+    showInfoIcon?: boolean;
+    onInfoClick?: () => void;
 };
-export default function ({ disabled, label, required, ...rest }: Props): React.JSX.Element;
+export default function ({ disabled, label, required, optional, size, error, helperText, showInfoIcon, onInfoClick, ...rest }: Props): React.JSX.Element;
 export {};

package/dist/types/components/Input/HelperText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type HelperTextProps = {
+    text?: string;
+    error?: boolean;
+};
+export declare function HelperText({ text, error, }: HelperTextProps): React.ReactElement | null;
+export {};

package/dist/types/components/Input/InputLabel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type InputLabelProps = {
+    label?: string;
+    required?: boolean;
+    optional?: boolean;
+    showInfoIcon?: boolean;
+    infoText?: string;
+    onInfoClick?: () => void;
+};
+export declare function InputLabel({ label, required, optional, showInfoIcon, infoText, onInfoClick, }: InputLabelProps): React.ReactElement | null;
+export {};

package/dist/types/components/Input/index.d.ts

@@ -1,23 +1,40 @@
 import React from 'react';
 import { InputProps } from 'antd/es/input';
+import { InputSize } from './inputStyles';
 import 'antd/es/input/style/css';
-type Props = {
-    addonBefore?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
+type BaseInputProps = {
     label?: string;
     required?: boolean;
     optional?: boolean;
-} & Omit<InputProps, 'addonBefore' | 'placeholder' | 'disabled' | 'className'>;
+    size?: InputSize;
+    helperText?: string;
+    error?: boolean;
+    showInfoIcon?: boolean;
+    infoText?: string;
+    onInfoClick?: () => void;
+};
+type Props = BaseInputProps & {
+    addonBefore?: string | React.ReactNode;
+    addonAfter?: string | React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    disabledAddon?: boolean;
+    className?: string;
+} & Omit<InputProps, 'addonBefore' | 'addonAfter' | 'placeholder' | 'disabled' | 'className' | 'size'>;
 declare const MainInput: {
-    ({ addonBefore, placeholder, disabled, className, label, required, optional, ...rest }: Props): React.JSX.Element;
-    Password({ addonBefore, placeholder, disabled, className, label, required, ...rest }: Props): React.JSX.Element;
-    Search({ addonBefore, placeholder, className, onChange, onSearch, ...rest }: SearchProps): React.JSX.Element;
-    TextArea({ className, label, required, optional, ...rest }: TextAreaProps): React.JSX.Element;
+    ({ addonBefore, addonAfter, placeholder, disabled, disabledAddon, className, label, required, optional, size, helperText, error, showInfoIcon, infoText, onInfoClick, ...rest }: Props): React.JSX.Element;
+    Password({ addonBefore, placeholder, disabled, className, label, required, optional, size, helperText, error, showInfoIcon, infoText, onInfoClick, ...rest }: PasswordProps): React.JSX.Element;
+    Search({ addonBefore, placeholder, className, onChange, onSearch, size, helperText, error, ...rest }: SearchProps): React.JSX.Element;
+    TextArea({ className, label, required, optional, size, helperText, error, showInfoIcon, infoText, onInfoClick, ...rest }: TextAreaProps): React.JSX.Element;
     Group: import("react").FC<import("antd/es/input").GroupProps>;
 };
-type SearchProps = {
+type PasswordProps = BaseInputProps & {
+    addonBefore?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+} & Omit<InputProps, 'addonBefore' | 'placeholder' | 'disabled' | 'className' | 'size'>;
+type SearchProps = Pick<BaseInputProps, 'size' | 'helperText' | 'error'> & {
     addonBefore?: string | React.ReactNode;
     placeholder?: string;
     className?: string;
@@ -26,15 +43,12 @@ type SearchProps = {
     onSearch?: () => void;
     value?: string;
 };
-type TextAreaProps = {
+type TextAreaProps = BaseInputProps & {
     placeholder?: string;
     className?: string;
     style?: Record<string, unknown>;
     onChange?: (e: any) => void;
     onFocus?: any;
-    label?: string;
-    required?: boolean;
-    optional?: boolean;
     disabled?: boolean;
     value?: string;
     rows?: number;

package/dist/types/components/Input/inputStyles.d.ts

@@ -0,0 +1,4 @@
+import { SIZE_CONFIG, InputSize } from 'src/shared/TypographyStyles';
+import { straitsXTheme } from 'src/theme/theme';
+export { SIZE_CONFIG, InputSize };
+export declare function getBaseInputStyle(theme: typeof straitsXTheme, size?: InputSize, error?: boolean, disabledAddon?: boolean): string;

package/dist/types/components/InputWithButton/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type Props = {
+    buttonText: string;
+    onButtonClick?: () => void;
+    prefix?: React.ReactNode;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    disabledInput?: boolean;
+    disabledPrefix?: boolean;
+    staticPrefix?: boolean;
+    error?: boolean;
+    className?: string;
+};
+declare const InputWithButton: React.FC<Props>;
+export default InputWithButton;

package/dist/types/components/RangePicker/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import 'antd/es/date-picker/style/css';
+import { InputSize } from '../Input/inputStyles';
 type Props = {
     format?: string;
     style?: Record<string, unknown>;
@@ -9,6 +10,7 @@ type Props = {
     disabledDate?: any;
     value?: [any, any];
     picker?: any;
+    size?: InputSize;
 };
-export default function ({ format, ...rest }: Props): React.JSX.Element;
+export default function ({ format, size, ...rest }: Props): React.JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -11,6 +11,7 @@ export { default as Dropdown } from './components/Dropdown';
 export { default as DynamicSelect } from './components/DynamicSelect';
 export { default as Form } from './components/Form';
 export { default as Input } from './components/Input';
+export { default as InputWithButton } from './components/InputWithButton';
 export { default as Tag } from './components/Tag';
 export { default as Modal } from './components/Modal';
 export { default as DeprecatedModal } from './components/DeprecatedModal';

package/dist/types/shared/TypographyStyles.d.ts

@@ -19,6 +19,19 @@ export declare enum FONT_SIZE {
     SMALL = "12px",
     SMALL_MOBILE = "14px"
 }
+export type InputSize = 'large' | 'small';
+export declare const SIZE_CONFIG: {
+    large: {
+        height: string;
+        borderRadius: string;
+        padding: string;
+    };
+    small: {
+        height: string;
+        borderRadius: string;
+        padding: string;
+    };
+};
 export declare enum LINE_HEIGHT {
     H1 = "29px",
     H1_MOBILE = "28px",