@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/types.d.ts

@@ -60,7 +60,7 @@ export declare type Variant = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 /**
  * Size Options
  */
-export declare type Size = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type Size = 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Intent Options
  */
@@ -77,6 +77,7 @@ export declare type Px2Rem = (px: number | string) => string;
  * `useStyle` return type
  */
 export declare type StyleUtils = ThemeContext & {
+    isRTL?: boolean;
     css: CSSFunc;
     getStyle: GetStyle;
     px2rem: Px2Rem;

package/typography/Typography.js

@@ -19,9 +19,22 @@ var defaultVariantToHTMLTagMapping = {
     bl1: 'p',
     bl2: 'p',
     bl3: 'p',
+    'body-8': 'span',
+    'body-10': 'span',
+    'body-12': 'span',
+    'body-13': 'span',
+    'body-14': 'span',
+    'body-16': 'span',
+    'display-18': 'h6',
+    'display-20': 'h5',
+    'display-24': 'h4',
+    'display-28': 'h3',
+    'display-32': 'h2',
+    'display-40': 'h1',
+    'display-42': 'h1',
 };
 var Typography = (0, react_1.forwardRef)(function (_a, ref) {
-    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'l1' : _b, weight = _a.weight, restProps = (0, tslib_1.__rest)(_a, ["$as", "variant", "weight"]);
+    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'body-14' : _b, weight = _a.weight, restProps = (0, tslib_1.__rest)(_a, ["$as", "variant", "weight"]);
     var sharedProps = (0, helpers_1.add$props)({ variant: variant, weight: weight });
     return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledTypography, (0, tslib_1.__assign)({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps), void 0));
 });

package/typography/constants.d.ts

@@ -4,3 +4,59 @@ export declare const WEIGHT: Readonly<{
     semibold: number;
     bold: number;
 }>;
+export declare const DEFAULT_BODY_WEIGHT = 400;
+export declare const DEFAULT_DISPLAY_WEIGHT = 600;
+export declare const TYPOGRAPHY_VARIANT_MAP: {
+    'body-8': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-10': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-12': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-13': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-14': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-16': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-18': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-20': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-24': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-28': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-32': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-40': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-42': {
+        fontSize: string;
+        lineHeight: string;
+    };
+};

package/typography/constants.js

@@ -1,9 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WEIGHT = void 0;
+exports.TYPOGRAPHY_VARIANT_MAP = exports.DEFAULT_DISPLAY_WEIGHT = exports.DEFAULT_BODY_WEIGHT = exports.WEIGHT = void 0;
 exports.WEIGHT = Object.freeze({
     regular: 400,
     medium: 500,
     semibold: 600,
     bold: 700,
 });
+exports.DEFAULT_BODY_WEIGHT = 400;
+exports.DEFAULT_DISPLAY_WEIGHT = 600;
+exports.TYPOGRAPHY_VARIANT_MAP = {
+    'body-8': {
+        fontSize: '8px',
+        lineHeight: '10px',
+    },
+    'body-10': {
+        fontSize: '10px',
+        lineHeight: '12px',
+    },
+    'body-12': {
+        fontSize: '12px',
+        lineHeight: '15px',
+    },
+    'body-13': {
+        fontSize: '13px',
+        lineHeight: '16px',
+    },
+    'body-14': {
+        fontSize: '14px',
+        lineHeight: '18px',
+    },
+    'body-16': {
+        fontSize: '16px',
+        lineHeight: '20px',
+    },
+    'display-18': {
+        fontSize: '18px',
+        lineHeight: '24px',
+    },
+    'display-20': {
+        fontSize: '20px',
+        lineHeight: '26px',
+    },
+    'display-24': {
+        fontSize: '24px',
+        lineHeight: '34px',
+    },
+    'display-28': {
+        fontSize: '28px',
+        lineHeight: '34px',
+    },
+    'display-32': {
+        fontSize: '32px',
+        lineHeight: '38px',
+    },
+    'display-40': {
+        fontSize: '40px',
+        lineHeight: '46px',
+    },
+    'display-42': {
+        fontSize: '42px',
+        lineHeight: '48px',
+    },
+};

package/typography/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Typography } from './Typography';
+export { TYPOGRAPHY_VARIANT_MAP } from './constants';
 export type { TypographyProps, FontWeight, TypographyVariant } from './types';

