@tap-payments/os-micro-frontend-shared 0.1.34 → 0.1.36-9.fix.1

package/build/components/Text/Text.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { type TypographyProps as TextProps } from '@mui/material/Typography';
-declare function Text(props: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text(props: TextProps): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Text>;
 export default _default;

package/build/components/Timepicker/Timepicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type Time = {
     hour: number;
     minute: number;
@@ -7,6 +8,7 @@ interface TimePickerProps {
     defaultTime?: Time;
     onChange?: (time: Time) => void;
     enableRealTimeChange?: boolean;
+    size?: 'large' | 'small';
 }
-export declare function TimePicker({ onChange, defaultTime, enableRealTimeChange }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimePicker({ onChange, defaultTime, enableRealTimeChange, size }: TimePickerProps): import("react").JSX.Element;
 export {};

package/build/components/Timepicker/Timepicker.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Box from '@mui/material/Box';
 import Menu from '../Menu';
 import Text from '../Text';
 import { greyUpArrowIcon, greyDownArrowIcon } from '../../constants/index.js';
+import { convertToNumber } from '../../utils/index.js';
 import { Arrow, Button, Period, PeriodWrapper, Wrapper, Time, TimeWrapper, Input } from './style';
 import { getDefaultHour, getDefaultMinute } from './utils';
 import { maxHour, maxMinute, periodList } from './constant';
-export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
+export function TimePicker({ onChange, defaultTime, enableRealTimeChange, size = 'large' }) {
     var _a, _b, _c;
     const [anchorEl, setAnchorEl] = useState(null);
     const [period, setPeriod] = useState((_a = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.period) !== null && _a !== void 0 ? _a : (new Date().getHours() >= maxHour ? 'PM' : 'AM'));
@@ -25,18 +26,20 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
     };
     const onClose = () => {
         setAnchorEl(null);
+        // Return the 12-hour format with period to match the Time type
         onChange === null || onChange === void 0 ? void 0 : onChange({ hour: hours, minute: minutes, period: period });
     };
     const onClickPeriod = (selectedPeriod) => {
         setPeriod(selectedPeriod);
     };
+    const formatTime = (time) => (time < 10 ? `0${time}` : time.toString());
     const onChangeHours = (e) => {
-        const value = Number(e.target.value);
+        const value = convertToNumber(formatTime(Number(e.target.value)));
         if (value > maxHour) {
             e.preventDefault();
             return;
         }
-        setHours(Number(e.target.value));
+        setHours(value);
     };
     const onIncreaseHours = () => {
         setHours((prev) => {
@@ -53,7 +56,7 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
         });
     };
     const onChangeMinutes = (e) => {
-        const value = Number(e.target.value);
+        const value = convertToNumber(formatTime(Number(e.target.value)));
         if (value > maxMinute) {
             e.preventDefault();
             return;
@@ -78,8 +81,7 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
             return prev - 1;
         });
     };
-    const formatTime = useCallback((time) => (time < 10 ? `0${time}` : time), []);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ open: open, onClick: onOpen }, { children: `${formatTime(hours)}:${formatTime(minutes)}${period.toLowerCase()}` })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { marginTop: '8px', marginBottom: '8px' } }, { children: _jsxs(Wrapper, { children: [_jsxs(TimeWrapper, { children: [_jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseHours }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(hours), onChange: onChangeHours }), _jsx(Arrow, Object.assign({ onClick: onDecreaseHours }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] }), _jsx(Text, { children: ":" }), _jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseMinutes }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(minutes), onChange: onChangeMinutes }), _jsx(Arrow, Object.assign({ onClick: onDecreaseMinutes }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] })] }), _jsx(PeriodWrapper, { children: periodList.map((item) => (_jsx(Period, Object.assign({ onClick: () => {
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ size: size, open: open, onClick: onOpen }, { children: `${formatTime(hours)}:${formatTime(minutes)}${period.toLowerCase()}` })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { marginTop: '8px', marginBottom: '8px' } }, { children: _jsxs(Wrapper, { children: [_jsxs(TimeWrapper, { children: [_jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseHours }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(hours), onChange: onChangeHours }), _jsx(Arrow, Object.assign({ onClick: onDecreaseHours }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] }), _jsx(Text, { children: ":" }), _jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseMinutes }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(minutes), onChange: onChangeMinutes }), _jsx(Arrow, Object.assign({ onClick: onDecreaseMinutes }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] })] }), _jsx(PeriodWrapper, { children: periodList.map((item) => (_jsx(Period, Object.assign({ onClick: () => {
                                         onClickPeriod(item);
                                     }, selected: period === item }, { children: item }), item))) })] }) }))] }) })));
 }

