@juspay/blend-design-system 0.0.1 → 0.0.5-beta.1

package/dist/assets/main.css

@@ -1 +1 @@
-.gradient-blur{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0}.gradient-blur>div,.gradient-blur:before,.gradient-blur:after{position:absolute;top:0;right:0;bottom:0;left:0}.gradient-blur:before{content:"";z-index:30;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)}.gradient-blur>div:nth-of-type(1){z-index:32;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);mask:linear-gradient(to top,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)}.gradient-blur>div:nth-of-type(2){z-index:33;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)}.gradient-blur>div:nth-of-type(3){z-index:34;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);mask:linear-gradient(to top,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)}.gradient-blur>div:nth-of-type(4){z-index:35;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);mask:linear-gradient(to top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)}.gradient-blur>div:nth-of-type(5){z-index:36;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);mask:linear-gradient(to top,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)}.gradient-blur>div:nth-of-type(6){z-index:37;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);mask:linear-gradient(to top,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)}.gradient-blur:after{content:"";z-index:38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);mask:linear-gradient(to top,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)}
+[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.gradient-blur{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0}.gradient-blur>div,.gradient-blur:before,.gradient-blur:after{position:absolute;top:0;right:0;bottom:0;left:0}.gradient-blur:before{content:"";z-index:30;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 37.5%)}.gradient-blur>div:nth-of-type(1){z-index:32;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);mask:linear-gradient(to top,rgba(0,0,0,0) 12.5%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,0) 50%)}.gradient-blur>div:nth-of-type(2){z-index:33;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);mask:linear-gradient(to top,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 62.5%)}.gradient-blur>div:nth-of-type(3){z-index:34;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);mask:linear-gradient(to top,rgba(0,0,0,0) 37.5%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,0) 75%)}.gradient-blur>div:nth-of-type(4){z-index:35;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);mask:linear-gradient(to top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 87.5%)}.gradient-blur>div:nth-of-type(5){z-index:36;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);mask:linear-gradient(to top,rgba(0,0,0,0) 62.5%,rgba(0,0,0,1) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)}.gradient-blur>div:nth-of-type(6){z-index:37;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);mask:linear-gradient(to top,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,1) 100%)}.gradient-blur:after{content:"";z-index:38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);mask:linear-gradient(to top,rgba(0,0,0,0) 87.5%,rgba(0,0,0,1) 100%)}

package/dist/components/DateRangePicker/MobileDrawerPresets.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { DateRange, DateRangePreset } from './types';
+type MobileDrawerPresetsProps = {
+    drawerOpen: boolean;
+    setDrawerOpen: (open: boolean) => void;
+    renderTrigger: () => React.ReactNode;
+    showPresets: boolean;
+    availablePresets: DateRangePreset[];
+    activePreset: DateRangePreset;
+    selectedRange: DateRange;
+    startTime: string;
+    endTime: string;
+    dateFormat: string;
+    handlePresetSelect: (preset: DateRangePreset) => void;
+    handleStartTimeChange: (time: string) => void;
+    handleEndTimeChange: (time: string) => void;
+    setSelectedRange: (range: DateRange) => void;
+    setStartDate: (date: string) => void;
+    setEndDate: (date: string) => void;
+    handleCancel: () => void;
+    handleApply: () => void;
+    showCustomDropdownOnly?: boolean;
+};
+declare const MobileDrawerPresets: React.FC<MobileDrawerPresetsProps>;
+export default MobileDrawerPresets;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -47,6 +47,101 @@ export type CalendarTokenType = {
             '&[data-highlighted]': CSSObject;
         };
     };
