@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,184 @@
-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 React,{useMemo,useState}from"react";import{arrayOf,bool,element,func,object,objectOf,shape,string}from"prop-types";import isEmpty from"lodash/isEmpty";import WithTheme from"../WithTheme";import UTLabel from"../UTLabel";import UTBanner from"../UTBanner";import{mergeClasses}from"../../utils/classesUtils";import UTMenu from"../UTMenu";import UTButton from"../UTButton";var Ellipsis=function(props){return React.createElement("svg",props,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"}))};Ellipsis.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};var Edit=function(props){return React.createElement("svg",props,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"m16.019 10.678-2.695-2.695 1.948-1.949 2.694 2.694-1.947 1.95Zm-6.94 6.946-2.976.271.264-2.956 5.617-5.617 2.696 2.696-5.6 5.606ZM19.405 7.337h-.001l-2.738-2.739c-.741-.739-2.014-.774-2.716-.069l-8.996 8.996a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.379a1.974 1.974 0 0 0 1.214-.568l8.997-8.997c.728-.73.697-1.948-.068-2.714Z"}))};Edit.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTHeader=_ref=>{var _titleProps$variant,_titleProps$weight;let{actions:actions,banner:banner,classNames:classNames,classes:themeClasses={},helpText:helpText,helpTextDataTestId:helpTextDataTestId,isLastStep:isLastStep,requiredFieldInfo:requiredFieldInfo,requiredFieldInfoDataTestId:requiredFieldInfoDataTestId,subtitle:subtitle,subtitleDataTestId:subtitleDataTestId,tagline:tagline,taglineDataTestId:taglineDataTestId,title:title,titleDataTestId:titleDataTestId,TitleIcon:TitleIcon,titleProps:titleProps}=_ref;const classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),mainAction=actions.find(action=>action.main),moreActions=actions.filter((_action,index)=>index!==actions.indexOf(mainAction)),MainIcon=(null==mainAction?void 0:mainAction.Icon)||Edit,hasHeader=tagline||title||subtitle||requiredFieldInfo||helpText||banner,[menuAnchor,setMenuAnchor]=useState(),renderComponent=(prop,standardComponent)=>React.isValidElement(prop)?prop:standardComponent,Tagline=renderComponent(tagline,React.createElement(UTLabel,{className:styles.stepTitle,colorTheme:"gray",dataTestId:taglineDataTestId,variant:"small",weight:"medium"},tagline)),Title=renderComponent(title,React.createElement(UTLabel,_extends({className:"".concat(styles.title," ").concat(titleProps.className),dataTestId:titleDataTestId,variant:null!==(_titleProps$variant=titleProps.variant)&&void 0!==_titleProps$variant?_titleProps$variant:"title2",weight:null!==(_titleProps$weight=titleProps.weight)&&void 0!==_titleProps$weight?_titleProps$weight:"medium"},titleProps,{withMarkdown:!0}),title)),Subtitle=renderComponent(subtitle,React.createElement(UTLabel,{className:styles.subtitle,colorTheme:"gray",dataTestId:subtitleDataTestId,variant:"body",withMarkdown:!0},subtitle)),RequiredFieldInfo=renderComponent(requiredFieldInfo,React.createElement(UTLabel,{colorTheme:"gray",dataTestId:requiredFieldInfoDataTestId,variant:"small",withMarkdown:!0},requiredFieldInfo)),HelpText=renderComponent(helpText,React.createElement(UTLabel,{colorTheme:"gray",dataTestId:helpTextDataTestId,variant:"small"},helpText));return React.createElement("div",{className:classes.outerContainer},React.createElement("div",{className:"".concat(styles.container," ").concat(!hasHeader&&styles.containerMargin," ")},React.createElement("div",{className:"".concat(styles.header," ").concat((null==banner?void 0:banner.text)&&styles.bottomPadding)},tagline&&!isLastStep&&Tagline,React.createElement("div",{className:"".concat(styles.titles," ").concat(classes.titles)},React.createElement("div",{className:styles.titleAndActionsContainer},TitleIcon&&React.createElement(TitleIcon,{className:classes.titleIcon}),Title,!isEmpty(actions)&&React.createElement("div",{className:styles.actionsContainer},mainAction&&(mainAction.Component?React.createElement(mainAction.Component,null):React.createElement(UTButton,{colorTheme:"primary",Icon:MainIcon,onClick:mainAction.onClick,variant:"text"})),!isEmpty(moreActions)&&React.createElement("div",null,React.createElement(UTButton,{onClick:event=>setMenuAnchor(event.target),variant:"text",Icon:Ellipsis}),React.createElement(UTMenu,{anchor:menuAnchor,items:moreActions.map(_ref2=>{let{label:label,onClick:onClick}=_ref2;return{key:label,label:label,onClick:onClick}}),menuPlacement:"bottom-end",onClose:()=>setMenuAnchor()})))),subtitle&&Subtitle),requiredFieldInfo&&RequiredFieldInfo,helpText&&HelpText),(null==banner?void 0:banner.text)&&React.createElement(UTBanner,{classNames:{infoContainer:styles.bannerContainer},iconProps:{height:"20px",width:"20px"},Icon:banner.Icon,title:banner.text})))};UTHeader.propTypes={actions:arrayOf(object),banner:shape({Icon:object,text:string}),classNames:objectOf(string),classes:objectOf(string),helpText:string,helpTextDataTestId:string,isLastStep:bool,requiredFieldInfo:string,requiredFieldInfoDataTestId:string,subtitle:string,subtitleDataTestId:string,tagline:string,taglineDataTestId:string,title:string,titleDataTestId:string,TitleIcon:element,titleProps:shape({align:string,classes:objectOf(string),className:string,dataTestId:string,markdownRenderers:objectOf(func),title:string,variant:string,withMarkdown:bool})};export default WithTheme(retrieveStyle)(UTHeader);
+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 React, { useMemo, useState } from 'react';
+import { arrayOf, bool, element, func, object, objectOf, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import WithTheme from '../WithTheme';
+import UTLabel from '../UTLabel';
+import UTBanner from '../UTBanner';
+import { mergeClasses } from '../../utils/classesUtils';
+import UTMenu from '../UTMenu';
+import UTButton from '../UTButton';
+var Ellipsis = function Ellipsis(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
+  }));
+};
+Ellipsis.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var Edit = function Edit(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m16.019 10.678-2.695-2.695 1.948-1.949 2.694 2.694-1.947 1.95Zm-6.94 6.946-2.976.271.264-2.956 5.617-5.617 2.696 2.696-5.6 5.606ZM19.405 7.337h-.001l-2.738-2.739c-.741-.739-2.014-.774-2.716-.069l-8.996 8.996a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.379a1.974 1.974 0 0 0 1.214-.568l8.997-8.997c.728-.73.697-1.948-.068-2.714Z"
+  }));
+};
+Edit.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTHeader = _ref => {
+  var _titleProps$variant, _titleProps$weight;
+  let {
+    actions,
+    banner,
+    classNames,
+    classes: themeClasses = {},
+    helpText,
+    helpTextDataTestId,
+    isLastStep,
+    requiredFieldInfo,
+    requiredFieldInfoDataTestId,
+    subtitle,
+    subtitleDataTestId,
+    tagline,
+    taglineDataTestId,
+    title,
+    titleDataTestId,
+    TitleIcon,
+    titleProps
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const mainAction = actions.find(action => action.main);
+  const moreActions = actions.filter((_action, index) => index !== actions.indexOf(mainAction));
+  const MainIcon = (mainAction === null || mainAction === void 0 ? void 0 : mainAction.Icon) || Edit;
+  const hasHeader = tagline || title || subtitle || requiredFieldInfo || helpText || banner;
+  const [menuAnchor, setMenuAnchor] = useState();
+  const openMenu = event => setMenuAnchor(event.target);
+  const closeMenu = () => setMenuAnchor();
+  const BANNER_ICON_SIZE = '20px';
+  const renderComponent = (prop, standardComponent) => /*#__PURE__*/React.isValidElement(prop) ? prop : standardComponent;
+  const Tagline = renderComponent(tagline, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.stepTitle,
+    colorTheme: "gray",
+    dataTestId: taglineDataTestId,
+    variant: "small",
+    weight: "medium"
+  }, tagline));
+  const Title = renderComponent(title, /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: "".concat(styles.title, " ").concat(titleProps.className),
+    dataTestId: titleDataTestId,
+    variant: (_titleProps$variant = titleProps.variant) !== null && _titleProps$variant !== void 0 ? _titleProps$variant : 'title2',
+    weight: (_titleProps$weight = titleProps.weight) !== null && _titleProps$weight !== void 0 ? _titleProps$weight : 'medium'
+  }, titleProps, {
+    withMarkdown: true
+  }), title));
+  const Subtitle = renderComponent(subtitle, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.subtitle,
+    colorTheme: "gray",
+    dataTestId: subtitleDataTestId,
+    variant: "body",
+    withMarkdown: true
+  }, subtitle));
+  const RequiredFieldInfo = renderComponent(requiredFieldInfo, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: requiredFieldInfoDataTestId,
+    variant: "small",
+    withMarkdown: true
+  }, requiredFieldInfo));
+  const HelpText = renderComponent(helpText, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: helpTextDataTestId,
+    variant: "small"
+  }, helpText));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.outerContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(!hasHeader && styles.containerMargin, " ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.header, " ").concat((banner === null || banner === void 0 ? void 0 : banner.text) && styles.bottomPadding)
+  }, tagline && !isLastStep && Tagline, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.titles, " ").concat(classes.titles)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.titleAndActionsContainer
+  }, TitleIcon && /*#__PURE__*/React.createElement(TitleIcon, {
+    className: classes.titleIcon
+  }), Title, !isEmpty(actions) && /*#__PURE__*/React.createElement("div", {
+    className: styles.actionsContainer
+  }, mainAction && (mainAction.Component ? /*#__PURE__*/React.createElement(mainAction.Component, null) : /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "primary",
+    Icon: MainIcon,
+    onClick: mainAction.onClick,
+    variant: "text"
+  })), !isEmpty(moreActions) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, {
+    onClick: openMenu,
+    variant: "text",
+    Icon: Ellipsis
+  }), /*#__PURE__*/React.createElement(UTMenu, {
+    anchor: menuAnchor,
+    items: moreActions.map(_ref2 => {
+      let {
+        label,
+        onClick
+      } = _ref2;
+      return {
+        key: label,
+        label,
+        onClick
+      };
+    }),
+    menuPlacement: "bottom-end",
+    onClose: closeMenu
+  })))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText), (banner === null || banner === void 0 ? void 0 : banner.text) && /*#__PURE__*/React.createElement(UTBanner, {
+    classNames: {
+      infoContainer: styles.bannerContainer
+    },
+    iconProps: {
+      height: BANNER_ICON_SIZE,
+      width: BANNER_ICON_SIZE
+    },
+    Icon: banner.Icon,
+    title: banner.text
+  })));
+};
+UTHeader.propTypes = {
+  actions: arrayOf(object),
+  banner: shape({
+    Icon: object,
+    text: string
+  }),
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  helpText: string,
+  helpTextDataTestId: string,
+  isLastStep: bool,
+  requiredFieldInfo: string,
+  requiredFieldInfoDataTestId: string,
+  subtitle: string,
+  subtitleDataTestId: string,
+  tagline: string,
+  taglineDataTestId: string,
+  title: string,
+  titleDataTestId: string,
+  TitleIcon: element,
+  titleProps: shape({
+    align: string,
+    classes: objectOf(string),
+    className: string,
+    dataTestId: string,
+    markdownRenderers: objectOf(func),
+    title: string,
+    variant: string,
+    withMarkdown: bool
+  })
+};
+export default WithTheme(retrieveStyle)(UTHeader);

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

