@pedidopago/ui 1.7.20 → 1.7.22

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAoBnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAGN,OAAO;2GASjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qHA2BjB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,OAAO;;;;;;aAGT,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAgBhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAGN,OAAO;2GAQjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qHA0BjB,CAAC"}

package/dist/components/Tag/styles.js

@@ -13,21 +13,22 @@ var Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedT
   var theme = _ref.theme,
     fillColor = _ref.fillColor,
     overtoneHue = _ref.overtoneHue,
-    size = _ref.size;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", ";\n    background-color: ", ";\n    color: ", ";\n    border-radius: 6px;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    height: fit-content;\n    cursor: pointer;\n  "])), size, fillColor || (theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1), overtoneHue || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5));
+    padding = _ref.padding,
+    variant = _ref.variant;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", ";\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    height: fit-content;\n    cursor: pointer;\n  "])), padding, fillColor || theme.colors.neutral.neutral1, overtoneHue || theme.colors.neutral.neutral5, variant === 'square' ? '6px' : '80px');
 });
 exports.Wrapper = Wrapper;
 var Text = _styled.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme,
     overtoneHue = _ref2.overtoneHue,
     isLarge = _ref2.isLarge;
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", ";\n    line-height: 1;\n    margin-right: 10px;\n  "])), overtoneHue || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5), isLarge ? '16px' : theme.fontSizes.xxs);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", ";\n    line-height: 1;\n    margin-right: 10px;\n  "])), overtoneHue || theme.colors.neutral.neutral5, isLarge ? '16px' : theme.fontSizes.xxs);
 });
 exports.Text = Text;
 var Close = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme,
     overtoneHue = _ref3.overtoneHue,
     fillColor = _ref3.fillColor;
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background: transparent;\n    color: ", ";\n    outline: 0;\n    border: none;\n    border-radius: 50%;\n    padding: 10px 0;\n    padding: 2px;\n    ", "\n  "])), overtoneHue || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5), fillColor ? (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          &:active {\n            background-color: ", ";\n            filter: saturate(0.6);\n          }\n        "])), fillColor) : (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          &:active {\n            background-color: ", ";\n          }\n        "])), theme.colors.neutral.neutral2));
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background: transparent;\n    color: ", ";\n    outline: 0;\n    border: none;\n    border-radius: 50%;\n    padding: 10px 0;\n    padding: 2px;\n    ", "\n  "])), overtoneHue || theme.colors.neutral.neutral5, fillColor ? (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          &:active {\n            background-color: ", ";\n            filter: saturate(0.6);\n          }\n        "])), fillColor) : (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          &:active {\n            background-color: ", ";\n          }\n        "])), theme.colors.neutral.neutral2));
 });
 exports.Close = Close;

package/dist/components/Tag/tag.test.d.ts

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

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

@@ -1,10 +1,11 @@
-import { IconName } from '../Icon/types';
-export interface ITagProps {
-    label: string;
-    fillColor?: string;
-    leftIcon?: IconName;
-    rightIcon?: IconName;
-    size?: 'sm' | 'md' | 'lg';
-    onClick?: () => void;
-}
+import { IconName } from '../Icon/types';
+export interface ITagProps {
+    label: string;
+    fillColor?: string;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    size?: 'sm' | 'md' | 'lg';
+    onClick?: () => void;
+    variant?: 'square' | 'round';
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B"}

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ITextAreaInputProps } from './types';
-declare const TextAreaInput: import("react").ForwardRefExoticComponent<ITextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-export default TextAreaInput;
+/// <reference types="react" />
+import { ITextAreaInputProps } from './types';
+declare const TextAreaInput: import("react").ForwardRefExoticComponent<ITextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextAreaInput;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { IStyledTextAreaInput } from './types';
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Label: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const TextArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
-export declare const HelperText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { IStyledTextAreaInput } from './types';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const TextArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
+export declare const HelperText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextAreaInput/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,OAAO;;;gIAOnB,CAAC;AAEF,eAAO,MAAM,KAAK;;;yIAiBjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;kJA8IpB,CAAC;AAEF,eAAO,MAAM,UAAU;;;kIAKtB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextAreaInput/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,OAAO;;;gIAOnB,CAAC;AAEF,eAAO,MAAM,KAAK;;;yIAiBjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;kJAmGpB,CAAC;AAEF,eAAO,MAAM,UAAU;;;kIAKtB,CAAC"}

package/dist/components/TextAreaInput/styles.js

