@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTButton/stories/UTButtonSizes.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Small = exports.Medium = exports.Large = exports.FullHeight = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/Sizes',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Small = exports.Small = {
+  args: {
+    children: 'Small Size',
+    size: 'small'
+  }
+};
+const Medium = exports.Medium = {
+  args: {
+    children: 'Medium Size',
+    size: 'medium'
+  }
+};
+const Large = exports.Large = {
+  args: {
+    children: 'Large Size',
+    size: 'large'
+  }
+};
+const FullHeight = exports.FullHeight = {
+  args: {
+    children: 'Full Height',
+    fullHeight: true
+  },
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      height: 80,
+      border: '1px dashed #ccc',
+      padding: 8
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, args))
+};

package/dist/components/UTButton/stories/UTButtonStates.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Loading = exports.Disabled = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/States',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Disabled = exports.Disabled = {
+  args: {
+    children: 'Disabled',
+    disabled: true
+  }
+};
+const Loading = exports.Loading = {
+  args: {
+    children: 'Loading',
+    loading: true
+  }
+};

package/dist/components/UTButton/stories/UTButtonVariants.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Shadow = exports.Semitransparent = exports.Outlined = exports.Filled = void 0;
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const COMMON_PROPS = {
+  count: 3,
+  Icon: 'IconPencil'
+};
+var _default = exports.default = {
+  title: 'Energy-UI/UTButton/Variants',
+  component: _.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Filled = exports.Filled = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Filled Variant',
+    variant: 'filled'
+  }
+};
+const Semitransparent = exports.Semitransparent = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Semitransparent Variant',
+    variant: 'semitransparent'
+  }
+};
+const Outlined = exports.Outlined = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Outlined Variant',
+    variant: 'outlined'
+  }
+};
+const Shadow = exports.Shadow = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Shadow Variant',
+    variant: 'shadow'
+  }
+};
+const Text = exports.Text = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Text Variant',
+    variant: 'text'
+  }
+};

package/dist/components/UTButton/stories/storiesConstants.js

