mayak-common-library 0.0.83 → 0.0.85

package/dist/index.css

@@ -1,5 +1,5 @@
 /* src/components/Select/styles.css */
-@keyframes fade-In {
+@keyframes fadeIn {
   0% {
     opacity: 0;
     transform: translateY(2rem);
@@ -19,6 +19,36 @@
     transform: translateY(2rem);
   }
 }
+@keyframes fadeInReverse {
+  0% {
+    opacity: 0;
+    transform: translateY(-2rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+}
+@keyframes fadeOutReverse {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-2rem);
+  }
+}
 .select {
   transition: unset !important;
 }
@@ -26,7 +56,13 @@
   animation: fadeOut 0.4s;
 }
 .select--open {
-  animation: fade-In 0.5s;
+  animation: fadeIn 0.5s;
+}
+.select--close-reverse {
+  animation: fadeOutReverse 0.4s;
+}
+.select--open-reverse {
+  animation: fadeInReverse 0.5s;
 }
 
 /* src/styles/globals.scss */

package/dist/index.js

@@ -308,7 +308,9 @@ var SelectPro = ({
   openUp,
   intermediateChild,
   accentBgColor,
-  paperSx
+  paperSx,
+  childContainerSx,
+  reverseAnimation = false
 }) => {
   const [btn, setAnchorEl] = (0, import_react2.useState)(null);
   const [open, setOpen] = (0, import_react2.useState)(false);
@@ -389,21 +391,28 @@ var SelectPro = ({
             width: freeChildWidth ? "fit-content" : !fullContainerWidth && btn ? btn.offsetWidth : "115%"
           }
         }, paperSx),
-        className: `absolute select ${open ? "select--open" : "select--close"} z-50 rounded-none shadow-none ${intermediateChild ? "mt-[1px]" : "m-0"}`,
+        className: `absolute select ${open ? `${reverseAnimation ? "select--open-reverse" : "select--open-reverse"}` : `${reverseAnimation ? "select--close-reverse" : "select--close-reverse"}`} z-50 rounded-none shadow-none ${intermediateChild ? "mt-[1px]" : "m-0"}`,
         children: [
           intermediateChild ? intermediateChild : null,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material4.Box, { className: `flex flex-col py-3 px-4 gap-2 shadow-sm`, children: [
-            overButton ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              IconButton_default,
-              {
-                className: "bg-accent-silver p-1 self-end absolute",
-                onClick: handleClose,
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(close_default, {})
-              }
-            ) : null,
-            childTitle ? childTitle : null,
-            childrenWithHandleChange
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            import_material4.Box,
+            {
+              className: `flex flex-col py-3 px-4 gap-2 shadow-sm`,
+              sx: childContainerSx,
+              children: [
+                overButton ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  IconButton_default,
+                  {
+                    className: "bg-accent-silver p-1 self-end absolute",
+                    onClick: handleClose,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(close_default, {})
+                  }
+                ) : null,
+                childTitle ? childTitle : null,
+                childrenWithHandleChange
+              ]
+            }
+          )
         ]
       }
     ) : null

package/dist/index.mjs

@@ -249,7 +249,9 @@ var SelectPro = ({
   openUp,
   intermediateChild,
   accentBgColor,
-  paperSx
+  paperSx,
+  childContainerSx,
+  reverseAnimation = false
 }) => {
   const [btn, setAnchorEl] = useState2(null);
   const [open, setOpen] = useState2(false);
@@ -330,21 +332,28 @@ var SelectPro = ({
             width: freeChildWidth ? "fit-content" : !fullContainerWidth && btn ? btn.offsetWidth : "115%"
           }
         }, paperSx),
-        className: `absolute select ${open ? "select--open" : "select--close"} z-50 rounded-none shadow-none ${intermediateChild ? "mt-[1px]" : "m-0"}`,
+        className: `absolute select ${open ? `${reverseAnimation ? "select--open-reverse" : "select--open-reverse"}` : `${reverseAnimation ? "select--close-reverse" : "select--close-reverse"}`} z-50 rounded-none shadow-none ${intermediateChild ? "mt-[1px]" : "m-0"}`,
         children: [
           intermediateChild ? intermediateChild : null,
-          /* @__PURE__ */ jsxs3(Box, { className: `flex flex-col py-3 px-4 gap-2 shadow-sm`, children: [
-            overButton ? /* @__PURE__ */ jsx7(
-              IconButton_default,
-              {
-                className: "bg-accent-silver p-1 self-end absolute",
-                onClick: handleClose,
-                children: /* @__PURE__ */ jsx7(close_default, {})
-              }
-            ) : null,
-            childTitle ? childTitle : null,
-            childrenWithHandleChange
-          ] })
+          /* @__PURE__ */ jsxs3(
+            Box,
+            {
+              className: `flex flex-col py-3 px-4 gap-2 shadow-sm`,
+              sx: childContainerSx,
+              children: [
+                overButton ? /* @__PURE__ */ jsx7(
+                  IconButton_default,
+                  {
+                    className: "bg-accent-silver p-1 self-end absolute",
+                    onClick: handleClose,
+                    children: /* @__PURE__ */ jsx7(close_default, {})
+                  }
+                ) : null,
+                childTitle ? childTitle : null,
+                childrenWithHandleChange
+              ]
+            }
+          )
         ]
       }
     ) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayak-common-library",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/index.d.mts