@@ -24,21 +24,18 @@ var TextArea = _styled.default.textarea(_templateObject5 || (_templateObject5 =
   var theme = _ref3.theme,
     alert = _ref3.alert,
     isInvalid = _ref3.isInvalid;
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: ", ";\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n    color: ", ";\n    line-height: 1.4;\n    background-color: transparent;\n    font-family: inherit;\n    font-size: ", ";\n    font-weight: ", ";\n    outline: none;\n    resize: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:focus {\n      color: ", ";\n      border-color: ", ";\n      background-color: ", ";\n      ", "\n    }\n\n    &:hover + label {\n      color: ", ";\n    }\n\n    &:focus + label {\n      color: ", ";\n    }\n\n    & + label {\n      color: ", ";\n    }\n\n    &[disabled] {\n      background-color: ", ";\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      & + label {\n        color: ", ";\n      }\n\n      &:hover {\n        border-color: ", ";\n      }\n    }\n  "])), theme.borderRadius.default, theme.colorMode === 'light' ? theme.colors.tertiary.default : theme.colors.tertiary.focus, theme.colorMode === 'light' ? theme.colors.neutral.neutral5 : theme.colors.neutral.white, theme.fontSizes.xs, theme.fontWeight['500'], theme.colorMode === 'light' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral3, theme.colorMode === 'light' ? theme.colors.neutral.black : theme.colors.neutral.neutral1, theme.colors.primary.hover, theme.colorMode === 'light' ? theme.colors.neutral.black : theme.colors.neutral.neutral1, theme.colors.primary.hover, theme.colorMode === 'light' ? theme.colors.neutral.white : theme.colors.neutral.black, !isInvalid && "\n        box-shadow: 0 0 0 2px ".concat(theme.colors.primary.disabled, ";\n      "), theme.colorMode === 'light' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral3, theme.colorMode === 'light' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral3, theme.colorMode === 'light' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral3, theme.colorMode === 'light' ? theme.colors.tertiary.disabled : theme.colors.neutral.neutral6, theme.colorMode === 'light' ? theme.colors.tertiary.hover : theme.colors.tertiary.focus, theme.colorMode === 'light' ? theme.colors.tertiary.hover : theme.colors.tertiary.focus, theme.colorMode === 'light' ? theme.colors.tertiary.default : theme.colors.tertiary.focus);
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    line-height: 1.4;\n    background-color: transparent;\n    font-family: inherit;\n    font-size: ", ";\n    font-weight: ", ";\n    outline: none;\n    resize: none;\n    transition: all ease 0.2s;\n\n    &::placeholder {\n      color: ", ";\n    }\n\n    &:not(:disabled):hover {\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:focus {\n      color: ", ";\n      border-color: ", ";\n      background-color: ", ";\n      ", "\n    }\n\n    &:hover + label {\n      color: ", ";\n    }\n\n    &:focus + label {\n      color: ", ";\n    }\n\n    & + label {\n      color: ", ";\n    }\n\n    &[disabled] {\n      background-color: ", ";\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      & + label {\n        color: ", ";\n      }\n    }\n  "])), theme.borderRadius.default, alert ? theme.colors[alert].default : theme.colors.neutral.neutral2, theme.colors.neutral.neutral5, theme.fontSizes.xs, theme.fontWeight['500'], theme.colors.neutral.neutral5, theme.colors.neutral.black, theme.colors.primary.hover, theme.colors.neutral.black, theme.colors.primary.hover, theme.colors.neutral.white, !isInvalid && "\n        box-shadow: 0 0 0 2px ".concat(theme.colors.primary.disabled, ";\n      "), theme.colors.neutral.neutral5, theme.colors.neutral.neutral5, theme.colors.neutral.neutral5, theme.colors.neutral.neutral1, theme.colors.tertiary.hover, theme.colors.neutral.neutral3);
 }, function (_ref4) {
   var isInvalid = _ref4.isInvalid,
     _ref4$alert = _ref4.alert,
     alert = _ref4$alert === void 0 ? 'informative' : _ref4$alert,
     theme = _ref4.theme;
-  return isInvalid && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      box-shadow: 0 0 0 3px ", ";\n\n      &:hover,\n      &:focus {\n        border-color: ", ";\n        background-color: ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])), theme.colors[alert].default, theme.colors[alert].blurred, theme.colors[alert].default, theme.colorMode === 'light' ? theme.colors.neutral.white : theme.colors.neutral.black, theme.colors.neutral.black);
+  return isInvalid && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      box-shadow: 0 0 0 3px ", ";\n\n      &:hover,\n      &:focus {\n        border-color: ", ";\n        background-color: ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])), theme.colors[alert].default, theme.colors[alert].blurred, theme.colors[alert].default, theme.colors.neutral.white, theme.colors.neutral.black);
 }, function (_ref5) {
   var placeholder = _ref5.placeholder,
     hasValueOnInput = _ref5.hasValueOnInput,
     theme = _ref5.theme;
-  return !placeholder && !hasValueOnInput ? (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          &:focus + label {\n            padding: 0px 8px;\n            background-color: ", ";\n            top: -6px;\n            left: 16px;\n            color: ", ";\n          }\n        "])), theme.colorMode === 'light' ? theme.colors.neutral.white : theme.colors.neutral.black, theme.colorMode === 'light' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral3) : (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          & + label {\n            padding: 0px 8px;\n            background-color: ", ";\n             top: -6px;\n            left: 16px;\n            bottom: auto;\n            color: ", ";\n        "])), theme.colorMode === 'light' ? theme.colors.neutral.white : theme.colors.neutral.black, {
-    dark: theme.colors.neutral.neutral1,
-    light: theme.colors.neutral.neutral4
-  }[theme.colorMode]);
+  return !placeholder && !hasValueOnInput ? (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          &:focus + label {\n            padding: 0px 8px;\n            background-color: ", ";\n            top: -6px;\n            left: 16px;\n            color: ", ";\n          }\n        "])), theme.colors.neutral.white, theme.colors.neutral.neutral5) : (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          & + label {\n            padding: 0px 8px;\n            background-color: ", ";\n             top: -6px;\n            left: 16px;\n            bottom: auto;\n            color: ", ";\n        "])), theme.colors.neutral.white, theme.colors.neutral.neutral4);
 });
 exports.TextArea = TextArea;
 var HelperText = _styled.default.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n  padding-left: 20px;\n"])), function (_ref6) {