package/build/components/Timepicker/index.d.ts

@@ -1,4 +1,5 @@
 import { TimePicker } from './Timepicker';
 export * from './utils';
 export * from './Timepicker';
+export * from './constant';
 export default TimePicker;

package/build/components/Timepicker/index.js

@@ -1,4 +1,5 @@
 import { TimePicker } from './Timepicker';
 export * from './utils';
 export * from './Timepicker';
+export * from './constant';
 export default TimePicker;

package/build/components/Timepicker/style.d.ts

@@ -4,17 +4,18 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<import("
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     open: boolean;
+    size: 'large' | 'small';
 }, {}, {}>;
 export declare const Arrow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Period: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     selected: boolean;

package/build/components/Timepicker/style.js

@@ -10,7 +10,7 @@ export const Wrapper = styled(Box)(() => ({
     justifyContent: 'center',
     gap: '16px',
 }));
-export const Button = styled(Text, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ fontSize: '11px', fontWeight: 500, background: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, borderRadius: '19px', height: 32, width: 74, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }, (open && { boxShadow: '0px 0px 4px 0px #1F88D080', borderColor: theme.palette.info.dark }))));
+export const Button = styled(Text, { shouldForwardProp: (props) => props !== 'open' && props !== 'size' })(({ theme, open, size }) => (Object.assign({ fontSize: '11px', fontWeight: 500, background: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, borderRadius: '19px', height: size === 'large' ? 32 : 24, width: size === 'large' ? 74 : 58, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }, (open && { boxShadow: '0px 0px 4px 0px #1F88D080', borderColor: theme.palette.info.dark }))));
 export const Arrow = styled(Box)(() => ({
     textAlign: 'center',
     cursor: 'pointer',

package/build/components/Timepicker/utils.js

@@ -1,10 +1,12 @@
+// Convert 24-hour format to 12-hour format properly
 export const convertTo12Hour = (hour24) => {
     if (hour24 === 0)
-        return 12;
+        return 12; // Midnight (0) becomes 12 AM
     if (hour24 <= 12)
-        return hour24;
-    return hour24 - 12;
+        return hour24; // 1-12 stays the same
+    return hour24 - 12; // 13-23 becomes 1-11
 };
+// Get the period (AM/PM) from 24-hour format
 export const getPeriodFrom24Hour = (hour24) => {
     return hour24 >= 12 ? 'PM' : 'AM';
 };
@@ -13,12 +15,14 @@ export const getDefaultHour = () => {
     const currentHour = new Date().getHours();
     return convertTo12Hour(currentHour);
 };
+// Convert 12-hour format back to 24-hour format correctly
 export const convertTo24Hour = (hour12, period) => {
     if (period === 'AM' && hour12 === 12) {
-        return 0;
+        return 0; // 12 AM = 0 hours
     }
     else if (period === 'PM' && hour12 !== 12) {
-        return hour12 + 12;
+        return hour12 + 12; // 1-11 PM = 13-23 hours
     }
+    // 12 PM stays as 12 hours, 1-11 AM stays the same
     return hour12;
 };

package/build/components/Toaster/Toaster.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Toaster(): import("react").JSX.Element;

package/build/components/Toaster/Toaster.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { Toaster as HotToaster, resolveValue } from 'react-hot-toast';
+import { actionSuccessIcon, warningInfoIcon } from '../../constants/index.js';
+import { Content } from './style';
+const icons = {
+    success: actionSuccessIcon,
+    error: warningInfoIcon,
+};
+export default function Toaster() {
+    return (_jsx(HotToaster, { children: (t) => (_jsxs(Content, { children: [icons[t.type] && _jsx(Box, { component: "img", src: icons[t.type], alt: t.type }), _jsx(Box, { children: resolveValue(t.message, t) })] })) }));
+}

package/build/components/Toaster/index.d.ts

@@ -0,0 +1,2 @@
+import Toaster from './Toaster';
+export default Toaster;

package/build/components/Toaster/index.js

@@ -0,0 +1,2 @@
+import Toaster from './Toaster';
+export default Toaster;

package/build/components/ToggleButtons/ToggleButtons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToggleButtonsProps, ToggleOptionKey } from './type';
-declare const ToggleButtons: <T extends ToggleOptionKey>({ options, activeKey, onChange, containerProps, buttonProps }: ToggleButtonsProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const ToggleButtons: <T extends ToggleOptionKey>({ options, activeKey, onChange, containerProps, buttonProps }: ToggleButtonsProps<T>) => import("react").JSX.Element;
 export default ToggleButtons;

package/build/components/ToggleView/ToggleView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ToggleViews, ToggleViewsValues } from './types';
+declare const DEFAULT_TOGGLE_VIEWS: {
+    icon: import("react").JSX.Element;
+    value: ToggleViews;
+}[];
+export interface ToggleViewProps {
+    onToggleClick: (view: ToggleViewsValues) => void;
+    currentView: ToggleViewsValues;
+    getOverrideViews?: (defaultViews: typeof DEFAULT_TOGGLE_VIEWS) => {
+        icon: React.ReactNode;
+        value: ToggleViewsValues;
+    }[];
+}
+declare const ToggleView: (props: ToggleViewProps) => import("react").JSX.Element | null;
+export default ToggleView;

package/build/components/ToggleView/ToggleView.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardViewButtonIcon, listViewButtonIcon } from '../../constants/index.js';
+import { ActiveOverlay, ViewButton } from './style';
+import { ToggleViews } from './types';
+import { useMemo } from 'react';
+import ToggleWrapper from './ToggleWrapper';
+const DEFAULT_TOGGLE_VIEWS = [
+    {
+        icon: _jsx("img", { src: cardViewButtonIcon, alt: "card" }),
+        value: ToggleViews.CARDS,
+    },
+    {
+        icon: _jsx("img", { src: listViewButtonIcon, alt: ToggleViews.LIST }),
+        value: ToggleViews.LIST,
+    },
+];
+const ToggleView = (props) => {
+    const { currentView, onToggleClick, getOverrideViews } = props;
+    const views = useMemo(() => {
+        if (getOverrideViews)
+            return getOverrideViews(DEFAULT_TOGGLE_VIEWS);
+        return DEFAULT_TOGGLE_VIEWS;
+    }, [getOverrideViews]);
+    const viewIndex = useMemo(() => views.findIndex((view) => view.value === currentView), [views, currentView]);
+    if (!onToggleClick)
+        return null;
+    return (_jsxs(ToggleWrapper, { children: [views.map((view) => (_jsx(ViewButton, Object.assign({ onClick: () => onToggleClick(view.value), sx: {
+                    height: '11.6px',
+                    width: '11.6px',
+                }, isActive: currentView === view.value }, { children: view.icon }), view.value))), _jsx(ActiveOverlay, { activeIndex: viewIndex })] }));
+};
+export default ToggleView;

package/build/components/ToggleView/ToggleWrapper.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from 'react';
+import { type BoxProps } from '@mui/material/Box';
+declare const ToggleWrapper: (props: PropsWithChildren<BoxProps>) => React.JSX.Element;
+export default ToggleWrapper;

package/build/components/ToggleView/ToggleWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ToggleWrapperStyled } from './style';
+const ToggleWrapper = (props) => {
+    const viewTogglers = React.Children.count(props.children) - 1;
+    return _jsx(ToggleWrapperStyled, Object.assign({}, props, { sx: { width: viewTogglers * 30 + 2 } }));
+};
+export default ToggleWrapper;