@@ -1,255 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@mui/material/Button';
-import * as React from 'react';
-import React__default, { FC, PropsWithChildren, ReactElement, MouseEvent } from 'react';
-import { IconButtonProps } from '@mui/material/IconButton/IconButton';
-import { SelectProps } from '@mui/material/Select/Select';
-import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
-import { ChipProps, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToggleButtonProps } from '@mui/material';
-import { BadgeProps } from '@mui/material/Badge/Badge';
-import { AvatarProps } from '@mui/material/Avatar/Avatar';
-import { TypographyOwnProps } from '@mui/material/Typography';
-import { RadioProps } from '@mui/material/Radio';
-import { FormControlLabelProps } from '@mui/material/FormControlLabel';
-import { RadioGroupProps } from '@mui/material/RadioGroup';
-import { SwitchProps } from '@mui/material/Switch/Switch';
-import { SliderProps } from '@mui/material/Slider/Slider';
-import { MenuItemProps } from '@mui/material/MenuItem/MenuItem';
-import { InputProps } from '@mui/material/Input';
-import { PatternFormatProps } from 'react-number-format/types/types';
-import { UseControllerProps, FieldValues } from 'react-hook-form';
-export { default as MapIcon } from '@/icons/map-search.svg';
-import { ListProps } from '@mui/material/List/List';
-import { CheckboxProps } from '@mui/material/Checkbox';
-import { FormControlLabelProps as FormControlLabelProps$1 } from '@mui/material/FormControlLabel/FormControlLabel';
-
-declare function Greet(props: {
-    name: string;
-}): react_jsx_runtime.JSX.Element;
-
-interface CustomButtonProps extends ButtonProps, PropsWithChildren {
-    bolt?: boolean;
-    border?: boolean;
-    base?: boolean;
-    small?: boolean;
-    large?: boolean;
-    medium?: boolean;
-}
-declare const Button: FC<CustomButtonProps>;
-
-interface CustomIconButtonProps extends IconButtonProps, PropsWithChildren {
-}
-declare const IconButton: FC<CustomIconButtonProps>;
-
-declare const CustomSelect: FC<SelectProps & PropsWithChildren>;
-
-interface SelectProProps {
-    placeholder?: string;
-    childTitle?: ReactElement;
-    colorBorder?: boolean;
-    clickComponent?: ReactElement;
-    fullContainerWidth?: boolean;
-    overButton?: boolean;
-    small?: boolean;
-    fullWidth?: boolean;
-    freeChildWidth?: boolean;
-    openUp?: boolean;
-    intermediateChild?: ReactElement;
-    accentBgColor?: true;
-    paperSx?: SystemStyleObject;
-}
-declare const SelectPro: FC<PropsWithChildren & SelectProProps>;
-
-interface CustomChipProps {
-    view: "black" | "line" | "white" | "silver";
-}
-declare const Chip: FC<ChipProps & CustomChipProps>;
-
-declare const CustomBadge: (props: BadgeProps) => react_jsx_runtime.JSX.Element;
-
-declare const CustomAvatar: (props: AvatarProps) => react_jsx_runtime.JSX.Element;
-
-declare const Text: FC<TypographyOwnProps & PropsWithChildren>;
-
-interface CustomRadioProps {
-    labelProps?: FormControlLabelProps;
-    radioProps?: RadioProps;
-    label?: string;
-    value?: string;
-}
-declare const CustomRadio: React__default.FC<CustomRadioProps>;
-
-declare const CustomRadioGroup: React__default.FC<RadioGroupProps & PropsWithChildren>;
-
-interface CustomSwitchProps {
-    beforeText?: string;
-    afterText?: string;
-}
-declare const CustomSwitch: FC<CustomSwitchProps & SwitchProps>;
-
-declare const CustomSlider: FC<SliderProps>;
-
-declare const CustomMenuItem: FC<MenuItemProps & PropsWithChildren>;
-
-interface CustomInputProps {
-    type?: "number" | "string";
-    adornmentText?: string;
-    big?: boolean;
-}
-declare const CustomInput: FC<CustomInputProps & InputProps>;
-
-interface PhoneInputProps {
-    onChange: (event: {
-        target: {
-            name: string;
-            value: string;
-        };
-    }) => void;
-    name: string;
-}
-declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<PatternFormatProps>>;
-
-interface FromToInputProps {
-    label?: string;
-}
-declare const FromToInput: FC<FromToInputProps>;
-
-interface SearchInputProps {
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    collapse?: boolean;
-}
-declare const SearchInput: <T extends object>(props: SearchInputProps & UseControllerProps<T>) => react_jsx_runtime.JSX.Element;
-
-declare const Providers: FC<PropsWithChildren>;
-
-interface AppBarProps {
-    links: {
-        path: string;
-        title: string;
-    }[];
-}
-declare const AppBar: FC<AppBarProps>;
-
-interface ImageContainerProps {
-    src: any;
-    alt: string;
-    contentful?: boolean;
-    priority?: boolean;
-    loading?: "lazy" | "eager" | undefined;
-    width?: string;
-    height?: string;
-    objectFit?: string;
-    classesWrapper?: string;
-    classesImg?: string;
-}
-declare const ImageContainer: FC<ImageContainerProps>;
-
-interface CategoryCardProps {
-    image_url?: string;
-    title: string;
-    text: string;
-    link: string;
-}
-declare const CategoryCard: FC<CategoryCardProps>;
-
-interface ArticleCardProps {
-    imageUrl: string;
-    title: string;
-    text: string;
-    classes?: string;
-    href: string;
-}
-declare const ArticleCard: FC<ArticleCardProps>;
-
-interface JobCardProps {
-}
-declare const JobCard: FC<JobCardProps>;
-
-declare const RealtorCard: () => react_jsx_runtime.JSX.Element;
-
-declare const RealtyCard: FC;
-
-interface TeamPersonCardProps {
-    image_url?: string;
-    name: string;
-    position: string;
-    text: string;
-}
-declare const TeamPersonCard: FC<TeamPersonCardProps>;
-
-interface AutocompleteProps {
-    values: string[];
-}
-declare const Autocomplete: FC<AutocompleteProps & UseControllerProps<any>>;
-
-interface BigNumberProps {
-    number?: number;
-    text?: string;
-}
-declare const BigNumber: FC<BigNumberProps>;
-
-interface TextBlockProps {
-    classes?: string;
-    title: string;
-    text: string;
-}
-declare const TextBlock: FC<TextBlockProps>;
-
-type TitlePosition = "center" | "left";
-
-interface TitleBlockProps {
-    title: string;
-    titlePosition?: TitlePosition;
-    classes?: string;
-}
-declare const TitleBlock: FC<TitleBlockProps>;
-
-declare const List: FC<ListProps>;
-
-interface ListItemProps {
-    icon?: ReactElement;
-    title: string;
-    bold?: boolean;
-    onClick?: (value: string) => void;
-    value?: string;
-}
-declare const ListItem: FC<ListItemProps>;
-
-type Values = {
-    value: string | number[];
-    title: string;
-}[];
-
-interface ToggleButtonsMultipleProps extends ToggleButtonGroupProps$1 {
-    values: Values;
-    textView?: boolean;
-    collapseOnClick?: boolean;
-    collapseParent?: () => void;
-    label?: string;
-    flexDirection?: "row" | "col";
-    fixWidth?: boolean;
-}
-declare const ToggleButtonsWithLabel: <T extends FieldValues>(props: ToggleButtonsMultipleProps & UseControllerProps<T>) => react_jsx_runtime.JSX.Element;
-
-declare const ToggleButton: FC<ToggleButtonProps & {
-    textView?: boolean;
-}>;
-
-interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
-    textView?: boolean;
-    flexDirection?: "row" | "col";
-    onChange: (event: MouseEvent<HTMLElement>, value: any) => void;
-    value: any;
-}
-declare const ToggleButtonGroup: FC<ToggleButtonGroupProps & PropsWithChildren>;
-
-interface CustomCheckboxProps {
-    labelProps?: FormControlLabelProps$1;
-    checkboxProps?: CheckboxProps;
-    className?: string;
-    label?: string;
-    toggleView?: boolean;
-}
-declare const CustomCheckbox: FC<CustomCheckboxProps>;
-
-export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomCheckbox as Checkbox, Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, SearchInput, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButton, ToggleButtonGroup, ToggleButtonsWithLabel };