@@ -1 +1,14 @@
-export const retrieveStyle=_ref=>{var _theme$UTWorkflowCont,_theme$Palette$action;let{theme:theme}=_ref;return{titleIcon:{color:null===(_theme$UTWorkflowCont=theme.UTWorkflowContainer)||void 0===_theme$UTWorkflowCont||null===(_theme$UTWorkflowCont=_theme$UTWorkflowCont.titleIcon)||void 0===_theme$UTWorkflowCont?void 0:_theme$UTWorkflowCont.color},mainAction:{fill:(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action||null===(_theme$Palette$action=_theme$Palette$action.accent)||void 0===_theme$Palette$action?void 0:_theme$Palette$action["04"])||theme.Palette.accent["04"]}}};
+export const retrieveStyle = _ref => {
+  var _theme$UTWorkflowCont, _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    titleIcon: {
+      color: (_theme$UTWorkflowCont = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.titleIcon) === null || _theme$UTWorkflowCont === void 0 ? void 0 : _theme$UTWorkflowCont.color
+    },
+    mainAction: {
+      fill: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 || (_theme$Palette$action = _theme$Palette$action.accent) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action['04']) || theme.Palette.accent['04']
+    }
+  };
+};

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

@@ -0,0 +1,73 @@
+# UTIcon
+
+### Description
+
+Icon component using Tabler Icons library.
+
+### Name
+
+The icon name must be with the first letter of each word in uppercase.
+
+### Props
+
+| Name       | Description                                                                                                                                         |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| area       | padding around the icon is shown when it is true. (Default: false).                                                                                 |
+| name       | The name of the icon in TablerIcons                                                                                                                 |
+| classname  | The classname to aplied to the Icon                                                                                                                 |
+| colorTheme | The icon color                                                                                                                                      |
+| dataTestId | Icon's data-testid                                                                                                                                  |
+| shade      | The icon color shade                                                                                                                                |
+| size       | The icon size in px                                                                                                                                 |
+| variant    | It depends on the `area` property and defines whether it should be displayed filled (`default`) or just with a border (`outlined`) around the icon. |
+
+## Fill Theme (optional)
+
+The `fillTheme` prop could be one of these values:
+
+- `accent`
+- `dark`
+- `error`
+- `gray`
+- `information`
+- `light`
+- `negative`
+- `neutral`
+- `success`
+- `warning`
+
+Clarifications:
+
+- Note that not all icons look good with an internal fill color.
+
+## Fill Shade (optional)
+
+The `fillShade` prop must be one of these:
+
+- `01`
+- `02`
+- `03`
+- `04`
+- `05`
+
+Clarifications:
+
+- The default shade is '02' (if 'fillTheme' exists).
+
+### Usage
+
+```javascript
+import React from 'react';
+import { UTIcon } from '@widergy/energy-ui';
+import styles from './styles.module.scss';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <UTIcon name="IconArrowLeft" colorTheme="dark" size={48} className={styles.iconClassname} />
+    </div>
+  );
+};
+
+export default MyComponent;
+```