package/build/components/ToggleView/index.d.ts

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export { type ToggleViewsValues, ToggleViews } from './types';
+export default ToggleView;

package/build/components/ToggleView/index.js

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export { ToggleViews } from './types';
+export default ToggleView;

package/build/components/ToggleView/style.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const ToggleWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ViewButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isActive: boolean;
+}, {}, {}>;
+export declare const ActiveOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    activeIndex: number;
+}, {}, {}>;

package/build/components/ToggleView/style.js

@@ -0,0 +1,31 @@
+import { Box, styled } from '@mui/material';
+export const ToggleWrapperStyled = styled(Box)(({ theme }) => ({
+    height: '32px',
+    borderRadius: '4px',
+    backgroundColor: theme.palette.action.hover,
+    padding: '2px',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    cursor: 'pointer',
+}));
+export const ViewButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ isActive }) => ({
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    zIndex: 2,
+    opacity: isActive ? 1 : 0.5,
+}));
+export const ActiveOverlay = styled(Box, { shouldForwardProp: (props) => props !== 'activeIndex' })(({ theme, activeIndex }) => ({
+    position: 'absolute',
+    top: 2,
+    left: activeIndex * 30 + 2,
+    transition: 'all 0.25s ease-in-out',
+    width: '28px',
+    height: '28px',
+    backgroundColor: theme.palette.common.white,
+    borderRadius: '2px',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',
+}));

