@appquality/unguess-design-system 2.11.2 → 2.11.5

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v2.11.5 (Wed Sep 07 2022)
+
+#### 🐛 Bug Fix
+
+- Add tooltip modal (skip-ci) [#81](https://github.com/AppQuality/unguess-design-system/pull/81) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.11.4 (Thu Aug 18 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(layout): add new breakpoint and move boxed to xxl ([@cannarocks](https://github.com/cannarocks))
+- fix(page-header): keep paddings even on large screen ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.11.3 (Wed Aug 17 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(page-header): remove padding on large breakpoints ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.11.2 (Wed Aug 17 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -69,6 +69,7 @@ export * from "./stories/tiles";
 export * from "./stories/timeline";
 export * from "./stories/theme";
 export * from "./stories/title";
+export * from "./stories/tooltip-modal";
 export * from "./stories/trigger";
 export * from "./stories/typography/block-quote";
 export * from "./stories/typography/code";

package/build/index.js

@@ -12,8 +12,8 @@ var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactAvatars = require('@zendeskgarden/react-avatars');
 var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
 var reactButtons = require('@zendeskgarden/react-buttons');
-var reactTags = require('@zendeskgarden/react-tags');
 var React = require('react');
+var reactTags = require('@zendeskgarden/react-tags');
 var reactLoaders = require('@zendeskgarden/react-loaders');
 var reactTypography = require('@zendeskgarden/react-typography');
 var reactModals = require('@zendeskgarden/react-modals');
@@ -261,7 +261,7 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
         thumbSize: "60px",
     } });
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
 var GlobalStyle = styled.createGlobalStyle(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
 var templateObject_1$1f;
@@ -345,7 +345,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
     - To navigate within a page
     - To display links alongside text
  */
-var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
+var Anchor = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({ ref: ref }, props)); });
 
 var customTheme = __assign({}, theme);
 // Define theme override
@@ -366,13 +366,14 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
    - To enable user action
    - To draw attention to relevant actions in a user's workflow
  */
-var Button = function (props) {
+var ButtonComponent = React.forwardRef(function (props, ref) {
     if (props.themeColor) {
         var currentTheme = getThemeStyle(props);
-        return jsxRuntime.jsx(UgButton, __assign({}, props, { theme: currentTheme }));
+        return jsxRuntime.jsx(UgButton, __assign({}, props, { ref: ref, theme: currentTheme }));
     }
-    return jsxRuntime.jsx(UgButton, __assign({}, props));
-};
+    return jsxRuntime.jsx(UgButton, __assign({ ref: ref }, props));
+});
+var Button = ButtonComponent;
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
 var templateObject_1$1c;
@@ -382,7 +383,7 @@ A Button group lets users make a selection from a set of options.
 
 This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
 **/
-var ButtonGroup = function (props) { return (jsxRuntime.jsx(reactButtons.ButtonGroup, __assign({}, props))); };
+var ButtonGroup = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.ButtonGroup, __assign({ ref: ref }, props)); });
 
 /**
 Icon buttons (like Buttons) let users take action.
@@ -394,7 +395,7 @@ Used for this
  - To simplify the appearance of repeated or persistent actions on a page
  - To enable action in a toolbar
 **/
-var IconButton = function (props) { return (jsxRuntime.jsx(reactButtons.IconButton, __assign({}, props))); };
+var IconButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.IconButton, __assign({ ref: ref }, props)); });
 
 /**
 A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
@@ -403,7 +404,7 @@ Used for this:
 - To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
 - To reduce visual complexity when there are multiple actions a user can take
 **/
-var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
+var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
 
 var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
@@ -2453,10 +2454,10 @@ var StyledPageHeader = styled__default["default"].div(templateObject_2$b || (tem
     return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
 }, function (_a) {
     var theme = _a.theme;
-    return theme.breakpoints.xl;
+    return theme.breakpoints.xxl;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.breakpoints.xl;
+    return theme.breakpoints.xxl;
 });
 var PullLeft = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -2958,6 +2959,20 @@ Timeline.Item = UgTimelineItem;
 Timeline.Content = UgTimelineContent;
 var templateObject_1$2, templateObject_2$1, templateObject_3;
 