package/typography/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Typography = void 0;
+exports.TYPOGRAPHY_VARIANT_MAP = exports.Typography = void 0;
 var Typography_1 = require("./Typography");
 Object.defineProperty(exports, "Typography", { enumerable: true, get: function () { return __importDefault(Typography_1).default; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "TYPOGRAPHY_VARIANT_MAP", { enumerable: true, get: function () { return constants_1.TYPOGRAPHY_VARIANT_MAP; } });

package/typography/styled-components.js

@@ -3,11 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTypography = void 0;
 var style_1 = require("../style");
 var constants_1 = require("./constants");
+var getTypographyWeight = function ($variant) {
+    return $variant.includes('body')
+        ? constants_1.DEFAULT_BODY_WEIGHT
+        : $variant.includes('display')
+            ? constants_1.DEFAULT_DISPLAY_WEIGHT
+            : constants_1.WEIGHT.regular;
+};
 exports.StyledTypography = (0, style_1.styled)('span', function (_a, _b) {
-    var theme = _a.theme;
+    var _c, _d;
+    var theme = _a.theme, classes = _a.classes;
     var $variant = _b.$variant, $weight = _b.$weight;
-    var variantStyles = theme.typography[$variant] || theme.typography.l3;
+    var variantStyles = (_d = (_c = constants_1.TYPOGRAPHY_VARIANT_MAP[$variant]) !== null && _c !== void 0 ? _c : theme.typography[$variant]) !== null && _d !== void 0 ? _d : theme.typography['l1'];
     var fontSize = variantStyles.fontSize, lineHeight = variantStyles.lineHeight, variantFontWeight = variantStyles.fontWeight;
-    var fontWeight = $weight ? "".concat(constants_1.WEIGHT[$weight]) : variantFontWeight;
+    var fontWeight = $weight ? "".concat(constants_1.WEIGHT[$weight]) : variantFontWeight !== null && variantFontWeight !== void 0 ? variantFontWeight : getTypographyWeight($variant);
     return { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight };
 });

package/typography/types.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { SpacewebComponentProps } from '../types';
-export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4';
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4' | 'body-8' | 'body-10' | 'body-12' | 'body-13' | 'body-14' | 'body-16' | 'display-18' | 'display-20' | 'display-24' | 'display-28' | 'display-32' | 'display-40' | 'display-42';
 export declare type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 export declare type TypographyProps = PropsWithChildren<SpacewebComponentProps> & {
     /** variant of typography element */

package/utils/intlNumberFormatUtils/index.d.ts

@@ -0,0 +1,7 @@
+import { NumberVariant } from './types';
+export declare const getFormattedNumber: ({ value, locale, variant, numberOptions, }: {
+    value: number;
+    locale: string;
+    variant: NumberVariant;
+    numberOptions?: Intl.NumberFormatOptions | undefined;
+}) => string;

package/utils/intlNumberFormatUtils/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedNumber = void 0;
+var tslib_1 = require("tslib");
+var types_1 = require("./types");
+var getFormattedNumber = function (_a) {
+    var value = _a.value, locale = _a.locale, variant = _a.variant, numberOptions = _a.numberOptions;
+    var absValue = Math.abs(value);
+    var betweenZeroAndOne = absValue > 0 && absValue < 1;
+    var maximumFractionDigits, notation;
+    switch (variant.type) {
+        case types_1.NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case types_1.NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case types_1.NUMBER_VARIANTS.COMPACT_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        case types_1.NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return Intl.NumberFormat(locale, (0, tslib_1.__assign)({ minimumFractionDigits: 0, maximumFractionDigits: maximumFractionDigits, notation: notation }, numberOptions)).format(value);
+};
+exports.getFormattedNumber = getFormattedNumber;

package/utils/intlNumberFormatUtils/types.d.ts

@@ -0,0 +1,21 @@
+export declare const NUMBER_VARIANTS: {
+    readonly EXPANDED_AUTO_FORMAT: "expandedAutoFormat";
+    readonly COMPACT_AUTO_FORMAT: "compactAutoFormat";
+    readonly EXPANDED_DECIMAL_FORMAT: "expandedDecimalFormat";
+    readonly COMPACT_DECIMAL_FORMAT: "compactDecimalFormat";
+};
+export declare type ExpandedAutoFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT;
+};
+export declare type CompactAutoFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_AUTO_FORMAT;
+};
+export declare type ExpandedDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type CompactDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type NumberVariant = ExpandedAutoFormat | CompactAutoFormat | ExpandedDecimalFormat | CompactDecimalFormat;

package/utils/intlNumberFormatUtils/types.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NUMBER_VARIANTS = void 0;
+exports.NUMBER_VARIANTS = {
+    EXPANDED_AUTO_FORMAT: 'expandedAutoFormat',
+    COMPACT_AUTO_FORMAT: 'compactAutoFormat',
+    EXPANDED_DECIMAL_FORMAT: 'expandedDecimalFormat',
+    COMPACT_DECIMAL_FORMAT: 'compactDecimalFormat',
+};

package/utils/package.json

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

package/esm/icon/components/chevron-right-solid.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { IconProps } from '../types';
-export default function ChevronRightSolid(props: IconProps): React.ReactElement;

package/esm/icon/components/chevron-right-solid.js

@@ -1,6 +0,0 @@
-import { __assign } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '../icon';
-export default function ChevronRightSolid(props) {
-    return (_jsx(Icon, __assign({ viewBox: "0 0 10 10", "data-icon-name": "ChevronRightSolid" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.369 1.97v6.06a.5.5 0 00.79.408l4.262-3.03a.5.5 0 000-.815L3.159 1.562a.5.5 0 00-.79.407z" }, void 0) }), void 0));
-}

package/icon/components/chevron-right-solid.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { IconProps } from '../types';
-export default function ChevronRightSolid(props: IconProps): React.ReactElement;

package/icon/components/chevron-right-solid.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var icon_1 = (0, tslib_1.__importDefault)(require("../icon"));
-function ChevronRightSolid(props) {
-    return ((0, jsx_runtime_1.jsx)(icon_1.default, (0, tslib_1.__assign)({ viewBox: "0 0 10 10", "data-icon-name": "ChevronRightSolid" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.369 1.97v6.06a.5.5 0 00.79.408l4.262-3.03a.5.5 0 000-.815L3.159 1.562a.5.5 0 00-.79.407z" }, void 0) }), void 0));
-}
-exports.default = ChevronRightSolid;