package/build/components/ToggleView/types.d.ts

@@ -0,0 +1,6 @@
+export declare enum ToggleViews {
+    LIST = "LIST",
+    CARDS = "CARDS",
+    MAP = "MAP"
+}
+export type ToggleViewsValues = `${ToggleViews}` | (string & {});

package/build/components/ToggleView/types.js

@@ -0,0 +1,6 @@
+export var ToggleViews;
+(function (ToggleViews) {
+    ToggleViews["LIST"] = "LIST";
+    ToggleViews["CARDS"] = "CARDS";
+    ToggleViews["MAP"] = "MAP";
+})(ToggleViews || (ToggleViews = {}));

package/build/components/Toolbar/Toolbar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ToolbarProps } from './type';
-declare function Toolbar({ onMouseEnter, onMouseLeave, isMaximized, isHovered, children, rightActions, leftActions, title, icon, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function Toolbar({ onMouseEnter, onMouseLeave, isMaximized, isHovered, children, rightActions, leftActions, title, icon, ...props }: ToolbarProps): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Toolbar>;
 export default _default;

package/build/components/Toolbar/style.d.ts

@@ -9,10 +9,14 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    sandboxMode?: boolean | undefined;
     maximized?: boolean | undefined;
     isDragging?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledAppHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isDragging?: boolean | undefined;
+}, {}, {}>;
 export declare const ToolbarStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
@@ -20,7 +24,6 @@ export declare const ToolbarStyled: import("@emotion/styled").StyledComponent<im
     isHovered?: boolean | undefined;
 }, {}, {}>;
 export declare const StyledHeaderWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    sandboxMode?: boolean | undefined;
     maximized?: boolean | undefined;
     isDragging?: boolean | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;

package/build/components/Toolbar/style.js