+/**
+ * A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
+ * <hr>
+ * Used for this:
+    - To enable user action within a tooltip
+    - To provide a focus loop when actions need to be inside a tooltip
+ */
+var TooltipModal = function (props) { return jsxRuntime.jsx(reactModals.TooltipModal, __assign({}, props)); };
+TooltipModal.Title = reactModals.TooltipModal.Title;
+TooltipModal.Body = reactModals.TooltipModal.Body;
+TooltipModal.Close = reactModals.TooltipModal.Close;
+TooltipModal.Footer = reactModals.TooltipModal.Footer;
+TooltipModal.FooterItem = reactModals.TooltipModal.FooterItem;
+
 /**
  * A Trigger is a wrapper for input elements
  **/
@@ -3101,6 +3116,7 @@ exports.Timeline = Timeline;
 exports.Title = Title$1;
 exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
+exports.TooltipModal = TooltipModal;
 exports.Trigger = Trigger;
 exports.UnorderedList = UnorderedList;
 exports.XL = XL;

package/build/stories/buttons/anchor/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AnchorArgs } from "./_types";
 /**
  * The Anchor is a link that helps users navigate from one location to another.
@@ -7,5 +8,5 @@ import { AnchorArgs } from "./_types";
     - To navigate within a page
     - To display links alongside text
  */
-declare const Anchor: (props: AnchorArgs) => JSX.Element;
+declare const Anchor: import("react").ForwardRefExoticComponent<AnchorArgs & import("react").RefAttributes<HTMLAnchorElement>>;
 export { Anchor };

package/build/stories/buttons/anchor/index.stories.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { AnchorArgs } from "./_types";
 export declare const Basic: Story<AnchorArgs>;
 export declare const Danger: Story<AnchorArgs>;
 export declare const External: Story<AnchorArgs>;
