@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/checkbox/basewebAdapters.js

@@ -28,7 +28,12 @@ function useCheckboxAdapter(props) {
             props: (0, helpers_1.add$props)({ size: size, intent: intent }),
         },
         // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/406 - baseui adds position absolute
-        Input: { style: { position: 'static' } },
+        Input: {
+            style: { position: 'static' },
+            props: {
+                'aria-required': restProps['aria-required'],
+            },
+        },
     }, overrides);
     var inputRefObj = (0, useCombinedRef_1.useCombineRefObjects)(props.inputRef);
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertedOverrides, inputRef: inputRefObj, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });

package/color-picker/ColorPalette.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { ColorPickerOverrides } from './types';
+declare type ContentProps = {
+    color?: string;
+    overrides?: ColorPickerOverrides;
+    onChange: (color?: string) => void;
+};
+export declare const ColorPalette: ({ color: selectedColor, overrides, onChange }: ContentProps) => ReactElement;
+export {};

package/color-picker/ColorPalette.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPalette = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+// import { Typography } from '../typography';
+var box_1 = require("../box");
+var grid_1 = require("../grid");
+var Swatch_1 = require("./Swatch");
+// import { useTheme } from '../theme';
+var overrides_1 = require("../overrides");
+var colors_1 = require("./colors");
+var ColorPalette = function (_a) {
+    // const { theme } = useTheme();
+    var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange;
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Swatches, grid_1.Grid), 2), Swatches = _b[0], swatchesProps = _b[1];
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Swatch, Swatch_1.Swatch), 2), Swatch = _c[0], swatchProps = _c[1];
+    // const sprinklrClrTokens = useMemo(
+    //   () => Object.keys(theme.spr).filter((token: string): boolean => token.startsWith('clr')),
+    //   [theme]
+    // );
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(Swatches, (0, tslib_1.__assign)({ cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: colors_1.COLOR_PALETTE.map(function (row) {
+                return row.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, (0, tslib_1.__assign)({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); });
+            }) }), void 0) }, void 0));
+};
+exports.ColorPalette = ColorPalette;

package/color-picker/ColorPicker.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { ColorPickerProps } from './types';
+export declare const ColorPicker: ({ value, overrides, heading, onChange, resetButtonLabel, }: ColorPickerProps) => ReactElement;