+    mobileDrawer: {
+        picker: {
+            itemHeight: CSSObject['height'];
+            containerHeight: CSSObject['height'];
+            gradients: {
+                top: CSSObject['background'];
+                bottom: CSSObject['background'];
+            };
+            divider: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+                strokeColor: CSSObject['color'];
+                strokeColorEnd: CSSObject['color'];
+            };
+            text: {
+                selected: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    opacity: CSSObject['opacity'];
+                };
+                unselected: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    opacity: CSSObject['opacity'];
+                };
+            };
+            timeInput: {
+                width: CSSObject['width'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                zIndex: CSSObject['zIndex'];
+            };
+            scrollArea: {
+                zIndex: CSSObject['zIndex'];
+                opacity: CSSObject['opacity'];
+            };
+        };
+        header: {
+            padding: CSSObject['padding'];
+            backgroundColor: CSSObject['backgroundColor'];
+            zIndex: CSSObject['zIndex'];
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+        presetItem: {
+            padding: CSSObject['padding'];
+            borderBottom: CSSObject['borderBottom'];
+            text: {
+                active: {
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                };
+                inactive: {
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                };
+            };
+            icon: {
+                size: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+            chevron: {
+                size: CSSObject['width'];
+                color: CSSObject['color'];
+                transition: CSSObject['transition'];
+            };
+        };
+        actionButtons: {
+            container: {
+                gap: CSSObject['gap'];
+                padding: CSSObject['padding'];
+                marginTop: CSSObject['marginTop'];
+                borderTop: CSSObject['borderTop'];
+            };
+        };
+        tabs: {
+            marginTop: CSSObject['marginTop'];
+            content: {
+                marginTop: CSSObject['marginTop'];
+            };
+        };
+        datePicker: {
+            marginTop: CSSObject['marginTop'];
+            container: {
+                padding: CSSObject['padding'];
+                gap: CSSObject['gap'];
+            };
+        };
+    };
     trigger: {
         height: CSSObject['height'];
         display: CSSObject['display'];

package/dist/components/DateRangePicker/index.d.ts

@@ -1,2 +1,3 @@
 export { default as DateRangePicker } from './DateRangePicker';
+export { default as MobileDrawerPresets } from './MobileDrawerPresets';
 export * from './types';

package/dist/components/DateRangePicker/types.d.ts

@@ -35,4 +35,6 @@ export type DateRangePickerProps = {
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
     triggerElement?: ReactNode;
+    useDrawerOnMobile?: boolean;
+    skipQuickFiltersOnMobile?: boolean;
 };

package/dist/components/DateRangePicker/utils.d.ts

@@ -468,3 +468,69 @@ export declare const calculateDayCellProps: (date: Date, selectedRange: DateRang
     textColor: string | unknown;
     showTodayIndicator: boolean;
 };
+/**
+ * Constants for mobile date picker
+ */
+export declare const MOBILE_PICKER_CONSTANTS: {
+    readonly ITEM_HEIGHT: 44;
+    readonly VISIBLE_ITEMS: 3;
+    readonly SCROLL_DEBOUNCE: 50;
+};
+/**
+ * Validates time input - only allows numbers and colon
+ * @param input The input string to validate
+ * @returns True if input is valid
+ */
+export declare const isValidTimeInput: (input: string) => boolean;
+/**
+ * Formats time input as HH:MM
+ * @param input The input string to format
+ * @returns Formatted time string
+ */
+export declare const formatTimeInput: (input: string) => string;
+/**
+ * Generates picker data for date/time selection
+ * @param tabType Whether this is for start or end date
+ * @param selectedRange Current selected date range
+ * @param startTime Current start time
+ * @param endTime Current end time
+ * @returns Object with picker data for all columns
+ */
+export declare const generatePickerData: (tabType: "start" | "end", selectedRange: DateRange, startTime: string, endTime: string) => {
+    years: {
+        items: number[];
+        selectedIndex: number;
+    };
+    months: {
+        items: string[];
+        selectedIndex: number;
+    };
+    dates: {
+        items: number[];
+        selectedIndex: number;
+    };
+    times: {
+        items: string[];
+        selectedIndex: number;
+    };
+};
+/**
+ * Creates selection handler for picker columns
+ * @param tabType Whether this is for start or end date
+ * @param type The type of selection (year, month, date, time)
+ * @param selectedRange Current selected range
+ * @param dateFormat Date format string
+ * @param handleStartTimeChange Start time change handler
+ * @param handleEndTimeChange End time change handler
+ * @param setSelectedRange Range setter function
+ * @param setStartDate Start date setter function
+ * @param setEndDate End date setter function
+ * @returns Selection handler function
+ */
+export declare const createSelectionHandler: (tabType: "start" | "end", type: "year" | "month" | "date" | "time", selectedRange: DateRange, dateFormat: string, handleStartTimeChange: (time: string) => void, handleEndTimeChange: (time: string) => void, setSelectedRange: (range: DateRange) => void, setStartDate: (date: string) => void, setEndDate: (date: string) => void) => (index: number) => void;
+/**
+ * Gets preset display label with custom mappings
+ * @param preset The preset to get label for
+ * @returns Display label for the preset
+ */
+export declare const getPresetDisplayLabel: (preset: DateRangePreset) => string;

package/dist/components/Drawer/components/DrawerBase.d.ts

@@ -11,6 +11,7 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerConten
     showHandle?: boolean;
     handle?: React.ReactNode;
     hasSnapPoints?: boolean;
+    contentDriven?: boolean;
     mobileOffset?: {
         top?: string;
         bottom?: string;
@@ -25,6 +26,7 @@ export declare const DrawerBody: React.ForwardRefExoticComponent<{
     children: React.ReactNode;
     className?: string;
     overflowY?: "auto" | "hidden" | "scroll" | "visible";
+    noPadding?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Drawer/drawer.tokens.d.ts

@@ -43,8 +43,8 @@ export type DrawerTokensType = {
     body: {
         padding: CSSObject['padding'];
         backgroundColor: CSSObject['backgroundColor'];
-        maxHeight: CSSObject['maxHeight'];
         overflowY: CSSObject['overflowY'];
+        borderRadius: CSSObject['borderRadius'];
     };
     footer: {
         padding: CSSObject['padding'];

package/dist/components/Inputs/DropdownInput/DropdownInput.d.ts

@@ -1,3 +1,3 @@
 import { DropdownInputProps } from './types';
-declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownInput;

package/dist/components/Inputs/DropdownInput/dropdownInput.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { DropdownInputSize, DropdownInputState } from './types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type DropdownInputTokensType = {
     input: {
         gap: CSSObject['gap'];
@@ -28,6 +29,9 @@ export type DropdownInputTokensType = {
         };
     };
 };
+export type ResponsiveDropdownInputTokens = {
+    [key in keyof BreakpointType]: DropdownInputTokensType;
+};
 declare const dropdownInputTokens: Readonly<DropdownInputTokensType>;
-export declare const getDropdownInputTokens: (foundationTheme: FoundationTokenType) => DropdownInputTokensType;
+export declare const getDropdownInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveDropdownInputTokens;
 export default dropdownInputTokens;

package/dist/components/Inputs/DropdownInput/types.d.ts

@@ -28,4 +28,6 @@ export type DropdownInputProps = {
     dropdownName?: string;
     onDropdownOpen?: () => void;
     onDropdownClose?: () => void;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/NumberInput/NumberInput.d.ts

@@ -1,3 +1,3 @@
 import { NumberInputProps } from './types';
-declare const NumberInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, name, ...rest }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, name, onBlur, onFocus, ...rest }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberInput;

package/dist/components/Inputs/NumberInput/numberInput.tokens.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum TextInputSize {
     MD = "md",
     LG = "lg"
@@ -39,6 +40,9 @@ export type NumberInputTokensType = {
         };
     };
 };
+export type ResponsiveNumberInputTokens = {
+    [key in keyof BreakpointType]: NumberInputTokensType;
+};
 declare const numberInputTokens: Readonly<NumberInputTokensType>;
-export declare const getNumberInputTokens: (foundationTheme: FoundationTokenType) => NumberInputTokensType;
+export declare const getNumberInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveNumberInputTokens;
 export default numberInputTokens;

package/dist/components/Inputs/NumberInput/types.d.ts

@@ -3,7 +3,7 @@ export declare enum NumberInputSize {
     LARGE = "lg"
 }
 export type NumberInputProps = {
-    value: number;
+    value: number | undefined;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     step?: number;
     error?: boolean;
@@ -13,4 +13,6 @@ export type NumberInputProps = {
     sublabel?: string;
     helpIconHintText?: string;
     hintText?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'value'>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'value' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/TextArea/textarea.token.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 type TextAreaState = 'default' | 'hover' | 'focus' | 'error' | 'disabled';
 export type TextAreaTokensType = {
     fontFamily: CSSObject['fontFamily'];
@@ -22,6 +23,9 @@ export type TextAreaTokensType = {
         [key in TextAreaState]: CSSObject['backgroundColor'];
     };
 };
+export type ResponsiveTextAreaTokens = {
+    [key in keyof BreakpointType]: TextAreaTokensType;
+};
 export declare const textAreaTokens: TextAreaTokensType;
-export declare const getTextAreaTokens: (foundationTokens: FoundationTokenType) => TextAreaTokensType;
+export declare const getTextAreaTokens: (foundationTokens: FoundationTokenType) => ResponsiveTextAreaTokens;
 export default textAreaTokens;

package/dist/components/Inputs/TextArea/types.d.ts

@@ -19,4 +19,4 @@ export type TextAreaProps = {
     errorMessage?: string;
     resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
     wrap?: CSSObject['whiteSpace'];
-} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'className'>;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'className' | 'onFocus' | 'onBlur'>;

package/dist/components/Inputs/TextInput/TextInput.d.ts

@@ -1,3 +1,3 @@
 import { TextInputProps } from './types';
-declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextInput;

package/dist/components/Inputs/TextInput/textInput.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { TextInputSize, TextInputState } from './types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type TextInputTokensType = {
     input: {
         gap: CSSObject['gap'];
@@ -29,5 +30,8 @@ export type TextInputTokensType = {
     };
 };
 declare const textInputTokens: Readonly<TextInputTokensType>;
-export declare const getTextInputTokens: (foundationTheme: FoundationTokenType) => TextInputTokensType;
+export type ResponsiveTextInputTokens = {
+    [key in keyof BreakpointType]: TextInputTokensType;
+};
+export declare const getTextInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveTextInputTokens;
 export default textInputTokens;

package/dist/components/Inputs/TextInput/types.d.ts

@@ -21,4 +21,6 @@ export type TextInputProps = {
     rightSlot?: React.ReactNode;
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/UnitInput/UnitInput.d.ts

@@ -1,3 +1,3 @@
 import { UnitInputProps } from './types';
-declare const UnitInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, leftSlot, rightSlot, unit, unitPosition, name, ...rest }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const UnitInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, leftSlot, rightSlot, unit, unitPosition, name, onFocus, onBlur, ...rest }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
 export default UnitInput;

package/dist/components/Inputs/UnitInput/types.d.ts

@@ -7,7 +7,7 @@ export declare enum UnitPosition {
     RIGHT = "right"
 }
 export type UnitInputProps = {
-    value: number;
+    value: number | undefined;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     step?: number;
     error?: boolean;
@@ -22,4 +22,6 @@ export type UnitInputProps = {
     rightSlot?: React.ReactNode;
     unit: string;
     unitPosition?: UnitPosition;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

package/dist/components/Inputs/UnitInput/unitInput.tokens.d.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from 'styled-components';
 import { UnitInputSize } from './types';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum UnitInputState {
     DEFAULT = "default",
     HOVER = "hover",
@@ -36,5 +37,8 @@ export type UnitInputTokensType = {
     };
 };
 declare const unitInputTokens: UnitInputTokensType;
-export declare const getUnitInputTokens: (foundationTheme: FoundationTokenType) => UnitInputTokensType;
+export type ResponsiveUnitInputTokens = {
+    [key in keyof BreakpointType]: UnitInputTokensType;
+};
+export declare const getUnitInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveUnitInputTokens;
 export default unitInputTokens;

package/dist/components/Inputs/utils/FloatingLabels/FloatingLabels.d.ts

@@ -0,0 +1,7 @@
+declare const FloatingLabels: ({ label, required, name, isFocused, }: {
+    label: string;
+    required: boolean;
+    name: string;
+    isFocused: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FloatingLabels;

package/dist/components/MultiSelect/MultiSelectTrigger.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { MultiSelectTokensType } from './multiSelect.tokens';
+import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant } from './types';
+export type MultiSelectTriggerProps = {
+    selectedValues: string[];
+    slot: React.ReactNode;
+    variant: MultiSelectVariant;
+    size: MultiSelectMenuSize;
+    isSmallScreen: boolean;
+    onChange: (value: string) => void;
+    name: string;
+    label: string;
+    placeholder: string;
+    required: boolean;
+    selectionTagType: MultiSelectSelectionTagType;
+    valueLabelMap: Record<string, string>;
+    open: boolean;
+    onClick?: () => void;
+    multiSelectTokens: MultiSelectTokensType;
+};
+declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, selectionTagType, valueLabelMap, open, onClick, multiSelectTokens, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectTrigger;

package/dist/components/MultiSelect/index.d.ts

@@ -1,2 +1,3 @@
 export { default as MultiSelect } from './MultiSelect';
+export { default as MultiSelectTrigger } from './MultiSelectTrigger';
 export * from './types';

package/dist/components/MultiSelect/multiSelect.tokens.d.ts

@@ -1,11 +1,16 @@
 import { CSSObject } from 'styled-components';
 import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
 type TriggerStates = 'open' | 'closed' | 'hover' | 'focus';
 export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
 export type MultiSelectTokensType = {
     trigger: {
-        padding: {
+        height: CSSObject['height'];
+        paddingX: {
+            [key in MultiSelectMenuSize]: CSSObject['padding'];
+        };
+        paddingY: {
             [key in MultiSelectMenuSize]: CSSObject['padding'];
         };
         borderRadius: {
@@ -72,6 +77,9 @@ export type MultiSelectTokensType = {
         };
     };
 };
+export type ResponsiveMultiSelectTokens = {
+    [key in keyof BreakpointType]: MultiSelectTokensType;
+};
 export declare const multiSelectTokens: MultiSelectTokensType;
-export declare const getMultiSelectTokens: (foundationToken: FoundationTokenType) => MultiSelectTokensType;
+export declare const getMultiSelectTokens: (foundationToken: FoundationTokenType) => ResponsiveMultiSelectTokens;
 export {};

package/dist/components/MultiSelect/types.d.ts

@@ -41,6 +41,7 @@ export type MultiSelectMenuGroupType = {
     showSeparator?: boolean;
 };
 export type MultiSelectProps = {
+    height?: number;
     selectedValues: string[];
     onChange: (selectedValue: string) => void;
     items: MultiSelectMenuGroupType[];

package/dist/components/Primitives/PrimitiveButton/PrimitiveButton.d.ts

@@ -13,6 +13,8 @@ type PrimitiveButtonProps = StateStyles & {
     padding?: CSSObject['padding'];
     paddingX?: CSSObject['padding'];
     paddingY?: CSSObject['padding'];
+    paddingTop?: CSSObject['padding'];
+    paddingBottom?: CSSObject['padding'];
     margin?: CSSObject['margin'];
     marginX?: CSSObject['margin'];
     marginY?: CSSObject['margin'];
@@ -73,6 +75,8 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     padding?: CSSObject["padding"];
     paddingX?: CSSObject["padding"];
     paddingY?: CSSObject["padding"];
+    paddingTop?: CSSObject["padding"];
+    paddingBottom?: CSSObject["padding"];
     margin?: CSSObject["margin"];
     marginX?: CSSObject["margin"];
     marginY?: CSSObject["margin"];

package/dist/components/Primitives/PrimitiveInput/PrimitiveInput.d.ts

@@ -12,6 +12,8 @@ type StateStyles = {
 };
 type PrimitiveInputProps = StateStyles & {
     color?: CSSObject['color'];
+    fontSize?: CSSObject['fontSize'];
+    fontWeight?: CSSObject['fontWeight'];
     position?: CSSObject['position'];
     inset?: CSSObject['inset'];
     top?: CSSObject['top'];

package/dist/components/Primitives/PrimitiveText/PrimitiveText.d.ts

@@ -21,6 +21,11 @@ export type PrimitiveTextProps = {
     name?: CSSObject['name'];
     htmlFor?: CSSObject['htmlFor'];
     textTransform?: CSSObject['textTransform'];
+    position?: CSSObject['position'];
+    top?: CSSObject['top'];
+    left?: CSSObject['left'];
+    bottom?: CSSObject['bottom'];
+    right?: CSSObject['right'];
 };
 export type TextProps = PrimitiveTextProps & Omit<React.HTMLAttributes<HTMLElement>, 'color'> & {
     children: React.ReactNode;

package/dist/components/Primitives/PrimitiveTextArea.d.ts

@@ -82,6 +82,8 @@ type PrimitiveTextareaProps = StateStyles & {
     placeholderStyles?: CSSObject;
     resize?: CSSObject['resize'];
     fontFamily?: CSSObject['fontFamily'];
+    fontSize?: CSSObject['fontSize'];
+    fontWeight?: CSSObject['fontWeight'];
 };
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & PrimitiveTextareaProps;
 declare const PrimitiveTextarea: React.FC<TextareaProps>;

package/dist/components/SingleSelect/SingleSelectTrigger.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { SelectMenuSize, SelectMenuVariant } from './types';
+import { SingleSelectTokensType } from './singleSelect.tokens';
+export type SingleSelectTriggerProps = {
+    size: SelectMenuSize;
+    selected: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    required: boolean;
+    valueLabelMap: Record<string, string>;
+    open: boolean;
+    onClick?: () => void;
+    slot: React.ReactNode;
+    variant: SelectMenuVariant;
+    isSmallScreenWithLargeSize: boolean;
+    isItemSelected: boolean;
+    singleSelectTokens: SingleSelectTokensType;
+};
+declare const SingleSelectTrigger: ({ size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default SingleSelectTrigger;