package/dist/esm/components/UTIcon/UTIcon.stories.js

@@ -0,0 +1,191 @@
+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 React from 'react';
+import { joinArgTypes } from 'stories/utils';
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+import { DEFAULT_VARIANT } from './constants';
+import UTIcon from '.';
+const ICON_EXAMPLES = ['IconHome', 'IconBolt', 'IconDroplet', 'IconCar', 'IconReceipt', 'IconArchive', 'IconUser', 'IconBell', 'IconInfoCircle'];
+const ICON_FILLED_EXAMPLES = ['IconHomeFilled', 'IconBoltFilled', 'IconDropletFilled', 'IconCarFilled', 'IconReceiptFilled', 'IconArchiveFilled', 'IconUserFilled', 'IconBellFilled', 'IconInfoCircleFilled'];
+const ENERGY_ICON_EXAMPLES = ['EnergyIconBottledGas', 'EnergyIconBottledGasPlus', 'EnergyIconCar', 'EnergyIconCarbonFootprint', 'EnergyIconCart', 'EnergyIconChatSparkFilled', 'EnergyIconEdit', 'EnergyIconHome', 'EnergyIconMessageEdit', 'EnergyIconQuestionFilled', 'EnergyIconSendFilled', 'EnergyIconTruck', 'EnergyIconConsumptionBoxPlusFilled', 'EnergyIconConsumptionBoxRightFilled', 'EnergyIconConsumptionBoxMinusFilled'];
+const FLAG_EXAMPLES = [
+// Sudamérica
+'AR', 'BO', 'BR', 'CL', 'CO', 'EC', 'GF', 'GY', 'PE', 'PY', 'SR', 'UY', 'VE',
+// Norteamérica
+'CA', 'GL', 'MX', 'PM', 'US',
+// Centroamérica
+'BZ', 'CR', 'GT', 'HN', 'NI', 'PA', 'SV',
+// Caribe
+'AG', 'AI', 'AW', 'BB', 'BL', 'BM', 'BS', 'CU', 'CW', 'DM', 'DO', 'GD', 'GP', 'HT', 'JM', 'KY', 'LC', 'MF', 'MQ', 'MS', 'PR', 'SX', 'TC', 'TT', 'VC', 'VG', 'VI',
+// España
+'ES'];
+export default {
+  component: UTIcon,
+  argTypes: {
+    area: {
+      control: 'boolean',
+      description: 'Determina si el ícono renderiza un área redondeada a su alrededor',
+      table: {
+        defaultValue: {
+          summary: false
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    colorTheme: {
+      control: {
+        type: 'select'
+      },
+      options: [...Object.values(COLOR_THEMES), undefined],
+      description: 'Define el theme de la paleta para el ícono',
+      table: {
+        type: {
+          summary: joinArgTypes(Object.keys(COLOR_THEMES))
+        }
+      }
+    },
+    fillShade: {
+      control: {
+        type: 'select'
+      },
+      options: [...Object.values(COLOR_SHADES), undefined],
+      description: 'Define la shade de la paleta para el fill del icono',
+      table: {
+        type: {
+          summary: joinArgTypes(Object.keys(COLOR_SHADES))
+        }
+      }
+    },
+    fillTheme: {
+      control: {
+        type: 'select'
+      },
+      options: [...Object.values(COLOR_THEMES), undefined],
+      description: 'Define el theme de la paleta para el fill del ícono',
+      table: {
+        type: {
+          summary: joinArgTypes(Object.keys(COLOR_THEMES))
+        }
+      }
+    },
+    name: {
+      control: 'text',
+      description: 'El nombre del ícono en TablerIcons',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    shade: {
+      control: {
+        type: 'select'
+      },
+      options: [...Object.values(COLOR_SHADES), undefined],
+      description: 'Define la shade de la paleta para el ícono',
+      table: {
+        type: {
+          summary: joinArgTypes(Object.keys(COLOR_SHADES))
+        }
+      }
+    },
+    size: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100
+      },
+      description: 'Tamaño del icono',
+      table: {
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      description: 'Variante del ícono',
+      options: ['default', 'outlined'],
+      table: {
+        type: {
+          summary: joinArgTypes(['default', 'outlined'])
+        }
+      }
+    }
+  },
+  title: 'Energy-UI/UTIcon'
+};
+export const Default = {
+  name: 'Playground',
+  args: {
+    name: 'IconHome',
+    area: false,
+    colorTheme: undefined,
+    fillShade: undefined,
+    fillTheme: undefined,
+    shade: undefined,
+    size: undefined,
+    variant: DEFAULT_VARIANT
+  }
+};
+export const Variants = {
+  args: {},
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "Normal Icons", ICON_EXAMPLES.map(name => /*#__PURE__*/React.createElement("div", {
+    key: name,
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, Object.keys(COLOR_THEMES).map(colorTheme => /*#__PURE__*/React.createElement(UTIcon, _extends({
+    key: colorTheme,
+    name: name,
+    colorTheme: colorTheme
+  }, args)))))), /*#__PURE__*/React.createElement("div", null, "Filled Icons", ICON_FILLED_EXAMPLES.map(name => /*#__PURE__*/React.createElement("div", {
+    key: name,
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, Object.keys(COLOR_THEMES).map(colorTheme => /*#__PURE__*/React.createElement(UTIcon, _extends({
+    key: colorTheme,
+    name: name,
+    colorTheme: colorTheme
+  }, args)))))), /*#__PURE__*/React.createElement("div", null, "Energy Icons", ENERGY_ICON_EXAMPLES.map(name => /*#__PURE__*/React.createElement("div", {
+    key: name,
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, Object.keys(COLOR_THEMES).map(colorTheme => /*#__PURE__*/React.createElement(UTIcon, _extends({
+    key: colorTheme,
+    name: name,
+    colorTheme: colorTheme
+  }, args)))))))
+};
+export const Flags = {
+  args: {
+    size: 100
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      flexWrap: 'wrap'
+    }
+  }, FLAG_EXAMPLES.map(name => /*#__PURE__*/React.createElement(UTIcon, _extends({
+    key: name,
+    name: name
+  }, args))))
+};

package/dist/esm/components/UTIcon/components/FlagsIcons/flagsComponents/AG.js

@@ -1 +1,43 @@
-import React from"react";var Flag=function(props){return React.createElement("svg",props,React.createElement("g",{clipPath:"url(#a)"},React.createElement("path",{fill:"#fff",d:"M0 0h16v12H0z"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0 0h16v12H0V0Z",fill:"#1B1B1B"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 7 6.887 8.9l.028-2.098-2.032 1.325 1.162-1.88-2.55.489 2.068-1.291L3 5l2.563-.445-2.068-1.29 2.55.488-1.162-1.88 2.032 1.325L6.887 1.1 8 3l1.113-1.9-.028 2.098 2.032-1.325-1.162 1.88 2.55-.489-2.068 1.291L13 5l-2.563.445 2.068 1.29-2.55-.488 1.162 1.88-2.032-1.325.028 2.098L8 7Z",fill:"#F9D313"}),React.createElement("path",{fill:"#F1F9FF",d:"M3 7h10v5H3z"}),React.createElement("path",{fill:"#4A80E8",d:"M1 5h14v2H1z"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"m0 3 8 9 8-9v9H0V3Z",fill:"#E31D1C"})),React.createElement("defs",null,React.createElement("clipPath",{id:"a"},React.createElement("path",{fill:"#fff",d:"M0 0h16v12H0z"}))))};Flag.defaultProps={width:"16",height:"12",viewBox:"0 0 16 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"};export default Flag;
+import React from "react";
+var Flag = function Flag(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v12H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0h16v12H0V0Z",
+    fill: "#1B1B1B"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 7 6.887 8.9l.028-2.098-2.032 1.325 1.162-1.88-2.55.489 2.068-1.291L3 5l2.563-.445-2.068-1.29 2.55.488-1.162-1.88 2.032 1.325L6.887 1.1 8 3l1.113-1.9-.028 2.098 2.032-1.325-1.162 1.88 2.55-.489-2.068 1.291L13 5l-2.563.445 2.068 1.29-2.55-.488 1.162 1.88-2.032-1.325.028 2.098L8 7Z",
+    fill: "#F9D313"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#F1F9FF",
+    d: "M3 7h10v5H3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#4A80E8",
+    d: "M1 5h14v2H1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m0 3 8 9 8-9v9H0V3Z",
+    fill: "#E31D1C"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v12H0z"
+  }))));
+};
+Flag.defaultProps = {
+  width: "16",
+  height: "12",
+  viewBox: "0 0 16 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+export default Flag;

package/dist/esm/components/UTIcon/components/FlagsIcons/flagsComponents/AI.js

@@ -1 +1,79 @@
-import React from"react";var Flag=function(props){return React.createElement("svg",props,React.createElement("g",{clipPath:"url(#a)"},React.createElement("path",{fill:"#fff",d:"M0 0h16v12H0z"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0 0v12h16V0H0Z",fill:"#2E42A5"}),React.createElement("g",{clipPath:"url(#b)"},React.createElement("path",{fill:"#2E42A5",d:"M0 0h9v7H0z"}),React.createElement("path",{d:"m-1.002 6.5 1.98.869L9.045.944l1.045-1.29-2.118-.29-3.29 2.768-2.649 1.865L-1.002 6.5Z",fill:"#F7FCFF"}),React.createElement("path",{d:"m-.731 7.108 1.009.505 9.437-8.08H8.298L-.731 7.109Z",fill:"#F50100"}),React.createElement("path",{d:"m10.002 6.5-1.98.869L-.045.944-1.09-.346l2.118-.29 3.29 2.768 2.649 1.865L10.002 6.5Z",fill:"#F7FCFF"}),React.createElement("path",{d:"m9.935 6.937-1.01.504-4.018-3.46-1.19-.386L-1.19-.342H.227L5.13 3.502l1.303.463 3.502 2.972Z",fill:"#F50100"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.992 0h-1v3H0v1h3.992v3h1V4H9V3H4.992V0Z",fill:"#F50100"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3.242-.75h2.5v3H9.75v2.5H5.742v3h-2.5v-3H-.75v-2.5h3.992v-3ZM3.992 3H0v1h3.992v3h1V4H9V3H4.992V0h-1v3Z",fill:"#F7FCFF"})),React.createElement("path",{d:"M12.37 10.562c-.603 0-1.008-.138-1.291-.367-.284-.23-.477-.576-.602-1.055-.126-.481-.178-1.075-.198-1.774a49.768 49.768 0 0 1-.008-1.596l.002-.501h4.255c.075 1.37.094 2.683-.177 3.667-.142.515-.358.917-.667 1.191-.305.27-.723.435-1.314.435Z",fill:"#fff",stroke:"#E6E617",strokeWidth:".5"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.242 8.967c0 1.031.853 2.05 2.116 2.05a2.332 2.332 0 0 0 2.347-2.085l-4.463.035Z",fill:"#82E5FF"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.867 7.1c0 .774.648 1.4 1.446 1.4.798 0 1.446-.626 1.446-1.4 0-.774-.648-1.4-1.446-1.4-.798 0-1.446.626-1.446 1.4Zm2.292 0c0 .451-.379.817-.846.817-.467 0-.846-.366-.846-.817 0-.451.379-.817.846-.817.467 0 .846.366.846.817Z",fill:"#E18600"}),React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12.069 5.505s-.526.232-.412.668c.114.436.243.499.243.499s.186-.945.937-.945l-.768-.222ZM11.127 7.862s.432.379.78.091c.346-.288.348-.431.348-.431s-.934.23-1.252-.45l.123.79ZM13.73 7.804s.021-.574-.42-.663c-.443-.088-.555 0-.555 0s.767.581.438 1.256l.536-.593Z",fill:"#E18600"})),React.createElement("defs",null,React.createElement("clipPath",{id:"a"},React.createElement("path",{fill:"#fff",d:"M0 0h16v12H0z"})),React.createElement("clipPath",{id:"b"},React.createElement("path",{fill:"#fff",d:"M0 0h9v7H0z"}))))};Flag.defaultProps={width:"16",height:"12",viewBox:"0 0 16 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"};export default Flag;
+import React from "react";
+var Flag = function Flag(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v12H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0v12h16V0H0Z",
+    fill: "#2E42A5"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#b)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#2E42A5",
+    d: "M0 0h9v7H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m-1.002 6.5 1.98.869L9.045.944l1.045-1.29-2.118-.29-3.29 2.768-2.649 1.865L-1.002 6.5Z",
+    fill: "#F7FCFF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m-.731 7.108 1.009.505 9.437-8.08H8.298L-.731 7.109Z",
+    fill: "#F50100"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m10.002 6.5-1.98.869L-.045.944-1.09-.346l2.118-.29 3.29 2.768 2.649 1.865L10.002 6.5Z",
+    fill: "#F7FCFF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m9.935 6.937-1.01.504-4.018-3.46-1.19-.386L-1.19-.342H.227L5.13 3.502l1.303.463 3.502 2.972Z",
+    fill: "#F50100"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.992 0h-1v3H0v1h3.992v3h1V4H9V3H4.992V0Z",
+    fill: "#F50100"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.242-.75h2.5v3H9.75v2.5H5.742v3h-2.5v-3H-.75v-2.5h3.992v-3ZM3.992 3H0v1h3.992v3h1V4H9V3H4.992V0h-1v3Z",
+    fill: "#F7FCFF"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M12.37 10.562c-.603 0-1.008-.138-1.291-.367-.284-.23-.477-.576-.602-1.055-.126-.481-.178-1.075-.198-1.774a49.768 49.768 0 0 1-.008-1.596l.002-.501h4.255c.075 1.37.094 2.683-.177 3.667-.142.515-.358.917-.667 1.191-.305.27-.723.435-1.314.435Z",
+    fill: "#fff",
+    stroke: "#E6E617",
+    strokeWidth: ".5"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.242 8.967c0 1.031.853 2.05 2.116 2.05a2.332 2.332 0 0 0 2.347-2.085l-4.463.035Z",
+    fill: "#82E5FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.867 7.1c0 .774.648 1.4 1.446 1.4.798 0 1.446-.626 1.446-1.4 0-.774-.648-1.4-1.446-1.4-.798 0-1.446.626-1.446 1.4Zm2.292 0c0 .451-.379.817-.846.817-.467 0-.846-.366-.846-.817 0-.451.379-.817.846-.817.467 0 .846.366.846.817Z",
+    fill: "#E18600"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.069 5.505s-.526.232-.412.668c.114.436.243.499.243.499s.186-.945.937-.945l-.768-.222ZM11.127 7.862s.432.379.78.091c.346-.288.348-.431.348-.431s-.934.23-1.252-.45l.123.79ZM13.73 7.804s.021-.574-.42-.663c-.443-.088-.555 0-.555 0s.767.581.438 1.256l.536-.593Z",
+    fill: "#E18600"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v12H0z"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "b"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h9v7H0z"
+  }))));
+};
+Flag.defaultProps = {
+  width: "16",
+  height: "12",
+  viewBox: "0 0 16 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+export default Flag;