@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTStatusMessage/stories/storiesConstants.js

@@ -1 +1,295 @@
-import{COLOR_THEMES}from"../constants";export const COMMON_ARG_TYPES={children:{control:!1,description:"Contenido adicional renderizado dentro del componente.",table:{defaultValue:{summary:"undefined"},type:{summary:"node"}}},classes:{control:!1,description:"Clases personalizadas para sobrescribir el tema del componente.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},colorTheme:{control:"select",description:"Tema de color del componente.",options:Object.values(COLOR_THEMES),table:{defaultValue:{summary:COLOR_THEMES.DEFAULT},type:{summary:"string"}}},description:{control:"text",description:"Texto descriptivo secundario. Soporta markdown.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},descriptionProps:{control:!1,description:"Props adicionales para el componente UTLabel de descripción.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},HeaderComponent:{control:!1,description:"Componente personalizado para reemplazar el header (ícono) por defecto.",table:{defaultValue:{summary:"undefined"},type:{summary:"elementType"}}},helpText:{control:"text",description:"Texto de ayuda adicional mostrado debajo de la descripción.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},helpTextProps:{control:!1,description:"Props adicionales para el componente UTLabel de helpText.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},icon:{control:"text",description:"Nombre del ícono Tabler a mostrar en el header.",table:{defaultValue:{summary:"IconInfoCircle"},type:{summary:"string"}}},iconProps:{control:!1,description:"Props adicionales para el componente UTIcon.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},iconSize:{control:"number",description:"Tamaño del ícono en píxeles. Mapea a `iconProps.size`.",table:{defaultValue:{summary:"undefined"},type:{summary:"number"}}},loading:{control:"boolean",description:"Si es `true`, muestra un spinner en lugar del contenido.",table:{defaultValue:{summary:"undefined"},type:{summary:"boolean"}}},primaryAction:{control:!1,description:"Callback ejecutado al hacer clic en el botón primario.",table:{defaultValue:{summary:"undefined"},type:{summary:"function"}}},primaryActionProps:{control:"object",description:"Props adicionales para el UTButton de acción primaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},primaryActionText:{control:"text",description:"Texto del botón de acción primaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},secondaryAction:{control:!1,description:"Callback ejecutado al hacer clic en el botón secundario.",table:{defaultValue:{summary:"undefined"},type:{summary:"function"}}},secondaryActionProps:{control:"object",description:"Props adicionales para el UTButton de acción secundaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},secondaryActionText:{control:"text",description:"Texto del botón de acción secundaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},showHeader:{control:"boolean",description:"Si es `true`, muestra el header con el ícono o el HeaderComponent.",table:{defaultValue:{summary:!0},type:{summary:"boolean"}}},title:{control:"text",description:"Título principal del mensaje de estado.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},titleProps:{control:!1,description:"Props adicionales para el componente UTLabel del título.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},showPrimaryAction:{control:"boolean",description:"Activa o desactiva el botón de acción primaria en el Playground. Mapea a `primaryAction`.",table:{defaultValue:{summary:!0},type:{summary:"boolean"}}},showSecondaryAction:{control:"boolean",description:"Activa o desactiva el botón de acción secundaria en el Playground. Mapea a `secondaryAction`.",table:{defaultValue:{summary:!0},type:{summary:"boolean"}}}};export const COMMON_ARGS={colorTheme:COLOR_THEMES.DEFAULT,loading:!1,showHeader:!0};export const COMMON_PARAMETERS={controls:{exclude:["classes","descriptionProps","HeaderComponent","helpTextProps","iconProps","primaryAction","secondaryAction","titleProps"]},docs:{description:{component:"Componente de mensaje de estado que muestra un ícono, título, descripción y acciones opcionales. Soporta múltiples temas de color y un estado de carga."}}};
+import { COLOR_THEMES } from '../constants';
+export const COMMON_ARG_TYPES = {
+  children: {
+    control: false,
+    description: 'Contenido adicional renderizado dentro del componente.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'node'
+      }
+    }
+  },
+  classes: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del componente.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tema de color del componente.',
+    options: Object.values(COLOR_THEMES),
+    table: {
+      defaultValue: {
+        summary: COLOR_THEMES.DEFAULT
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  description: {
+    control: 'text',
+    description: 'Texto descriptivo secundario. Soporta markdown.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  descriptionProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel de descripción.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  HeaderComponent: {
+    control: false,
+    description: 'Componente personalizado para reemplazar el header (ícono) por defecto.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'elementType'
+      }
+    }
+  },
+  helpText: {
+    control: 'text',
+    description: 'Texto de ayuda adicional mostrado debajo de la descripción.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  helpTextProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel de helpText.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  icon: {
+    control: 'text',
+    description: 'Nombre del ícono Tabler a mostrar en el header.',
+    table: {
+      defaultValue: {
+        summary: 'IconInfoCircle'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  iconProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTIcon.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  iconSize: {
+    control: 'number',
+    description: 'Tamaño del ícono en píxeles. Mapea a `iconProps.size`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  loading: {
+    control: 'boolean',
+    description: 'Si es `true`, muestra un spinner en lugar del contenido.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  primaryAction: {
+    control: false,
+    description: 'Callback ejecutado al hacer clic en el botón primario.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  primaryActionProps: {
+    control: 'object',
+    description: 'Props adicionales para el UTButton de acción primaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  primaryActionText: {
+    control: 'text',
+    description: 'Texto del botón de acción primaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  secondaryAction: {
+    control: false,
+    description: 'Callback ejecutado al hacer clic en el botón secundario.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  secondaryActionProps: {
+    control: 'object',
+    description: 'Props adicionales para el UTButton de acción secundaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  secondaryActionText: {
+    control: 'text',
+    description: 'Texto del botón de acción secundaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  showHeader: {
+    control: 'boolean',
+    description: 'Si es `true`, muestra el header con el ícono o el HeaderComponent.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  title: {
+    control: 'text',
+    description: 'Título principal del mensaje de estado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  titleProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel del título.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  showPrimaryAction: {
+    control: 'boolean',
+    description: 'Activa o desactiva el botón de acción primaria en el Playground. Mapea a `primaryAction`.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  showSecondaryAction: {
+    control: 'boolean',
+    description: 'Activa o desactiva el botón de acción secundaria en el Playground. Mapea a `secondaryAction`.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};
+export const COMMON_ARGS = {
+  colorTheme: COLOR_THEMES.DEFAULT,
+  loading: false,
+  showHeader: true
+};
+export const COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['classes', 'descriptionProps', 'HeaderComponent', 'helpTextProps', 'iconProps', 'primaryAction', 'secondaryAction', 'titleProps']
+  },
+  docs: {
+    description: {
+      component: 'Componente de mensaje de estado que muestra un ícono, título, descripción y acciones opcionales. Soporta múltiples temas de color y un estado de carga.'
+    }
+  }
+};

package/dist/esm/components/UTStatusMessage/theme.js

@@ -1 +1,71 @@
-import{COLOR_THEMES}from"./constants";const getIconBackgroundColor=(colorTheme,theme)=>{var _theme$Palette,_theme$Palette2,_theme$Palette3,_theme$Palette4,_theme$Palette5,_theme$Palette6,_theme$Palette7,_theme$Palette8,_theme$Palette9,_theme$Palette0,_theme$Palette1,_theme$Palette10,_theme$Palette11;return{[COLOR_THEMES.ACCENT]:(null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette||null===(_theme$Palette=_theme$Palette.actions)||void 0===_theme$Palette?void 0:_theme$Palette.accent["01"])||(null===(_theme$Palette2=theme.Palette)||void 0===_theme$Palette2?void 0:_theme$Palette2.accent["01"]),[COLOR_THEMES.DEFAULT]:null===(_theme$Palette3=theme.Palette)||void 0===_theme$Palette3?void 0:_theme$Palette3.light["03"],[COLOR_THEMES.ERROR]:null===(_theme$Palette4=theme.Palette)||void 0===_theme$Palette4?void 0:_theme$Palette4.error["01"],[COLOR_THEMES.GRADIENT]:"light",[COLOR_THEMES.GRAY]:null===(_theme$Palette5=theme.Palette)||void 0===_theme$Palette5?void 0:_theme$Palette5.light["03"],[COLOR_THEMES.IDENTITY_1]:null===(_theme$Palette6=theme.Palette)||void 0===_theme$Palette6||null===(_theme$Palette6=_theme$Palette6.identitySolid)||void 0===_theme$Palette6?void 0:_theme$Palette6["01"],[COLOR_THEMES.IDENTITY_2]:null===(_theme$Palette7=theme.Palette)||void 0===_theme$Palette7||null===(_theme$Palette7=_theme$Palette7.identitySolid)||void 0===_theme$Palette7?void 0:_theme$Palette7["02"],[COLOR_THEMES.IDENTITY_3]:null===(_theme$Palette8=theme.Palette)||void 0===_theme$Palette8||null===(_theme$Palette8=_theme$Palette8.identitySolid)||void 0===_theme$Palette8?void 0:_theme$Palette8["03"],[COLOR_THEMES.IDENTITY_4]:null===(_theme$Palette9=theme.Palette)||void 0===_theme$Palette9||null===(_theme$Palette9=_theme$Palette9.identitySolid)||void 0===_theme$Palette9?void 0:_theme$Palette9["04"],[COLOR_THEMES.INFO]:null===(_theme$Palette0=theme.Palette)||void 0===_theme$Palette0?void 0:_theme$Palette0.information["02"],[COLOR_THEMES.NEGATIVE]:null===(_theme$Palette1=theme.Palette)||void 0===_theme$Palette1?void 0:_theme$Palette1.light["01"],[COLOR_THEMES.SUCCESS]:null===(_theme$Palette10=theme.Palette)||void 0===_theme$Palette10?void 0:_theme$Palette10.success["02"],[COLOR_THEMES.WARNING]:null===(_theme$Palette11=theme.Palette)||void 0===_theme$Palette11?void 0:_theme$Palette11.warning["02"]}[colorTheme]},getBannerBackgroundColor=(colorTheme,theme)=>{var _theme$Palette12,_theme$Palette13,_theme$Palette14,_theme$Palette15,_theme$Palette16,_theme$Palette17,_theme$Palette18,_theme$Palette19,_theme$Palette20,_theme$Palette21,_theme$Palette22,_theme$Palette23,_theme$Palette24;return{[COLOR_THEMES.ACCENT]:(null===(_theme$Palette12=theme.Palette)||void 0===_theme$Palette12||null===(_theme$Palette12=_theme$Palette12.actions)||void 0===_theme$Palette12?void 0:_theme$Palette12.accent["03"])||(null===(_theme$Palette13=theme.Palette)||void 0===_theme$Palette13?void 0:_theme$Palette13.accent["03"]),[COLOR_THEMES.DEFAULT]:null===(_theme$Palette14=theme.Palette)||void 0===_theme$Palette14?void 0:_theme$Palette14.gray["05"],[COLOR_THEMES.ERROR]:null===(_theme$Palette15=theme.Palette)||void 0===_theme$Palette15?void 0:_theme$Palette15.error["03"],[COLOR_THEMES.GRADIENT]:null,[COLOR_THEMES.GRAY]:null===(_theme$Palette16=theme.Palette)||void 0===_theme$Palette16?void 0:_theme$Palette16.gray["03"],[COLOR_THEMES.IDENTITY_1]:null===(_theme$Palette17=theme.Palette)||void 0===_theme$Palette17||null===(_theme$Palette17=_theme$Palette17.identitySolid)||void 0===_theme$Palette17?void 0:_theme$Palette17["01"],[COLOR_THEMES.IDENTITY_2]:null===(_theme$Palette18=theme.Palette)||void 0===_theme$Palette18||null===(_theme$Palette18=_theme$Palette18.identitySolid)||void 0===_theme$Palette18?void 0:_theme$Palette18["02"],[COLOR_THEMES.IDENTITY_3]:null===(_theme$Palette19=theme.Palette)||void 0===_theme$Palette19||null===(_theme$Palette19=_theme$Palette19.identitySolid)||void 0===_theme$Palette19?void 0:_theme$Palette19["03"],[COLOR_THEMES.IDENTITY_4]:null===(_theme$Palette20=theme.Palette)||void 0===_theme$Palette20||null===(_theme$Palette20=_theme$Palette20.identitySolid)||void 0===_theme$Palette20?void 0:_theme$Palette20["04"],[COLOR_THEMES.INFO]:null===(_theme$Palette21=theme.Palette)||void 0===_theme$Palette21?void 0:_theme$Palette21.information["03"],[COLOR_THEMES.NEGATIVE]:null===(_theme$Palette22=theme.Palette)||void 0===_theme$Palette22?void 0:_theme$Palette22.light["01"],[COLOR_THEMES.SUCCESS]:null===(_theme$Palette23=theme.Palette)||void 0===_theme$Palette23?void 0:_theme$Palette23.success["03"],[COLOR_THEMES.WARNING]:null===(_theme$Palette24=theme.Palette)||void 0===_theme$Palette24?void 0:_theme$Palette24.warning["03"]}[colorTheme]};export const retrieveStyle=_ref=>{var _theme$Palette25,_theme$Palette26;let{showBanner:showBanner=!0,theme:theme,colorTheme:colorTheme=COLOR_THEMES.DEFAULT,iconProps:iconProps={}}=_ref;const gradient="linear-gradient(45deg, ".concat(null===(_theme$Palette25=theme.Palette)||void 0===_theme$Palette25||null===(_theme$Palette25=_theme$Palette25.identityGradient)||void 0===_theme$Palette25?void 0:_theme$Palette25["01"]," 0%, ").concat(null===(_theme$Palette26=theme.Palette)||void 0===_theme$Palette26||null===(_theme$Palette26=_theme$Palette26.identityGradient)||void 0===_theme$Palette26?void 0:_theme$Palette26["02"]," 100%);"),{size:size=40}=iconProps;return{iconContainer:{alignItems:"center",background:colorTheme!==COLOR_THEMES.GRADIENT||showBanner?"":gradient,backgroundColor:getIconBackgroundColor(colorTheme,theme),borderRadius:100,display:"flex",height:1.85*size,justifyContent:"center",width:1.85*size},banner:{alignItems:"center",background:colorTheme===COLOR_THEMES.GRADIENT&&showBanner?gradient:"",backgroundColor:showBanner?getBannerBackgroundColor(colorTheme,theme):"transparent",display:"flex",justifyContent:"center",padding:"12px 0",width:"100%"}}};
+import { COLOR_THEMES } from './constants';
+const getIconBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette0, _theme$Palette1, _theme$Palette10, _theme$Palette11;
+  return {
+    [COLOR_THEMES.ACCENT]: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01']) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.accent['01']),
+    [COLOR_THEMES.DEFAULT]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['03'],
+    [COLOR_THEMES.ERROR]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.error['01'],
+    [COLOR_THEMES.GRADIENT]: 'light',
+    [COLOR_THEMES.GRAY]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03'],
+    [COLOR_THEMES.IDENTITY_1]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['01'],
+    [COLOR_THEMES.IDENTITY_2]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['02'],
+    [COLOR_THEMES.IDENTITY_3]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['03'],
+    [COLOR_THEMES.IDENTITY_4]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.identitySolid) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04'],
+    [COLOR_THEMES.INFO]: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.information['02'],
+    [COLOR_THEMES.NEGATIVE]: (_theme$Palette1 = theme.Palette) === null || _theme$Palette1 === void 0 ? void 0 : _theme$Palette1.light['01'],
+    [COLOR_THEMES.SUCCESS]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.success['02'],
+    [COLOR_THEMES.WARNING]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.warning['02']
+  }[colorTheme];
+};
+const getBannerBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette12, _theme$Palette13, _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24;
+  return {
+    [COLOR_THEMES.ACCENT]: ((_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 || (_theme$Palette12 = _theme$Palette12.actions) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.accent['03']) || ((_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.accent['03']),
+    [COLOR_THEMES.DEFAULT]: (_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.gray['05'],
+    [COLOR_THEMES.ERROR]: (_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.error['03'],
+    [COLOR_THEMES.GRADIENT]: null,
+    [COLOR_THEMES.GRAY]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['03'],
+    [COLOR_THEMES.IDENTITY_1]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 || (_theme$Palette17 = _theme$Palette17.identitySolid) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17['01'],
+    [COLOR_THEMES.IDENTITY_2]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 || (_theme$Palette18 = _theme$Palette18.identitySolid) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18['02'],
+    [COLOR_THEMES.IDENTITY_3]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['03'],
+    [COLOR_THEMES.IDENTITY_4]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['04'],
+    [COLOR_THEMES.INFO]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21.information['03'],
+    [COLOR_THEMES.NEGATIVE]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22.light['01'],
+    [COLOR_THEMES.SUCCESS]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.success['03'],
+    [COLOR_THEMES.WARNING]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.warning['03']
+  }[colorTheme];
+};
+export const retrieveStyle = _ref => {
+  var _theme$Palette25, _theme$Palette26;
+  let {
+    showBanner = true,
+    theme,
+    colorTheme = COLOR_THEMES.DEFAULT,
+    iconProps = {}
+  } = _ref;
+  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
+  const {
+    size = 40
+  } = iconProps;
+  return {
+    iconContainer: {
+      alignItems: 'center',
+      background: colorTheme === COLOR_THEMES.GRADIENT && !showBanner ? gradient : '',
+      backgroundColor: getIconBackgroundColor(colorTheme, theme),
+      borderRadius: 100,
+      display: 'flex',
+      height: size * 1.85,
+      justifyContent: 'center',
+      width: size * 1.85
+    },
+    banner: {
+      alignItems: 'center',
+      background: colorTheme === COLOR_THEMES.GRADIENT && showBanner ? gradient : '',
+      backgroundColor: showBanner ? getBannerBackgroundColor(colorTheme, theme) : 'transparent',
+      display: 'flex',
+      justifyContent: 'center',
+      padding: '12px 0',
+      width: '100%'
+    }
+  };
+};

package/dist/esm/components/UTStepper/README.md

@@ -0,0 +1,22 @@
+# UTStepper
+
+### Description
+
+This components displays a chain of rounded icons which can be gradually completed and represent progress through a series of steps
+
+## Props
+
+| Name         | Type             | Default | Description                                                                                                                                                                                                                                                                                   |
+| ------------ | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes      | object of string |         | Classes returned by UTStepper's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                                                                                  |
+| classNames   | object of string |         | Additional classes.                                                                                                                                                                                                                                                                           |
+| currentStage | number           |         | Represents which stage id will be active.                                                                                                                                                                                                                                                     |
+| stages       | stageType        |         | Defines the structure of the stepper. It is required for each stage inside the array given to have a property `id`, the indicator will be ordered by id. Aditionally each stage is able to add a property `label` which will display at the bottom of the corresponding indicator.            |
+| stepperSize  | 'S' \| 'L'       | 'S'     | Variant that defines whether to use small icons for the stepper indicator or large ones. It is required for the 'L' variant that every stage has a custom icon defined. If size is set to 'L' but there's at least one stage without a defined custom icon the size will be defaulted to 'S'. |
+| withPadding  | bool             |         | If false, the stepper indicator will occupy the full width of the container, rendering the first and last stage's label aligned towards the center.                                                                                                                                           |
+
+### Custom types
+
+| Type      | Shape                                                     |
+| --------- | --------------------------------------------------------- |
+| stageType | arrayOf( `{ id: number, label: string, Icon: element }` ) |

package/dist/esm/components/UTStepper/components/Connectors/index.js

@@ -1 +1,39 @@
-import React from"react";import{bool,func,number}from"prop-types";import{classesType}from"../../../../types/commonTypes";import styles from"./styles.module.scss";const Connectors=_ref=>{let{classes:classes,withPadding:withPadding,isCompleted:isCompleted,numberOfSteps:numberOfSteps}=_ref;const connectorMaxWidth="".concat(100/(numberOfSteps-1),"%"),containerMaxWidth="".concat(100-100/numberOfSteps,"%"),connectors=new Array(numberOfSteps-1).fill(null).map((key,index)=>React.createElement("div",{className:"\n        ".concat(styles.connector," ").concat(classes.connector," ").concat(isCompleted(index+1)&&classes.coloredProgress,"\n      "),key:"connector_".concat(index),style:{maxWidth:withPadding?connectorMaxWidth:null,height:2}}));return React.createElement("div",{className:styles.wrapper},React.createElement("div",{className:"".concat(styles.connectorContainer),style:{maxWidth:withPadding?containerMaxWidth:null}},connectors))};Connectors.propTypes={classes:classesType,isCompleted:func,numberOfSteps:number,withPadding:bool};export default Connectors;
+import React from 'react';
+import { bool, func, number } from 'prop-types';
+import { classesType } from '../../../../types/commonTypes';
+import styles from './styles.module.scss';
+const Connectors = _ref => {
+  let {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  } = _ref;
+  const connectorMaxWidth = "".concat(100 / (numberOfSteps - 1), "%");
+  const containerMaxWidth = "".concat(100 - 100 / numberOfSteps, "%");
+  const connectors = new Array(numberOfSteps - 1).fill(null).map((key, index) => /*#__PURE__*/React.createElement("div", {
+    className: "\n        ".concat(styles.connector, " ").concat(classes.connector, " ").concat(isCompleted(index + 1) && classes.coloredProgress, "\n      ")
+    // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: "connector_".concat(index),
+    style: {
+      maxWidth: withPadding ? connectorMaxWidth : null,
+      height: 2
+    }
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.connectorContainer),
+    style: {
+      maxWidth: withPadding ? containerMaxWidth : null
+    }
+  }, connectors));
+};
+Connectors.propTypes = {
+  classes: classesType,
+  isCompleted: func,
+  numberOfSteps: number,
+  withPadding: bool
+};
+export default Connectors;

package/dist/esm/components/UTStepper/components/Step/index.js

@@ -1 +1,61 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import{elementType,func,number,object,shape,string}from"prop-types";import React from"react";import UTLabel from"../../../UTLabel";import{classesType}from"../../../../types/commonTypes";import{SIZES}from"../../constants";import{useScreenSize}from"../../../../utils/useScreenSize";var CompletedIcon=function(props){return React.createElement("svg",props,React.createElement("path",{clipRule:"evenodd",d:"M10.354 3.146a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 1 1 .708-.708L5 7.793l4.646-4.647a.5.5 0 0 1 .708 0Z"}))};CompletedIcon.defaultProps={width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"};import styles from"./styles.module.scss";const Step=_ref=>{let{classes:classes,isActive:isActive,isCompleted:isCompleted,size:size,stage:stage,stepperLabelProps:stepperLabelProps={}}=_ref;const stageCompleted=isCompleted(null==stage?void 0:stage.id),stageActive=isActive(null==stage?void 0:stage.id),CustomIcon=stage.Icon,{isMobileOrTablet:isMobileOrTablet}=useScreenSize();return React.createElement("div",{className:"\n        ".concat(styles["stepContainer".concat(size)]," ").concat(classes["stepContainer".concat(size)],"\n        ").concat(stageActive?classes["active".concat(size)]:""," \n        ").concat(stageCompleted?classes.completed:"","\n      ")},stageCompleted&&React.createElement(CompletedIcon,{className:styles["checkIcon".concat(size)]}),!stageCompleted&&size===SIZES.LARGE&&React.createElement(CustomIcon,{className:"\n            ".concat(stageActive?classes.activeIcon:classes.nextIcxon," \n            ").concat(styles["customIcon".concat(size)],"\n          ")}),(stageActive||!isMobileOrTablet&&!(null!=stepperLabelProps&&stepperLabelProps.onlyDisplayActiveStepLabel))&&React.createElement(UTLabel,_extends({variant:"xsmall",className:"\n            ".concat(styles.label,"\n            ").concat(stageActive||stageCompleted?classes.coloredLabel:"","\n        "),colorTheme:stageActive||stageCompleted?null:"gray"},stepperLabelProps),stage.label))};Step.propTypes={classes:classesType,isActive:func,isCompleted:func,size:string,stage:shape({id:number,label:string,Icon:elementType}),stepperLabelProps:object};export default Step;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { elementType, func, number, object, shape, string } from 'prop-types';
+import React from 'react';
+import UTLabel from '../../../UTLabel';
+import { classesType } from '../../../../types/commonTypes';
+import { SIZES } from '../../constants';
+import { useScreenSize } from '../../../../utils/useScreenSize';
+var CompletedIcon = function CompletedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    clipRule: "evenodd",
+    d: "M10.354 3.146a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 1 1 .708-.708L5 7.793l4.646-4.647a.5.5 0 0 1 .708 0Z"
+  }));
+};
+CompletedIcon.defaultProps = {
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import styles from './styles.module.scss';
+const Step = _ref => {
+  let {
+    classes,
+    isActive,
+    isCompleted,
+    size,
+    stage,
+    stepperLabelProps = {}
+  } = _ref;
+  const stageCompleted = isCompleted(stage === null || stage === void 0 ? void 0 : stage.id);
+  const stageActive = isActive(stage === null || stage === void 0 ? void 0 : stage.id);
+  const CustomIcon = stage.Icon;
+  const {
+    isMobileOrTablet
+  } = useScreenSize();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "\n        ".concat(styles["stepContainer".concat(size)], " ").concat(classes["stepContainer".concat(size)], "\n        ").concat(stageActive ? classes["active".concat(size)] : '', " \n        ").concat(stageCompleted ? classes.completed : '', "\n      ")
+  }, stageCompleted && /*#__PURE__*/React.createElement(CompletedIcon, {
+    className: styles["checkIcon".concat(size)]
+  }), !stageCompleted && size === SIZES.LARGE && /*#__PURE__*/React.createElement(CustomIcon, {
+    className: "\n            ".concat(stageActive ? classes.activeIcon : classes.nextIcxon, " \n            ").concat(styles["customIcon".concat(size)], "\n          ")
+  }), (stageActive || !isMobileOrTablet && !(stepperLabelProps !== null && stepperLabelProps !== void 0 && stepperLabelProps.onlyDisplayActiveStepLabel)) && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    variant: "xsmall",
+    className: "\n            ".concat(styles.label, "\n            ").concat(stageActive || stageCompleted ? classes.coloredLabel : '', "\n        "),
+    colorTheme: !stageActive && !stageCompleted ? 'gray' : null
+  }, stepperLabelProps), stage.label));
+};
+Step.propTypes = {
+  classes: classesType,
+  isActive: func,
+  isCompleted: func,
+  size: string,
+  stage: shape({
+    id: number,
+    label: string,
+    Icon: elementType
+  }),
+  stepperLabelProps: object
+};
+export default Step;

