@pedidopago/ui 1.7.20 → 1.7.22

package/dist/components/Dialog/styles.js

@@ -15,18 +15,16 @@ var Container = _styled.default.div(function (props) {
 exports.Container = Container;
 var CloseButton = _styled.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  outline: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])));
 exports.CloseButton = CloseButton;
-var PrimaryButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 14px 24px;\n  border-radius: 8px;\n  background: ", ";\n  color: ", ";\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 16px;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])), function (props) {
-  return props.theme.colors.primary.default;
-}, function (props) {
-  return props.theme.colors.body.light;
+var PrimaryButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 14px 24px;\n  border-radius: 8px;\n  background: ", ";\n  color: ", ";\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 16px;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n  transition: all ease 0.2s;\n\n  &:hover {\n    filter: brightness(0.7);\n  }\n\n  &:focus {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])), function (props) {
+  return props.theme.colors.primary.focus;
 }, function (props) {
-  return props.theme.colors.primary.hover;
+  return props.theme.lightColors.neutral.neutral1;
 }, function (props) {
   return props.theme.colors.primary.focus;
 });
 exports.PrimaryButton = PrimaryButton;
 var SecondaryButton = _styled.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 14px 24px;\n  border-radius: 8px;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 16px;\n  border: 0;\n  outline: 0;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:focus-visible {\n    outline: 3px solid black;\n  }\n"])), function (props) {
-  return props.secondaryButtonColor || props.theme.colors.neutral.neutral3;
+  return props.theme.colors.neutral.neutral3;
 }, function (props) {
   return props.theme.colors.neutral.neutral5;
 });

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

