@yr3/ui 1.0.7 → 1.0.9

package/dist/index.d.cts

@@ -1012,11 +1012,12 @@ type BoxProps = {
 declare const Box: React$1.FC<BoxProps>;
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'title' | 'subtitle' | 'body1' | 'body2' | 'caption' | 'button' | 'helper' | 'inherit' | 'code';
+type TextWeight = 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'black' | 'thin';
 type TextProps = {
     children?: React$1.ReactNode;
     variant?: TextVariant;
     color?: keyof Theme['colors'];
-    weight?: 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'black' | 'thin';
+    weight?: TextWeight;
     as?: keyof React$1.JSX.IntrinsicElements;
     gutters?: number[];
     ui?: UIProps;
@@ -1025,17 +1026,16 @@ type TextProps = {
 };
 declare const Text: React$1.FC<TextProps>;
 
+type ButtonVariant = 'outlined' | 'filled' | 'text';
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: 'outlined' | 'filled' | 'text';
+    variant?: ButtonVariant;
     color?: keyof Theme['colors'];
     animated?: boolean;
     gradientBorder?: boolean;
     ui?: UIProps;
     size?: 'auto' | 'full';
     propsComponent?: {
-        text?: {
-            variant: keyof TextProps['variant'];
-        };
+        text?: Omit<TextProps, 'children'>;
     };
 };
 declare const Button: React$1.FC<ButtonProps>;
@@ -1594,6 +1594,10 @@ type RadioProps = {
 };
 declare const Radio: React$1.FC<RadioProps>;
 
+type SelectOptionsProps = {
+    value: string;
+    label: string;
+};
 type SelectChangeEvent = {
     event: React$1.MouseEvent<HTMLDivElement, MouseEvent>;
     target: {
@@ -1611,10 +1615,9 @@ type SelectProps = {
     label?: string;
     name?: string;
     disabled?: boolean;
-    options: {
-        value: string;
-        label: string;
-    }[];
+    options: SelectOptionsProps[];
+    variant?: ControlProps['variant'];
+    color?: keyof Theme['colors'];
     propsComponent?: {
         control?: Omit<ControlProps, 'children'>;
         wrapper?: {
@@ -1629,6 +1632,11 @@ type SelectProps = {
         menu?: {
             ui?: UIProps;
             style?: React$1.CSSProperties;
+            options?: {
+                text?: Omit<TextProps, 'children'>;
+                ui?: UIProps;
+                style?: React$1.CSSProperties;
+            };
         };
     };
     value?: string;
@@ -1664,6 +1672,13 @@ type SwitchProps = {
     label?: string;
     color?: keyof Theme['colors'];
     size?: 'sm' | 'md' | 'lg';
+    placement?: 'start' | 'end';
+    propsComponent?: {
+        label: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+    };
 };
 declare const Switch: React$1.FC<SwitchProps>;
 
@@ -1686,4 +1701,4 @@ declare const usePlaces: ({ input, language, apiKey, provider }: UsePlacesProps)
     selectPlace: (id: string) => Promise<_yr3_autocomplete_places.Place>;
 };
 
-export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, Text, type TextProps, type TextVariant, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };
+export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };

package/dist/index.d.ts

@@ -1012,11 +1012,12 @@ type BoxProps = {
 declare const Box: React$1.FC<BoxProps>;
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'title' | 'subtitle' | 'body1' | 'body2' | 'caption' | 'button' | 'helper' | 'inherit' | 'code';
+type TextWeight = 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'black' | 'thin';
 type TextProps = {
     children?: React$1.ReactNode;
     variant?: TextVariant;
     color?: keyof Theme['colors'];
-    weight?: 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'black' | 'thin';
+    weight?: TextWeight;
     as?: keyof React$1.JSX.IntrinsicElements;
     gutters?: number[];
     ui?: UIProps;
@@ -1025,17 +1026,16 @@ type TextProps = {
 };
 declare const Text: React$1.FC<TextProps>;
 
+type ButtonVariant = 'outlined' | 'filled' | 'text';
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: 'outlined' | 'filled' | 'text';
+    variant?: ButtonVariant;
     color?: keyof Theme['colors'];
     animated?: boolean;
     gradientBorder?: boolean;
     ui?: UIProps;
     size?: 'auto' | 'full';
     propsComponent?: {
-        text?: {
-            variant: keyof TextProps['variant'];
-        };
+        text?: Omit<TextProps, 'children'>;
     };
 };
 declare const Button: React$1.FC<ButtonProps>;
@@ -1594,6 +1594,10 @@ type RadioProps = {
 };
 declare const Radio: React$1.FC<RadioProps>;
 
+type SelectOptionsProps = {
+    value: string;
+    label: string;
+};
 type SelectChangeEvent = {
     event: React$1.MouseEvent<HTMLDivElement, MouseEvent>;
     target: {
@@ -1611,10 +1615,9 @@ type SelectProps = {
     label?: string;
     name?: string;
     disabled?: boolean;
-    options: {
-        value: string;
-        label: string;
-    }[];
+    options: SelectOptionsProps[];
+    variant?: ControlProps['variant'];
+    color?: keyof Theme['colors'];
     propsComponent?: {
         control?: Omit<ControlProps, 'children'>;
         wrapper?: {
@@ -1629,6 +1632,11 @@ type SelectProps = {
         menu?: {
             ui?: UIProps;
             style?: React$1.CSSProperties;
+            options?: {
+                text?: Omit<TextProps, 'children'>;
+                ui?: UIProps;
+                style?: React$1.CSSProperties;
+            };
         };
     };
     value?: string;
@@ -1664,6 +1672,13 @@ type SwitchProps = {
     label?: string;
     color?: keyof Theme['colors'];
     size?: 'sm' | 'md' | 'lg';
+    placement?: 'start' | 'end';
+    propsComponent?: {
+        label: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+    };
 };
 declare const Switch: React$1.FC<SwitchProps>;
 
@@ -1686,4 +1701,4 @@ declare const usePlaces: ({ input, language, apiKey, provider }: UsePlacesProps)
     selectPlace: (id: string) => Promise<_yr3_autocomplete_places.Place>;
 };
 
-export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, Text, type TextProps, type TextVariant, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };
+export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };

package/dist/index.js

@@ -606,6 +606,42 @@ var Box = ({
   );
 };
 
+// src/components/Text/text.variants.ts
+var textVariants = createVariants({
+  base: "yr3Text",
+  variants: {
+    variant: {
+      h1: "yr3Text--h1",
+      h2: "yr3Text--h2",
+      h3: "yr3Text--h3",
+      h4: "yr3Text--h4",
+      h5: "yr3Text--h5",
+      h6: "yr3Text--h6",
+      title: "yr3Text--title",
+      subtitle: "yr3Text--subtitle",
+      body1: "yr3Text--body1",
+      body2: "yr3Text--body2",
+      helper: "yr3Text--helper",
+      inherit: "yr3Text--inherit",
+      caption: "yr3Text--caption",
+      button: "yr3Text--button",
+      code: "yr3Text--code"
+    },
+    color: {
+      primary: "yr3Text--color-primary",
+      secondary: "yr3Text--color-secondary",
+      success: "yr3Text--color-success",
+      text: "yr3Text--color-text",
+      disabled: "yr3Text--color-disabled",
+      warning: "yr3Text--color-warning",
+      error: "yr3Text--color-error",
+      info: "yr3Text--color-info",
+      background: "yr3Text--color-background"
+    }
+  }
+});
+var text_variants_default = textVariants;
+
 // src/components/Text/Text.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Text = ({
@@ -620,16 +656,11 @@ var Text = ({
   onClick
 }) => {
   const styleUI = uiStyle({ ...ui, marginTop: gutters[0] || 0, marginBottom: gutters[1] || 0 });
+  const classes = text_variants_default({ variant, color, weight });
   return /* @__PURE__ */ jsx5(
     Component,
     {
-      className: `
-        yr3Text 
-        yr3Text--${variant}
-        yr3Text--${color}
-        ${weight ? `yr3Text--${weight}` : ""}
-
-      `,
+      className: classes,
       style: composeStyles(styleUI, style),
       onClick,
       "data-testid": "yr3Text",
@@ -652,7 +683,11 @@ var buttonVariant = createVariants({
       secondary: "yr3Button--color-secondary",
       success: "yr3Button--color-success",
       text: "yr3Button--color-text",
-      disabled: "yr3Button--color-disabled"
+      disabled: "yr3Button--color-disabled",
+      info: "yr3Button--color-info",
+      error: "yr3Button--color-error",
+      background: "yr3Button--color-background",
+      warning: "yr3Button--color-warning"
     },
     size: {
       auto: "yr3Button--size-auto",
@@ -682,7 +717,7 @@ var Button = ({ children, color = "text", variant = "text", animated, disabled,
       "data-testid": "yr3Button",
       ...props,
       style: composeStyles(ui, style),
-      children: /* @__PURE__ */ jsx6(Text, { variant: propsComponent?.text?.variant || "button", children })
+      children: /* @__PURE__ */ jsx6(Text, { variant: propsComponent?.text?.variant || "button", ...propsComponent?.text, children })
     }
   );
 };
@@ -2160,67 +2195,140 @@ var Radio = ({
 
 // src/components/Select/Select.tsx
 import * as React18 from "react";
+
+// src/components/Select/select.variants.ts
+var selectVariants = createVariants({
+  base: "yr3Select",
+  variants: {
+    wrapper: {
+      true: "yr3Select--wrapper"
+    },
+    variant: {
+      filled: "yr3Select--filled",
+      outlined: "yr3Select--outlined",
+      base: "yr3Select--base",
+      lined: "yr3Select--lined"
+    },
+    color: {
+      primary: "yr3Select--color-primary",
+      secondary: "yr3Select--color-secondary",
+      success: "yr3Select--color-success",
+      text: "yr3Select--color-text",
+      disabled: "yr3Select--color-disabled",
+      background: "yr3Select--color-background",
+      error: "yr3Select--color-error",
+      warning: "yr3Select--color-warning",
+      info: "yr3Select--color-info"
+    },
+    animated: {
+      true: "yr3Select--animated"
+    }
+  }
+});
+var select_variants_default = selectVariants;
+
+// src/components/Select/Select.tsx
 import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
-var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
+var initiaPropsComponent3 = {
+  control: {
+    variant: "outlined",
+    color: "primary",
+    ui: {},
+    style: {}
+  },
+  label: {
+    display: true,
+    ui: {},
+    style: {}
+  },
+  wrapper: {
+    ui: {},
+    style: {}
+  },
+  menu: {
+    ui: {},
+    style: {},
+    options: {
+      text: {
+        variant: "caption",
+        color: "primary"
+      },
+      ui: {},
+      style: {}
+    }
+  },
+  icon: {
+    style: {
+      width: 24,
+      height: 24,
+      stroke: "currentColor"
+    },
+    component: void 0
+  }
+};
+var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent = initiaPropsComponent3 }) => {
   const [open, setOpen] = React18.useState(false);
   const [valueState, setValueState] = React18.useState(value || defaultValue || null);
   const ref = React18.useRef(null);
   useClickAway(ref, () => setOpen(false));
-  return /* @__PURE__ */ jsxs14(Control, { ...propsComponent?.control, children: [
+  const classes = select_variants_default({ wrapper: true });
+  return /* @__PURE__ */ jsxs14("div", { className: classes, ref, children: [
     /* @__PURE__ */ jsx35(
-      Label,
+      Input,
       {
-        ...propsComponent?.label,
-        text: label || "seleziona"
+        label,
+        variant: "base",
+        disabled: true,
+        value: valueState,
+        propsComponent: {
+          control: propsComponent?.control,
+          label: propsComponent?.label
+        }
       }
     ),
-    /* @__PURE__ */ jsxs14("div", { className: "yr3Select-wrapper", ref, children: [
-      /* @__PURE__ */ jsxs14("div", { className: `yr3Select ${open ? "yr3Select--open" : ""}`, "data-testid": "yr3Select-wrapper", style: composeStyles(propsComponent?.wrapper?.ui, propsComponent?.wrapper?.style), children: [
-        /* @__PURE__ */ jsx35("div", { className: "yr3Select--control", children: valueState }),
-        /* @__PURE__ */ jsx35("div", { className: "yr3Select--icon", onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ jsx35(
-          IconDown,
+    /* @__PURE__ */ jsx35("div", { className: `yr3Select--icon ${open ? "yr3Select--icon--open" : ""}`, onClick: () => setOpen((prev) => !prev), "data-testid": "yr3Select-icon", children: propsComponent?.icon?.component ? propsComponent.icon.component : /* @__PURE__ */ jsx35(
+      IconDown,
+      {
+        width: propsComponent?.icon?.style?.width,
+        height: propsComponent?.icon?.style?.height,
+        stroke: propsComponent?.icon?.style?.stroke || "currentColor",
+        style: propsComponent?.icon?.style
+      }
+    ) }),
+    open && /* @__PURE__ */ jsx35(
+      "div",
+      {
+        className: "yr3Select--menu",
+        style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
+        "data-testid": "yr3Select-menu",
+        children: options.map((opt) => /* @__PURE__ */ jsx35(
+          "div",
           {
-            width: propsComponent?.icon?.style?.width || 26,
-            height: propsComponent?.icon?.style?.height || 26,
-            stroke: propsComponent?.icon?.style?.stroke || "currentColor",
-            style: propsComponent?.icon?.style
-          }
-        ) })
-      ] }),
-      open && /* @__PURE__ */ jsx35(
-        "div",
-        {
-          className: "yr3Select--menu",
-          style: composeStyles(propsComponent?.menu?.ui, propsComponent?.menu?.style),
-          "data-testid": "yr3Select-menu",
-          children: options.map((opt) => /* @__PURE__ */ jsx35(
-            "div",
-            {
-              className: "yr3Select--option",
-              onClick: (e) => {
-                e.stopPropagation();
-                setValueState(opt.value);
-                setOpen(false);
-                const event = {
-                  event: e,
-                  target: {
-                    name,
-                    value: opt.value
-                  },
-                  currentTarget: {
-                    name,
-                    value: opt.value
-                  }
-                };
-                onChange?.(event, opt.value);
-              },
-              children: opt.label
+            className: "yr3Select--option",
+            onClick: (e) => {
+              e.stopPropagation();
+              setValueState(opt.value);
+              setOpen(false);
+              const event = {
+                event: e,
+                target: {
+                  name,
+                  value: opt.value
+                },
+                currentTarget: {
+                  name,
+                  value: opt.value
+                }
+              };
+              onChange?.(event, opt.value);
             },
-            opt.value
-          ))
-        }
-      )
-    ] })
+            style: composeStyles(propsComponent?.menu?.options?.ui, propsComponent?.menu?.options?.style),
+            children: /* @__PURE__ */ jsx35(Text, { as: "span", variant: "caption", color: propsComponent?.menu?.options?.text?.color || "primary", ...propsComponent?.menu?.options?.text, children: opt.label })
+          },
+          opt.value
+        ))
+      }
+    )
   ] });
 };
 
@@ -2294,6 +2402,10 @@ var switchVariants = createVariants({
     },
     checked: {
       true: "yr3Switch--checked"
+    },
+    placement: {
+      start: "yr3Switch--label-start",
+      end: "yr3Switch--label-end"
     }
   }
 });
@@ -2307,10 +2419,12 @@ var Switch = ({
   disabled,
   color = "primary",
   size = "sm",
-  label
+  label,
+  placement = "end",
+  propsComponent
 }) => {
   const [internal, setInternal] = React20.useState(defaultChecked || false);
-  const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal });
+  const classname = switchVariants({ colors: color, size, disabled: !!disabled, checked: checked ?? internal, placement });
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : internal;
   const handleChange = (e) => {
@@ -2333,7 +2447,15 @@ var Switch = ({
           }
         ),
         /* @__PURE__ */ jsx37("span", { className: "yr3Switch--track", children: /* @__PURE__ */ jsx37("span", { className: "yr3Switch--thumb" }) }),
-        /* @__PURE__ */ jsx37("span", { className: "yr3Switch--label", "data-testid": "yr3Switch-label", children: label })
+        /* @__PURE__ */ jsx37(
+          "span",
+          {
+            className: "yr3Switch--label",
+            "data-testid": "yr3Switch-label",
+            style: composeStyles(propsComponent?.label.ui, propsComponent?.label?.style),
+            children: label
+          }
+        )
       ]
     }
   );