@@ -38,12 +38,17 @@ export const StyledBox = styled(Box)(({ theme }) => ({
 }));
 export const StyledHeaderWrapper = styled('div', {
     shouldForwardProp: (prop) => prop !== 'sandboxMode' && prop !== 'maximized' && prop !== 'isDragging',
-})(({ theme, sandboxMode, maximized, isDragging }) => (Object.assign(Object.assign(Object.assign({ background: sandboxMode ? theme.palette.common.lightOrange : theme.palette.background.transparent[0], backdropFilter: 'blur(32px)' }, (!maximized && {
+})(({ maximized, isDragging }) => (Object.assign(Object.assign(Object.assign({}, (!maximized && {
     borderTopRightRadius: 12,
     borderTopLeftRadius: 12,
 })), (isDragging && {
     cursor: 'move',
 })), { margin: 0 })));
+export const StyledAppHeaderWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'maximized' && prop !== 'isDragging',
+})(({ isDragging }) => (Object.assign(Object.assign({}, (isDragging && {
+    cursor: 'move',
+})), { margin: 0 })));
 export const ToolbarStyled = styled(Box, {
     shouldForwardProp: (props) => props !== 'maximized' && props !== 'isHovered',
 })(({ theme, maximized }) => (Object.assign(Object.assign({ height: 32, position: 'relative', display: 'flex', width: '100%', justifyContent: 'center', transition: 'all 0.5s ease-in-out', borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }, (maximized && {

package/build/components/ToolbarIcon/CloseIcon/CloseIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
-export declare function CloseIcon(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function CloseIcon(props: BoxProps): import("react").JSX.Element;

package/build/components/ToolbarIcon/ExpandButton/ExpandButton.d.ts

@@ -5,5 +5,5 @@ interface ExpandButtonTextProps extends BoxProps {
     children: ReactNode;
     isHovered?: boolean;
 }
-export declare function ExpandButton({ isExpanded, isHovered, children, ...props }: ExpandButtonTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExpandButton({ isExpanded, isHovered, children, ...props }: ExpandButtonTextProps): import("react").JSX.Element;
 export {};

package/build/components/ToolbarIcon/ExpandButton/style.d.ts

@@ -9,6 +9,6 @@ export declare const ExpandWrapper: import("@emotion/styled").StyledComponent<im
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ExpandText: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isHovered?: boolean | undefined;
 }, {}, {}>;

package/build/components/ToolbarIcon/MaximizeIcon/MaximizeIcon.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
 interface MaximizeIconProps extends BoxProps {
     isMaximized?: boolean;
 }
-export declare function MaximizeIcon({ isMaximized, ...props }: MaximizeIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function MaximizeIcon({ isMaximized, ...props }: MaximizeIconProps): import("react").JSX.Element;
 export {};

package/build/components/ToolbarIcon/MinimizeIcon/MinimizeIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
-export declare function MinimizeIcon(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function MinimizeIcon(props: BoxProps): import("react").JSX.Element;

package/build/components/Tooltip/Tooltip.d.ts

@@ -6,5 +6,5 @@ interface Props extends Omit<TooltipProps, 'children'> {
     children?: ReactElement;
     className?: string;
 }
-declare function Tooltip({ className, title, placement, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ className, title, placement, children, ...rest }: Props): React.JSX.Element;
 export default Tooltip;

package/build/components/Tooltip/Tooltip.js

@@ -9,10 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import Box from '@mui/material/Box';
 import { StyledTooltip } from './styles';
 function Tooltip(_a) {
     var { className, title, placement = 'top', children } = _a, rest = __rest(_a, ["className", "title", "placement", "children"]);
-    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: children || _jsx(_Fragment, {}) })));
+    const id = useId();
+    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: _jsx(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: children }), `tooltip-child-${id}`) })));
 }
 export default Tooltip;

package/build/components/TooltipChip/TooltipChip.d.ts

@@ -10,5 +10,5 @@ type TooltipChipProps = PropsWithChildren<{
     };
     children: React.ReactNode;
 }>;
-declare const TooltipChip: ({ title, slotProps, children }: TooltipChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipChip: ({ title, slotProps, children }: TooltipChipProps) => React.JSX.Element;
 export default TooltipChip;

package/build/components/VAT/TotalVAT/TotalVAT.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Currency, Vat } from '../../../types/index.js';
+interface TotalVATProps {
+    totalGrossAmount: number;
+    totalVat: Vat;
+    selectedCurrency: Currency;
+    isDisabled: boolean;
+    onChangeTotalVat: (vat: Vat) => void;
+}
+declare function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalVat, isDisabled }: Readonly<TotalVATProps>): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TotalVAT>;
+export default _default;