@@ -1,31 +1,31 @@
-import { IconName } from '../Icon/types';
-import { GlobalColorsProps } from './../../shared/theme/theme.types';
-export interface DialogButton {
-    /** The label visible in the button. */
-    label: string;
-    /** The handler called once the button is clicked. */
-    handler: () => void;
-}
-export interface IDialogProps {
-    /** If the modal is open or not. */
-    open: boolean;
-    /** Optional. The name of the illustration displayed in the Dialog as listed in the Icon component. */
-    illustration?: IconName;
-    /** Optional. The title displayed in the Dialog. */
-    title?: string;
-    /** The message displayed in the Dialog. */
-    message: string;
-    /** Optional.  The color of the background */
-    backgroundColor?: GlobalColorsProps | (string & {});
-    /** Optional. The color of the content */
-    contentColor?: GlobalColorsProps | (string & {});
-    /** Optional. If a close button is displayed in the Dialog. */
-    closeButton?: boolean;
-    /** Optional. The data for a confirmation button in the Dialog. */
-    confirmationButton?: DialogButton;
-    /** Optional. The data for a cancel button in the Dialog. */
-    cancelButton?: DialogButton;
-    /** Handler called once the Modal is triggered to close. */
-    onClose: () => void;
-}
+import { IconName } from '../Icon/types';
+import { GlobalColorsProps } from './../../shared/theme/theme.types';
+export interface DialogButton {
+    /** The label visible in the button. */
+    label: string;
+    /** The handler called once the button is clicked. */
+    handler: () => void;
+}
+export interface IDialogProps {
+    /** If the modal is open or not. */
+    open: boolean;
+    /** Optional. The name of the illustration displayed in the Dialog as listed in the Icon component. */
+    illustration?: IconName;
+    /** Optional. The title displayed in the Dialog. */
+    title?: string;
+    /** The message displayed in the Dialog. */
+    message: string;
+    /** Optional.  The color of the background */
+    backgroundColor?: GlobalColorsProps | (string & {});
+    /** Optional. The color of the content */
+    contentColor?: GlobalColorsProps | (string & {});
+    /** Optional. If a close button is displayed in the Dialog. */
+    closeButton?: boolean;
+    /** Optional. The data for a confirmation button in the Dialog. */
+    confirmationButton?: DialogButton;
+    /** Optional. The data for a cancel button in the Dialog. */
+    cancelButton?: DialogButton;
+    /** Handler called once the Modal is triggered to close. */
+    onClose: () => void;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Dropzone/dropzone.test.d.ts

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

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { DropzoneProps } from './types';
-declare const Dropzone: ({ icon, title, disabledButton, buttonText, alert, helperText, multiple, onChange, onDropAccepted, onDropRejected, accept, onDragEnter, onDragLeave, disabled, ...rest }: DropzoneProps) => JSX.Element;
-export default Dropzone;
+/// <reference types="react" />
+import { DropzoneProps } from './types';
+declare const Dropzone: ({ icon, title, disabledButton, buttonText, alert, helperText, multiple, onChange, onDropAccepted, onDropRejected, accept, onDragEnter, onDragLeave, disabled, ...rest }: DropzoneProps) => JSX.Element;
+export default Dropzone;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,56 +1,56 @@
-/// <reference types="react" />
-import { DropzoneAlertType } from './types';
-export declare const DropzoneContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    alert?: DropzoneAlertType | undefined;
-    isDraggingOver: boolean;
-    isDisabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DropzoneInput: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    disabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const DropzoneFileBox: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    disabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DropzoneImageAddButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isDraggingOver: boolean;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const DropzoneRemoveButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const DropzoneFilename: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-export declare const DropzoneText: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLLabelElement | HTMLParagraphElement> & {
-    variant?: "caption" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | undefined;
-    color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
-    fontSize?: number | "display" | "tiny" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;
-    fontWeight?: "400" | "700" | "100" | "200" | "300" | "500" | "600" | "800" | "900" | "bold" | "normal" | undefined;
-    fontStyle?: "inherit" | "initial" | "italic" | "normal" | "oblique" | undefined;
-    lineHeight?: string | number | undefined;
-    textAlign?: "center" | "end" | "start" | undefined;
-    textTransform?: "none" | "capitalize" | "lowercase" | "uppercase" | undefined;
-    textDecoration?: "none" | "underline" | "line-through" | undefined;
-    letterSpacing?: string | number | undefined;
-    htmlFor?: string | undefined;
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    alert?: DropzoneAlertType | undefined;
-    subinfo?: boolean | undefined;
-}, {}, {}>;
+/// <reference types="react" />
+import { DropzoneAlertType } from './types';
+export declare const DropzoneContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    alert?: DropzoneAlertType | undefined;
+    isDraggingOver: boolean;
+    isDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropzoneInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const DropzoneFileBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropzoneImageAddButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isDraggingOver: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const DropzoneRemoveButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const DropzoneFilename: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const DropzoneText: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLLabelElement | HTMLParagraphElement> & {
+    variant?: "caption" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | undefined;
+    color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
+    fontSize?: number | "display" | "tiny" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;
+    fontWeight?: "400" | "700" | "100" | "200" | "300" | "500" | "600" | "800" | "900" | "bold" | "normal" | undefined;
+    fontStyle?: "inherit" | "initial" | "italic" | "normal" | "oblique" | undefined;
+    lineHeight?: string | number | undefined;
+    textAlign?: "center" | "end" | "start" | undefined;
+    textTransform?: "none" | "capitalize" | "lowercase" | "uppercase" | undefined;
+    textDecoration?: "none" | "underline" | "line-through" | undefined;
+    letterSpacing?: string | number | undefined;
+    htmlFor?: string | undefined;
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    alert?: DropzoneAlertType | undefined;
+    subinfo?: boolean | undefined;
+}, {}, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Dropzone/styles.js

@@ -29,7 +29,7 @@ var DropzoneContainer = _styled.default.div(_templateObject || (_templateObject
   if (isDisabled) {
     return theme.colors.neutral.neutral1;
   }
-  return '#f5faf8';
+  return 'transparent';
 }, function (props) {
   return props.isDraggingOver && !props.isDisabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:after {\n        opacity: 0.1;\n        visibility: visible;\n      }\n    "])));
 });

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

@@ -1,28 +1,28 @@
-import { HTMLAttributes, DragEvent as ReactDragEvent } from 'react';
-import { ExtendThemeProps } from './../../shared/theme/theme.types';
-import { IconName } from '../Icon/types';
-export type DropzoneAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-export type DropzoneProps = HTMLAttributes<HTMLDivElement> & {
-    alert?: DropzoneAlertType;
-    helperText?: string;
-    icon?: IconName;
-    title?: string;
-    disabledButton?: boolean;
-    buttonText?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    accept?: string;
-    onChange?: (acceptedFiles: File[]) => void;
-    onDropAccepted?: (files: File[]) => void;
-    onDropRejected?: (files: File[]) => void;
-    onDragEnter?: (event: ReactDragEvent<HTMLDivElement>) => void;
-    onDragLeave?: (event: ReactDragEvent<HTMLDivElement>) => void;
-};
-export type GenericStyledProps = {
-    theme?: ExtendThemeProps;
-};
-export type FileProps = File & {
-    id: string;
-    preview: string;
-};
+import { HTMLAttributes, DragEvent as ReactDragEvent } from 'react';
+import { ExtendThemeProps } from './../../shared/theme/theme.types';
+import { IconName } from '../Icon/types';
+export type DropzoneAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+export type DropzoneProps = HTMLAttributes<HTMLDivElement> & {
+    alert?: DropzoneAlertType;
+    helperText?: string;
+    icon?: IconName;
+    title?: string;
+    disabledButton?: boolean;
+    buttonText?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    accept?: string;
+    onChange?: (acceptedFiles: File[]) => void;
+    onDropAccepted?: (files: File[]) => void;
+    onDropRejected?: (files: File[]) => void;
+    onDragEnter?: (event: ReactDragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (event: ReactDragEvent<HTMLDivElement>) => void;
+};
+export type GenericStyledProps = {
+    theme?: ExtendThemeProps;
+};
+export type FileProps = File & {
+    id: string;
+    preview: string;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Dropzone/utils/accepts.d.ts

@@ -1,11 +1,11 @@
-/**
- * Verify if the given file can be accepted by the dropzone.
- *
- * Code abstration of: https://github.com/react-dropzone/attr-accept
- *
- * @param file The file to verify
- * @param acceptedFiles The accepted files
- * @returns true if the file can be accepted, false otherwise
- */
-export declare const accepts: (file: File, acceptedFormats: string) => boolean;
+/**
+ * Verify if the given file can be accepted by the dropzone.
+ *
+ * Code abstration of: https://github.com/react-dropzone/attr-accept
+ *
+ * @param file The file to verify
+ * @param acceptedFiles The accepted files
+ * @returns true if the file can be accepted, false otherwise
+ */
+export declare const accepts: (file: File, acceptedFormats: string) => boolean;
 //# sourceMappingURL=accepts.d.ts.map

package/dist/components/EmojiPicker/Emote/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { EmoteComponentProps } from './types';
-export declare function Emote({ positionX, positionY, size }: EmoteComponentProps): JSX.Element;
+/// <reference types="react" />
+import { EmoteComponentProps } from './types';
+export declare function Emote({ positionX, positionY, size }: EmoteComponentProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/EmojiPicker/Emote/styles.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { EmoteSize } from './types';
-export declare const StyledEmote: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    width: string;
-    sheetWidth: EmoteSize;
-    height: string;
-    xPosition: string;
-    yPosition: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { EmoteSize } from './types';
+export declare const StyledEmote: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width: string;
+    sheetWidth: EmoteSize;
+    height: string;
+    xPosition: string;
+    yPosition: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/EmojiPicker/Emote/types.d.ts

@@ -1,32 +1,32 @@
-export type EmoteCategories = 'Smileys & Emotion' | 'People & Body' | 'Animals & Nature' | 'Component' | 'Food & Drink' | 'Travel & Places' | 'Activities' | 'Objects' | 'Symbols' | 'Flags';
-export interface EmoteProps {
-    name: string;
-    unified: string;
-    non_qualified: string | null;
-    docomo: string | null;
-    au: string;
-    softbank: string | null;
-    google: string;
-    image: string;
-    sheet_x: number;
-    sheet_y: number;
-    short_name: string;
-    short_names: string[];
-    text: string | null;
-    texts: string[] | null;
-    category: EmoteCategories;
-    subcategory: string;
-    sort_order: number;
-    added_in: string;
-    has_img_apple: boolean;
-    has_img_google: boolean;
-    has_img_twitter: boolean;
-    has_img_facebook: boolean;
-}
-export type EmoteSize = 16 | 20 | 32 | 64;
-export interface EmoteComponentProps {
-    positionX: number;
-    positionY: number;
-    size: EmoteSize;
-}
+export type EmoteCategories = 'Smileys & Emotion' | 'People & Body' | 'Animals & Nature' | 'Component' | 'Food & Drink' | 'Travel & Places' | 'Activities' | 'Objects' | 'Symbols' | 'Flags';
+export interface EmoteProps {
+    name: string;
+    unified: string;
+    non_qualified: string | null;
+    docomo: string | null;
+    au: string;
+    softbank: string | null;
+    google: string;
+    image: string;
+    sheet_x: number;
+    sheet_y: number;
+    short_name: string;
+    short_names: string[];
+    text: string | null;
+    texts: string[] | null;
+    category: EmoteCategories;
+    subcategory: string;
+    sort_order: number;
+    added_in: string;
+    has_img_apple: boolean;
+    has_img_google: boolean;
+    has_img_twitter: boolean;
+    has_img_facebook: boolean;
+}
+export type EmoteSize = 16 | 20 | 32 | 64;
+export interface EmoteComponentProps {
+    positionX: number;
+    positionY: number;
+    size: EmoteSize;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/EmojiPicker/EmotePickerData/constants.d.ts

@@ -1,10 +1,10 @@
-import { EmoteProps } from '../Emote/types';
-import { EmoteCategoriesProps } from './types';
-export declare const emoteCategories: EmoteCategoriesProps[];
-export declare const sortedEmojis: EmoteProps[];
-export declare const emoteList: {
-    category: import("../Emote/types").EmoteCategories;
-    startAt: number;
-    emote: EmoteProps;
-}[];
+import { EmoteProps } from '../Emote/types';
+import { EmoteCategoriesProps } from './types';
+export declare const emoteCategories: EmoteCategoriesProps[];
+export declare const sortedEmojis: EmoteProps[];
+export declare const emoteList: {
+    category: import("../Emote/types").EmoteCategories;
+    startAt: number;
+    emote: EmoteProps;
+}[];
 //# sourceMappingURL=constants.d.ts.map

package/dist/components/EmojiPicker/EmotePickerData/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { EmotePickerDataProps } from './types';
-export declare function EmotePickerData({ onClick }: EmotePickerDataProps): JSX.Element;
+/// <reference types="react" />
+import { EmotePickerDataProps } from './types';
+export declare function EmotePickerData({ onClick }: EmotePickerDataProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/EmojiPicker/EmotePickerData/index.js

@@ -104,7 +104,7 @@ function EmotePickerData(_ref) {
           variant: "ghost",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: category.icon,
-            color: isSelected ? 'primary.focus' : 'neutral.neutral3'
+            color: isSelected ? 'primary.default' : 'neutral.neutral3'
           })
         }, category.icon);
       })]

