react-better-html 1.1.156 → 1.1.158

package/dist/index.d.mts

@@ -960,6 +960,9 @@ declare const generateRandomString: (stringLength: number, options?: {
 declare const getBrowser: () => BrowserName | undefined;
 declare const formatPhoneNumber: (phoneNumber: string) => string;
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
+declare const eventPreventDefault: (event: React.MouseEvent) => void;
+declare const eventStopPropagation: (event: React.MouseEvent) => void;
+declare const eventPreventStop: (event: React.MouseEvent) => void;
 
 declare const lightenColor: (hexColor: string, amount: number) => string;
 declare const darkenColor: (hexColor: string, amount: number) => string;
@@ -1001,4 +1004,4 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -960,6 +960,9 @@ declare const generateRandomString: (stringLength: number, options?: {
 declare const getBrowser: () => BrowserName | undefined;
 declare const formatPhoneNumber: (phoneNumber: string) => string;
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
+declare const eventPreventDefault: (event: React.MouseEvent) => void;
+declare const eventStopPropagation: (event: React.MouseEvent) => void;
+declare const eventPreventStop: (event: React.MouseEvent) => void;
 
 declare const lightenColor: (hexColor: string, amount: number) => string;
 declare const darkenColor: (hexColor: string, amount: number) => string;
@@ -1001,4 +1004,4 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -60,6 +60,9 @@ __export(index_exports, {
   darkenColor: () => darkenColor,
   defaultAlertsPluginOptions: () => defaultAlertsPluginOptions,
   desaturateColor: () => desaturateColor,
+  eventPreventDefault: () => eventPreventDefault,
+  eventPreventStop: () => eventPreventStop,
+  eventStopPropagation: () => eventStopPropagation,
   formatPhoneNumber: () => formatPhoneNumber,
   generateRandomString: () => generateRandomString,
   getBrowser: () => getBrowser,
@@ -1651,10 +1654,24 @@ var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react2 = require("react");
 var IconElement = import_styled_components.default.svg.withConfig({
-  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle", "hoverColor"].includes(prop)
 })`
    ${(props) => props.normalStyle}
 
+   path {
+      ${(props) => props.hoverColor ? `transition: ${props.theme.styles.transition};` : ""}
+   }
+
+   &:hover {
+      path.react-better-html-icon-path-with-fill {
+         fill: ${(props) => props.hoverColor};
+      }
+
+      path.react-better-html-icon-path-with-stroke {
+         stroke: ${(props) => props.hoverColor};
+      }
+   }
+
    &:hover {
       ${(props) => props.hoverStyle}
    }
@@ -1667,6 +1684,7 @@ var Icon = (0, import_react.forwardRef)(function Icon2({ name, size = 16, ...pro
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
   const svgColor = props.color ?? theme2.colors.textPrimary;
+  const svgHoverColorColor = props.colorHover;
   (0, import_react.useEffect)(() => {
     if (!icons2[name.toString()])
       console.warn(
@@ -1681,6 +1699,8 @@ var Icon = (0, import_react.forwardRef)(function Icon2({ name, size = 16, ...pro
       viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
+      theme: theme2,
+      hoverColor: svgHoverColorColor,
       ...styledComponentStyles,
       ...dataProps,
       ...ariaProps,
@@ -1690,6 +1710,7 @@ var Icon = (0, import_react.forwardRef)(function Icon2({ name, size = 16, ...pro
         "path",
         {
           ...path,
+          className: path.type === "fill" ? "react-better-html-icon-path-with-fill" : "react-better-html-icon-path-with-stroke",
           fill: path.type === "fill" ? svgColor : void 0,
           stroke: path.type === "stroke" ? svgColor : void 0,
           key: path.d
@@ -2705,12 +2726,17 @@ function useStyledComponentStyles(props, theme2, excludeProps) {
         haveHover = true;
         const normalKey = key.slice(0, -5);
         hoverStyle[normalKey] = props[key];
+        if (normalKey === "transition") hoverStyle.WebkitTransition = hoverStyle.transition;
       } else {
         if (!cssProps[key.toLowerCase()]) continue;
         normalStyle[key] = props[key];
+        if (key === "transition") normalStyle.WebkitTransition = normalStyle.transition;
       }
     }
-    if (haveHover) normalStyle.transition = theme2?.styles.transition ?? "";
+    if (haveHover) {
+      normalStyle.transition = theme2?.styles.transition ?? "";
+      normalStyle.WebkitTransition = normalStyle.transition;
+    }
     return {
       normalStyle,
       hoverStyle
@@ -4375,13 +4401,15 @@ var countries = [
     name: "Finland",
     code: "FI",
     timeZone: "Europe/Helsinki",
-    phoneNumberExtension: "358"
+    phoneNumberExtension: "358",
+    phoneNumberFormat: "XX XXX XX XX"
   },
   {
     name: "France",
     code: "FR",
     timeZone: "Europe/Paris",
-    phoneNumberExtension: "33"
+    phoneNumberExtension: "33",
+    phoneNumberFormat: "X XX XX XX XX"
   },
   {
     name: "French Guiana",
@@ -4424,7 +4452,7 @@ var countries = [
     code: "DE",
     timeZone: "Europe/Berlin",
     phoneNumberExtension: "49",
-    phoneNumberFormat: "XXXX XXXXXX"
+    phoneNumberFormat: "XXXX XXXXXXX"
   },
   {
     name: "Ghana",
@@ -5461,6 +5489,16 @@ var formatPhoneNumber = (phoneNumber) => {
 var getFormErrorObject = (formValues) => {
   return {};
 };
+var eventPreventDefault = (event) => {
+  event.preventDefault();
+};
+var eventStopPropagation = (event) => {
+  event.stopPropagation();
+};
+var eventPreventStop = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
 
 // src/components/Label.tsx
 var import_react17 = require("react");
@@ -5863,8 +5901,18 @@ var getWeekDayName = (day, short = false) => {
 };
 var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
 var yearsRange = Array.from({ length: 100 + 1 + 50 }, (_, index) => index + (/* @__PURE__ */ new Date()).getFullYear() - 100);
+var SelectWrapperComponent = import_styled_components10.default.div.withConfig({
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
+})`
+   &:has(select:focus) {
+      outline: auto;
+      outline-color: -webkit-focus-ring-color;
+      outline-style: auto;
+      outline-offset: 2px;
+   }
+`;
 var SelectComponent = import_styled_components10.default.select.withConfig({
-  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
 })`
    position: absolute;
    top: 50%;
@@ -5874,6 +5922,7 @@ var SelectComponent = import_styled_components10.default.select.withConfig({
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
+  const internalYearSelectId = (0, import_react19.useId)();
   const [currentDate, setCurrentDate] = (0, import_react19.useState)(value ? new Date(value) : void 0);
   const [currentMonth, setCurrentMonth] = (0, import_react19.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
   const [currentYear, setCurrentYear] = (0, import_react19.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
@@ -5941,11 +5990,20 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectWrapperComponent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: currentYear }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "chevronDown", size: 12 }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year)) })
-        ] })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            SelectComponent,
+            {
+              theme: theme2,
+              value: currentYear,
+              onChange: onChangeYearSelect,
+              id: internalYearSelectId,
+              children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year))
+            }
+          )
+        ] }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
@@ -6069,6 +6127,10 @@ var InputElement = import_styled_components11.default.input.withConfig({
       cursor: not-allowed;
    }
 
+   &:read-only {
+      caret-color: transparent;
+   }
+
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -6725,6 +6787,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: hours.map((hour) => {
                           const isSelected = hour.toString() === valueHour;
                           return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6758,6 +6821,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: minutes.map((minute) => {
                           const isSelected = minute.toString() === valueMinute;
                           return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6846,46 +6910,66 @@ InputFieldComponent.time = (0, import_react20.forwardRef)(function Time({ ...pro
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
-              const isSelected = hour.toString() === valueHour;
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: hour,
-                  onClickWithValue: onClickHour,
-                  ref: isSelected ? selectedHourRef : void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
-                },
-                hour
-              );
-            }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
-              const isSelected = minute.toString() === valueMinute;
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: minute,
-                  onClickWithValue: onClickMinute,
-                  ref: isSelected ? selectedMinuteRef : void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
-                },
-                minute
-              );
-            }) })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: hours.map((hour) => {
+                  const isSelected = hour.toString() === valueHour;
+                  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: hour,
+                      onClickWithValue: onClickHour,
+                      ref: isSelected ? selectedHourRef : void 0,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                    },
+                    hour
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: minutes.map((minute) => {
+                  const isSelected = minute.toString() === valueMinute;
+                  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: minute,
+                      onClickWithValue: onClickMinute,
+                      ref: isSelected ? selectedMinuteRef : void 0,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                    },
+                    minute
+                  );
+                })
+              }
+            )
           ] })
         }
       ) : void 0,
@@ -9069,6 +9153,9 @@ var Foldable_default = Foldable2;
   darkenColor,
   defaultAlertsPluginOptions,
   desaturateColor,
+  eventPreventDefault,
+  eventPreventStop,
+  eventStopPropagation,
   formatPhoneNumber,
   generateRandomString,
   getBrowser,