@ctlyst.id/internal-ui 5.4.7 → 5.4.9

package/dist/index.d.mts

@@ -868,6 +868,12 @@ type UploaderProps = FlexProps & {
         validate: string[];
         message?: string;
     };
+    /**
+     * MIME types for file upload
+     * Example:
+     * ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/csv']
+     */
+    acceptFileType?: string[];
     /**
      * @deprecated since version 3.4.6
      * will be removed in version 4
@@ -887,6 +893,7 @@ type UploaderProps = FlexProps & {
     testId?: string;
     isShowReupload?: boolean;
     size?: 'sm' | 'lg';
+    buttonChangeText?: string;
 };
 
 declare const Uploader: React__default.FC<UploaderProps>;
@@ -897,6 +904,30 @@ declare const Uploader: React__default.FC<UploaderProps>;
  */
 declare const dimensionValidator: (dimension: [number, number], message?: string) => (file: File) => FileError | null;
 
+declare const ONE_MEGA_BYTE = 1000000;
+declare const messages: {
+    dragActive: string;
+    dragInActive: string;
+    dragReplace: string;
+    replaceFile: string;
+    uploadFile: string;
+};
+declare const IMG_EXT: {
+    readonly jpg: "jpg";
+    readonly jpeg: "jpeg";
+    readonly png: "png";
+    readonly gif: "gif";
+};
+declare const EXCEL_EXT: {
+    readonly xls: "xls";
+    readonly xlsx: "xlsx";
+    readonly csv: "csv";
+};
+declare const DEFAULT_IMAGE_MIME_TYPE: ("jpg" | "jpeg" | "png" | "gif")[];
+declare const DEFAULT_EXCEL_MIME_TYPE: string[];
+declare const concatList: (list: string[]) => string;
+declare const formatValidationMessage: (extension: string[]) => string;
+
 declare enum ErrorCode {
     FileInvalidType = "file-invalid-type",
     FileTooLarge = "file-too-large",
@@ -938,4 +969,4 @@ declare const ProviderContext: React__default.Context<ProviderContextObject>;
 declare const useInternalUI: () => ProviderContextObject;
 declare const Provider: FC<ProviderProps>;
 
-export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, DropdownIndicator, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, createExtendTheme, defaultOnHandleRejections, dimensionValidator, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useFetcher, useInternalUI, useSelectTable, useToast };
+export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, DEFAULT_EXCEL_MIME_TYPE, DEFAULT_IMAGE_MIME_TYPE, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, DropdownIndicator, EXCEL_EXT, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, IMG_EXT, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, ONE_MEGA_BYTE, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, concatList, createExtendTheme, defaultOnHandleRejections, dimensionValidator, formatValidationMessage, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, messages, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useFetcher, useInternalUI, useSelectTable, useToast };

package/dist/index.d.ts

@@ -868,6 +868,12 @@ type UploaderProps = FlexProps & {
         validate: string[];
         message?: string;
     };
+    /**
+     * MIME types for file upload
+     * Example:
+     * ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/csv']
+     */
+    acceptFileType?: string[];
     /**
      * @deprecated since version 3.4.6
      * will be removed in version 4
@@ -887,6 +893,7 @@ type UploaderProps = FlexProps & {
     testId?: string;
     isShowReupload?: boolean;
     size?: 'sm' | 'lg';
+    buttonChangeText?: string;
 };
 
 declare const Uploader: React__default.FC<UploaderProps>;
@@ -897,6 +904,30 @@ declare const Uploader: React__default.FC<UploaderProps>;
  */
 declare const dimensionValidator: (dimension: [number, number], message?: string) => (file: File) => FileError | null;
 
+declare const ONE_MEGA_BYTE = 1000000;
+declare const messages: {
+    dragActive: string;
+    dragInActive: string;
+    dragReplace: string;
+    replaceFile: string;
+    uploadFile: string;
+};
+declare const IMG_EXT: {
+    readonly jpg: "jpg";
+    readonly jpeg: "jpeg";
+    readonly png: "png";
+    readonly gif: "gif";
+};
+declare const EXCEL_EXT: {
+    readonly xls: "xls";
+    readonly xlsx: "xlsx";
+    readonly csv: "csv";
+};
+declare const DEFAULT_IMAGE_MIME_TYPE: ("jpg" | "jpeg" | "png" | "gif")[];
+declare const DEFAULT_EXCEL_MIME_TYPE: string[];
+declare const concatList: (list: string[]) => string;
+declare const formatValidationMessage: (extension: string[]) => string;
+
 declare enum ErrorCode {
     FileInvalidType = "file-invalid-type",
     FileTooLarge = "file-too-large",
@@ -938,4 +969,4 @@ declare const ProviderContext: React__default.Context<ProviderContextObject>;
 declare const useInternalUI: () => ProviderContextObject;
 declare const Provider: FC<ProviderProps>;
 
-export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, DropdownIndicator, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, createExtendTheme, defaultOnHandleRejections, dimensionValidator, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useFetcher, useInternalUI, useSelectTable, useToast };
+export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, DEFAULT_EXCEL_MIME_TYPE, DEFAULT_IMAGE_MIME_TYPE, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, DropdownIndicator, EXCEL_EXT, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, IMG_EXT, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, ONE_MEGA_BYTE, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, concatList, createExtendTheme, defaultOnHandleRejections, dimensionValidator, formatValidationMessage, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, messages, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useFetcher, useInternalUI, useSelectTable, useToast };