package/dist/components/EmojiPicker/EmotePickerData/styles.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-export declare const EmotePickerDataContainer: 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 EmoteContentHeader: 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 EmoteContentBody: 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 EmoteContainer: 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" />
+export declare const EmotePickerDataContainer: 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 EmoteContentHeader: 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 EmoteContentBody: 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 EmoteContainer: 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

package/dist/components/EmojiPicker/EmotePickerData/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker/EmotePickerData/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,wBAAwB;;;yGAQpC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8C9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAmD5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAY1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker/EmotePickerData/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,wBAAwB;;;yGASpC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8C9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAmD5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAY1B,CAAC"}

package/dist/components/EmojiPicker/EmotePickerData/styles.js

@@ -8,41 +8,47 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 EmotePickerDataContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-height: 280px;\n  max-width: 510px;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n"])), function (_ref) {
+var EmotePickerDataContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-height: 280px;\n  max-width: 510px;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  box-shadow: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.neutral.neutral1;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.shadow.level2;
 });
 exports.EmotePickerDataContainer = EmotePickerDataContainer;
-var EmoteContentHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n\n  padding: 1em;\n\n  position: relative;\n  overflow-x: auto;\n\n  background: ", ";\n\n  & div {\n    display: flex;\n    align-items: center;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  &::-webkit-scrollbar {\n    height: 0.25rem;\n  }\n\n  & button {\n    height: 1.5em;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .background_selected_category {\n    width: 36px;\n    height: 3px;\n    left: 11px;\n    bottom: 6px;\n    transition: all ease 0.2s;\n    border-radius: 0.5rem;\n    background: ", ";\n    position: absolute;\n  }\n\n  @media screen and (max-width: ", ") {\n    border-radius: 0;\n  }\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors.neutral.white;
-}, function (_ref3) {
+var EmoteContentHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n\n  padding: 1em;\n\n  position: relative;\n  overflow-x: auto;\n\n  background: ", ";\n\n  & div {\n    display: flex;\n    align-items: center;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  &::-webkit-scrollbar {\n    height: 0.25rem;\n  }\n\n  & button {\n    height: 1.5em;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .background_selected_category {\n    width: 36px;\n    height: 3px;\n    left: 11px;\n    bottom: 6px;\n    transition: all ease 0.2s;\n    border-radius: 0.5rem;\n    background: ", ";\n    position: absolute;\n  }\n\n  @media screen and (max-width: ", ") {\n    border-radius: 0;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.tertiary.default;
+  return theme.colors.neutral.white;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.primary.default;
+  return theme.colors.tertiary.default;
 }, function (_ref5) {
   var theme = _ref5.theme;
+  return theme.colors.primary.default;
+}, function (_ref6) {
+  var theme = _ref6.theme;
   return theme.breakpoints.lg;
 });
 exports.EmoteContentHeader = EmoteContentHeader;
-var EmoteContentBody = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0em 1em;\n  background: #f8faf9;\n  flex-wrap: wrap;\n  gap: 0.25em;\n\n  max-height: 12.75em;\n  overflow-y: auto;\n\n  .virtual_column {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 42px;\n    height: 42px;\n  }\n\n  #intersection_emoji {\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: 90%;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0.25em;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  .container_emojis {\n    ::-webkit-scrollbar {\n      width: 4px;\n      height: 4px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      background: ", ";\n    }\n  }\n"])), function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.tertiary.default;
-}, function (_ref7) {
+var EmoteContentBody = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0em 1em;\n  background: ", "30;\n  flex-wrap: wrap;\n  gap: 0.25em;\n\n  max-height: 12.75em;\n  overflow-y: auto;\n\n  .virtual_column {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 42px;\n    height: 42px;\n  }\n\n  #intersection_emoji {\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: 90%;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0.25em;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  .container_emojis {\n    ::-webkit-scrollbar {\n      width: 4px;\n      height: 4px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      background: ", ";\n    }\n  }\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.colors.tertiary.hover;
+  return theme.colors.neutral.neutral1;
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.colors.tertiary.default;
 }, function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.tertiary.hover;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.colors.tertiary.default;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colors.tertiary.hover;
 });
 exports.EmoteContentBody = EmoteContentBody;
