@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/date-picker/styled-components.js

@@ -1,33 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCalendarContainerStyles = exports.StyledFooterBeforeEnhancer = exports.StyledFooter = exports.StyledWeekdayHeader = exports.getDayStyles = exports.StyledInputWrapper = void 0;
+exports.getCalendarContainerStyles = exports.StyledFooterBeforeEnhancer = exports.StyledFooter = exports.getDayStyles = exports.StyledInputWrapper = void 0;
 var tslib_1 = require("tslib");
-var utils_1 = require("baseui/datepicker/utils");
-var day_state_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/day-state"));
-var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
+var day_state_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/day-state"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
 var style_1 = require("../style");
 exports.StyledInputWrapper = (0, style_1.styled)('div');
-var getWeekdayHeaderStyle = function (utils, props) {
-    var getStyle = utils.getStyle, px2rem = utils.px2rem, theme = utils.theme;
-    var _a = props.$date, $date = _a === void 0 ? [new Date()] : _a, alt = props.alt, range = props.range;
-    // no highlight required if range is true or no date is selected
-    var isHighlighted;
-    if (range || !$date[0]) {
-        isHighlighted = false;
-    }
-    else {
-        isHighlighted = (0, utils_1.getWeekdayInLocale)(Array.isArray($date) ? $date[0] : $date) === alt;
-    }
-    return getStyle('border-b-2 box-border cursor-default h-9 inline-block m-0 pb-2 pt-2 relative text-center w-9', {
-        marginBottom: '-1px',
-        borderBottomStyle: 'solid',
-        borderBottomColor: isHighlighted ? theme.spr.ui04 : 'transparent',
-        color: isHighlighted ? theme.spr.text04 : 'inherit',
-        lineHeight: px2rem(20),
-        paddingLeft: px2rem(6),
-        paddingRight: px2rem(6),
-    });
-};
 var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
     var firstChildStyle = firstChild ? { content: 'none' } : {};
     var lastChildStyle = firstChild ? {} : { content: 'none' };
@@ -76,13 +54,64 @@ var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
         '101010010000010': !peekNextMonth && firstChild ? { content: 'none' } : pseudoSelectedStyle,
     }[code] || {});
 };