package/dist/components/TextAreaInput/text-area-input.test.d.ts

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

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

@@ -1,27 +1,27 @@
-import { ChangeEventHandler, Ref, TextareaHTMLAttributes } from 'react';
-export type AlertOptions = 'informative' | 'success' | 'warning' | 'error';
-export type formRegister = {
-    onChange: ChangeEventHandler<HTMLTextAreaElement>;
-    onBlur: ChangeEventHandler;
-    ref: Ref<any>;
-    name: string;
-};
-export interface ITextAreaInputProps extends TextareaHTMLAttributes<any> {
-    isDisabled?: boolean;
-    alert?: AlertOptions;
-    isInvalid?: boolean;
-    label?: string;
-    helperText?: string;
-    maxWidth?: number | string;
-    height?: number | string;
-    formRegister?: formRegister;
-}
-export type IStyledTextAreaInput = {
-    hasValueOnInput?: boolean;
-    height?: number | string;
-    maxWidth?: number | string;
-    isLoading?: boolean;
-    isInvalid?: boolean;
-    alert?: AlertOptions;
-};
+import { ChangeEventHandler, Ref, TextareaHTMLAttributes } from 'react';
+export type AlertOptions = 'informative' | 'success' | 'warning' | 'error';
+export type formRegister = {
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur: ChangeEventHandler;
+    ref: Ref<any>;
+    name: string;
+};
+export interface ITextAreaInputProps extends TextareaHTMLAttributes<any> {
+    isDisabled?: boolean;
+    alert?: AlertOptions;
+    isInvalid?: boolean;
+    label?: string;
+    helperText?: string;
+    maxWidth?: number | string;
+    height?: number | string;
+    formRegister?: formRegister;
+}
+export type IStyledTextAreaInput = {
+    hasValueOnInput?: boolean;
+    height?: number | string;
+    maxWidth?: number | string;
+    isLoading?: boolean;
+    isInvalid?: boolean;
+    alert?: AlertOptions;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IThumbnailProps } from './types';
-export declare function Thumbnail({ src, alt, maxAllowedSize, color, isUploading, size, onSelect, getThumbImage, }: IThumbnailProps): JSX.Element;
+/// <reference types="react" />
+import { IThumbnailProps } from './types';
+export declare function Thumbnail({ src, alt, maxAllowedSize, color, isUploading, size, onSelect, getThumbImage, }: IThumbnailProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Thumbnail/index.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAc,eAAe,EAAE,MAAM,SAAS,CAAC;AAEtD,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,cAAkB,EAClB,KAAK,EACL,WAAW,EACX,IAAW,EACX,QAAQ,EACR,aAAa,GACd,EAAE,eAAe,eAyHjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Thumbnail/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAc,eAAe,EAAE,MAAM,SAAS,CAAC;AAEtD,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,cAAkB,EAClB,KAAK,EACL,WAAW,EACX,IAAW,EACX,QAAQ,EACR,aAAa,GACd,EAAE,eAAe,eAiFjB"}

package/dist/components/Thumbnail/index.js

@@ -7,8 +7,6 @@ exports.Thumbnail = Thumbnail;
 var _react = require("react");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Spinner = _interopRequireDefault(require("../Spinner"));
-var _theme = require("../../shared/theme");
-var _colorToGray = require("../../utils/colorToGray");
 var _utils = require("./utils");
 var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,8 +28,6 @@ function Thumbnail(_ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     onSelect = _ref.onSelect,
     getThumbImage = _ref.getThumbImage;
-  var _useTheme = (0, _theme.useTheme)(),
-    theme = _useTheme.theme;
   var _useState = (0, _react.useState)({
       preview: src || '',
       alt: alt || ''
@@ -47,10 +43,6 @@ function Thumbnail(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     checked = _useState6[0],
     setChecked = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    hover = _useState8[0],
-    setHover = _useState8[1];
   var wrapperSize = {
     sm: '64px',
     md: '72px',
@@ -61,28 +53,6 @@ function Thumbnail(_ref) {
     md: '58px',
     lg: '66px'
   };
-  var colors = (0, _react.useMemo)(function () {
-    var primaryColor = theme.colors.primary.default;
-    var selectedColor = color || theme.colors.secondary.default;
-    var _convertColor = (0, _colorToGray.convertColor)(color || primaryColor),
-      neutral1 = _convertColor.neutral1,
-      neutral2 = _convertColor.neutral2,
-      neutral4 = _convertColor.neutral4,
-      neutral5 = _convertColor.neutral5;
-    var grayColor = "hsl(".concat(neutral1[0], ", ", 13, "%, ", 95, "%)");
-    var darkGray = "hsl(".concat(neutral2[0], ", ").concat(neutral2[1], "%, ").concat(neutral2[2], "%)");
-    var darkerGray = "hsl(".concat(neutral4[0], ", ").concat(neutral4[1], "%, ").concat(neutral4[2], "%)");
-    var borderGray = "hsl(".concat(neutral1[0], ", ", 13, "%, ", 68, "%)");
-    var textColor = "hsl(".concat(neutral5[0], ", ").concat(neutral5[1], "%, ").concat(neutral5[2], "%)");
-    return {
-      darkerGray: darkerGray,
-      darkGray: darkGray,
-      grayColor: grayColor,
-      borderGray: borderGray,
-      textColor: textColor,
-      selectedColor: selectedColor
-    };
-  }, [color]);
   function handleChange(event) {
     var target = event.target;
     if (target.files) {
@@ -106,10 +76,6 @@ function Thumbnail(_ref) {
     children: !thumbImage.preview ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.FileWrapper, {
         size: wrapperSize[size],
-        grayColor: colors.grayColor,
-        darkGray: colors.darkGray,
-        darkerGray: colors.darkerGray,
-        borderGray: colors.borderGray,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.FileInput, {
           "aria-label": "Clique para adicionar uma foto",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
@@ -117,30 +83,16 @@ function Thumbnail(_ref) {
             onChange: handleChange
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: "plus-circle",
-            color: colors.borderGray,
+            color: 'neutral.white',
             size: 22
           })]
         })
       }), helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelpText, {
-        textColor: colors.textColor,
         children: helpText
       })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThumbWrapper, {
-      style: !checked ? {
-        borderColor: hover ? colors.borderGray : 'transparent'
-      } : undefined,
-      selectedColor: colors.selectedColor,
-      grayColor: colors.grayColor,
-      darkGray: colors.darkGray,
-      borderGray: colors.borderGray,
-      onMouseEnter: function onMouseEnter() {
-        if (thumbImage.preview) setHover(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        if (thumbImage.preview) setHover(false);
-      },
-      toBeSelected: checked,
-      isFileInput: !thumbImage.preview,
+      color: color,
+      "data-is-selected": checked,
       size: wrapperSize[size],
       onClick: function onClick() {
         if (thumbImage.preview) setChecked(true);
@@ -150,16 +102,15 @@ function Thumbnail(_ref) {
         alt: thumbImage.alt,
         sizeImage: previewImageSize[size]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectRadio, {
-        showRadio: hover || checked,
+        "data-is-selected": checked,
+        className: "thumb_select_radio",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputRadio, {
           type: "radio",
           checked: checked,
           onChange: function onChange(e) {
             setChecked(true);
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(e);
-          },
-          selectedColor: colors.selectedColor,
-          borderGray: colors.borderGray
+          }
         }), checked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           name: "check",
           color: "neutral.white",
@@ -167,7 +118,7 @@ function Thumbnail(_ref) {
         })]
       }), isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
         emptyColor: "neutral.neutral2",
-        color: colors.selectedColor
+        color: 'primary.default'
       })]
     })
   });

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

