@pedidopago/ui 1.6.12 → 1.7.0-0

package/dist/components/ColorPicker/components/ColorPickerBox.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IColorPickerBox } from '../types';
-declare const ColorPickerBox: import("react").MemoExoticComponent<({ hsva, onChange }: IColorPickerBox) => JSX.Element>;
-export default ColorPickerBox;
+/// <reference types="react" />
+import { IColorPickerBox } from '../types';
+declare const ColorPickerBox: import("react").MemoExoticComponent<({ hsva, onChange }: IColorPickerBox) => JSX.Element>;
+export default ColorPickerBox;
 //# sourceMappingURL=ColorPickerBox.d.ts.map

package/dist/components/ColorPicker/components/ColorPointer.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IColorPointer } from '../types';
-declare const ColorPointer: ({ top, left, hsva }: IColorPointer) => JSX.Element;
-export default ColorPointer;
+/// <reference types="react" />
+import { IColorPointer } from '../types';
+declare const ColorPointer: ({ top, left, hsva }: IColorPointer) => JSX.Element;
+export default ColorPointer;
 //# sourceMappingURL=ColorPointer.d.ts.map

package/dist/components/ColorPicker/components/ColorSelector.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IColorSelector } from '../types';
-declare const ColorSelector: import("react").MemoExoticComponent<({ onMove, ...rest }: IColorSelector) => JSX.Element>;
-export default ColorSelector;
+/// <reference types="react" />
+import { IColorSelector } from '../types';
+declare const ColorSelector: import("react").MemoExoticComponent<({ onMove, ...rest }: IColorSelector) => JSX.Element>;
+export default ColorSelector;
 //# sourceMappingURL=ColorSelector.d.ts.map

package/dist/components/ColorPicker/hooks/useCachedCallback.d.ts

@@ -1,2 +1,2 @@
-export declare const useCachedCallback: <T>(callback?: ((value: T) => void) | undefined) => (value: T) => void;
+export declare const useCachedCallback: <T>(callback?: ((value: T) => void) | undefined) => (value: T) => void;
 //# sourceMappingURL=useCachedCallback.d.ts.map

package/dist/components/ColorPicker/hooks/useHsva.d.ts