package/color-picker/ColorPicker.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var typography_1 = require("../typography");
+var box_1 = require("../box");
+var ColorPalette_1 = require("./ColorPalette");
+var reset_color_1 = (0, tslib_1.__importDefault)(require("../icon/components/reset-color"));
+var button_1 = require("../button");
+var overrides_1 = require("../overrides");
+var locale_1 = require("../locale");
+var styled_component_1 = require("./styled-component");
+var RESET_CLASSNAME = [
+    'spr-text-01 hover:spr-text-04',
+    function (_a) {
+        var theme = _a.theme;
+        return ({
+            ':disabled': {
+                color: theme.spr.text01,
+                ':hover': {
+                    color: theme.spr.text01,
+                },
+            },
+        });
+    },
+];
+var ColorPicker = function (_a) {
+    var value = _a.value, overrides = _a.overrides, heading = _a.heading, onChange = _a.onChange, resetButtonLabel = _a.resetButtonLabel;
+    var locale = (0, locale_1.useLocale)();
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, typography_1.Typography), 2), Heading = _b[0], headingProps = _b[1];
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _c[0], rootProps = _c[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({}, rootProps, { children: [heading ? ((0, jsx_runtime_1.jsx)(Heading, (0, tslib_1.__assign)({ "$as": "div", className: "spr-text-03", weight: "bold", variant: "bs3" }, headingProps, { children: heading }), void 0)) : null, (0, jsx_runtime_1.jsx)(ColorPalette_1.ColorPalette, { color: value, onChange: onChange, overrides: overrides }, void 0), (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-start -ml-1.5" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ startEnhancer: (0, jsx_runtime_1.jsx)(reset_color_1.default, { size: 12 }, void 0), variant: "minimal", size: "xxxs", className: RESET_CLASSNAME, disabled: !value, onClick: function () { return onChange(undefined); } }, { children: resetButtonLabel !== null && resetButtonLabel !== void 0 ? resetButtonLabel : locale.colorPicker.resetButtonLabel }), void 0) }), void 0)] }), void 0));
+};
+exports.ColorPicker = ColorPicker;

package/color-picker/Swatch.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { ClassName } from '../types';
+import { ColorPickerOverrides } from './types';
+declare type SwatchProps = {
+    color: string;
+    isSelected: boolean;
+    onChange: (color?: string) => void;
+    className?: ClassName;
+    overrides?: ColorPickerOverrides;
+};
+export declare const Swatch: import("react").MemoExoticComponent<({ color, isSelected, onChange, className, overrides, ...props }: SwatchProps) => ReactElement>;
+export {};

package/color-picker/Swatch.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swatch = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var helpers_1 = require("../helpers");
+var base_button_1 = require("../base-button");
+var tick_1 = (0, tslib_1.__importDefault)(require("../icon/components/tick"));
+var getContrastRatio_1 = require("./getContrastRatio");
+var theme_1 = require("../theme");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+exports.Swatch = (0, react_1.memo)(function (_a) {
+    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["color", "isSelected", "onChange", "className", "overrides"]);
+    var theme = (0, theme_1.useTheme)().theme;
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TickIcon, tick_1.default), 2), TickIcon = _b[0], tickIconProps = _b[1];
+    var contrastRatioWithTickIcon = (0, react_1.useMemo)(function () { return (isSelected ? (0, getContrastRatio_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.icon05)) : 0); }, [theme, isSelected, color]);
+    var contrastRatioWithBgColor = (0, react_1.useMemo)(function () { return (0, getContrastRatio_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.popup)); }, [theme, color]);
+    var handleChange = (0, react_1.useCallback)(function () { return onChange(color); }, [color, onChange]);
+    return ((0, jsx_runtime_1.jsx)(base_button_1.BaseButton, (0, tslib_1.__assign)({ onClick: handleChange, className: [
+            'cursor-pointer h-5 w-5 rounded-full flex justify-center items-center',
+            contrastRatioWithBgColor < 1.1 ? 'border-1 border-solid spr-border-03' : '',
+            {
+                backgroundColor: color,
+                transition: '0.15s ease-in-out',
+                ':hover': {
+                    transform: 'scale(1.2)',
+                },
+                ':focus': {
+                    transform: 'scale(1.2)',
+                },
+                ':focus-visible': {
+                    transform: 'scale(1.2)',
+                    outlineWidth: '1px',
+                    outlineOffset: '1px',
+                },
+            },
+            className,
+        ], tabIndex: 0 }, props, { children: isSelected ? ((0, jsx_runtime_1.jsx)(TickIcon, (0, tslib_1.__assign)({ className: contrastRatioWithTickIcon < 4.5 ? 'spr-icon-01' : 'spr-icon-05', size: 10 }, tickIconProps), void 0)) : null }), void 0));
+});

package/color-picker/colors.d.ts

@@ -0,0 +1 @@
+export declare const COLOR_PALETTE: string[][];