@@ -1,39 +1,39 @@
-/// <reference types="react" />
-import { IStyledThumbnail } from './types';
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FileWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const ThumbWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const PreviewImage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const SelectRadio: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FileInput: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const InputRadio: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const HelpText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { IStyledThumbnail } from './types';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ThumbWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const PreviewImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const SelectRadio: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const InputRadio: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const HelpText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Thumbnail/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,OAAO;;;4HAiBnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;UAIvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;UAiBxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;mIAMxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;4HAYvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;kHAUrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;qIAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;8HAMpB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Thumbnail/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,OAAO;;;4HAsBnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;UAIvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;UAuBxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;mIAMxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;4HAiBvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;kHAUrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;qIAkBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;8HAMpB,CAAC"}

package/dist/components/Thumbnail/styles.js

@@ -6,52 +6,42 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.ThumbWrapper = exports.SelectRadio = exports.PreviewImage = exports.InputRadio = exports.HelpText = exports.FileWrapper = exports.FileInput = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 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 Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var size = _ref.size,
-    grayColor = _ref.grayColor,
-    darkGray = _ref.darkGray,
     theme = _ref.theme;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", ";\n    height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ", ";\n    box-sizing: border-box;\n    transition: 0.2s ease;\n    position: relative;\n    border-radius: 8px;\n    overflow: hidden;\n    & div + div {\n      position: absolute;\n    }\n  "])), size, size, theme.colorMode === 'light' ? grayColor : darkGray);
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", ";\n    height: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ", ";\n    box-sizing: border-box;\n    transition: 0.2s ease;\n    position: relative;\n    border-radius: 8px;\n    overflow: hidden;\n\n    &:hover {\n      border: 2px solid ", ";\n    }\n\n    & div + div {\n      position: absolute;\n    }\n  "])), size, size, theme.colors.neutral.neutral1, theme.colors.neutral.neutral3);
 });
 exports.Wrapper = Wrapper;
 var FileWrapper = (0, _styled.default)(Wrapper)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