-declare const _default: ComponentMeta<(props: AnchorArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<AnchorArgs & import("react").RefAttributes<HTMLAnchorElement>>>;
 export default _default;

package/build/stories/buttons/button/_types.d.ts

@@ -15,7 +15,7 @@ export interface ButtonArgs extends IButtonProps {
     /** Applies danger styling */
     isDanger?: boolean;
     /** Specifies the buton size */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     /** Stretches the button fill to its container width */
     isStretched?: boolean;
     /** Applies neutral button styling */

package/build/stories/buttons/button/index.d.ts

@@ -1,21 +1,17 @@
+/// <reference types="react" />
 import { ButtonArgs } from "./_types";
-/**
- * Buttons let users take action quickly.
- * Use a Button to enable actions or decisions that are important to a user’s workflow.
- * <hr>
- * Used for this:
-   - To enable user action
-   - To draw attention to relevant actions in a user's workflow
- */
-declare const Button: {
-    (props: ButtonArgs): JSX.Element;
-    StartIcon: {
+declare const UgButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    EndIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };
-    EndIcon: {
+    StartIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };
+}, any, {}, never>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonArgs & import("react").RefAttributes<HTMLButtonElement>> & {
+    EndIcon: typeof UgButton.EndIcon;
+    StartIcon: typeof UgButton.StartIcon;
 };
-export { Button };
+export {};

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,16 +1,16 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { ButtonArgs } from "./_types";
 export declare const Default: Story<ButtonArgs>;
 export declare const Basic: Story<ButtonArgs>;
 export declare const Primary: Story<ButtonArgs>;
 export declare const WithIcon: Story<ButtonArgs>;
-declare const _default: ComponentMeta<{
-    (props: ButtonArgs): JSX.Element;
-    StartIcon: {
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ButtonArgs & import("react").RefAttributes<HTMLButtonElement>> & {
+    EndIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };
-    EndIcon: {
+    StartIcon: {
         (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
         displayName: string;
     };

package/build/stories/buttons/button-group/index.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { ButtonGroupArgs } from "./_types";
 /**
 A Button group lets users make a selection from a set of options.
 
 This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
 **/
-declare const ButtonGroup: (props: ButtonGroupArgs) => JSX.Element;
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupArgs & import("react").RefAttributes<HTMLDivElement>>;
 export { ButtonGroup };

package/build/stories/buttons/button-group/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { ButtonGroupArgs } from "./_types";
 interface ButtonGroupProps extends ButtonGroupArgs {
@@ -10,5 +11,5 @@ interface ButtonGroupProps extends ButtonGroupArgs {
 export declare const TwoItems: Story<ButtonGroupProps>;
 export declare const WithBorders: Story<ButtonGroupProps>;
 export declare const RoundedItems: Story<ButtonGroupProps>;
-declare const _default: ComponentMeta<(props: ButtonGroupArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ButtonGroupArgs & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;

package/build/stories/buttons/icon-button/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonArgs } from "./_types";
 /**
 Icon buttons (like Buttons) let users take action.
@@ -9,5 +10,5 @@ Used for this
  - To simplify the appearance of repeated or persistent actions on a page
  - To enable action in a toolbar
 **/
-declare const IconButton: (props: IconButtonArgs) => JSX.Element;
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonArgs & import("react").RefAttributes<HTMLButtonElement>>;
 export { IconButton };

package/build/stories/buttons/icon-button/index.stories.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { IconButtonArgs } from "./_types";
 export declare const Default: Story<IconButtonArgs>;
 export declare const Danger: Story<IconButtonArgs>;
 export declare const Disabled: Story<IconButtonArgs>;
 export declare const Shape: Story<IconButtonArgs>;
-declare const _default: ComponentMeta<(props: IconButtonArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<IconButtonArgs & import("react").RefAttributes<HTMLButtonElement>>>;
 export default _default;

package/build/stories/buttons/split-button/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SplitButtonArgs } from "./_types";
 /**
 A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
@@ -6,5 +7,5 @@ Used for this:
 - To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
 - To reduce visual complexity when there are multiple actions a user can take
 **/
-declare const SplitButton: (props: SplitButtonArgs) => JSX.Element;
+declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonArgs & import("react").RefAttributes<HTMLDivElement>>;
 export { SplitButton };

package/build/stories/buttons/split-button/index.stories.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { SplitButtonArgs } from "./_types";
 export declare const Default: Story<SplitButtonArgs>;
-declare const _default: ComponentMeta<(props: import("../icon-button/_types").IconButtonArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<import("../icon-button/_types").IconButtonArgs & import("react").RefAttributes<HTMLButtonElement>>>;
 export default _default;

package/build/stories/theme/index.d.ts

@@ -1,4 +1,12 @@
 declare const theme: {
+    breakpoints: {
+        xxl: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     colors: {
         primaryHue: string;
         warningHue: string;
@@ -215,13 +223,6 @@ declare const theme: {
         sm: string;
         md: string;
     };
-    breakpoints: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
     fontSizes: {
         xs: string;
         sm: string;

package/build/stories/tooltip-modal/_types.d.ts

@@ -0,0 +1,21 @@
+import { ITooltipModalProps } from "@zendeskgarden/react-modals";
+declare type Placement = "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "end-top" | "end-bottom" | "start" | "start-top" | "start-bottom";
+export interface TooltipModalArgs extends ITooltipModalProps {
+    /**
+     * Positions the modal relative to the provided `HTMLElement`
+     */
+    referenceElement?: HTMLElement | null;
+    /**
+     * Adjusts the placement of the tooltip
+     **/
+    placement?: Placement;
+    /**
+     * Adds an arrow to the tooltop
+     */
+    hasArrow?: boolean;
+    /**
+     * Sets the `z-index` of the tooltip
+     */
+    zIndex?: number;
+}
+export {};

package/build/stories/tooltip-modal/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { TooltipModalArgs } from "./_types";
+/**
+ * A Tooltip modal provides contextual information about a paired element. It either opens automatically or through user action.
+ * <hr>
+ * Used for this:
+    - To enable user action within a tooltip
+    - To provide a focus loop when actions need to be inside a tooltip
+ */
+declare const TooltipModal: {
+    (props: TooltipModalArgs): JSX.Element;
+    Title: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { TooltipModal };

package/build/stories/tooltip-modal/index.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { TooltipModalArgs } from "./_types";
+export declare const Default: Story<TooltipModalArgs>;
+declare const _default: ComponentMeta<{
+    (props: TooltipModalArgs): JSX.Element;
+    Title: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+}>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.11.2",
+  "version": "2.11.5",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",