package/color-picker/colors.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_PALETTE = void 0;
+var SLATE_COLORS = [
+    '#FFFFFE',
+    '#F3F3F3',
+    '#EFEFEF',
+    '#DADAD9',
+    '#CCCCCC',
+    '#B7B7B7',
+    '#999999',
+    '#676666',
+    '#444343',
+    '#000000',
+];
+var RED_COLORS = [
+    '#fef2f2',
+    '#fee2e2',
+    '#fecaca',
+    '#fca5a5',
+    '#f87171',
+    '#dc2626',
+    '#b91c1c',
+    '#991b1b',
+    '#7f1d1d',
+    '#450a0a',
+];
+var AMBER_COLORS = [
+    '#fffbeb',
+    '#fef3c7',
+    '#fde68a',
+    '#fcd34d',
+    '#fbbf24',
+    '#d97706',
+    '#b45309',
+    '#92400e',
+    '#78350f',
+    '#451a03',
+];
+var GREEN_COLORS = [
+    '#f0fdf4',
+    '#dcfce7',
+    '#bbf7d0',
+    '#86efac',
+    '#4ade80',
+    '#16a34a',
+    '#15803d',
+    '#166534',
+    '#14532d',
+    '#052e16',
+];
+var BLUE_COLORS = [
+    '#eff6ff',
+    '#dbeafe',
+    '#bfdbfe',
+    '#93c5fd',
+    '#60a5fa',
+    '#2563eb',
+    '#1d4ed8',
+    '#1e40af',
+    '#1e3a8a',
+    '#172554',
+];
+var VIOLET_COLORS = [
+    '#f5f3ff',
+    '#ede9fe',
+    '#ddd6fe',
+    '#c4b5fd',
+    '#a78bfa',
+    '#7c3aed',
+    '#6d28d9',
+    '#5b21b6',
+    '#4c1d95',
+    '#2e1065',
+];
+var FUCHSIA_COLORS = [
+    '#fdf4ff',
+    '#fae8ff',
+    '#f5d0fe',
+    '#f0abfc',
+    '#e879f9',
+    '#c026d3',
+    '#a21caf',
+    '#86198f',
+    '#701a75',
+    '#4a044e',
+];
+var ROSE_COLORS = [
+    '#fff1f2',
+    '#ffe4e6',
+    '#fecdd3',
+    '#fda4af',
+    '#fb7185',
+    '#e11d48',
+    '#be123c',
+    '#9f1239',
+    '#881337',
+    '#4c0519',
+];
+exports.COLOR_PALETTE = [
+    SLATE_COLORS,
+    RED_COLORS,
+    AMBER_COLORS,
+    GREEN_COLORS,
+    BLUE_COLORS,
+    VIOLET_COLORS,
+    FUCHSIA_COLORS,
+    ROSE_COLORS,
+];

package/color-picker/getContrastRatio.d.ts

@@ -0,0 +1 @@
+export declare const getContrastRatio: (color1: string, color2: string) => number;

package/color-picker/getContrastRatio.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContrastRatio = void 0;
+var tslib_1 = require("tslib");
+// https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+var hexToRgb = function (hex) {
+    var r = parseInt(hex.substring(1, 3), 16);
+    var g = parseInt(hex.substring(3, 5), 16);
+    var b = parseInt(hex.substring(5, 7), 16);
+    return [r, g, b];
+};
+var getRelativeLuminance = function (rgb) {
+    var _a = (0, tslib_1.__read)(rgb.map(function (c) { return c / 255; }), 3), r = _a[0], g = _a[1], b = _a[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var getContrastRatio = function (color1, color2) {
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+    var l1 = getRelativeLuminance(rgb1);
+    var l2 = getRelativeLuminance(rgb2);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+};
+exports.getContrastRatio = getContrastRatio;

package/color-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerProps, ColorPickerOverrides } from './types';
+export { COLOR_PALETTE } from './colors';

package/color-picker/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_PALETTE = exports.ColorPicker = void 0;
+var ColorPicker_1 = require("./ColorPicker");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "COLOR_PALETTE", { enumerable: true, get: function () { return colors_1.COLOR_PALETTE; } });

package/color-picker/locale.d.ts

@@ -0,0 +1,3 @@
+export declare type ColorPickerLocale = {
+    resetButtonLabel: string;
+};

package/color-picker/locale.js

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

package/color-picker/package.json

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

package/color-picker/styled-component.d.ts

@@ -0,0 +1 @@
+export declare const StyledRoot: import("../style/styled").StyledComponent;

package/color-picker/styled-component.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRoot = void 0;
+var style_1 = require("../style");
+exports.StyledRoot = (0, style_1.styled)('div', 'flex flex-col gap-3');

package/color-picker/types.d.ts

@@ -0,0 +1,15 @@
+import { Override } from '../overrides';
+export declare type ColorPickerOverrides = {
+    Root?: Override<Record<string, any>>;
+    Heading?: Override<Record<string, any>>;
+    Swatches?: Override<Record<string, any>>;
+    Swatch?: Override<Record<string, any>>;
+    TickIcon?: Override<Record<string, any>>;
+};
+export declare type ColorPickerProps = {
+    overrides?: ColorPickerOverrides;
+    value?: string;
+    onChange: (value?: string) => void;
+    heading?: string;
+    resetButtonLabel?: string;
+};