-  var borderGray = _ref2.borderGray,
-    theme = _ref2.theme,
-    darkerGray = _ref2.darkerGray;
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border: 2px dashed ", ";\n  "])), theme.colorMode === 'light' ? borderGray : darkerGray);
+  var theme = _ref2.theme;
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border: 2px dashed ", ";\n  "])), theme.colors.neutral.neutral6);
 });
 exports.FileWrapper = FileWrapper;
 var ThumbWrapper = (0, _styled.default)(Wrapper)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
-  var toBeSelected = _ref3.toBeSelected,
-    selectedColor = _ref3.selectedColor;
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    border: 2px solid transparent;\n    ", "\n  "])), toBeSelected && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n      &::after {\n        content: '';\n        display: block;\n        background: ", ";\n        opacity: 0.1;\n        width: 100%;\n        height: 100%;\n        position: absolute;\n      }\n    "])), selectedColor, selectedColor));
+  var theme = _ref3.theme,
+    color = _ref3.color;
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    border: 2px solid transparent;\n    &:hover .thumb_select_radio {\n      opacity: 1;\n    }\n\n    &[data-is-selected='true'] {\n      border-color: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        display: block;\n        background: ", ";\n        opacity: 0.1;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n      }\n    }\n  "])), color || theme.colors.primary.default, color || theme.colors.primary.default);
 });
 exports.ThumbWrapper = ThumbWrapper;