@@ -1,3 +1,3 @@
-import { IHsvaObject } from './../types';
-export declare const useHsva: (color: string, onChange?: ((color: string) => void) | undefined) => [IHsvaObject, (hsva: IHsvaObject) => void];
+import { IHsvaObject } from './../types';
+export declare const useHsva: (color: string, onChange?: ((color: string) => void) | undefined) => [IHsvaObject, (hsva: IHsvaObject) => void];
 //# sourceMappingURL=useHsva.d.ts.map

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IColorPicker } from './types';
-declare const ColorPicker: ({ onChange, onSave, onCancel, initialColor }: IColorPicker) => JSX.Element;
-export default ColorPicker;
+/// <reference types="react" />
+import { IColorPicker } from './types';
+declare const ColorPicker: ({ onChange, onSave, onCancel, initialColor }: IColorPicker) => JSX.Element;
+export default ColorPicker;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,45 +1,45 @@
-/// <reference types="react" />
-import { GenericStyledProps } from '../../@types';
-export declare const ColorPickerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ColorSaturationWrapper: 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 ColorPickerContainerWrapper: 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 ColorPointerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ColorHueWrapper: 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 ColorHueCircle: 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 ColorHueSliderContainer: 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 ColorSelectorWrapper: 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 ColorPickerButtonsWrapper: 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 ColorPickerButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    bgTransparent?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from '../../@types';
+export declare const ColorPickerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColorSaturationWrapper: 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 ColorPickerContainerWrapper: 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 ColorPointerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColorHueWrapper: 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 ColorHueCircle: 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 ColorHueSliderContainer: 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 ColorSelectorWrapper: 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 ColorPickerButtonsWrapper: 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 ColorPickerButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    bgTransparent?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,74 +1,74 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { InputProps } from '../Input/types';
-export type IOutputColorMode = 'rgb' | 'hsl' | 'hex' | 'rgba' | 'hsla' | 'unknown';
-export type IHsvaObject = {
-    h: number;
-    s: number;
-    v: number;
-    a: number;
-};
-export type IColorPicker = {
-    /**
-     * Callback function that is called when the cancel button is clicked.
-     */
-    onCancel: () => void;
-    /**
-     * Callback function that is called when the color is changed.
-     */
-    onChange?: (color: string) => void;
-    /**
-     * Callback function that is called when the save button is clicked.
-     */
-    onSave: (color: string) => void;
-    /**
-     * Set the initial color of the picker.
-     */
-    initialColor?: string;
-};
-export type IColorPickerBox = {
-    hsva: IHsvaObject;
-    onChange: (hsva: IHsvaObject) => void;
-};
-export type IColorPointer = {
-    top?: number;
-    left: number;
-    hsva: IHsvaObject;
-};
-export type IColorSaturation = {
-    onMove: (position: {
-        x: number;
-        y: number;
-    }) => void;
-    color: {
-        h: number;
-        s: number;
-        v: number;
-        a: number;
-    };
-};
-export type IColorSelector = {
-    onMove: (position: {
-        x: number;
-        y: number;
-    }) => void;
-    children: ReactNode;
-};
-export type IColorInput = {
-    hsva: IHsvaObject;
-    colorMode: IOutputColorMode;
-    onChange: (hsva: IHsvaObject) => void;
-    inputAlert: Pick<InputProps, 'alert'>;
-    setInputAlert: Dispatch<SetStateAction<Pick<InputProps, 'alert'>>>;
-};
-export type IButtonsProps = {
-    onCancel: () => void;
-    onSave: (color: string) => void;
-    color: string;
-    outputColorMode: IOutputColorMode;
-};
-export type IColorHueSlider = IColorSelector;
-export type IColorHue = {
-    onChange: (hue: number) => void;
-    hsva: IHsvaObject;
-};
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { InputProps } from '../Input/types';
+export type IOutputColorMode = 'rgb' | 'hsl' | 'hex' | 'rgba' | 'hsla' | 'unknown';
+export type IHsvaObject = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export type IColorPicker = {
+    /**
+     * Callback function that is called when the cancel button is clicked.
+     */
+    onCancel: () => void;
+    /**
+     * Callback function that is called when the color is changed.
+     */
+    onChange?: (color: string) => void;
+    /**
+     * Callback function that is called when the save button is clicked.
+     */
+    onSave: (color: string) => void;
+    /**
+     * Set the initial color of the picker.
+     */
+    initialColor?: string;
+};
+export type IColorPickerBox = {
+    hsva: IHsvaObject;
+    onChange: (hsva: IHsvaObject) => void;
+};
+export type IColorPointer = {
+    top?: number;
+    left: number;
+    hsva: IHsvaObject;
+};
+export type IColorSaturation = {
+    onMove: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    color: {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    };
+};
+export type IColorSelector = {
+    onMove: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    children: ReactNode;
+};
+export type IColorInput = {
+    hsva: IHsvaObject;
+    colorMode: IOutputColorMode;
+    onChange: (hsva: IHsvaObject) => void;
+    inputAlert: Pick<InputProps, 'alert'>;
+    setInputAlert: Dispatch<SetStateAction<Pick<InputProps, 'alert'>>>;
+};
+export type IButtonsProps = {
+    onCancel: () => void;
+    onSave: (color: string) => void;
+    color: string;
+    outputColorMode: IOutputColorMode;
+};
+export type IColorHueSlider = IColorSelector;
+export type IColorHue = {
+    onChange: (hue: number) => void;
+    hsva: IHsvaObject;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ColorPicker/utils/checkers.d.ts

@@ -1,8 +1,8 @@
-export declare const isRgba: (color: string) => boolean;
-export declare const isHex: (color: string) => boolean;
-export declare const isHsl: (color: string) => boolean;
-export declare const isHsla: (color: string) => boolean;
-export declare const isRgb: (color: string) => boolean;
-export declare const isHsva: (color: string) => boolean;
-export declare const isAValidColor: (color: string) => boolean;
+export declare const isRgba: (color: string) => boolean;
+export declare const isHex: (color: string) => boolean;
+export declare const isHsl: (color: string) => boolean;
+export declare const isHsla: (color: string) => boolean;
+export declare const isRgb: (color: string) => boolean;
+export declare const isHsva: (color: string) => boolean;
+export declare const isAValidColor: (color: string) => boolean;
 //# sourceMappingURL=checkers.d.ts.map

package/dist/components/ColorPicker/utils/conversors.d.ts

@@ -1,61 +1,61 @@
-import { IHsvaObject } from './../types';
-export declare const hexStringToRgba: (hex: string) => {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
-export declare const hsvaToRgba: (hsva: IHsvaObject) => Record<string, number>;
-export declare const hsvaToRgbaString: (hsva: IHsvaObject) => string;
-export declare const hsvaToHslaString: (hsva: IHsvaObject) => string;
-export declare const hsvaToHsla: ({ h, s, v, a, }: IHsvaObject) => {
-    h: number;
-    s: number;
-    l: number;
-    a: number;
-};
-export declare const hslaToHsva: ({ h, s, l, a, }: {
-    h: number;
-    s: number;
-    l: number;
-    a: number;
-}) => IHsvaObject;
-export declare const hslaStringToHsva: (hsla: string) => IHsvaObject;
-export declare const hslStringToHsva: (hsl: string) => IHsvaObject;
-export declare const rgbaToHsva: (rgba: Record<string, number>) => {
-    h: number;
-    s: number;
-    v: number;
-    a: number;
-};
-export declare const rgbaStringToHsva: (rgba: string) => {
-    h: number;
-    s: number;
-    v: number;
-    a: number;
-};
-export declare const rgbaStringToRgba: (rgba: string) => {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
-export declare const rgbaStringToHsla: (rgba: string) => {
-    h: number;
-    s: number;
-    l: number;
-    a: number;
-};
-export declare const rgbaStringToHslString: (rgba: string) => string;
-export declare const rgbaStringToHslaString: (rgba: string) => string;
-export declare const rgbaToRgbaString: (rgba: Record<string, number>) => string;
-export declare const rgbaToHex: (rgba: Record<string, number>) => string;
-export declare const rgbaStringToHex: (rgba: string) => string;
-export declare const rgbaStringToRgbString: (rgba: string) => string;
-export declare const rgbStringToRgba: (rgb: string) => {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
+import { IHsvaObject } from './../types';
+export declare const hexStringToRgba: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare const hsvaToRgba: (hsva: IHsvaObject) => Record<string, number>;
+export declare const hsvaToRgbaString: (hsva: IHsvaObject) => string;
+export declare const hsvaToHslaString: (hsva: IHsvaObject) => string;
+export declare const hsvaToHsla: ({ h, s, v, a, }: IHsvaObject) => {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+export declare const hslaToHsva: ({ h, s, l, a, }: {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}) => IHsvaObject;
+export declare const hslaStringToHsva: (hsla: string) => IHsvaObject;
+export declare const hslStringToHsva: (hsl: string) => IHsvaObject;
+export declare const rgbaToHsva: (rgba: Record<string, number>) => {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export declare const rgbaStringToHsva: (rgba: string) => {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export declare const rgbaStringToRgba: (rgba: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare const rgbaStringToHsla: (rgba: string) => {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+export declare const rgbaStringToHslString: (rgba: string) => string;
+export declare const rgbaStringToHslaString: (rgba: string) => string;
+export declare const rgbaToRgbaString: (rgba: Record<string, number>) => string;
+export declare const rgbaToHex: (rgba: Record<string, number>) => string;
+export declare const rgbaStringToHex: (rgba: string) => string;
+export declare const rgbaStringToRgbString: (rgba: string) => string;
+export declare const rgbStringToRgba: (rgb: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
 //# sourceMappingURL=conversors.d.ts.map

package/dist/components/ColorPicker/utils/parsers.d.ts

@@ -1,28 +1,28 @@
-import { IHsvaObject, IOutputColorMode } from './../types';
-/**
- * This function converts a string color to a hsva color object
- * @param color : Color to convert to hsva;
- * @returns : hsva color object
- */
-export declare const colorToHsva: (color: string) => IHsvaObject;
-/**
- * This function gets the color mode from the color string
- * @param color : Color to check your output mode
- * @returns : Color mode
- */
-export declare const colorMode: (color: string) => IOutputColorMode;
-/**
- * This function converts a hsva color object to a string color
- * @param hsva : hsva color object
- * @param colorMode : Color output mode
- * @returns : Color string
- */
-export declare const colorFromHsva: (hsva: IHsvaObject, colorMode: IOutputColorMode | 'unknown') => string;
-/**
- * This function converts a color string to output color mode
- * @param color : Color string;
- * @param outputMode : Color output mode;
- * @returns : Color string
- */
-export declare const colorToOutputMode: (color: string, outputMode: IOutputColorMode) => string;
+import { IHsvaObject, IOutputColorMode } from './../types';
+/**
+ * This function converts a string color to a hsva color object
+ * @param color : Color to convert to hsva;
+ * @returns : hsva color object
+ */
+export declare const colorToHsva: (color: string) => IHsvaObject;
+/**
+ * This function gets the color mode from the color string
+ * @param color : Color to check your output mode
+ * @returns : Color mode
+ */
+export declare const colorMode: (color: string) => IOutputColorMode;
+/**
+ * This function converts a hsva color object to a string color
+ * @param hsva : hsva color object
+ * @param colorMode : Color output mode
+ * @returns : Color string
+ */
+export declare const colorFromHsva: (hsva: IHsvaObject, colorMode: IOutputColorMode | 'unknown') => string;
+/**
+ * This function converts a color string to output color mode
+ * @param color : Color string;
+ * @param outputMode : Color output mode;
+ * @returns : Color string
+ */
+export declare const colorToOutputMode: (color: string, outputMode: IOutputColorMode) => string;
 //# sourceMappingURL=parsers.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ComposeIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+BrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/ComposeIcon/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Componentes
+// Hooks
+// Styles
+// Types
+var ComposeIcon = function ComposeIcon(_ref) {
+  var backgroundIcon = _ref.backgroundIcon,
+    foregroundIcon = _ref.foregroundIcon,
+    _ref$bubblePosition = _ref.bubblePosition,
+    bubblePosition = _ref$bubblePosition === void 0 ? 'bottom-right' : _ref$bubblePosition,
+    bubbleColor = _ref.bubbleColor,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 150 : _ref$size;
+  var iconSizeOffset = 0.26;
+  var backgroundIconComponent = /*#__PURE__*/(0, _react.isValidElement)(backgroundIcon) && /*#__PURE__*/(0, _react.cloneElement)(backgroundIcon, _objectSpread(_objectSpread({}, backgroundIcon === null || backgroundIcon === void 0 ? void 0 : backgroundIcon.props), {}, {
+    size: size
+  }));
+  var foregroundIconComponent = /*#__PURE__*/(0, _react.isValidElement)(foregroundIcon) && /*#__PURE__*/(0, _react.cloneElement)(foregroundIcon, _objectSpread(_objectSpread({}, foregroundIcon === null || foregroundIcon === void 0 ? void 0 : foregroundIcon.props), {}, {
+    size: size * iconSizeOffset
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ComposeIconContainer, {
+    "data-testid": "composeIcon",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StatusBubbleContainer, {
+      bubblePosition: bubblePosition,
+      bubbleColor: bubbleColor,
+      size: size,
+      children: foregroundIconComponent
+    }), backgroundIconComponent]
+  });
+};
+var _default = ComposeIcon;
+exports.default = _default;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComposeIconProps } from './types';
+export declare const ComposeIconContainer: 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 StatusBubbleContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<ComposeIconProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComposeIcon/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;qIAmEjC,CAAC"}

package/dist/components/ComposeIcon/styles.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusBubbleContainer = exports.ComposeIconContainer = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _getColorValue = require("../../utils/getColorValue");
+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 ComposeIconContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n\n  width: fit-content;\n  height: fit-content;\n"])));
+exports.ComposeIconContainer = ComposeIconContainer;
+var StatusBubbleContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n\n  padding: 4px;\n\n  background: ", ";\n\n  border-radius: 50%;\n  border: ", ";\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px;\n\n  ", "\n"])), function (_ref) {
+  var bubbleColor = _ref.bubbleColor,
+    theme = _ref.theme;
+  return bubbleColor ? (0, _getColorValue.getColorValue)(bubbleColor, theme) : 'white';
+}, function (_ref2) {
+  var size = _ref2.size;
+  return "".concat(0.03 * size, "px solid white;");
+}, function (_ref3) {
+  var iconPosition = _ref3.bubblePosition,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 200 : _ref3$size;
+  switch (iconPosition) {
+    case 'center':
+      {
+        var topOffset = 0.175;
+        var leftOffset = 0.31;
+        return "\n        top: ".concat(size * topOffset, "px;\n        left: ").concat(size * leftOffset, "px;\n        ");
+      }
+    case 'top-left':
+      {
+        var _topOffset = 0.15;
+        var _leftOffset = 0.05;
+        return "\n        top: ".concat(size * _topOffset, "px;\n        left: ").concat(size * _leftOffset, "px;\n        ");
+      }
+    case 'top-right':
+      {
+        var _topOffset2 = 0.15;
+        var _leftOffset2 = 0.6;
+        return "\n        top: ".concat(size * _topOffset2, "px;\n        left: ").concat(size * _leftOffset2, "px;\n        ");
+      }
+    case 'bottom-left':
+      {
+        var _topOffset3 = 0.6;
+        var _leftOffset3 = 0.05;
+        return "\n        top: ".concat(size * _topOffset3, "px;\n        left: ").concat(size * _leftOffset3, "px;\n        ");
+      }
+    case 'bottom-right':
+      {
+        var _topOffset4 = 0.6;
+        var _leftOffset4 = 0.6;
+        return "\n        top: ".concat(size * _topOffset4, "px;\n        left: ").concat(size * _leftOffset4, "px;\n          ");
+      }
+    default:
+      {
+        var _topOffset5 = 0.6;
+        var _leftOffset5 = 0.6;
+        return "\n        top: ".concat(size * _topOffset5, "px;\n        left: ").concat(size * _leftOffset5, "px;\n          ");
+      }
+  }
+});
+exports.StatusBubbleContainer = StatusBubbleContainer;