package/dist/esm/components/UTStepper/constants.js

@@ -1 +1,4 @@
-export const SIZES={LARGE:"L",SMALL:"S"};
+export const SIZES = {
+  LARGE: 'L',
+  SMALL: 'S'
+};

package/dist/esm/components/UTStepper/index.js

@@ -1 +1,55 @@
-import React,{useMemo}from"react";import{bool,number,object,objectOf,oneOf,string}from"prop-types";import WithTheme from"../WithTheme";import{mergeClasses}from"../../utils/classesUtils";import Step from"./components/Step";import Connectors from"./components/Connectors";import styles from"./styles.module.scss";import{retrieveStyle}from"./theme";import{SIZES}from"./constants";const UTStepper=_ref=>{let{classes:themeClasses={},classNames:classNames,currentStage:currentStage,stages:stages,stepperLabelProps:stepperLabelProps={},stepperSize:stepperSize,withPadding:withPadding}=_ref;const classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),orderedStages=Object.values(stages).sort((a,b)=>(null==a?void 0:a.id)-(null==b?void 0:b.id)),numberOfSteps=orderedStages.length,size=stepperSize===SIZES.LARGE&&orderedStages.every(stage=>stage.Icon)?SIZES.LARGE:SIZES.SMALL,isCompleted=stageNumber=>stageNumber<currentStage,isActive=stageNumber=>stageNumber===currentStage;return React.createElement("div",{className:styles.stepper},React.createElement("div",{className:withPadding?styles.paddingContainer:styles.container},orderedStages.map(stage=>React.createElement(Step,{key:stage.id,classes:classes,withPadding:withPadding,size:size,isCompleted:isCompleted,isActive:isActive,stage:stage,stepperLabelProps:stepperLabelProps})),React.createElement(Connectors,{classes:classes,withPadding:withPadding,isCompleted:isCompleted,numberOfSteps:numberOfSteps})))};UTStepper.propTypes={classes:objectOf(string),classNames:objectOf(string),currentStage:number,stages:object,stepperLabelProps:object,stepperSize:oneOf([SIZES.LARGE,SIZES.SMALL]),withPadding:bool};export default WithTheme(retrieveStyle)(UTStepper);
+import React, { useMemo } from 'react';
+import { bool, number, object, objectOf, oneOf, string } from 'prop-types';
+import WithTheme from '../WithTheme';
+import { mergeClasses } from '../../utils/classesUtils';
+import Step from './components/Step';
+import Connectors from './components/Connectors';
+import styles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+import { SIZES } from './constants';
+const UTStepper = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    currentStage,
+    stages,
+    stepperLabelProps = {},
+    stepperSize,
+    withPadding
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const orderedStages = Object.values(stages).sort((a, b) => (a === null || a === void 0 ? void 0 : a.id) - (b === null || b === void 0 ? void 0 : b.id));
+  const numberOfSteps = orderedStages.length;
+  const size = stepperSize === SIZES.LARGE && orderedStages.every(stage => stage.Icon) ? SIZES.LARGE : SIZES.SMALL;
+  const isCompleted = stageNumber => stageNumber < currentStage;
+  const isActive = stageNumber => stageNumber === currentStage;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.stepper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: withPadding ? styles.paddingContainer : styles.container
+  }, orderedStages.map(stage => /*#__PURE__*/React.createElement(Step, {
+    key: stage.id,
+    classes,
+    withPadding,
+    size,
+    isCompleted,
+    isActive,
+    stage,
+    stepperLabelProps
+  })), /*#__PURE__*/React.createElement(Connectors, {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  })));
+};
+UTStepper.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  currentStage: number,
+  stages: object,
+  stepperLabelProps: object,
+  stepperSize: oneOf([SIZES.LARGE, SIZES.SMALL]),
+  withPadding: bool
+};
+export default WithTheme(retrieveStyle)(UTStepper);