@@ -1 +1,268 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.COMMON_PARAMETERS=exports.COMMON_ARG_TYPES=exports.COMMON_ARGS=void 0;var _utils=require("stories/utils"),_constants=require("../constants");const COMMON_ARG_TYPES=exports.COMMON_ARG_TYPES={children:{control:"text",description:"Contenido del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"node"}}},classes:{control:!1,description:"Clases personalizadas para sobrescribir el tema del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},classNames:{control:!1,description:"Clases personalizadas para sobrescribir el tema del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},colorTheme:{control:"select",description:"Tema de color del botón.",options:Object.keys(_constants.COLORS_MAPPER),table:{defaultValue:{summary:_constants.DEFAULT_PROPS.colorTheme},type:{summary:(0,_utils.joinArgTypes)(Object.keys(_constants.COLORS_MAPPER))}}},count:{control:"number",description:"Número a mostrar en un badge dentro del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"number"}}},dataTestId:{control:"text",description:"Identificador de test para el botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},disabled:{control:"boolean",description:"Si es `true`, el botón está deshabilitado.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.disabled},type:{summary:"boolean"}}},fullHeight:{control:"boolean",description:"Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.fullHeight},type:{summary:"boolean"}}},fullWidth:{control:"boolean",description:"Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.fullWidth},type:{summary:"boolean"}}},hideTextOnResponsive:{control:"boolean",description:"Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.hideTextOnResponsive},type:{summary:"boolean"}}},LeftIcon:{control:"text",description:"Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.",table:{defaultValue:{summary:"undefined"},type:{summary:(0,_utils.joinArgTypes)(["string","ReactComponent"])}}},leftIconProps:{control:!1,description:"Props adicionales a aplicar al ícono izquierdo.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},loading:{control:"boolean",description:"Si es `true`, se muestra un spinner sobre el botón.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.loading},type:{summary:"boolean"}}},onClick:{control:!1,description:"Callback ejecutado cuando se hace clic en el botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"function"}}},RightIcon:{control:"text",description:"Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.",table:{defaultValue:{summary:"undefined"},type:{summary:(0,_utils.joinArgTypes)(["string","ReactComponent"])}}},rightIconProps:{control:!1,description:"Props adicionales a aplicar al ícono derecho.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},size:{control:"inline-radio",description:"Tamaño del botón.",options:Object.values(_constants.SIZES),table:{defaultValue:{summary:_constants.DEFAULT_PROPS.size},type:{summary:(0,_utils.joinArgTypes)(Object.values(_constants.SIZES))}}},type:{control:"text",description:"Atributo HTML type del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},variant:{control:"select",description:"Variante del botón.",options:Object.values(_constants.VARIANTS_NAMES),table:{defaultValue:{summary:_constants.DEFAULT_PROPS.variant},type:{summary:(0,_utils.joinArgTypes)(Object.values(_constants.VARIANTS_NAMES))}}}},COMMON_ARGS=exports.COMMON_ARGS={colorTheme:_constants.DEFAULT_PROPS.colorTheme,dataTestId:"customButtonId",disabled:_constants.DEFAULT_PROPS.disabled,fullHeight:_constants.DEFAULT_PROPS.fullHeight,fullWidth:_constants.DEFAULT_PROPS.fullWidth,hideTextOnResponsive:_constants.DEFAULT_PROPS.hideTextOnResponsive,loading:_constants.DEFAULT_PROPS.loading,size:_constants.DEFAULT_PROPS.size,type:"button",variant:_constants.DEFAULT_PROPS.variant},COMMON_PARAMETERS=exports.COMMON_PARAMETERS={controls:{exclude:["classes","classNames","onClick"]},docs:{description:{component:"Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable."}}};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMMON_PARAMETERS = exports.COMMON_ARG_TYPES = exports.COMMON_ARGS = void 0;
+var _utils = require("stories/utils");
+var _constants = require("../constants");
+// Common argTypes used across multiple stories files
+const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
+  children: {
+    control: 'text',
+    description: 'Contenido del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'node'
+      }
+    }
+  },
+  classes: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  classNames: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tema de color del botón.',
+    options: Object.keys(_constants.COLORS_MAPPER),
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.colorTheme
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.keys(_constants.COLORS_MAPPER))
+      }
+    }
+  },
+  count: {
+    control: 'number',
+    description: 'Número a mostrar en un badge dentro del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  dataTestId: {
+    control: 'text',
+    description: 'Identificador de test para el botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón está deshabilitado.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.disabled
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  fullHeight: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.fullHeight
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  fullWidth: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.fullWidth
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  hideTextOnResponsive: {
+    control: 'boolean',
+    description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.hideTextOnResponsive
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  LeftIcon: {
+    control: 'text',
+    description: 'Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(['string', 'ReactComponent'])
+      }
+    }
+  },
+  leftIconProps: {
+    control: false,
+    description: 'Props adicionales a aplicar al ícono izquierdo.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  loading: {
+    control: 'boolean',
+    description: 'Si es `true`, se muestra un spinner sobre el botón.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.loading
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  onClick: {
+    control: false,
+    description: 'Callback ejecutado cuando se hace clic en el botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  RightIcon: {
+    control: 'text',
+    description: 'Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(['string', 'ReactComponent'])
+      }
+    }
+  },
+  rightIconProps: {
+    control: false,
+    description: 'Props adicionales a aplicar al ícono derecho.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  size: {
+    control: 'inline-radio',
+    description: 'Tamaño del botón.',
+    options: Object.values(_constants.SIZES),
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.size
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.SIZES))
+      }
+    }
+  },
+  type: {
+    control: 'text',
+    description: 'Atributo HTML type del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  variant: {
+    control: 'select',
+    description: 'Variante del botón.',
+    options: Object.values(_constants.VARIANTS_NAMES),
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.variant
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.VARIANTS_NAMES))
+      }
+    }
+  }
+};
+
+// Common args used across multiple stories files
+const COMMON_ARGS = exports.COMMON_ARGS = {
+  colorTheme: _constants.DEFAULT_PROPS.colorTheme,
+  dataTestId: 'customButtonId',
+  disabled: _constants.DEFAULT_PROPS.disabled,
+  fullHeight: _constants.DEFAULT_PROPS.fullHeight,
+  fullWidth: _constants.DEFAULT_PROPS.fullWidth,
+  hideTextOnResponsive: _constants.DEFAULT_PROPS.hideTextOnResponsive,
+  loading: _constants.DEFAULT_PROPS.loading,
+  size: _constants.DEFAULT_PROPS.size,
+  type: 'button',
+  variant: _constants.DEFAULT_PROPS.variant
+};
+
+// Common parameters used across multiple stories files
+const COMMON_PARAMETERS = exports.COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['classes', 'classNames', 'onClick']
+  },
+  docs: {
+    description: {
+      component: 'Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable.'
+    }
+  }
+};

package/dist/components/UTButton/theme.js