package/color-picker/types.js

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

package/currency/Currency.d.ts

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

package/currency/Currency.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Currency = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+//hooks
+var useCurrency_1 = require("./useCurrency");
+//constants
+var constants_1 = require("./constants");
+var Currency = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, _c = _a.currency, currency = _c === void 0 ? constants_1.DEFAULT_CURRENCY : _c, currencyOptions = _a.currencyOptions;
+    var formattedCurrency = (0, useCurrency_1.useCurrency)({ value: value, variant: variant, currency: currency, currencyOptions: currencyOptions });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedCurrency }, void 0);
+};
+exports.Currency = Currency;

package/currency/constants.d.ts

@@ -0,0 +1,3 @@
+import { CompactAutoFormat } from '../utils/intlNumberFormatUtils/types';
+export declare const DEFAULT_VARIANT: CompactAutoFormat;
+export declare const DEFAULT_CURRENCY = "USD";

package/currency/constants.js

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

package/currency/index.d.ts

@@ -0,0 +1,5 @@
+export { Currency } from './Currency';
+export { useCurrency } from './useCurrency';
+export { getFormattedCurrency } from './utils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/currency/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedCurrency = exports.useCurrency = exports.Currency = void 0;
+var tslib_1 = require("tslib");
+var Currency_1 = require("./Currency");
+Object.defineProperty(exports, "Currency", { enumerable: true, get: function () { return Currency_1.Currency; } });
+var useCurrency_1 = require("./useCurrency");
+Object.defineProperty(exports, "useCurrency", { enumerable: true, get: function () { return useCurrency_1.useCurrency; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getFormattedCurrency", { enumerable: true, get: function () { return utils_1.getFormattedCurrency; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);
+(0, tslib_1.__exportStar)(require("../utils/intlNumberFormatUtils/types"), exports);

package/currency/package.json

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

package/currency/types.d.ts

@@ -0,0 +1,7 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare type CurrencyProps = {
+    value: number;
+    variant?: NumberVariant;
+    currency?: string;
+    currencyOptions?: Intl.NumberFormatOptions;
+};

package/currency/types.js

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

package/currency/useCurrency.d.ts

@@ -0,0 +1,2 @@
+import { CurrencyProps } from './types';
+export declare const useCurrency: ({ value, currency, variant, currencyOptions, }: CurrencyProps) => string;

package/currency/useCurrency.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrency = void 0;
+var locale_1 = require("../locale");
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
+var useCurrency = function (_a) {
+    var value = _a.value, _b = _a.currency, currency = _b === void 0 ? constants_1.DEFAULT_CURRENCY : _b, _c = _a.variant, variant = _c === void 0 ? constants_1.DEFAULT_VARIANT : _c, currencyOptions = _a.currencyOptions;
+    var langCode = (0, locale_1.useLocale)().langCode;
+    return (0, utils_1.getFormattedCurrency)({ value: value, locale: langCode, variant: variant, currencyOptions: currencyOptions, currency: currency });
+};
+exports.useCurrency = useCurrency;

package/currency/utils.d.ts

@@ -0,0 +1,8 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare const getFormattedCurrency: ({ value, locale, variant, currencyOptions, currency, }: {
+    value: number;
+    locale: string;
+    variant: NumberVariant;
+    currency: string;
+    currencyOptions?: Intl.NumberFormatOptions | undefined;
+}) => string;

package/currency/utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedCurrency = void 0;
+var tslib_1 = require("tslib");
+var intlNumberFormatUtils_1 = require("../utils/intlNumberFormatUtils");
+var getFormattedCurrency = function (_a) {
+    var value = _a.value, locale = _a.locale, variant = _a.variant, currencyOptions = _a.currencyOptions, currency = _a.currency;
+    var intlNumberFormatterOptions = (0, tslib_1.__assign)({ style: 'currency', currency: currency }, currencyOptions);
+    return (0, intlNumberFormatUtils_1.getFormattedNumber)({ value: value, locale: locale, variant: variant, numberOptions: intlNumberFormatterOptions });
+};
+exports.getFormattedCurrency = getFormattedCurrency;

package/date-input/Before.d.ts

@@ -2,16 +2,18 @@ import { ReactElement } from 'react';
 import { SharedProps } from 'baseui/input';
 import { WeekStartsOn } from '../date-picker';
 import { Override } from '../overrides';
-export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, ...props }: SharedProps & {
+export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, showTimezone, timezone, ...props }: SharedProps & {
     adapter?: any;
     locale?: any;
     overrides?: {
         DatePicker?: Override<Record<string, any>> | undefined;
     } | undefined;
-    onChange: (value?: Date | undefined) => void;
+    onChange: (value?: Date | undefined, timezone?: string | undefined) => void;
     weekStartsOn?: WeekStartsOn | undefined;
     minDate?: Date | undefined;
     maxDate?: Date | undefined;
     value?: Date | undefined;
     timeSelect?: boolean | undefined;
+    showTimezone?: boolean | undefined;
+    timezone?: string | undefined;
 }) => ReactElement;

package/date-input/Before.js

@@ -8,11 +8,11 @@ var date_picker_1 = require("../date-picker");
 var CalendarIconButton_1 = require("./CalendarIconButton");
 var overrides_1 = require("../overrides");
 var Before = function (_a) {
-    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, props = (0, tslib_1.__rest)(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect"]);
+    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, _b = _a.showTimezone, showTimezone = _b === void 0 ? false : _b, timezone = _a.timezone, props = (0, tslib_1.__rest)(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect", "showTimezone", "timezone"]);
     var onChange = (0, react_1.useCallback)(function (data) {
-        _onChange(data.value);
+        _onChange(data.value, data.timezone);
     }, [_onChange]);
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, date_picker_1.DatePicker), 2), DatePicker = _b[0], datePickerProps = _b[1];
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, date_picker_1.DatePicker), 2), DatePicker = _c[0], datePickerProps = _c[1];
     var mergedOverrides = (0, react_1.useMemo)(function () {
         var _a;
         return (0, overrides_1.mergeOverrides)({
@@ -22,6 +22,6 @@ var Before = function (_a) {
             },
         }, (_a = datePickerProps) === null || _a === void 0 ? void 0 : _a.overrides);
     }, [datePickerProps, props]);