+function generateDayStyles(defaultCode, defaultStyle) {
+    var _a;
+    var codeForSM = "".concat(defaultCode.substr(0, 12), "1").concat(defaultCode.substr(12 + 1));
+    var codeForEM = "".concat(defaultCode.substr(0, 13), "1").concat(defaultCode.substr(13 + 1));
+    return _a = {},
+        _a[defaultCode] = defaultStyle,
+        _a[codeForSM] = defaultStyle,
+        _a[codeForEM] = defaultStyle,
+        _a;
+}
+var getTempRTLAdaptedStyles = function (code) {
+    var dayStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, generateDayStyles('100110100000000', {
+        ':before': {
+            right: '0%',
+            left: '0%',
+        },
+    })), generateDayStyles('100100001001000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101000001010000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101110100000000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('101000001001000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100100001010000', {
+        ':before': {
+            left: '50%',
+        },
+    }));
+    return dayStyles[code] || {};
+};
 var getDayStyles = function (todaySOD) { return [
-    'text-12 leading-8 w-9',
+    'text-12 leading-8 w-9 flex items-center justify-center',
     function (_a, props) {
         var theme = _a.theme, px2rem = _a.px2rem;
-        var $isHighlighted = props.$isHighlighted, $hasRangeHighlighted = props.$hasRangeHighlighted, $date = props.$date, $selected = props.$selected, $isHovered = props.$isHovered, $range = props.$range, $outsideMonthWithinRange = props.$outsideMonthWithinRange, $startOfMonth = props.$startOfMonth, $endOfMonth = props.$endOfMonth, $hasDateLabel = props.$hasDateLabel, $month = props.$month;
+        var $isHighlighted = props.$isHighlighted, $hasRangeHighlighted = props.$hasRangeHighlighted, $date = props.$date, $selected = props.$selected, $isHovered = props.$isHovered, $range = props.$range, $outsideMonthWithinRange = props.$outsideMonthWithinRange, $startOfMonth = props.$startOfMonth, $endOfMonth = props.$endOfMonth, $month = props.$month;
         var code = (0, day_state_1.default)(props);
         var $outsideMonth = new Date($date).getMonth() !== $month;
+        var $isCompact = theme.density === 'COMPACT';
         var backgroundColor = 'transparent';
         if ($selected) {
             backgroundColor = theme.spr.ui04;
@@ -93,12 +122,14 @@ var getDayStyles = function (todaySOD) { return [
         else if ($isHovered || $isHighlighted || props.$pseudoHighlighted) {
             backgroundColor = theme.spr.ui05;
         }
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)({ height: $hasDateLabel ? px2rem('60px') : px2rem('36px'), paddingLeft: px2rem('6px'), paddingRight: px2rem('6px'), ':after': (0, tslib_1.__assign)((0, tslib_1.__assign)({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($isHighlighted &&
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({ 
+            // Todo:- Need to remove this ternary expression and this $hasDatelable prop
+            height: $isCompact ? px2rem('30px') : px2rem('36px'), width: $isCompact ? px2rem('30px') : px2rem('36px'), paddingLeft: px2rem('6px'), paddingRight: px2rem('6px'), ':after': (0, tslib_1.__assign)((0, tslib_1.__assign)({ left: 'unset', height: '100%', width: '100%', borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($isHighlighted &&
                 !$selected &&
                 !$isHovered &&
                 !$hasRangeHighlighted && {
                 backgroundColor: 'transparent',
-            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
+            })), { backgroundColor: backgroundColor, top: 0 }), ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ top: '0px', height: '100%', borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
                 ? {
                     borderTopLeftRadius: '100%',
                     borderBottomLeftRadius: '100%',
@@ -108,7 +139,7 @@ var getDayStyles = function (todaySOD) { return [
                     borderTopRightRadius: '100%',
                     borderBottomRightRadius: '100%',
                 }
-                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), ':first-child': (0, tslib_1.__assign)({}, ($range
+                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), (getTempRTLAdaptedStyles(code)[':before'] || {})), ':first-child': (0, tslib_1.__assign)({}, ($range
                 ? {
                     ':before': (0, tslib_1.__assign)({}, getEdgeDayBeforeStyle(code, true, props.$peekNextMonth)),
                 }
@@ -119,11 +150,10 @@ var getDayStyles = function (todaySOD) { return [
                 : {})) }, (date_fns_adapter_1.default.isEqual($date, todaySOD) &&
             !$selected && {
             color: theme.spr.text04,
-        })), ($outsideMonth && { color: theme.spr.text03 }));
+        })), ($outsideMonth && { color: $selected ? theme.spr.text05 : theme.spr.text03 }));
     },
 ]; };
 exports.getDayStyles = getDayStyles;
-exports.StyledWeekdayHeader = (0, style_1.styled)('div', getWeekdayHeaderStyle);
 exports.StyledFooter = (0, style_1.styled)('div', 'flex px-4 py-3');
 exports.StyledFooterBeforeEnhancer = (0, style_1.styled)('div', 'flex-none');
 var getCalendarContainerStyles = function (_a) {

package/date-picker/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CalendarProps as BaseCalendarProps, DatepickerProps as BaseDatepickerProps, SharedStylePropsT } from 'baseui/datepicker';
+import { CalendarProps as BaseCalendarProps, DatepickerProps as BaseDatepickerProps, SharedStylePropsT } from '../baseui/datepicker';
 import { TimePickerProps } from '../time-picker';
 import { InputSize, InputVariant } from '../input';
 import { Override } from '../overrides/types';
@@ -19,6 +19,8 @@ export declare type DateTimeSelectSharedProps = {
 export declare type DatepickerOverrides<T = SharedStyleProps> = {
     CalendarContainer?: Override<T>;
     CalendarHeader?: Override<T>;
+    TimezonePicker?: Override<T>;
+    Calendar?: Override<CalendarProps & Record<string, any>>;
     Day?: Override<T>;
     Input?: Override<T>;
     InputWrapper?: Override<T>;
@@ -43,7 +45,11 @@ export declare type DatepickerOverrides<T = SharedStyleProps> = {
     Footer?: Override<T>;
     DateTimeSelect?: Override<DateTimeSelectSharedProps>;
 };
+export declare type Nullable<T> = T | null | undefined;
 export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSelectStart' | 'timeSelectEnd' | 'value' | 'onChange' | 'quickSelect' | 'quickSelectOptions' | 'size' | 'overrides' | 'onDayClick' | 'onDayMouseOver' | 'onDayMouseLeave' | 'onMonthChange' | 'onYearChange' | 'formatString' | 'peekNextMonth' | 'fixedHeight'> & {
+    id?: string;
+    showTimezone?: boolean;
+    timezone?: string;
     intent?: Intent;
     timeSelect?: boolean;
     onBlur?: () => void;
@@ -53,7 +59,8 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
     variant?: InputVariant;
     value: Date | Date[] | undefined;
     onChange?: (data: {
-        value?: (Date | undefined)[] | Date | null;
+        value?: Nullable<Date>[] | Nullable<Date>;
+        timezone?: string;
     }) => any;
     size?: InputSize;
     overrides?: DatepickerOverrides;
@@ -75,8 +82,11 @@ export declare type StatefulContainerProps = {
     value?: Date;
     onChange?: (data: {
         value?: Date | undefined | null;
+        timezone?: string;
     }) => any;
     startOpen?: boolean;
+    showTimezone?: boolean;
+    timezone?: string;
 };
 export declare type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
 export declare type DatePickerSharedProps = SharedStylePropsT;

package/date-picker/utils.d.ts

@@ -1,20 +1,23 @@
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
 interface FormatDateParams {
     date: Date | Date[] | undefined;
     formatString?: string;
     locale: any;
-    dateHelpers?: any;
+    dateHelpers?: DateHelpers<Date>;
+    timezone?: string;
+    showTimezone?: boolean;
 }
 export declare const normalizeDashes: (formatString: string) => string;
-export declare const formatDate: (params: FormatDateParams) => any;
-export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string | undefined, locale: Locale) => string;
+export declare const formatDate: ({ showTimezone, ...params }: FormatDateParams) => string;
+export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string, locale: Locale) => string;
 export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
-    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    weekStartsOn?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | undefined;
 } | undefined) => any;
-export declare const isTimeInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    dateHelpers?: any;
+export declare const isTimeInRange: (date: Date | Array<Date | undefined | null> | null | undefined, { minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    dateHelpers?: DateHelpers<Date> | undefined;
 }) => boolean;
 export declare const isDayInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
     minDate?: Date | undefined;

package/date-picker/utils.js

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isDayInRange = exports.isTimeInRange = exports.prepareLocale = exports.getAriaLabel = exports.formatDate = exports.normalizeDashes = void 0;
 var tslib_1 = require("tslib");
 var en_US_1 = (0, tslib_1.__importDefault)(require("date-fns/locale/en-US"));
-var i18n_interpolation_1 = (0, tslib_1.__importDefault)(require("baseui/helpers/i18n-interpolation"));
-var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
-var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
+var i18n_interpolation_1 = (0, tslib_1.__importDefault)(require("../baseui/helpers/i18n-interpolation"));
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-helpers"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("../baseui/datepicker/utils/date-fns-adapter"));
 var constants_1 = require("./constants");
 // replacing both hyphens and em-dashes with en-dashes
 var normalizeDashes = function (formatString) { return formatString.replace(/-/g, '–').replace(/—/g, '–'); };
 exports.normalizeDashes = normalizeDashes;
-var formatDate = function (params) {
+var formatDate = function (_a) {
+    var _b = _a.showTimezone, showTimezone = _b === void 0 ? false : _b, params = (0, tslib_1.__rest)(_a, ["showTimezone"]);
     var date = params.date;
     var formatString = params.formatString || (0, exports.normalizeDashes)(constants_1.DEFAULT_FORMAT_STRING);
     var dateHelpers = params.dateHelpers || new date_helpers_1.default(date_fns_adapter_1.default);
@@ -22,10 +23,14 @@ var formatDate = function (params) {
     if (Array.isArray(date) && !date[0] && !date[1]) {
         return '';
     }
+    var formattedDate;
     if (Array.isArray(date)) {
-        return date.map(function (day) { return format(day); }).join(' – ');
+        formattedDate = date.map(function (day) { return format(day); }).join(' – ');
     }
-    return format(date);
+    else {
+        formattedDate = format(date);
+    }
+    return "".concat(formattedDate).concat(params.timezone && showTimezone ? " | ".concat(params.timezone) : '');
 };
 exports.formatDate = formatDate;
 var getAriaLabel = function (value, formatDisplayValue, locale) {
@@ -64,7 +69,10 @@ var isTimeInRange = function (date, _a) {
         return true;
     }
     if (Array.isArray(date)) {
-        return date.every(function (_date) { return (!minDate || !dateHelpers.isBefore(_date, minDate)) && (!maxDate || !dateHelpers.isAfter(_date, maxDate)); });
+        return date.every(function (_date) {
+            return (!minDate || !_date || !dateHelpers.isBefore(_date, minDate)) &&
+                (!maxDate || !_date || !dateHelpers.isAfter(_date, maxDate));
+        });
     }
     return (!minDate || !dateHelpers.isBefore(date, minDate)) && (!maxDate || !dateHelpers.isAfter(date, maxDate));
 };

package/date-time/DateTime.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DateTimeProps } from './types';
+export declare const DateTime: ({ date, variant, dateTimeOptions }: DateTimeProps) => JSX.Element;

package/date-time/DateTime.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTime = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+//hooks
+var useDateTime_1 = require("./useDateTime");
+var DateTime = function (_a) {
+    var date = _a.date, variant = _a.variant, dateTimeOptions = _a.dateTimeOptions;
+    var formattedDate = (0, useDateTime_1.useDateTime)({ date: date, variant: variant, dateTimeOptions: dateTimeOptions });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedDate }, void 0);
+};
+exports.DateTime = DateTime;

package/date-time/index.d.ts

@@ -0,0 +1,3 @@
+export { DateTime } from './DateTime';
+export { useDateTime } from './useDateTime';
+export * from './types';

package/date-time/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateTime = exports.DateTime = void 0;
+var tslib_1 = require("tslib");
+var DateTime_1 = require("./DateTime");
+Object.defineProperty(exports, "DateTime", { enumerable: true, get: function () { return DateTime_1.DateTime; } });
+var useDateTime_1 = require("./useDateTime");
+Object.defineProperty(exports, "useDateTime", { enumerable: true, get: function () { return useDateTime_1.useDateTime; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/date-time/package.json

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

package/date-time/types.d.ts

@@ -0,0 +1,21 @@
+import { ValueOf } from '../utility-types';
+export declare const DATE_TIME_VARIANTS: {
+    readonly SHORT_DATE: "shortDate";
+    readonly MEDIUM_DATE: "mediumDate";
+    readonly LONG_DATE: "longDate";
+    readonly FULL_DATE: "fullDate";
+    readonly SHORT_TIME: "shortTime";
+    readonly MEDIUM_TIME: "mediumTime";
+    readonly LONG_TIME: "longTime";
+    readonly FULL_TIME: "fullTime";
+    readonly SHORT_DATE_TIME: "shortDateTime";
+    readonly MEDIUM_DATE_TIME: "mediumDateTime";
+    readonly LONG_DATE_TIME: "longDateTime";
+    readonly FULL_DATE_TIME: "fullDateTime";
+    readonly CUSTOM: "custom";
+};
+export declare type DateTimeProps = {
+    date: Date | number;
+    variant: ValueOf<typeof DATE_TIME_VARIANTS>;
+    dateTimeOptions?: Intl.DateTimeFormatOptions;
+};

package/date-time/types.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DATE_TIME_VARIANTS = void 0;
+exports.DATE_TIME_VARIANTS = {
+    SHORT_DATE: 'shortDate',
+    MEDIUM_DATE: 'mediumDate',
+    LONG_DATE: 'longDate',
+    FULL_DATE: 'fullDate',
+    SHORT_TIME: 'shortTime',
+    MEDIUM_TIME: 'mediumTime',
+    LONG_TIME: 'longTime',
+    FULL_TIME: 'fullTime',
+    SHORT_DATE_TIME: 'shortDateTime',
+    MEDIUM_DATE_TIME: 'mediumDateTime',
+    LONG_DATE_TIME: 'longDateTime',
+    FULL_DATE_TIME: 'fullDateTime',
+    CUSTOM: 'custom',
+};

package/date-time/useDateTime.d.ts

@@ -0,0 +1,2 @@
+import { DateTimeProps } from './types';
+export declare const useDateTime: ({ date, variant, dateTimeOptions }: DateTimeProps) => string;

package/date-time/useDateTime.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateTime = void 0;
+var tslib_1 = require("tslib");
+var locale_1 = require("../locale");
+var variants_1 = require("./variants");
+var useDateTime = function (_a) {
+    var date = _a.date, variant = _a.variant, dateTimeOptions = _a.dateTimeOptions;
+    var variantOptions = variants_1.VARIANTS_DATE_FORMAT_OPTIONS[variant];
+    var langCode = (0, locale_1.useLocale)().langCode;
+    return Intl.DateTimeFormat(langCode, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, variantOptions), dateTimeOptions)).format(date);
+};
+exports.useDateTime = useDateTime;

package/date-time/variants.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_VARIANT: "shortDate";
+export declare const VARIANTS_DATE_FORMAT_OPTIONS: {
+    [key: string]: Intl.DateTimeFormatOptions;
+};

package/date-time/variants.js

@@ -0,0 +1,87 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VARIANTS_DATE_FORMAT_OPTIONS = exports.DEFAULT_VARIANT = void 0;
+var types_1 = require("./types");
+exports.DEFAULT_VARIANT = types_1.DATE_TIME_VARIANTS.SHORT_DATE; //dd/mm/yyyy in en_US
+exports.VARIANTS_DATE_FORMAT_OPTIONS = (_a = {},
+    _a[types_1.DATE_TIME_VARIANTS.SHORT_DATE] = { year: 'numeric', month: 'numeric', day: 'numeric' },
+    _a[types_1.DATE_TIME_VARIANTS.MEDIUM_DATE] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.LONG_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.FULL_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.SHORT_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.MEDIUM_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.LONG_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'short',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.FULL_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.SHORT_DATE_TIME] = {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.MEDIUM_DATE_TIME] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.LONG_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+        timeZoneName: 'short',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.FULL_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a);

package/esm/ClientOnly.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type ClientOnlyProps = {
+    children: ReactNode;
+};
+export declare const ClientOnly: ({ children }: ClientOnlyProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/esm/ClientOnly.js

@@ -0,0 +1,15 @@
+import { __read } from "tslib";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useTransitionState } from './hooks/useTransitionState';
+export var ClientOnly = function (_a) {
+    var children = _a.children;
+    var _b = __read(useTransitionState(false), 2), hasMounted = _b[0], setHasMounted = _b[1];
+    useEffect(function () {
+        setHasMounted(true);
+    }, [setHasMounted]);
+    if (!hasMounted) {
+        return null;
+    }
+    return _jsx(_Fragment, { children: children }, void 0);
+};

package/esm/allComponentsAndUtilities.d.ts

@@ -43,7 +43,6 @@ export * as Switch from './switch';
 export * as Tabs from './tabs';
 export * as Tag from './tag';
 export * as TextArea from './textarea';
-export * as Themes from './themes';
 export * as TimePicker from './time-picker';
 export * as TimeRangePicker from './time-range-picker';
 export * as TimeZonePicker from './time-zone-picker';
@@ -53,3 +52,8 @@ export * as Video from './video';
 export * as PaymentCard from './payment-card';
 export * as PhoneInput from './phone-input';
 export * as DateInput from './date-input';
+export * as Breadcrumb from './breadcrumb';
+export * as Transition from './transitions/transition';
+export * as Collapse from './transitions/collapse';
+export * as Grow from './transitions/grow';
+export * as Fade from './transitions/fade';

package/esm/allComponentsAndUtilities.js

@@ -82,8 +82,6 @@ import * as Tag_1 from './tag';
 export { Tag_1 as Tag };
 import * as TextArea_1 from './textarea';
 export { TextArea_1 as TextArea };
-import * as Themes_1 from './themes';
-export { Themes_1 as Themes };
 import * as TimePicker_1 from './time-picker';
 export { TimePicker_1 as TimePicker };
 import * as TimeRangePicker_1 from './time-range-picker';
@@ -102,3 +100,13 @@ import * as PhoneInput_1 from './phone-input';
 export { PhoneInput_1 as PhoneInput };
 import * as DateInput_1 from './date-input';
 export { DateInput_1 as DateInput };
+import * as Breadcrumb_1 from './breadcrumb';
+export { Breadcrumb_1 as Breadcrumb };
+import * as Transition_1 from './transitions/transition';
+export { Transition_1 as Transition };
+import * as Collapse_1 from './transitions/collapse';
+export { Collapse_1 as Collapse };
+import * as Grow_1 from './transitions/grow';
+export { Grow_1 as Grow };
+import * as Fade_1 from './transitions/fade';
+export { Fade_1 as Fade };

package/esm/asyncSelect/asyncSelect.d.ts

@@ -1,7 +1,9 @@
 /**
  *  Created by Aneree on 03/11/20.
  */
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { AsyncSelectProps } from './types';
-declare const AsyncSelect: (props: React.PropsWithChildren<AsyncSelectProps>) => ReactElement;
+declare const AsyncSelect: ({ loadOptions, initialOptions, resolveSelectedOptions, value, hideSelectAll, ...restProps }: AsyncSelectProps & {
+    children?: ReactNode;
+}) => ReactElement;
 export { AsyncSelect };