@@ -1 +1,144 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.variantsColorTheme=exports.retrieveStyle=void 0;var _classesUtils=require("../../utils/classesUtils"),_shadowUtils=require("../../utils/shadowUtils"),_constants=require("./constants");const variantsColorTheme=(theme,colorTheme,variant)=>{var _theme$Palette,_theme$Palette$shadow;const actionColorName=_constants.COLORS_MAPPER[colorTheme]||_constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme],actionPaletteColors=(null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.actions)||theme.Palette,actionTheme=actionPaletteColors[actionColorName],shadowTheme=(null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow[_constants.SHADOW_MAPPER[actionColorName]])||"transparent",negativeTheme=actionPaletteColors[_constants.COLORS_MAPPER.negative],neutralTheme=actionPaletteColors[_constants.COLORS_MAPPER.secondary],lightTheme=actionPaletteColors[_constants.COLORS_MAPPER.light],definition={[_constants.VARIANTS_NAMES.filled]:{backgroundColor:actionTheme["04"],border:"1px solid transparent",fill:colorTheme===_constants.COLORS_MAPPER.negative?neutralTheme["05"]:negativeTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["05"]:actionTheme["03"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})}},[_constants.VARIANTS_NAMES.semitransparent]:{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],border:"1px solid transparent",fill:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:"none"},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["05"]:actionTheme["03"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.outlined]:{border:"1px solid ".concat(lightTheme["04"]),fill:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],boxShadow:"none"},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.text]:{border:"1px solid transparent",fill:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],boxShadow:"none"},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.shadow]:{backgroundColor:colorTheme===_constants.COLORS_MAPPER.negative?neutralTheme["05"]:negativeTheme["05"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:1}),border:"1px solid transparent",fill:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})}}},disabledStyle={opacity:(0,_classesUtils.withImportant)(.5),"&.MuiButton-root:hover.Mui-disabled":{backgroundColor:(definition[variant]||definition[_constants.DEFAULT_PROPS.variant]).backgroundColor}};return{...definition[variant]||definition[_constants.DEFAULT_PROPS.variant],disabled:disabledStyle}};exports.variantsColorTheme=variantsColorTheme;const baseButtonTheme=theme=>{var _theme$UTButton;return{root:{borderRadius:"var(--UT-button-radius, 0.25rem)",boxShadow:"none",minWidth:"auto",textTransform:"none",transition:"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"},circularProgress:{color:(null===(_theme$UTButton=theme.UTButton)||void 0===_theme$UTButton||null===(_theme$UTButton=_theme$UTButton.circularProgress)||void 0===_theme$UTButton?void 0:_theme$UTButton.color)||"484848"}}},retrieveStyle=_ref=>{let{colorTheme:colorTheme,variant:variant,theme:theme}=_ref;const baseTheme=baseButtonTheme(theme),variantTheme=variantsColorTheme(theme,colorTheme,variant);return{...baseTheme,disabled:variantTheme.disabled,root:{...baseTheme.root,...variantTheme}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variantsColorTheme = exports.retrieveStyle = void 0;
+var _classesUtils = require("../../utils/classesUtils");
+var _shadowUtils = require("../../utils/shadowUtils");
+var _constants = require("./constants");
+const variantsColorTheme = (theme, colorTheme, variant) => {
+  var _theme$Palette, _theme$Palette$shadow;
+  const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const actionTheme = actionPaletteColors[actionColorName];
+  const shadowTheme = ((_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow[_constants.SHADOW_MAPPER[actionColorName]]) || 'transparent';
+  const negativeTheme = actionPaletteColors[_constants.COLORS_MAPPER.negative];
+  const neutralTheme = actionPaletteColors[_constants.COLORS_MAPPER.secondary];
+  const lightTheme = actionPaletteColors[_constants.COLORS_MAPPER.light];
+  const definition = {
+    [_constants.VARIANTS_NAMES.filled]: {
+      backgroundColor: actionTheme['04'],
+      border: '1px solid transparent',
+      fill: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['05'] : actionTheme['03'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: shadowTheme,
+          level: 2
+        })
+      },
+      '&:active': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: shadowTheme,
+          level: 2
+        })
+      }
+    },
+    [_constants.VARIANTS_NAMES.semitransparent]: {
+      backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+      border: '1px solid transparent',
+      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['05'] : actionTheme['03'],
+        boxShadow: 'none'
+      }
+    },
+    [_constants.VARIANTS_NAMES.outlined]: {
+      border: "1px solid ".concat(lightTheme['04']),
+      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: 'none'
+      }
+    },
+    [_constants.VARIANTS_NAMES.text]: {
+      border: '1px solid transparent',
+      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: 'none'
+      }
+    },
+    [_constants.VARIANTS_NAMES.shadow]: {
+      backgroundColor: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: shadowTheme,
+        level: 1
+      }),
+      border: '1px solid transparent',
+      fill: actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: shadowTheme,
+          level: 2
+        })
+      },
+      '&:active': {
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: shadowTheme,
+          level: 2
+        })
+      }
+    }
+  };
+  const disabledStyle = {
+    opacity: (0, _classesUtils.withImportant)(0.5),
+    '&.MuiButton-root:hover.Mui-disabled': {
+      backgroundColor: (definition[variant] || definition[_constants.DEFAULT_PROPS.variant]).backgroundColor
+    }
+  };
+  return {
+    ...(definition[variant] || definition[_constants.DEFAULT_PROPS.variant]),
+    disabled: disabledStyle
+  };
+};
+exports.variantsColorTheme = variantsColorTheme;
+const baseButtonTheme = theme => {
+  var _theme$UTButton;
+  return {
+    root: {
+      borderRadius: 'var(--UT-button-radius, 0.25rem)',
+      boxShadow: 'none',
+      minWidth: 'auto',
+      textTransform: 'none',
+      transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+    },
+    circularProgress: {
+      color: ((_theme$UTButton = theme.UTButton) === null || _theme$UTButton === void 0 || (_theme$UTButton = _theme$UTButton.circularProgress) === null || _theme$UTButton === void 0 ? void 0 : _theme$UTButton.color) || '484848'
+    }
+  };
+};
+const retrieveStyle = _ref => {
+  let {
+    colorTheme,
+    variant,
+    theme
+  } = _ref;
+  const baseTheme = baseButtonTheme(theme);
+  const variantTheme = variantsColorTheme(theme, colorTheme, variant);
+  return {
+    ...baseTheme,
+    disabled: variantTheme.disabled,
+    root: {
+      ...baseTheme.root,
+      ...variantTheme
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTButton/utils.js

@@ -1 +1,83 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getLabelProps=exports.getIconProps=exports.getCounterColorTheme=void 0;var _Palette=require("../../constants/Palette"),_componentUtils=require("../../utils/componentUtils"),_UTIcon=_interopRequireDefault(require("../UTIcon")),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const getButtonElementColorTheme=(buttonColorTheme,buttonVariant)=>buttonVariant===_constants.VARIANTS_NAMES.filled?buttonColorTheme===_constants.COLORS_MAPPER.negative?_Palette.COLOR_THEMES.neutral:_Palette.COLOR_THEMES.negative:_constants.COLORS_MAPPER[buttonColorTheme],buildSingleIconProps=_ref=>{let{className:className,colorTheme:colorTheme,hideTextOnResponsive:hideTextOnResponsive,Icon:Icon,size:size,variant:variant}=_ref;return Icon?{IconComponent:(0,_componentUtils.isUTIcon)(Icon)?_UTIcon.default:Icon,className:"\n      ".concat(_stylesModule.default.baseIcon,"\n      ").concat(className,"\n      ").concat(_stylesModule.default.icon,"\n      ").concat(hideTextOnResponsive?_stylesModule.default["adaptableIcon".concat((0,_componentUtils.capitalize)(size))]:"","\n    "),...(0,_componentUtils.isUTIcon)(Icon)?{colorTheme:getButtonElementColorTheme(colorTheme,variant),name:Icon}:{}}:null},getIconProps=_ref2=>{let{className:className,colorTheme:colorTheme,hideTextOnResponsive:hideTextOnResponsive,Icon:Icon,iconPlacement:iconPlacement,LeftIcon:LeftIcon,RightIcon:RightIcon,size:size,variant:variant}=_ref2;const resolvedLeftIcon=LeftIcon||(iconPlacement!==_constants.ICON_PLACEMENTS.right?Icon:void 0),resolvedRightIcon=RightIcon||(iconPlacement===_constants.ICON_PLACEMENTS.right?Icon:void 0),commonParams={className:className,colorTheme:colorTheme,hideTextOnResponsive:hideTextOnResponsive,size:size,variant:variant},{IconComponent:LeftIconComponent,...leftIconProps}=buildSingleIconProps({...commonParams,Icon:resolvedLeftIcon})||{},{IconComponent:RightIconComponent,...rightIconProps}=buildSingleIconProps({...commonParams,Icon:resolvedRightIcon})||{};return{LeftIconComponent:LeftIconComponent||null,leftIconProps:leftIconProps,RightIconComponent:RightIconComponent||null,rightIconProps:rightIconProps}};exports.getIconProps=getIconProps;const getLabelProps=(buttonColorTheme,buttonVariant,buttonSize)=>({colorTheme:getButtonElementColorTheme(buttonColorTheme,buttonVariant),variant:buttonSize===_constants.SIZES.small?"small":"body",weight:"medium"});exports.getLabelProps=getLabelProps;const getCounterColorTheme=(colorTheme,variant)=>variant===_constants.VARIANTS_NAMES.filled?colorTheme===_Palette.COLOR_THEMES.negative?"dark":"negative":variant===_constants.VARIANTS_NAMES.outlined?colorTheme===_Palette.COLOR_THEMES.negative?"negative":colorTheme===_Palette.COLOR_THEMES.primary?_constants.COLORS_MAPPER[colorTheme]:colorTheme===_Palette.COLOR_THEMES.gray?"gray":"dark":colorTheme===_Palette.COLOR_THEMES.gray?"gray":_constants.COLORS_MAPPER[colorTheme];exports.getCounterColorTheme=getCounterColorTheme;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelProps = exports.getIconProps = exports.getCounterColorTheme = void 0;
+var _Palette = require("../../constants/Palette");
+var _componentUtils = require("../../utils/componentUtils");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getButtonElementColorTheme = (buttonColorTheme, buttonVariant) => buttonVariant === _constants.VARIANTS_NAMES.filled ? buttonColorTheme === _constants.COLORS_MAPPER.negative ? _Palette.COLOR_THEMES.neutral : _Palette.COLOR_THEMES.negative : _constants.COLORS_MAPPER[buttonColorTheme];
+const buildSingleIconProps = _ref => {
+  let {
+    className,
+    colorTheme,
+    hideTextOnResponsive,
+    Icon,
+    size,
+    variant
+  } = _ref;
+  if (!Icon) return null;
+  return {
+    IconComponent: (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon,
+    className: "\n      ".concat(_stylesModule.default.baseIcon, "\n      ").concat(className, "\n      ").concat(_stylesModule.default.icon, "\n      ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n    "),
+    ...((0, _componentUtils.isUTIcon)(Icon) ? {
+      colorTheme: getButtonElementColorTheme(colorTheme, variant),
+      name: Icon
+    } : {})
+  };
+};
+const getIconProps = _ref2 => {
+  let {
+    className,
+    colorTheme,
+    hideTextOnResponsive,
+    Icon,
+    iconPlacement,
+    LeftIcon,
+    RightIcon,
+    size,
+    variant
+  } = _ref2;
+  const resolvedLeftIcon = LeftIcon || (iconPlacement !== _constants.ICON_PLACEMENTS.right ? Icon : undefined);
+  const resolvedRightIcon = RightIcon || (iconPlacement === _constants.ICON_PLACEMENTS.right ? Icon : undefined);
+  const commonParams = {
+    className,
+    colorTheme,
+    hideTextOnResponsive,
+    size,
+    variant
+  };
+  const {
+    IconComponent: LeftIconComponent,
+    ...leftIconProps
+  } = buildSingleIconProps({
+    ...commonParams,
+    Icon: resolvedLeftIcon
+  }) || {};
+  const {
+    IconComponent: RightIconComponent,
+    ...rightIconProps
+  } = buildSingleIconProps({
+    ...commonParams,
+    Icon: resolvedRightIcon
+  }) || {};
+  return {
+    LeftIconComponent: LeftIconComponent || null,
+    leftIconProps,
+    RightIconComponent: RightIconComponent || null,
+    rightIconProps
+  };
+};
+exports.getIconProps = getIconProps;
+const getLabelProps = (buttonColorTheme, buttonVariant, buttonSize) => ({
+  colorTheme: getButtonElementColorTheme(buttonColorTheme, buttonVariant),
+  variant: buttonSize === _constants.SIZES.small ? 'small' : 'body',
+  weight: 'medium'
+});
+exports.getLabelProps = getLabelProps;
+const getCounterColorTheme = (colorTheme, variant) => variant === _constants.VARIANTS_NAMES.filled ? colorTheme === _Palette.COLOR_THEMES.negative ? 'dark' : 'negative' : variant === _constants.VARIANTS_NAMES.outlined ? colorTheme === _Palette.COLOR_THEMES.negative ? 'negative' : colorTheme === _Palette.COLOR_THEMES.primary ? _constants.COLORS_MAPPER[colorTheme] : colorTheme === _Palette.COLOR_THEMES.gray ? 'gray' : 'dark' : colorTheme === _Palette.COLOR_THEMES.gray ? 'gray' : _constants.COLORS_MAPPER[colorTheme];
+exports.getCounterColorTheme = getCounterColorTheme;