-    return ((0, jsx_runtime_1.jsx)(DatePicker, (0, tslib_1.__assign)({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value }, datePickerProps, { overrides: mergedOverrides }), void 0));
+    return ((0, jsx_runtime_1.jsx)(DatePicker, (0, tslib_1.__assign)({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value, showTimezone: showTimezone, timezone: timezone }, datePickerProps, { overrides: mergedOverrides }), void 0));
 };
 exports.Before = Before;

package/date-input/CalendarIconButton.js

@@ -6,5 +6,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var calendar_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/calendar-solid"));
 var button_1 = require("../button");
 var box_1 = require("../box");
-var CalendarIconButton = function (props) { return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex items-center h-full pl-1" }, { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ size: "xs", className: "flex items-center", disabled: props.$disabled, type: "button" }, { children: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, {}, void 0) }), void 0) }), void 0)); };
+var locale_1 = require("../locale");
+var style_1 = require("../style");
+var CalendarIconButton = function (props) {
+    var locale = (0, locale_1.useLocale)();
+    var theme = (0, style_1.useStyle)().theme;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex items-center h-full pl-1" }, { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ size: theme.density === 'COMPACT' ? 'xxxs' : 'xxs', className: "flex items-center", disabled: props.$disabled, type: "button", "aria-label": locale.calendar.calendarButtonAriaLabel }, { children: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, {}, void 0) }), void 0) }), void 0));
+};
 exports.CalendarIconButton = CalendarIconButton;

package/date-input/DateInput.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { DateInputProps } from './types';
-export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, ...restProps }: DateInputProps) => ReactElement;
+export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, showTimezone, timezone, ...restProps }: DateInputProps) => ReactElement;