package/dist/index.d.ts

@@ -1,255 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@mui/material/Button';
-import * as React from 'react';
-import React__default, { FC, PropsWithChildren, ReactElement, MouseEvent } from 'react';
-import { IconButtonProps } from '@mui/material/IconButton/IconButton';
-import { SelectProps } from '@mui/material/Select/Select';
-import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
-import { ChipProps, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToggleButtonProps } from '@mui/material';
-import { BadgeProps } from '@mui/material/Badge/Badge';
-import { AvatarProps } from '@mui/material/Avatar/Avatar';
-import { TypographyOwnProps } from '@mui/material/Typography';
-import { RadioProps } from '@mui/material/Radio';
-import { FormControlLabelProps } from '@mui/material/FormControlLabel';
-import { RadioGroupProps } from '@mui/material/RadioGroup';
-import { SwitchProps } from '@mui/material/Switch/Switch';
-import { SliderProps } from '@mui/material/Slider/Slider';
-import { MenuItemProps } from '@mui/material/MenuItem/MenuItem';
-import { InputProps } from '@mui/material/Input';
-import { PatternFormatProps } from 'react-number-format/types/types';
-import { UseControllerProps, FieldValues } from 'react-hook-form';
-export { default as MapIcon } from '@/icons/map-search.svg';
-import { ListProps } from '@mui/material/List/List';
-import { CheckboxProps } from '@mui/material/Checkbox';
-import { FormControlLabelProps as FormControlLabelProps$1 } from '@mui/material/FormControlLabel/FormControlLabel';
-
-declare function Greet(props: {
-    name: string;
-}): react_jsx_runtime.JSX.Element;
-
-interface CustomButtonProps extends ButtonProps, PropsWithChildren {
-    bolt?: boolean;
-    border?: boolean;
-    base?: boolean;
-    small?: boolean;
-    large?: boolean;
-    medium?: boolean;
-}
-declare const Button: FC<CustomButtonProps>;
-
-interface CustomIconButtonProps extends IconButtonProps, PropsWithChildren {
-}
-declare const IconButton: FC<CustomIconButtonProps>;
-
-declare const CustomSelect: FC<SelectProps & PropsWithChildren>;
-
-interface SelectProProps {
-    placeholder?: string;
-    childTitle?: ReactElement;
-    colorBorder?: boolean;
-    clickComponent?: ReactElement;
-    fullContainerWidth?: boolean;
-    overButton?: boolean;
-    small?: boolean;
-    fullWidth?: boolean;
-    freeChildWidth?: boolean;
-    openUp?: boolean;
-    intermediateChild?: ReactElement;
-    accentBgColor?: true;
-    paperSx?: SystemStyleObject;
-}
-declare const SelectPro: FC<PropsWithChildren & SelectProProps>;
-
-interface CustomChipProps {
-    view: "black" | "line" | "white" | "silver";
-}
-declare const Chip: FC<ChipProps & CustomChipProps>;
-
-declare const CustomBadge: (props: BadgeProps) => react_jsx_runtime.JSX.Element;
-
-declare const CustomAvatar: (props: AvatarProps) => react_jsx_runtime.JSX.Element;
-
-declare const Text: FC<TypographyOwnProps & PropsWithChildren>;
-
-interface CustomRadioProps {
-    labelProps?: FormControlLabelProps;
-    radioProps?: RadioProps;
-    label?: string;
-    value?: string;
-}
-declare const CustomRadio: React__default.FC<CustomRadioProps>;
-
-declare const CustomRadioGroup: React__default.FC<RadioGroupProps & PropsWithChildren>;
-
-interface CustomSwitchProps {
-    beforeText?: string;
-    afterText?: string;
-}
-declare const CustomSwitch: FC<CustomSwitchProps & SwitchProps>;
-
-declare const CustomSlider: FC<SliderProps>;
-
-declare const CustomMenuItem: FC<MenuItemProps & PropsWithChildren>;
-
-interface CustomInputProps {
-    type?: "number" | "string";
-    adornmentText?: string;
-    big?: boolean;
-}
-declare const CustomInput: FC<CustomInputProps & InputProps>;
-
-interface PhoneInputProps {
-    onChange: (event: {
-        target: {
-            name: string;
-            value: string;
-        };
-    }) => void;
-    name: string;
-}
-declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<PatternFormatProps>>;
-
-interface FromToInputProps {
-    label?: string;
-}
-declare const FromToInput: FC<FromToInputProps>;
-
-interface SearchInputProps {
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    collapse?: boolean;
-}
-declare const SearchInput: <T extends object>(props: SearchInputProps & UseControllerProps<T>) => react_jsx_runtime.JSX.Element;
-
-declare const Providers: FC<PropsWithChildren>;
-
-interface AppBarProps {
-    links: {
-        path: string;
-        title: string;
-    }[];
-}
-declare const AppBar: FC<AppBarProps>;
-
-interface ImageContainerProps {
-    src: any;
-    alt: string;
-    contentful?: boolean;
-    priority?: boolean;
-    loading?: "lazy" | "eager" | undefined;
-    width?: string;
-    height?: string;
-    objectFit?: string;
-    classesWrapper?: string;
-    classesImg?: string;
-}
-declare const ImageContainer: FC<ImageContainerProps>;
-
-interface CategoryCardProps {
-    image_url?: string;
-    title: string;
-    text: string;
-    link: string;
-}
-declare const CategoryCard: FC<CategoryCardProps>;
-
-interface ArticleCardProps {
-    imageUrl: string;
-    title: string;
-    text: string;
-    classes?: string;
-    href: string;
-}
-declare const ArticleCard: FC<ArticleCardProps>;
-
-interface JobCardProps {
-}
-declare const JobCard: FC<JobCardProps>;
-
-declare const RealtorCard: () => react_jsx_runtime.JSX.Element;
-
-declare const RealtyCard: FC;
-
-interface TeamPersonCardProps {
-    image_url?: string;
-    name: string;
-    position: string;
-    text: string;
-}
-declare const TeamPersonCard: FC<TeamPersonCardProps>;
-
-interface AutocompleteProps {
-    values: string[];
-}
-declare const Autocomplete: FC<AutocompleteProps & UseControllerProps<any>>;
-
-interface BigNumberProps {
-    number?: number;
-    text?: string;
-}
-declare const BigNumber: FC<BigNumberProps>;
-
-interface TextBlockProps {
-    classes?: string;
-    title: string;
-    text: string;
-}
-declare const TextBlock: FC<TextBlockProps>;
-
-type TitlePosition = "center" | "left";
-
-interface TitleBlockProps {
-    title: string;
-    titlePosition?: TitlePosition;
-    classes?: string;
-}
-declare const TitleBlock: FC<TitleBlockProps>;
-
-declare const List: FC<ListProps>;
-
-interface ListItemProps {
-    icon?: ReactElement;
-    title: string;
-    bold?: boolean;
-    onClick?: (value: string) => void;
-    value?: string;
-}
-declare const ListItem: FC<ListItemProps>;
-
-type Values = {
-    value: string | number[];
-    title: string;
-}[];
-
-interface ToggleButtonsMultipleProps extends ToggleButtonGroupProps$1 {
-    values: Values;
-    textView?: boolean;
-    collapseOnClick?: boolean;
-    collapseParent?: () => void;
-    label?: string;
-    flexDirection?: "row" | "col";
-    fixWidth?: boolean;
-}
-declare const ToggleButtonsWithLabel: <T extends FieldValues>(props: ToggleButtonsMultipleProps & UseControllerProps<T>) => react_jsx_runtime.JSX.Element;
-
-declare const ToggleButton: FC<ToggleButtonProps & {
-    textView?: boolean;
-}>;
-
-interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
-    textView?: boolean;
-    flexDirection?: "row" | "col";
-    onChange: (event: MouseEvent<HTMLElement>, value: any) => void;
-    value: any;
-}
-declare const ToggleButtonGroup: FC<ToggleButtonGroupProps & PropsWithChildren>;
-
-interface CustomCheckboxProps {
-    labelProps?: FormControlLabelProps$1;
-    checkboxProps?: CheckboxProps;
-    className?: string;
-    label?: string;
-    toggleView?: boolean;
-}
-declare const CustomCheckbox: FC<CustomCheckboxProps>;
-
-export { AppBar, ArticleCard, Autocomplete, CustomAvatar as Avatar, CustomBadge as Badge, BigNumber, Button, CategoryCard, CustomCheckbox as Checkbox, Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, List, ListItem, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, SearchInput, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text, TextBlock, TitleBlock, ToggleButton, ToggleButtonGroup, ToggleButtonsWithLabel };