@pedidopago/ui 1.7.15 → 1.7.17

package/dist/@types/index.d.ts

@@ -1,7 +1,7 @@
-import { ExtendThemeProps } from '../shared/theme/theme.types';
-export type GenericStyledProps = {
-    theme?: ExtendThemeProps & {
-        colorMode: 'light' | 'dark';
-    };
-};
+import { ExtendThemeProps } from '../shared/theme/theme.types';
+export type GenericStyledProps = {
+    theme?: ExtendThemeProps & {
+        colorMode: 'light' | 'dark';
+    };
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/alert.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=alert.test.d.ts.map

package/dist/components/Alert/index.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { AlertProps } from './types';
-declare const Alert: FC<AlertProps>;
-export default Alert;
+import { FC } from 'react';
+import { AlertProps } from './types';
+declare const Alert: FC<AlertProps>;
+export default Alert;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAoCzB,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAS3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA+BzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Typography = _interopRequireDefault(require("../Typography"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Flex = _interopRequireDefault(require("../Flex"));
 var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,36 +21,42 @@ var Alert = function Alert(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'default' : _ref$type,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledAlertContainer, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledAlertWrapper, {
-      haveContent: !!content && !!title,
-      variant: variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    closable = _ref.closable;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledAlertWrapper, {
+    "data-variant": variant,
+    type: type,
+    maxWidth: maxWidth,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledIconBox, {
       type: type,
-      maxWidth: maxWidth,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledIconBox, {
-        type: type,
-        variant: variant,
-        havePadding: variant === 'outlined',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          name: icon,
-          size: variant === 'outlined' ? '1.375rem' : '2rem'
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledColumn, {
-        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          fontSize: "xs",
-          fontWeight: "bold",
-          children: title
-        }), content]
-      }), variant === 'closable' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledCloseIcon, {
-        onClick: function onClick() {
-          return onClose && onClose();
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          name: "x"
-        })
-      })]
-    })
+      "data-variant": variant,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: icon,
+        size: variant === 'outlined' ? '1.375rem' : '2rem'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+      direction: "column",
+      justifyContent: "center",
+      style: {
+        flex: 1
+      },
+      spacing: "0.5rem",
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        fontSize: "xs",
+        fontWeight: "bold",
+        children: title
+      }), content]
+    }), (variant === 'closable' || closable) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: onClose,
+      variant: "ghost",
+      style: {
+        padding: '0'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "x",
+        color: "neutral.black"
+      })
+    })]
   });
 };
 var _default = Alert;

package/dist/components/Alert/styles.d.ts

@@ -1,25 +1,11 @@
-/// <reference types="react" />
-import { IStyledAlert } from './types';
-export declare const StyledAlertContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledAlertWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert & {
-    havePadding: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledColumn: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCloseIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyledAlert } from './types';
+export declare const StyledAlertWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Alert/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,oBAAoB;;;yGAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;wHAsB7B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;iBAA4C,OAAO;yGA0B3E,CAAC;AAEH,eAAO,MAAM,YAAY;;;yGASxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAS3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;;wHAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa;;;wHAyBxB,CAAC"}

package/dist/components/Alert/styles.js