package/dist/esm/components/UTStepper/theme.js

@@ -1 +1,42 @@
-import Colors from"../../scss/variables/colors.module.scss";export const retrieveStyle=_ref=>{var _theme$Palette,_theme$Palette2,_theme$Palette3,_theme$Palette4,_theme$Palette5,_theme$Palette6,_theme$Palette7,_theme$Palette8,_theme$Palette9,_theme$Palette0,_theme$Palette1;let{theme:theme}=_ref;return{connector:{backgroundColor:null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.light["05"]},coloredProgress:{backgroundColor:"".concat((null===(_theme$Palette2=theme.Palette)||void 0===_theme$Palette2||null===(_theme$Palette2=_theme$Palette2.actions)||void 0===_theme$Palette2||null===(_theme$Palette2=_theme$Palette2.accent)||void 0===_theme$Palette2?void 0:_theme$Palette2["04"])||theme.Palette.accent["04"]," !important")},stepContainerS:{backgroundColor:null===(_theme$Palette3=theme.Palette)||void 0===_theme$Palette3?void 0:_theme$Palette3.light["05"],borderColor:null===(_theme$Palette4=theme.Palette)||void 0===_theme$Palette4?void 0:_theme$Palette4.light["03"]},stepContainerL:{backgroundColor:null===(_theme$Palette5=theme.Palette)||void 0===_theme$Palette5?void 0:_theme$Palette5.light["03"]},activeS:{backgroundColor:Colors.white,borderColor:(null===(_theme$Palette6=theme.Palette)||void 0===_theme$Palette6||null===(_theme$Palette6=_theme$Palette6.actions)||void 0===_theme$Palette6||null===(_theme$Palette6=_theme$Palette6.accent)||void 0===_theme$Palette6?void 0:_theme$Palette6["04"])||theme.Palette.accent["04"]},activeL:{backgroundColor:(null===(_theme$Palette7=theme.Palette)||void 0===_theme$Palette7||null===(_theme$Palette7=_theme$Palette7.actions)||void 0===_theme$Palette7||null===(_theme$Palette7=_theme$Palette7.accent)||void 0===_theme$Palette7?void 0:_theme$Palette7["04"])||theme.Palette.accent["04"]},completed:{backgroundColor:(null===(_theme$Palette8=theme.Palette)||void 0===_theme$Palette8||null===(_theme$Palette8=_theme$Palette8.actions)||void 0===_theme$Palette8||null===(_theme$Palette8=_theme$Palette8.accent)||void 0===_theme$Palette8?void 0:_theme$Palette8["04"])||theme.Palette.accent["04"],borderColor:(null===(_theme$Palette9=theme.Palette)||void 0===_theme$Palette9||null===(_theme$Palette9=_theme$Palette9.actions)||void 0===_theme$Palette9||null===(_theme$Palette9=_theme$Palette9.accent)||void 0===_theme$Palette9?void 0:_theme$Palette9["04"])||theme.Palette.accent["04"]},activeIcon:{fill:Colors.white},nextIcon:{fill:null===(_theme$Palette0=theme.Palette)||void 0===_theme$Palette0?void 0:_theme$Palette0.gray["04"]},coloredLabel:{color:"".concat((null===(_theme$Palette1=theme.Palette)||void 0===_theme$Palette1||null===(_theme$Palette1=_theme$Palette1.actions)||void 0===_theme$Palette1||null===(_theme$Palette1=_theme$Palette1.accent)||void 0===_theme$Palette1?void 0:_theme$Palette1["04"])||theme.Palette.accent["04"]," !important")}}};
+import Colors from '../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette0, _theme$Palette1;
+  let {
+    theme
+  } = _ref;
+  return {
+    connector: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['05']
+    },
+    coloredProgress: {
+      backgroundColor: "".concat(((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.actions) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.accent) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2['04']) || theme.Palette.accent['04'], " !important")
+    },
+    stepContainerS: {
+      backgroundColor: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['05'],
+      borderColor: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['03']
+    },
+    stepContainerL: {
+      backgroundColor: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03']
+    },
+    activeS: {
+      backgroundColor: Colors.white,
+      borderColor: ((_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.actions) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.accent) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['04']) || theme.Palette.accent['04']
+    },
+    activeL: {
+      backgroundColor: ((_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.actions) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.accent) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['04']) || theme.Palette.accent['04']
+    },
+    completed: {
+      backgroundColor: ((_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.actions) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.accent) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['04']) || theme.Palette.accent['04'],
+      borderColor: ((_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.actions) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.accent) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04']) || theme.Palette.accent['04']
+    },
+    activeIcon: {
+      fill: Colors.white
+    },
+    nextIcon: {
+      fill: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.gray['04']
+    },
+    coloredLabel: {
+      color: "".concat(((_theme$Palette1 = theme.Palette) === null || _theme$Palette1 === void 0 || (_theme$Palette1 = _theme$Palette1.actions) === null || _theme$Palette1 === void 0 || (_theme$Palette1 = _theme$Palette1.accent) === null || _theme$Palette1 === void 0 ? void 0 : _theme$Palette1['04']) || theme.Palette.accent['04'], " !important")
+    }
+  };
+};