package/dist/index.js

@@ -96,6 +96,8 @@ __export(src_exports, {
   Container: () => import_react55.Container,
   ContainerProps: () => import_react55.ContainerProps,
   Counter: () => counter_default,
+  DEFAULT_EXCEL_MIME_TYPE: () => DEFAULT_EXCEL_MIME_TYPE,
+  DEFAULT_IMAGE_MIME_TYPE: () => DEFAULT_IMAGE_MIME_TYPE,
   DataTable: () => data_table_default,
   DatePickerMonth: () => datepicker_month_default,
   Datepicker: () => datepicker_default,
@@ -112,6 +114,7 @@ __export(src_exports, {
   DrawerOverlay: () => import_react58.ModalOverlay,
   DrawerProps: () => import_react58.DrawerProps,
   DropdownIndicator: () => DropdownIndicator,
+  EXCEL_EXT: () => EXCEL_EXT,
   EmptyState: () => empty_state_default,
   ErrorCode: () => error_code_default,
   Fade: () => import_react95.Fade,
@@ -135,6 +138,7 @@ __export(src_exports, {
   HeadingProps: () => import_react87.HeadingProps,
   Hide: () => import_react95.Hide,
   HideProps: () => import_react95.HideProps,
+  IMG_EXT: () => IMG_EXT,
   Icon: () => import_react54.Icon,
   IconButton: () => import_react10.IconButton,
   IconButtonProps: () => import_react10.IconButtonProps,
@@ -192,6 +196,7 @@ __export(src_exports, {
   Navbar: () => Navbar,
   NavigationBar: () => navigation_bar_default,
   NoOptionsMessage: () => NoOptionsMessage,
+  ONE_MEGA_BYTE: () => ONE_MEGA_BYTE,
   OrderedList: () => import_react56.OrderedList,
   Pagination: () => pagination_default,
   PaginationDetail: () => pagination_detail_default,
@@ -336,16 +341,19 @@ __export(src_exports, {
   WrapItemProps: () => import_react55.WrapItemProps,
   WrapProps: () => import_react55.WrapProps,
   XMSLogo: () => XMSLogo,
+  concatList: () => concatList,
   createExtendTheme: () => createExtendTheme,
   defaultOnHandleRejections: () => defaultOnHandleRejections,
   dimensionValidator: () => dimensionValidator,
   extendTheme: () => import_react108.extendTheme,
+  formatValidationMessage: () => formatValidationMessage,
   forwardRef: () => import_react108.forwardRef,
   getSelectAllCheckboxState: () => getSelectAllCheckboxState,
   getTheme: () => getTheme,
   id: () => id,
   isCellDisabled: () => isCellDisabled,
   isRatioEqual: () => isRatioEqual,
+  messages: () => messages,
   selectStyles: () => selectStyles,
   theme: () => theme4,
   themeSelect: () => themeSelect,
@@ -6031,6 +6039,7 @@ var import_react94 = require("react");
 var import_react_dropzone = require("react-dropzone");
 
 // src/components/uploader/constants.ts
+var ONE_MEGA_BYTE = 1e6;
 var messages = {
   dragActive: "Drop file disini...",
   dragInActive: `(Klik atau drag untuk input file)`,
@@ -6044,7 +6053,17 @@ var IMG_EXT = {
   png: "png",
   gif: "gif"
 };
+var EXCEL_EXT = {
+  xls: "xls",
+  xlsx: "xlsx",
+  csv: "csv"
+};
 var DEFAULT_IMAGE_MIME_TYPE = [IMG_EXT.jpg, IMG_EXT.jpeg, IMG_EXT.png, IMG_EXT.gif];
+var DEFAULT_EXCEL_MIME_TYPE = [
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "text/csv"
+];
 var concatList = (list) => {
   let _concatedList = "";
   if (list.length > 1) {
@@ -6114,6 +6133,7 @@ var Uploader = ({
   acceptFormat = {
     validate: DEFAULT_IMAGE_MIME_TYPE
   },
+  acceptFileType,
   maxFileSize,
   customValidation,
   value,
@@ -6124,6 +6144,7 @@ var Uploader = ({
   isShowReupload = true,
   size: size2 = "lg",
   validatorExt,
+  buttonChangeText = "Ubah Foto",
   ...props
 }) => {
   const [filePreview, setFilePreview] = (0, import_react94.useState)();
@@ -6141,6 +6162,11 @@ var Uploader = ({
   const onDropAccepted = (0, import_react94.useCallback)(
     (files) => {
       const file = files[0];
+      if (acceptFileType && acceptFileType.includes(file.type)) {
+        setFilePreview(file.name);
+        onHandleUploadFile == null ? void 0 : onHandleUploadFile(file, null);
+        return null;
+      }
       const imageUrl = URL.createObjectURL(file);
       const img = new Image();
       if (file.type === "image/heic") {
@@ -6164,7 +6190,7 @@ var Uploader = ({
       };
       return null;
     },
-    [customValidation, dimension, handleRejection, onHandleUploadFile]
+    [customValidation, dimension, handleRejection, onHandleUploadFile, acceptFileType]
   );
   const onDropRejected = (0, import_react94.useCallback)((fileRejections) => {
     defaultOnHandleRejections(fileRejections, { acceptFormat, maxFileSize }, handleRejection);
@@ -6189,7 +6215,10 @@ var Uploader = ({
   const { getRootProps, getInputProps, isDragActive, acceptedFiles, open } = (0, import_react_dropzone.useDropzone)({
     onDropAccepted,
     onDropRejected,
-    accept: Object.fromEntries(acceptFile),
+    accept: {
+      ...acceptFormat ? Object.fromEntries(acceptFile) : {},
+      ...acceptFileType ? Object.fromEntries(acceptFileType.map((type) => [type, []])) : {}
+    },
     maxFiles: 1,
     maxSize: maxFileSize == null ? void 0 : maxFileSize.validate,
     noClick: isDisabled || !!filePreview,
@@ -6227,6 +6256,10 @@ var Uploader = ({
           setFilePreview(value.name);
           return;
         }
+        if (acceptFileType == null ? void 0 : acceptFileType.some((type) => type === value.type)) {
+          setFilePreview(value.name);
+          return;
+        }
         setFilePreview(URL.createObjectURL(value));
       }
     } else {
@@ -6289,7 +6322,7 @@ var Uploader = ({
               "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
               justify: "center",
               align: "center",
-              children: filePreview.includes("blob") ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              children: filePreview.includes("blob") && !acceptFile.some(([type]) => typeof type === "string" && type.includes("image/")) ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 import_react93.Image,
                 {
                   h: size2 === "lg" ? "120" : "100",
@@ -6334,7 +6367,7 @@ var Uploader = ({
         size: "sm",
         variant: "outline",
         onClick: open,
-        children: "Ubah Foto"
+        children: buttonChangeText
       }
     ) }),
     renderErrorText(errorText),
@@ -8143,6 +8176,8 @@ var import_react108 = require("@chakra-ui/react");
   Container,
   ContainerProps,
   Counter,
+  DEFAULT_EXCEL_MIME_TYPE,
+  DEFAULT_IMAGE_MIME_TYPE,
   DataTable,
   DatePickerMonth,
   Datepicker,
@@ -8159,6 +8194,7 @@ var import_react108 = require("@chakra-ui/react");
   DrawerOverlay,
   DrawerProps,
   DropdownIndicator,
+  EXCEL_EXT,
   EmptyState,
   ErrorCode,
   Fade,
@@ -8182,6 +8218,7 @@ var import_react108 = require("@chakra-ui/react");
   HeadingProps,
   Hide,
   HideProps,
+  IMG_EXT,
   Icon,
   IconButton,
   IconButtonProps,
@@ -8239,6 +8276,7 @@ var import_react108 = require("@chakra-ui/react");
   Navbar,
   NavigationBar,
   NoOptionsMessage,
+  ONE_MEGA_BYTE,
   OrderedList,
   Pagination,
   PaginationDetail,
@@ -8383,16 +8421,19 @@ var import_react108 = require("@chakra-ui/react");
   WrapItemProps,
   WrapProps,
   XMSLogo,
+  concatList,
   createExtendTheme,
   defaultOnHandleRejections,
   dimensionValidator,
   extendTheme,
+  formatValidationMessage,
   forwardRef,
   getSelectAllCheckboxState,
   getTheme,
   id,
   isCellDisabled,
   isRatioEqual,
+  messages,
   selectStyles,
   theme,
   themeSelect,