package/build/components/VAT/TotalVAT/TotalVAT.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useRef, useState } from 'react';
+import Popper from '@mui/material/Popper';
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import { CustomBackdrop, DisplayAmount } from '../../index.js';
+import { actionsIcon, activeActionIcon, taxIcon } from '../../../constants/index.js';
+import { Label, LabelWrapper } from './style';
+import { getVatValue } from '../utils';
+import VATDropdown from '../VATDropdown';
+function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalVat, isDisabled }) {
+    var _a;
+    const [isOpen, setIsOpen] = useState(false);
+    const vatButtonRef = useRef();
+    const { t } = useTranslation();
+    const toggleDropdown = () => {
+        if (!isDisabled)
+            setIsOpen(!isOpen);
+    };
+    const modifyTotalVAT = (newVat) => {
+        onChangeTotalVat(Object.assign(Object.assign({}, newVat), { value: getVatValue(totalGrossAmount, newVat) }));
+    };
+    const currencyCode = ((_a = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _a === void 0 ? void 0 : _a.english) || '';
+    const getLabel = () => {
+        if (totalVat.percentage === 0)
+            return t('noVat');
+        if (!totalVat.isInclusive)
+            return _jsx(DisplayAmount, { currencyCode: currencyCode, amount: totalVat.value });
+        return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '4px' } }, { children: [_jsxs("span", { children: [t('inclusive'), " "] }), _jsx(DisplayAmount, { amount: totalVat.value, currencyCode: currencyCode })] })));
+    };
+    return (_jsxs(LabelWrapper, Object.assign({ isDisabled: isDisabled, isOpen: isOpen, onClick: toggleDropdown, ref: vatButtonRef, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsx("img", { src: taxIcon, alt: "p" }), _jsx(Label, Object.assign({ isDisabled: isDisabled }, { children: getLabel() })), _jsx(Box, { component: "img", src: isOpen ? activeActionIcon : actionsIcon, alt: "a" }), isOpen && _jsx(CustomBackdrop, { onClick: toggleDropdown }), _jsx(Popper, Object.assign({ open: Boolean(isOpen), anchorEl: vatButtonRef.current, placement: "bottom-start" }, { children: _jsx(VATDropdown, { setIsOpen: setIsOpen, vat: totalVat, setVat: modifyTotalVAT, sx: { position: 'absolute', top: 8, left: 0, display: isOpen ? 'block' : 'none' } }) }))] })));
+}
+export default memo(TotalVAT);

package/build/components/VAT/TotalVAT/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TotalVAT';

package/build/components/VAT/TotalVAT/index.js

@@ -0,0 +1 @@
+export { default } from './TotalVAT';

package/build/components/VAT/TotalVAT/style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const LabelWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isDisabled?: boolean | undefined;
+    isOpen?: boolean | undefined;
+}, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isDisabled: boolean;
+}, {}, {}>;

package/build/components/VAT/TotalVAT/style.js

@@ -0,0 +1,5 @@
+import { Box, styled } from '@mui/material';
+export const LabelWrapper = styled(Box, {
+    shouldForwardProp: (props) => props !== 'isDisabled' && props !== 'isOpen',
+})(({ theme, isOpen, isDisabled }) => (Object.assign(Object.assign({ display: 'flex', gap: theme.spacing(1), alignItems: 'center', justifyContent: 'space-between', fontSize: '11px', border: `1px solid ${theme.palette.divider}`, height: 32, padding: theme.spacing(1), borderRadius: '4px' }, (isOpen && { borderColor: theme.palette.info.dark, position: 'relative' })), (isDisabled ? { color: theme.palette.grey[700], cursor: 'not-allowed' } : { cursor: 'pointer' }))));
+export const Label = styled(Box, { shouldForwardProp: (props) => props !== 'isDisabled' })(({ theme, isDisabled }) => (Object.assign({ fontSize: '11px', fontWeight: 600, color: theme.palette.text.primary }, (isDisabled && { color: theme.palette.grey[700] }))));