-var EmoteContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 8px;\n  padding: 0.25rem;\n\n  :hover {\n    cursor: pointer;\n    background: ", ";\n  }\n"])), function (_ref10) {
-  var theme = _ref10.theme;
+var EmoteContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 8px;\n  padding: 0.25rem;\n\n  :hover {\n    cursor: pointer;\n    background: ", ";\n  }\n"])), function (_ref12) {
+  var theme = _ref12.theme;
   return theme.colors.neutral.neutral1;
 });
 exports.EmoteContainer = EmoteContainer;

package/dist/components/EmojiPicker/EmotePickerData/types.d.ts

@@ -1,10 +1,10 @@
-import { IconName } from '../../Icon/types';
-import { EmoteCategories } from '../../EmojiPicker/Emote/types';
-export interface EmotePickerDataProps {
-    onClick: (emote: string) => void;
-}
-export interface EmoteCategoriesProps {
-    name: EmoteCategories;
-    icon: IconName;
-}
+import { IconName } from '../../Icon/types';
+import { EmoteCategories } from '../../EmojiPicker/Emote/types';
+export interface EmotePickerDataProps {
+    onClick: (emote: string) => void;
+}
+export interface EmoteCategoriesProps {
+    name: EmoteCategories;
+    icon: IconName;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/EmojiPicker/EmotePickerData/utils.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function isOverlapEmoji(element: HTMLElement | Element, element2: HTMLElement | Element): boolean;
-export declare function handleCategoryEmoji(currentCategory: string, setCurrentCategory: React.Dispatch<React.SetStateAction<string>>): void;
-export declare function translateEmoteCategories(type?: string): string | undefined;
+/// <reference types="react" />
+export declare function isOverlapEmoji(element: HTMLElement | Element, element2: HTMLElement | Element): boolean;
+export declare function handleCategoryEmoji(currentCategory: string, setCurrentCategory: React.Dispatch<React.SetStateAction<string>>): void;
+export declare function translateEmoteCategories(type?: string): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/EmojiPicker/Example/EmotePickerExample.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { EmotePickerProps } from '../types';
-export declare function EmotePickerExample({ mobileVariant, modalPosition }: EmotePickerProps): JSX.Element;
+/// <reference types="react" />
+import { EmotePickerProps } from '../types';
+export declare function EmotePickerExample({ mobileVariant, modalPosition }: EmotePickerProps): JSX.Element;
 //# sourceMappingURL=EmotePickerExample.d.ts.map

package/dist/components/EmojiPicker/animation.d.ts

@@ -1,4 +1,4 @@
-import { MotionProps } from 'framer-motion';
-export declare const modalAnimation: MotionProps;
-export declare const emotePickerMobileAnimation: MotionProps;
+import { MotionProps } from 'framer-motion';
+export declare const modalAnimation: MotionProps;
+export declare const emotePickerMobileAnimation: MotionProps;
 //# sourceMappingURL=animation.d.ts.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { EmotePickerRef, EmotePickerProps } from './types';
-export declare const EmotePicker: import("react").ForwardRefExoticComponent<EmotePickerProps & import("react").RefAttributes<EmotePickerRef>>;
+/// <reference types="react" />
+import { EmotePickerRef, EmotePickerProps } from './types';
+export declare const EmotePicker: import("react").ForwardRefExoticComponent<EmotePickerProps & import("react").RefAttributes<EmotePickerRef>>;
 //# sourceMappingURL=index.d.ts.map