react-better-html 1.1.290 → 1.1.292

package/dist/index.d.mts

@@ -394,6 +394,10 @@ type InternalToggleInputProps<Value> = {
     errorText?: string;
     infoText?: string;
     infoTextColor?: React.CSSProperties["color"];
+    inactiveColor?: React.CSSProperties["color"];
+    activeColor?: React.CSSProperties["color"];
+    inactiveBackgroundColor?: React.CSSProperties["backgroundColor"];
+    activeBackgroundColor?: React.CSSProperties["backgroundColor"];
     /** @default 26 */
     size?: number;
     value?: Value;
@@ -401,7 +405,7 @@ type InternalToggleInputProps<Value> = {
 } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "size"> & ComponentStyle & ComponentHoverStyle;
 type ToggleInputProps<Value = unknown> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
-declare const _default$5: {
+declare const _default$6: {
     checkbox: ToggleInputComponentType;
     radiobutton: ToggleInputComponentType;
     switch: ToggleInputComponentType;
@@ -431,7 +435,7 @@ type DividerComponentType = {
     vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
     horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
 };
-declare const _default$4: {
+declare const _default$5: {
     vertical: DividerComponentType["vertical"];
     horizontal: DividerComponentType["horizontal"];
 };
@@ -453,7 +457,7 @@ type LabelProps = {
     htmlFor?: string;
 };
 declare function Label(labelProps: LabelProps): react.JSX.Element;
-declare const _default$3: react.MemoExoticComponent<typeof Label>;
+declare const _default$4: react.MemoExoticComponent<typeof Label>;
 
 type ImageProps = {
     name?: AssetName | AnyOtherString;
@@ -469,7 +473,7 @@ type ImageComponent = {
     }>) => React.ReactElement;
 };
 declare const Image: ImageComponent;
-declare const _default$2: ImageComponent & {
+declare const _default$3: ImageComponent & {
     profileImage: typeof Image.profileImage;
 };
 
@@ -695,7 +699,7 @@ type BetterHtmlProviderProps = BetterProviderCommonProps & {
     config?: BetterHtmlProviderConfig;
 };
 declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react.JSX.Element;
-declare const _default$1: react.MemoExoticComponent<typeof BetterHtmlProvider>;
+declare const _default$2: react.MemoExoticComponent<typeof BetterHtmlProvider>;
 
 declare const isMobileDevice: boolean;
 
@@ -792,7 +796,7 @@ type IconProps = {
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };
-declare const _default: IconComponent;
+declare const _default$1: IconComponent;
 
 type InternalModalProps = {
     /**
@@ -1236,6 +1240,21 @@ type PaginationComponentType = {
 declare const PaginationComponent: PaginationComponentType;
 declare const Pagination: typeof PaginationComponent & {};
 
+type DeveloperPageSection = {
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+};
+type DeveloperPageProps = {
+    /** @default 24 */
+    iconSize?: number;
+    /** @default 120 */
+    assetSize?: number;
+    sections?: DeveloperPageSection[];
+};
+declare function DeveloperPage({ iconSize, assetSize, sections }: DeveloperPageProps): react.JSX.Element | undefined;
+declare const _default: react.MemoExoticComponent<typeof DeveloperPage>;
+
 type AlertsPluginOptions = {
     /** @default "bottom" */
     position?: "top" | "bottom";
@@ -1278,4 +1297,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, type Language, type LanguageData, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, missingTranslation, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$2 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, _default as DeveloperPage, type DeveloperPageSection, Div, type DivProps, _default$5 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$1 as Icon, type IconProps, _default$3 as Image, type ImageProps, InputField, type InputFieldProps, _default$4 as Label, type LabelProps, type Language, type LanguageData, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$6 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, missingTranslation, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.d.ts

@@ -394,6 +394,10 @@ type InternalToggleInputProps<Value> = {
     errorText?: string;
     infoText?: string;
     infoTextColor?: React.CSSProperties["color"];
+    inactiveColor?: React.CSSProperties["color"];
+    activeColor?: React.CSSProperties["color"];
+    inactiveBackgroundColor?: React.CSSProperties["backgroundColor"];
+    activeBackgroundColor?: React.CSSProperties["backgroundColor"];
     /** @default 26 */
     size?: number;
     value?: Value;
@@ -401,7 +405,7 @@ type InternalToggleInputProps<Value> = {
 } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "size"> & ComponentStyle & ComponentHoverStyle;
 type ToggleInputProps<Value = unknown> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
-declare const _default$5: {
+declare const _default$6: {
     checkbox: ToggleInputComponentType;
     radiobutton: ToggleInputComponentType;
     switch: ToggleInputComponentType;
@@ -431,7 +435,7 @@ type DividerComponentType = {
     vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
     horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
 };
-declare const _default$4: {
+declare const _default$5: {
     vertical: DividerComponentType["vertical"];
     horizontal: DividerComponentType["horizontal"];
 };
@@ -453,7 +457,7 @@ type LabelProps = {
     htmlFor?: string;
 };
 declare function Label(labelProps: LabelProps): react.JSX.Element;
-declare const _default$3: react.MemoExoticComponent<typeof Label>;
+declare const _default$4: react.MemoExoticComponent<typeof Label>;
 
 type ImageProps = {
     name?: AssetName | AnyOtherString;
@@ -469,7 +473,7 @@ type ImageComponent = {
     }>) => React.ReactElement;
 };
 declare const Image: ImageComponent;
-declare const _default$2: ImageComponent & {
+declare const _default$3: ImageComponent & {
     profileImage: typeof Image.profileImage;
 };
 
@@ -695,7 +699,7 @@ type BetterHtmlProviderProps = BetterProviderCommonProps & {
     config?: BetterHtmlProviderConfig;
 };
 declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react.JSX.Element;
-declare const _default$1: react.MemoExoticComponent<typeof BetterHtmlProvider>;
+declare const _default$2: react.MemoExoticComponent<typeof BetterHtmlProvider>;
 
 declare const isMobileDevice: boolean;
 
@@ -792,7 +796,7 @@ type IconProps = {
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };
-declare const _default: IconComponent;
+declare const _default$1: IconComponent;
 
 type InternalModalProps = {
     /**
@@ -1236,6 +1240,21 @@ type PaginationComponentType = {
 declare const PaginationComponent: PaginationComponentType;
 declare const Pagination: typeof PaginationComponent & {};
 
+type DeveloperPageSection = {
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+};
+type DeveloperPageProps = {
+    /** @default 24 */
+    iconSize?: number;
+    /** @default 120 */
+    assetSize?: number;
+    sections?: DeveloperPageSection[];
+};
+declare function DeveloperPage({ iconSize, assetSize, sections }: DeveloperPageProps): react.JSX.Element | undefined;
+declare const _default: react.MemoExoticComponent<typeof DeveloperPage>;
+
 type AlertsPluginOptions = {
     /** @default "bottom" */
     position?: "top" | "bottom";
@@ -1278,4 +1297,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, type Language, type LanguageData, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, missingTranslation, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$2 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, _default as DeveloperPage, type DeveloperPageSection, Div, type DivProps, _default$5 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$1 as Icon, type IconProps, _default$3 as Image, type ImageProps, InputField, type InputFieldProps, _default$4 as Label, type LabelProps, type Language, type LanguageData, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$6 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateI18n, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, missingTranslation, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   Button: () => Button_default,
   Chip: () => Chip_default,
   ColorThemeSwitch: () => ColorThemeSwitch_default,
+  DeveloperPage: () => DeveloperPage_default,
   Div: () => Div_default,
   Divider: () => Divider_default,
   Dropdown: () => Dropdown_default,
@@ -57,52 +58,52 @@ __export(index_exports, {
   Tooltip: () => Tooltip_default,
   alertControls: () => alertControls,
   alertsPlugin: () => alertsPlugin,
-  calculateColorContrast: () => import_react_better_core30.calculateColorContrast,
-  colorThemeControls: () => import_react_better_core30.colorThemeControls,
-  countries: () => import_react_better_core30.countries,
-  darkenColor: () => import_react_better_core30.darkenColor,
+  calculateColorContrast: () => import_react_better_core31.calculateColorContrast,
+  colorThemeControls: () => import_react_better_core31.colorThemeControls,
+  countries: () => import_react_better_core31.countries,
+  darkenColor: () => import_react_better_core31.darkenColor,
   defaultAlertsPluginOptions: () => defaultAlertsPluginOptions,
   defaultLocalStoragePluginOptions: () => defaultLocalStoragePluginOptions,
   defaultReactRouterDomPluginOptions: () => defaultReactRouterDomPluginOptions,
-  desaturateColor: () => import_react_better_core30.desaturateColor,
-  eventPreventDefault: () => import_react_better_core30.eventPreventDefault,
-  eventPreventStop: () => import_react_better_core30.eventPreventStop,
-  eventStopPropagation: () => import_react_better_core30.eventStopPropagation,
+  desaturateColor: () => import_react_better_core31.desaturateColor,
+  eventPreventDefault: () => import_react_better_core31.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core31.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core31.eventStopPropagation,
   filterHover: () => filterHover,
-  formatPhoneNumber: () => import_react_better_core30.formatPhoneNumber,
-  generateApi: () => import_react_better_core30.generateApi,
-  generateEventEmitter: () => import_react_better_core30.generateEventEmitter,
+  formatPhoneNumber: () => import_react_better_core31.formatPhoneNumber,
+  generateApi: () => import_react_better_core31.generateApi,
+  generateEventEmitter: () => import_react_better_core31.generateEventEmitter,
   generateI18n: () => generateI18n,
   generateLocalStorage: () => generateLocalStorage,
-  generateRandomString: () => import_react_better_core30.generateRandomString,
+  generateRandomString: () => import_react_better_core31.generateRandomString,
   getBrowser: () => getBrowser,
   getFormErrorObject: () => getFormErrorObject,
-  getPluralWord: () => import_react_better_core30.getPluralWord,
-  isApiError: () => import_react_better_core30.isApiError,
+  getPluralWord: () => import_react_better_core31.getPluralWord,
+  isApiError: () => import_react_better_core31.isApiError,
   isMobileDevice: () => isMobileDevice,
-  lightenColor: () => import_react_better_core30.lightenColor,
-  loaderControls: () => import_react_better_core30.loaderControls,
+  lightenColor: () => import_react_better_core31.lightenColor,
+  loaderControls: () => import_react_better_core31.loaderControls,
   localStoragePlugin: () => localStoragePlugin,
-  log: () => import_react_better_core30.log,
+  log: () => import_react_better_core31.log,
   missingTranslation: () => missingTranslation,
   reactRouterDomPlugin: () => reactRouterDomPlugin,
-  saturateColor: () => import_react_better_core30.saturateColor,
+  saturateColor: () => import_react_better_core31.saturateColor,
   sideMenuControls: () => sideMenuControls,
   useAlertControls: () => useAlertControls,
   useBetterHtmlContext: () => useBetterHtmlContext,
-  useBooleanState: () => import_react_better_core30.useBooleanState,
-  useDebounceState: () => import_react_better_core30.useDebounceState,
+  useBooleanState: () => import_react_better_core31.useBooleanState,
+  useDebounceState: () => import_react_better_core31.useDebounceState,
   useForm: () => useForm,
-  useLoader: () => import_react_better_core30.useLoader,
-  useLoaderControls: () => import_react_better_core30.useLoaderControls,
+  useLoader: () => import_react_better_core31.useLoader,
+  useLoaderControls: () => import_react_better_core31.useLoaderControls,
   useMediaQuery: () => useMediaQuery,
   usePageResize: () => usePageResize,
   usePageScroll: () => usePageScroll,
-  useTheme: () => import_react_better_core30.useTheme,
+  useTheme: () => import_react_better_core31.useTheme,
   useUrlQuery: () => useUrlQuery
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core30 = require("react-better-core");
+var import_react_better_core31 = require("react-better-core");
 
 // src/components/BetterHtmlProvider.tsx
 var import_react14 = require("react");
@@ -3913,6 +3914,8 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
     withMultiselect,
     id,
     textAlign,
+    backgroundColor,
+    borderRadius,
     ...props
   } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.dropdown?.style?.default,
@@ -4138,6 +4141,8 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
       infoTextColor,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
       textAlign,
+      backgroundColor,
+      borderRadius,
       name,
       disabled,
       readOnly: !withSearch,
@@ -5850,13 +5855,24 @@ var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
 var InputElement2 = import_styled_components12.default.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "size", "withNoBorder"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "theme",
+    "colorTheme",
+    "style",
+    "hoverStyle",
+    "size",
+    "withNoBorder",
+    "inactiveColor",
+    "activeColor",
+    "inactiveBackgroundColor",
+    "activeBackgroundColor"
+  ].includes(prop)
 })`
    position: relative;
    appearance: none;
    width: ${(props) => props.size ?? componentSize}px;
    height: ${(props) => props.size ?? componentSize}px;
-   background-color: ${(props) => props.theme.colors.backgroundContent};
+   background-color: ${(props) => props.inactiveBackgroundColor ?? props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
    cursor: pointer;
@@ -5868,8 +5884,8 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
    }
 
    &:checked {
-      background-color: ${(props) => props.theme.colors.primary};
-      border-color: ${(props) => props.theme.colors.primary};
+      background-color: ${(props) => props.activeBackgroundColor ?? props.theme.colors.primary};
+      border-color: ${(props) => props.activeBackgroundColor ?? props.theme.colors.primary};
    }
 
    &:disabled {
@@ -5890,7 +5906,18 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
    }
 `;
 var SwitchElement = import_styled_components12.default.div.withConfig({
-  shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "theme",
+    "checked",
+    "disabled",
+    "isMouseDown",
+    "style",
+    "hoverStyle",
+    "activeColor",
+    "inactiveColor",
+    "inactiveBackgroundColor",
+    "activeBackgroundColor"
+  ].includes(prop)
 })`
    --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
    --ball-size: ${componentSize - switchComponentBallGap * 2}px;
@@ -5898,7 +5925,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
    position: relative;
    width: var(--width);
    height: ${componentSize}px;
-   background-color: ${(props) => props.checked ? props.theme.colors.primary : props.theme.colors.border};
+   background-color: ${(props) => props.checked ? props.activeBackgroundColor ?? props.theme.colors.primary : props.inactiveBackgroundColor ?? props.theme.colors.border};
    border-radius: 999px;
    cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
    opacity: ${(props) => props.disabled ? 0.5 : 1};
@@ -5909,7 +5936,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
       position: absolute;
       width: ${(props) => componentSize - switchComponentBallGap * 2 + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
       height: ${componentSize - switchComponentBallGap * 2}px;
-      background-color: ${(props) => props.theme.colors.base};
+      background-color: ${(props) => props.checked ? props.activeColor ?? props.theme.colors.base : props.inactiveColor ?? props.theme.colors.base};
       border-radius: 999px;
       top: ${switchComponentBallGap}px;
       left: ${switchComponentBallGap}px;
@@ -5925,7 +5952,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
          position: absolute;
          width: ${(props) => componentSize - switchComponentBallGap * 2 + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
          height: ${componentSize - switchComponentBallGap * 2}px;
-         background-color: ${(props) => props.checked ? props.theme.colors.primary : "transparent"};
+         background-color: ${(props) => props.checked ? props.activeBackgroundColor ?? props.theme.colors.primary : "transparent"};
          border-radius: 999px;
          top: ${switchComponentBallGap}px;
          left: ${switchComponentBallGap}px;
@@ -5959,6 +5986,10 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
   errorText,
   infoText,
   infoTextColor,
+  inactiveColor,
+  activeColor,
+  inactiveBackgroundColor,
+  activeBackgroundColor,
   size = componentSize,
   value,
   onChange,
@@ -6014,6 +6045,10 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
             colorTheme,
             size,
             withNoBorder: theme2.styles.borderWidth === 0,
+            inactiveColor,
+            activeColor,
+            inactiveBackgroundColor,
+            activeBackgroundColor,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -6032,7 +6067,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
             position: "absolute",
             top: "50%",
             left: "50%",
-            color: theme2.colors.base,
+            color: activeColor ?? theme2.colors.base,
             size: size / 1.8,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,
@@ -6047,7 +6082,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
             height: size / 2,
             top: "50%",
             left: "50%",
-            backgroundColor: theme2.colors.base,
+            backgroundColor: activeColor ?? theme2.colors.base,
             borderRadius: 999,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,
@@ -8757,12 +8792,80 @@ var SideMenu2 = (0, import_react32.memo)(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
 SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
+
+// src/components/DeveloperPage.tsx
+var import_react33 = require("react");
+var import_react_better_core30 = require("react-better-core");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function DeveloperPage({ iconSize = 24, assetSize = 120, sections }) {
+  const theme2 = (0, import_react_better_core30.useTheme)();
+  const { devMode, icons: icons2, assets: assets2 } = (0, import_react_better_core30.useBetterCoreContext)();
+  const gridGap = theme2.styles.space;
+  const iconNameFontSie = 12;
+  return devMode ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Div_default.column, { gap: theme2.styles.space, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Div_default.box, { title: "Icons", titleAs: "h2", description: "List of all icons in the config", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Div_default.row, { alignItems: "center", justifyContent: "center", flexWrap: "wrap", gap: gridGap, children: Object.keys(icons2).map((icon) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      Div_default.row,
+      {
+        position: "relative",
+        width: iconSize + gridGap * 2 + iconNameFontSie,
+        height: iconSize + gridGap * 2 + iconNameFontSie,
+        alignItems: "center",
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: icon, color: theme2.colors.primary, size: iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Text_default,
+            {
+              position: "absolute",
+              width: "100%",
+              top: `calc(100% - ${iconNameFontSie}px)`,
+              fontSize: iconNameFontSie,
+              textAlign: "center",
+              wordBreak: "break-all",
+              color: theme2.colors.textSecondary,
+              children: icon
+            }
+          )
+        ]
+      },
+      icon
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Div_default.box, { title: "Assets", titleAs: "h2", description: "List of all assets in the config", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Div_default.row, { alignItems: "center", justifyContent: "center", flexWrap: "wrap", gap: gridGap, children: Object.keys(assets2).map((asset) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      Div_default.column,
+      {
+        position: "relative",
+        width: assetSize,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: theme2.styles.gap,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Image_default, { name: asset, width: "100%", height: assetSize, objectFit: "contain" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Text_default,
+            {
+              width: "100%",
+              fontSize: iconNameFontSie,
+              textAlign: "center",
+              wordBreak: "break-all",
+              color: theme2.colors.textSecondary,
+              children: asset
+            }
+          )
+        ]
+      },
+      asset
+    )) }) }),
+    sections?.map((section) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Div_default.box, { title: section.title, titleAs: "h2", description: section.description, children: section.children }, section.title))
+  ] }) : void 0;
+}
+var DeveloperPage_default = (0, import_react33.memo)(DeveloperPage);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BetterHtmlProvider,
   Button,
   Chip,
   ColorThemeSwitch,
+  DeveloperPage,
   Div,
   Divider,
   Dropdown,