-var PreviewImage = _styled.default.img(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+var PreviewImage = _styled.default.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
   var sizeImage = _ref4.sizeImage;
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    display: block;\n    width: ", ";\n    height: ", ";\n  "])), sizeImage, sizeImage);
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    display: block;\n    width: ", ";\n    height: ", ";\n  "])), sizeImage, sizeImage);
 });
 exports.PreviewImage = PreviewImage;
-var SelectRadio = _styled.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
-  var showRadio = _ref5.showRadio;
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: ", ";\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    > svg {\n      position: absolute;\n    }\n  "])), !showRadio ? 'none' : 'flex');
-});
+var SelectRadio = _styled.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  opacity: 0;\n  transition: all ease 0.2s;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 8px;\n  left: 8px;\n\n  &[data-is-selected='true'] {\n    opacity: 1;\n  }\n\n  > svg {\n    position: absolute;\n  }\n"])));
 exports.SelectRadio = SelectRadio;
-var FileInput = _styled.default.label(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  justify-content: center;\n  input {\n    display: none;\n  }\n"])));
+var FileInput = _styled.default.label(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  justify-content: center;\n  input {\n    display: none;\n  }\n"])));
 exports.FileInput = FileInput;
-var InputRadio = _styled.default.input(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
-  var theme = _ref6.theme,
-    selectedColor = _ref6.selectedColor,
-    borderGray = _ref6.borderGray;
-  return (0, _react.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    margin: 0;\n    width: 20px;\n    height: 20px;\n    appearance: none;\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n    :checked {\n      background-color: ", ";\n      border-color: ", ";\n    }\n  "])), theme.colors.neutral.white, borderGray, selectedColor, selectedColor);
+var InputRadio = _styled.default.input(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    margin: 0;\n    min-width: 20px;\n    min-height: 20px;\n    appearance: none;\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n    transition: all ease 0.2s;\n\n    &:checked {\n      background-color: ", ";\n      border-color: ", ";\n    }\n  "])), theme.colors.neutral.white, theme.colors.neutral.neutral3, theme.colors.primary.default, theme.colors.primary.focus);
 });
 exports.InputRadio = InputRadio;
-var HelpText = _styled.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref7) {
-  var theme = _ref7.theme,
-    textColor = _ref7.textColor;
-  return (0, _react.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    color: ", ";\n    font-weight: ", ";\n  "])), theme.fontSizes.xs, theme.colorMode === 'light' ? textColor : theme.colors.neutral.white, theme.fontWeight[500]);
+var HelpText = _styled.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return (0, _react.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    color: ", ";\n    font-weight: ", ";\n  "])), theme.fontSizes.xs, theme.colors.neutral.white, theme.fontWeight[500]);
 });
 exports.HelpText = HelpText;

package/dist/components/Thumbnail/thumbnail.test.d.ts

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

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

@@ -1,29 +1,21 @@
-import { ChangeEvent } from 'react';
-export interface IThumbnailProps {
-    src?: string;
-    alt?: string;
-    isUploading?: boolean;
-    maxAllowedSize?: number;
-    color?: string;
-    size?: 'sm' | 'md' | 'lg';
-    onSelect?: (event: ChangeEvent<HTMLInputElement>) => void;
-    getThumbImage?: (file: File) => void;
-}
-export type ImageState = {
-    preview: string;
-    alt?: string;
-};
-export interface IStyledThumbnail {
-    selectedColor?: string;
-    darkerGray?: string;
-    darkGray?: string;
-    grayColor?: string;
-    borderGray?: string;
-    showRadio?: boolean;
-    toBeSelected?: boolean;
-    size?: string;
-    sizeImage?: string;
-    isFileInput?: boolean;
-    textColor?: string;
-}
+import { ChangeEvent } from 'react';
+export interface IThumbnailProps {
+    src?: string;
+    alt?: string;
+    isUploading?: boolean;
+    maxAllowedSize?: number;
+    color?: string;
+    size?: 'sm' | 'md' | 'lg';
+    onSelect?: (event: ChangeEvent<HTMLInputElement>) => void;
+    getThumbImage?: (file: File) => void;
+}
+export type ImageState = {
+    preview: string;
+    alt?: string;
+};
+export interface IStyledThumbnail {
+    size?: string;
+    sizeImage?: string;
+    color?: string;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Thumbnail/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Thumbnail/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Thumbnail/utils/index.d.ts

@@ -1,3 +1,3 @@
-export * from './validate-file-size';
-export * from './validate-file-type';
+export * from './validate-file-size';
+export * from './validate-file-type';
 //# sourceMappingURL=index.d.ts.map