@@ -3,30 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledIconBox = exports.StyledColumn = exports.StyledCloseIcon = exports.StyledAlertWrapper = exports.StyledAlertContainer = void 0;
+exports.StyledIconBox = exports.StyledAlertWrapper = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colorCheck = require("../../utils/colorCheck");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var StyledAlertContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n"])));
-exports.StyledAlertContainer = StyledAlertContainer;
-var StyledAlertWrapper = _styled.default.div(function (props) {
-  var secondaryColor = props.type !== 'default' && props.type ? props.theme.colorMode === 'dark' ? props.theme.colors[props.type].dark : props.theme.colors[props.type].blurred : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : props.theme.colors.neutral.neutral1;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: ", ";\n    padding: 1rem;\n    gap: 1rem;\n    border-radius: 8px;\n    width: 100%;\n    background-color: ", ";\n    border: ", ";\n    color: ", ";\n    max-width: ", ";\n  "])), props.haveContent ? 'flex-start' : 'center', props.variant === 'outlined' ? 'transparent' : secondaryColor, props.variant === 'outlined' ? "2px solid ".concat(secondaryColor, ";") : '', props.variant === 'outlined' ? props.theme.colors.neutral.neutral4 : '', props.maxWidth ? "".concat(props.maxWidth, "px") : '');
+var StyledAlertWrapper = _styled.default.div(function (_ref) {
+  var theme = _ref.theme,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    maxWidth = _ref.maxWidth;
+  var highlightBackground = type !== 'default' ? theme.colors[type].default : theme.colors.neutral.neutral3;
+  var secondaryColor = type !== 'default' ? theme.colors[type].blurred : theme.colors.neutral.neutral1;
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: start;\n      padding: 1rem;\n      gap: 1rem;\n      border-radius: 0.5rem;\n      width: 100%;\n      max-width: ", ";\n      background-color: ", ";\n\n      &[data-variant='outlined'] {\n        background-color: transparent;\n        border: 2px solid ", ";\n        color: ", ";\n      }\n\n      &[data-variant='highlighted'] {\n        align-items: center;\n        background: ", "08;\n        border-left: 4px solid ", ";\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n      }\n    "])), maxWidth ? "".concat(maxWidth, "px") : '', secondaryColor, secondaryColor, theme.colors.neutral.neutral4, highlightBackground, highlightBackground, theme.colors.neutral.black, highlightBackground);
 });
 exports.StyledAlertWrapper = StyledAlertWrapper;
-var StyledIconBox = _styled.default.div(function (props) {
-  var primaryColor = props.type !== 'default' && props.type ? props.theme.colors[props.type].default : props.theme.colors.neutral.neutral1;
-  var secondaryColor = props.type !== 'default' && props.type ? (0, _colorCheck.parseHexColorToRgba)(props.theme.colors[props.type].default, 0.2) : props.theme.colors.neutral.neutral1;
-  var iconColor = props.type !== 'default' ? primaryColor : props.theme.colors.neutral.neutral3;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    padding: ", ";\n    border-radius: 9999999px;\n    background-color: ", ";\n\n    & svg {\n      color: ", ";\n    }\n  "])), props.havePadding ? '10px' : '0', props.variant === 'outlined' ? secondaryColor : '', iconColor);
+var StyledIconBox = _styled.default.div(function (_ref2) {
+  var _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'default' : _ref2$type,
+    theme = _ref2.theme;
+  var primaryColor = type !== 'default' ? theme.colors[type].default : theme.colors.neutral.neutral1;
+  var secondaryColor = type !== 'default' ? (0, _colorCheck.parseHexColorToRgba)(primaryColor, 0.2) : theme.colors.neutral.neutral1;
+  var iconColor = type !== 'default' ? primaryColor : theme.colors.neutral.neutral3;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border-radius: 50%;\n\n    [data-variant='highlighted'] {\n      padding: 0.625rem;\n      background: ", ";\n    }\n\n    & svg {\n      color: ", ";\n    }\n  "])), secondaryColor, iconColor);
 });
-exports.StyledIconBox = StyledIconBox;
-var StyledColumn = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n\n  & p {\n    margin: 0;\n  }\n"])));
-exports.StyledColumn = StyledColumn;
-var StyledCloseIcon = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: ", ";\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
-});
-exports.StyledCloseIcon = StyledCloseIcon;
+exports.StyledIconBox = StyledIconBox;

package/dist/components/Alert/types.d.ts

@@ -1,45 +1,43 @@
-import { ReactNode } from 'react';
-import { ExtendThemeProps } from 'src';
-import { IconName } from '../Icon/types';
-export type AlertProps = {
-    /**
-     * The icon of the alert.
-     * @default 'info'
-     */
-    icon?: IconName;
-    /**
-     * The variantion of the alert component style
-     * @default 'filled'
-     */
-    variant?: 'outlined' | 'filled' | 'closable';
-    /**
-     * The type of the alert component
-     * @default 'default'
-     */
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
-    /**
-     * The message of the alert
-     */
-    content?: ReactNode;
-    /**
-     * The title of the alert
-     */
-    title?: string;
-    /**
-     * Sets a max width to alert
-     */
-    maxWidth?: number;
-    /**
-     * Provides a callback that is called when the close button is clicked.
-     * @description This props are available when variant is set to 'closable'
-     */
-    onClose?: () => void;
-};
-export type IStyledAlert = {
-    maxWidth?: number;
-    variant?: 'outlined' | 'filled' | 'closable';
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
-    theme?: ExtendThemeProps;
-    haveContent?: boolean;
-};
+import { ReactNode } from 'react';
+import { IconName } from '../Icon/types';
+export type AlertTypes = 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
+export type AlertProps = {
+    /**
+     * The icon of the alert.
+     * @default 'info'
+     */
+    icon?: IconName;
+    /**
+     * The variantion of the alert component style
+     * @default 'filled'
+     */
+    variant?: 'outlined' | 'filled' | 'closable' | 'highlighted';
+    /**
+     * The type of the alert component
+     * @default 'default'
+     */
+    type?: AlertTypes;
+    /**
+     * The message of the alert
+     */
+    content?: ReactNode;
+    /**
+     * The title of the alert
+     */
+    title?: string;
+    /**
+     * Sets a max width to alert
+     */
+    maxWidth?: number;
+    /**
+     * Provides a callback that is called when the close button is clicked.
+     * @description This props are available when variant is set to 'closable'
+     */
+    onClose?: () => void;
+    closable?: boolean;
+};
+export type IStyledAlert = {
+    maxWidth?: number;
+    type?: AlertTypes;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Alert/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;AAElG,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC;IAC7D;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC"}

package/dist/components/Avatar/avatar.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=avatar.test.d.ts.map

package/dist/components/Avatar/index.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IAvatarComponent } from './types';
-declare const Avatar: FC<IAvatarComponent>;
-export default Avatar;
+import { FC } from 'react';
+import { IAvatarComponent } from './types';
+declare const Avatar: FC<IAvatarComponent>;
+export default Avatar;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/styles.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-import { GenericAvatarStyled } from './types';
-export declare const AvatarWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarImage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const AvatarInitials: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarInformation: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarSkeleton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled & {
-    circle?: boolean | undefined;
-    description?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { GenericAvatarStyled } from './types';
+export declare const AvatarWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const AvatarInitials: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarInformation: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled & {
+    circle?: boolean | undefined;
+    description?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Avatar/types.d.ts

@@ -1,16 +1,16 @@
-import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
-export type IAvatarComponent = {
-    name: string;
-    src?: string;
-    information?: string;
-    boxColor?: GlobalColorsProps | (string & {});
-    size?: 'small' | 'medium' | 'large';
-    isLoading?: boolean;
-};
-export type GenericAvatarStyled = {
-    boxColor?: GlobalColorsProps | (string & {});
-    theme?: {
-        size: 'small' | 'medium' | 'large';
-    } & ExtendThemeProps;
-};
+import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
+export type IAvatarComponent = {
+    name: string;
+    src?: string;
+    information?: string;
+    boxColor?: GlobalColorsProps | (string & {});
+    size?: 'small' | 'medium' | 'large';
+    isLoading?: boolean;
+};
+export type GenericAvatarStyled = {
+    boxColor?: GlobalColorsProps | (string & {});
+    theme?: {
+        size: 'small' | 'medium' | 'large';
+    } & ExtendThemeProps;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Badge/badge.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=badge.test.d.ts.map

package/dist/components/Badge/index.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IBadgeProps } from './types';
-declare const Badge: FC<IBadgeProps>;
-export default Badge;
+import { FC } from 'react';
+import { IBadgeProps } from './types';
+declare const Badge: FC<IBadgeProps>;
+export default Badge;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.js

@@ -16,11 +16,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Badge = function Badge(_ref) {
   var type = _ref.type,
     isLoading = _ref.isLoading,
-    children = _ref.children;
+    children = _ref.children,
+    customColor = _ref.color;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.BadgeContainer, {
     children: !isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.BadgeCircle, {
-        type: type
+        type: type,
+        color: customColor
       }), children]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
       spacing: "2",

package/dist/components/Badge/styles.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { BadgeStyledProps } from './types';
-export declare const BadgeContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BadgeCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & BadgeStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BadgeSkeleton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    circle?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { BadgeStyledProps } from './types';
+export declare const BadgeContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & BadgeStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    circle?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Badge/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;4HAgBtB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;yGAoCzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;4HAoBtB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;yGAoCzB,CAAC"}

package/dist/components/Badge/styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BadgeSkeleton = exports.BadgeContainer = exports.BadgeCircle = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colorCheck = require("../../utils/colorCheck");
 var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -12,9 +13,12 @@ var BadgeContainer = _styled.default.div(_templateObject || (_templateObject = _
 exports.BadgeContainer = BadgeContainer;
 var BadgeCircle = _styled.default.div(function (props) {
   var theme = props.theme,
-    type = props.type;
-  var currentColor = !theme.colors[type] || type === 'neutral' ? theme.colors.neutral.neutral1 : theme.colors[type].default;
-  return "\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 3px ".concat(currentColor, ";\n    margin-right: 8px;\n    flex-shrink: 0;\n  ");
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'neutral' : _props$type,
+    customColor = props.color;
+  var themeColor = !theme.colors[type] || type === 'neutral' ? theme.colors.neutral.neutral1 : theme.colors[type].default;
+  var color = customColor ? (0, _colorCheck.stripThemeColors)(customColor, theme.colors) || customColor : themeColor;
+  return "\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 3px ".concat(color, ";\n    margin-right: 8px;\n    flex-shrink: 0;\n  ");
 });
 exports.BadgeCircle = BadgeCircle;
 var BadgeSkeleton = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: 10px;\n  display: block;\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n\n  &::after {\n    content: '';\n    inset: 0px;\n    width: 100%;\n    height: 100%;\n    display: block;\n    animation: 1.6s linear 0.5s infinite normal none running move;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ", ",\n      transparent\n    );\n  }\n\n  @keyframes move {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n"])), function (props) {

package/dist/components/Badge/types.d.ts

@@ -1,12 +1,13 @@
-import { ReactNode } from 'react';
-type BadgeTypes = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'informative' | 'success' | 'success_secondary' | 'warning' | 'warning_secondary' | 'error' | 'critical';
-export type IBadgeProps = {
-    type: BadgeTypes;
-    isLoading?: boolean;
-    children: ReactNode;
-};
-export type BadgeStyledProps = {
-    type: BadgeTypes;
-};
-export {};
+import { ReactNode } from 'react';
+import { GlobalColorsProps } from '../../shared/theme';
+type BadgeTypes = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'informative' | 'success' | 'success_secondary' | 'warning' | 'warning_secondary' | 'error' | 'critical';
+export type BadgeStyledProps = {
+    type?: BadgeTypes;
+    color?: GlobalColorsProps | (string & {});
+};
+export type IBadgeProps = BadgeStyledProps & {
+    isLoading?: boolean;
+    children: ReactNode;
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,UAAU,GACX,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,aAAa,GACb,SAAS,GACT,mBAAmB,GACnB,SAAS,GACT,mBAAmB,GACnB,OAAO,GACP,UAAU,CAAC;AAEf,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,KAAK,UAAU,GACX,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,aAAa,GACb,SAAS,GACT,mBAAmB,GACnB,SAAS,GACT,mBAAmB,GACnB,OAAO,GACP,UAAU,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/dist/components/Button/Button.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=Button.test.d.ts.map

package/dist/components/Button/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
-import { ButtonProps } from './types';
-export default function Button({ children, leftIcon, rightIcon, variant, bgColor, size, fullWidth, textColor, type, iconColor, ...props }: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonProps } from './types';
+export default function Button({ children, leftIcon, rightIcon, variant, bgColor, size, fullWidth, textColor, type, iconColor, ...props }: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Button/styles.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { ButtonProps } from './types';
-export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const IconContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { ButtonProps } from './types';
+export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map