@ftdata/ui 0.0.16 → 0.0.18

package/dist/components/Select/styles.js

@@ -2,6 +2,7 @@ import styled_components from "styled-components";
 import { COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
 const SelectContainer = styled_components.div`
   display: flex;
+  gap: 0.5rem;
   flex-direction: column;
 `;
 const StyledLabel = styled_components.label`
@@ -68,7 +69,6 @@ const HelpText = styled_components.div`
   color: ${({ isError, isSuccess })=>isError ? COLOR_DANGER_MEDIUM : isSuccess ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
   display: flex;
   gap: 0.25rem;
-  margin-top: 0.5rem;
 
   span {
     font-size: 0.875rem;

package/dist/components/Texts/paragraphs.d.ts

@@ -0,0 +1,12 @@
+declare const PARAGRAPH_SIZES: {
+    readonly body: "1rem";
+    readonly small: "0.875rem";
+    readonly caption: "0.75rem";
+};
+type ParagraphSize = keyof typeof PARAGRAPH_SIZES;
+interface ParagraphProps {
+    size?: ParagraphSize;
+    color?: string;
+}
+export declare const Paragraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ParagraphProps>> & string;
+export {};

package/dist/components/Texts/paragraphs.js

@@ -0,0 +1,14 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const PARAGRAPH_SIZES = {
+    body: '1rem',
+    small: '0.875rem',
+    caption: '0.75rem'
+};
+const Paragraph = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.5;
+  font-weight: 500;
+  font-size: ${({ size = 'body' })=>PARAGRAPH_SIZES[size]};
+`;
+export { Paragraph };

package/dist/components/Texts/text.d.ts

@@ -0,0 +1,17 @@
+declare const FONT_SIZES: {
+    readonly xxs: string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly xxl: string;
+    readonly xxxl: string;
+    readonly megadisplay: string;
+};
+type TextSize = keyof typeof FONT_SIZES;
+interface TextProps {
+    size?: TextSize;
+}
+export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextProps>> & string;
+export {};

package/dist/components/Texts/text.js

@@ -0,0 +1,21 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK, FONT_RELATIVE_SIZE_LG, FONT_RELATIVE_SIZE_MD, FONT_RELATIVE_SIZE_MEGADISPLAY, FONT_RELATIVE_SIZE_SM, FONT_RELATIVE_SIZE_XL, FONT_RELATIVE_SIZE_XS, FONT_RELATIVE_SIZE_XXL, FONT_RELATIVE_SIZE_XXS, FONT_RELATIVE_SIZE_XXXL } from "@ftdata/f-tokens";
+const FONT_SIZES = {
+    xxs: FONT_RELATIVE_SIZE_XXS,
+    xs: FONT_RELATIVE_SIZE_XS,
+    sm: FONT_RELATIVE_SIZE_SM,
+    md: FONT_RELATIVE_SIZE_MD,
+    lg: FONT_RELATIVE_SIZE_LG,
+    xl: FONT_RELATIVE_SIZE_XL,
+    xxl: FONT_RELATIVE_SIZE_XXL,
+    xxxl: FONT_RELATIVE_SIZE_XXXL,
+    megadisplay: FONT_RELATIVE_SIZE_MEGADISPLAY
+};
+const Text = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.2;
+  font-weight: 600;
+
+  font-size: ${({ size = 'md' })=>FONT_SIZES[size]};
+`;
+export { Text };

package/dist/components/Texts/titles.d.ts

@@ -0,0 +1,7 @@
+type TitleVariant = 'huge' | 'standard' | 'section' | 'heading' | 'smallHeading' | 'subheading';
+interface TitleProps {
+    size?: TitleVariant;
+    color?: string;
+}
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TitleProps>> & string;
+export {};

package/dist/components/Texts/titles.js

@@ -0,0 +1,37 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const TITLE_VARIANTS = {
+    huge: {
+        size: '1.875rem',
+        spacing: '-0.03em'
+    },
+    standard: {
+        size: '1.5rem',
+        spacing: '-0.03em'
+    },
+    section: {
+        size: '1.25rem',
+        spacing: '-0.03em',
+        weight: 500
+    },
+    heading: {
+        size: '1rem'
+    },
+    smallHeading: {
+        size: '0.875rem'
+    },
+    subheading: {
+        size: '0.75rem',
+        spacing: '0.06em'
+    }
+};
+const Title = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.2;
+  font-weight: 600;
+
+  font-size: ${({ size = 'standard' })=>TITLE_VARIANTS[size].size};
+  letter-spacing: ${({ size = 'standard' })=>TITLE_VARIANTS[size].spacing ?? '0'};
+  font-weight: ${({ size = 'standard' })=>TITLE_VARIANTS[size].weight ?? 600};
+`;
+export { Title };

package/dist/components/fields/components/HelpText/index.js

@@ -1,31 +1,36 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@ftdata/f-icons";
 import { HelpTextContainer } from "./styles.js";
 const DEFAULT_ICONS = {
     danger: "ui info-information",
-    success: "ui done-check-checkmark",
+    success: "ui done-check",
     warning: "ui warning-triangle"
 };
 const getFeedbackIcon = (feedback)=>{
     if ("info" === feedback || "disabled" === feedback || !feedback) return;
-    return /*#__PURE__*/ jsx(Icon, {
-        name: DEFAULT_ICONS[feedback],
-        color: "currentColor",
-        size: "1rem",
-        weight: "2.5"
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsx(Icon, {
+            name: DEFAULT_ICONS[feedback],
+            color: "currentColor",
+            size: "1rem",
+            weight: "2.5"
+        })
     });
 };
 function HelpText({ feedback, text, icon }) {
     return /*#__PURE__*/ jsxs(HelpTextContainer, {
         feedback: feedback,
         children: [
-            icon && /*#__PURE__*/ jsx(Icon, {
-                name: icon,
-                color: "currentColor",
-                size: "1rem"
+            !icon && /*#__PURE__*/ jsx(Fragment, {
+                children: getFeedbackIcon(feedback)
+            }),
+            icon && /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: icon,
+                    color: "currentColor",
+                    size: "1rem"
+                })
             }),
-            " ",
-            !icon && getFeedbackIcon(feedback),
             /*#__PURE__*/ jsx("span", {
                 children: text
             })

package/dist/components/fields/components/HelpText/modifiers/colors.js

@@ -1,9 +1,9 @@
-import { COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
+import { COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
 const HELP_TEXT_COLOR_MODIFIER = {
     danger: COLOR_DANGER_MEDIUM,
     warning: COLOR_WARNING_MEDIUM,
     success: COLOR_SUCCESS_MEDIUM,
-    info: COLOR_NEUTRAL_DUSK,
+    info: COLOR_NEUTRAL_DARK,
     disabled: COLOR_NEUTRAL_MEDIUM
 };
 export { HELP_TEXT_COLOR_MODIFIER };

package/dist/components/fields/components/HelpText/styles.js

@@ -7,6 +7,11 @@ const HelpTextContainer = styled_components.div`
   color: ${({ feedback = "info" })=>HELP_TEXT_COLOR_MODIFIER[feedback]};
   transition: all 0.18s ease;
 
+  div {
+    width: 1rem;
+    height: 1rem;
+  }
+
   span {
     font-size: 0.875rem;
     line-height: 1.25rem;

package/dist/components/fields/components/Label/index.js

@@ -12,7 +12,7 @@ function Label({ text, subtext, required, htmlFor }) {
                 subtext && /*#__PURE__*/ jsx("span", {
                     children: subtext
                 }),
-                required && /*#__PURE__*/ jsx("span", {
+                required && /*#__PURE__*/ jsx("strong", {
                     children: "*"
                 })
             ]

package/dist/components/fields/components/Label/styles.js

@@ -13,16 +13,23 @@ const LabelContainer = styled_components.div`
     font-weight: ${FONT_WEIGHT_BOLD};
     line-height: 1rem;
     white-space: normal;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
   }
 
-  span {
+  span,
+  strong {
     margin-left: ${({ required })=>required ? "0" : "0.5rem"};
-    color: ${({ required })=>required ? COLOR_DANGER_MEDIUM : COLOR_NEUTRAL_DARK};
+    color: ${COLOR_NEUTRAL_DARK};
     font-size: 0.875rem;
     font-weight: ${FONT_WEIGHT_BOLD};
     line-height: 1rem;
   }
+
+  span {
+    margin-left: 0.25rem;
+  }
+
+  strong {
+    color: ${COLOR_DANGER_MEDIUM};
+  }
 `;
 export { LabelContainer };

package/dist/components/fields/modifiers/selectColorModifier.d.ts

@@ -1,2 +1,2 @@
 import { FieldFeedbackType } from "../../../types/feedback";
-export declare function selectColorModifier(feedback?: FieldFeedbackType, active?: boolean): "" | import("styled-components").RuleSet<object>;
+export declare function selectColorModifier(feedback?: FieldFeedbackType, active?: boolean, disabled?: boolean): "" | import("styled-components").RuleSet<object>;

package/dist/components/fields/modifiers/selectColorModifier.js

@@ -1,6 +1,12 @@
 import { css } from "styled-components";
 import { FEEDBACK_COLORS } from "./color_modifiers.js";
-function selectColorModifier(feedback, active) {
+import { COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER } from "@ftdata/f-tokens";
+function selectColorModifier(feedback, active, disabled) {
+    if (disabled) return css`
+      background-color: ${COLOR_NEUTRAL_LIGHTER};
+      box-shadow: 0 0 0 1px ${COLOR_NEUTRAL_LIGHT};
+      cursor: not-allowed;
+    `;
     if (!feedback) return "";
     const color = FEEDBACK_COLORS[feedback];
     return css`

package/dist/index.d.ts

@@ -17,12 +17,12 @@ export type { ISelectOption } from "./components/Select";
 export type { SelectProps } from "./components/Select";
 export { default as StateAlert } from "./components/StateAlert";
 export { default as MultiSelect } from "./components/MultiSelect";
-export { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect";
-export type { MultiSelectProps } from "./components/MultiSelect";
-export type { IMultiSelectActions } from "./components/MultiSelect/interfaces/actions";
-export type { IMultiSelectOption, IMultiSelectState, } from "./components/MultiSelect/interfaces/state";
-export type { IMultiSelectConfig, IMultiSelectConfigActions, IMultiSelectConfigFields, } from "./components/MultiSelect/interfaces/config";
+export type { MultiSelectProps, IMultiSelectOption, } from "./components/MultiSelect";
 export { default as DoubleList } from "./components/DoubleList";
 export { default as Menu } from "./components/Menu";
 export type { MenuItem, MenuItemData, SubMenu, SubMenuData, } from "./components/Menu/types/MenuItem";
 export { Input } from "./components/Input";
+export { default as IconButton } from "./components/IconButton";
+export { default as Modal } from "./components/Modal";
+export { ModalOverlay } from "./components/Modal/styles";
+export type { ModalAction, ModalActions, ModalProps, ModalSizeCustom, ModalSizes, } from "./components/Modal";

package/dist/index.js

@@ -13,10 +13,12 @@ import UserMenu from "./components/UserMenu/index.js";
 import Select from "./components/Select/index.js";
 import StateAlert from "./components/StateAlert/index.js";
 import MultiSelect from "./components/MultiSelect/index.js";
-import { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect.js";
 import DoubleList from "./components/DoubleList/index.js";
 import Menu from "./components/Menu/index.js";
 import { Input } from "./components/Input/index.js";
+import IconButton from "./components/IconButton/index.js";
+import Modal from "./components/Modal/index.js";
+import { ModalOverlay } from "./components/Modal/styles.js";
 export * from "./components/Grid/index.js";
 export * from "./components/Text/index.js";
-export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading, useMultiSelect };
+export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, IconButton, Input, Loading, Menu, Modal, ModalOverlay, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "exports": {
     ".": {
@@ -31,7 +31,7 @@
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
     "react-window": "^2.0.2",
-    "@ftdata/f-icons": "0.0.4",
+    "@ftdata/f-icons": "0.0.6",
     "@ftdata/f-tokens": "0.0.1"
   },
   "publishConfig": {

package/dist/components/MultiSelect/helpers/arraysEqual.d.ts

@@ -1,2 +0,0 @@
-import { IMultiSelectOption } from "../interfaces/state";
-export declare function arraysEqual(a: IMultiSelectOption[], b: IMultiSelectOption[]): boolean;

package/dist/components/MultiSelect/helpers/arraysEqual.js

@@ -1,5 +0,0 @@
-function arraysEqual(a, b) {
-    if (a.length !== b.length) return false;
-    return a.every((item, idx)=>item.value === b[idx].value);
-}
-export { arraysEqual };

package/dist/components/MultiSelect/helpers/computeSelected.d.ts

@@ -1,2 +0,0 @@
-import { IMultiSelectOption } from "../interfaces/state";
-export declare const computeSelected: (options: IMultiSelectOption[], unselected: IMultiSelectOption[]) => IMultiSelectOption[];

package/dist/components/MultiSelect/helpers/computeSelected.js

@@ -1,2 +0,0 @@
-const computeSelected = (options, unselected)=>options.filter((opt)=>!unselected.some((u)=>u.value === opt.value));
-export { computeSelected };

package/dist/components/MultiSelect/helpers/getChangedFieds.d.ts

@@ -1,2 +0,0 @@
-import { IMultiSelectState } from "../interfaces/state";
-export declare function getChangedFields(base: Partial<IMultiSelectState>, compare: Partial<IMultiSelectState>): (keyof IMultiSelectState)[];

package/dist/components/MultiSelect/helpers/getChangedFieds.js

@@ -1,17 +0,0 @@
-import { arraysEqual } from "./arraysEqual.js";
-const FIELDS = [
-    "selected",
-    "options",
-    "filtered",
-    "unselected"
-];
-function getChangedFields(base, compare) {
-    const changed = [];
-    FIELDS.forEach((key)=>{
-        const last = base[key] || [];
-        const next = compare[key] || [];
-        if (arraysEqual(last, next)) changed.push(key);
-    });
-    return changed;
-}
-export { getChangedFields };

package/dist/components/MultiSelect/hooks/useMultiSelect.d.ts

@@ -1,10 +0,0 @@
-import { IMultiSelectState } from "../interfaces/state";
-import { IMultiSelectConfig } from "../interfaces/config";
-interface UseIMultiSelectConfig {
-    config?: IMultiSelectConfig;
-}
-export declare function useMultiSelect({ config }: UseIMultiSelectConfig): {
-    state: IMultiSelectState;
-    updateState: (newPartial: Partial<IMultiSelectState>) => void;
-};
-export {};

package/dist/components/MultiSelect/hooks/useMultiSelect.js

@@ -1,44 +0,0 @@
-import { useEffect, useReducer } from "react";
-import { computeUnselected } from "../helpers/computeUnselected.js";
-import { stateReducer } from "../reducers/stateReducer.js";
-import { arraysEqual } from "../helpers/arraysEqual.js";
-function useMultiSelect({ config }) {
-    const initial = {
-        selected: config?.fields?.externalSelected ?? [],
-        options: config?.fields?.externalOptions ?? [],
-        filtered: config?.fields?.externalFiltered ?? [],
-        unselected: computeUnselected(config?.fields?.externalOptions ?? [], config?.fields?.externalSelected ?? [])
-    };
-    const [state, dispatch] = useReducer(stateReducer, initial);
-    useEffect(()=>{
-        if (!config) return;
-        const { fields, actions } = config;
-        const payload = {};
-        if (fields?.externalSelected && !arraysEqual(fields.externalSelected, state.selected)) payload.selected = fields.externalSelected;
-        if (fields?.externalOptions && !arraysEqual(fields.externalOptions, state.options)) payload.options = fields.externalOptions;
-        if (fields?.externalFiltered && !arraysEqual(fields.externalFiltered, state.filtered)) payload.filtered = fields.externalFiltered;
-        if (fields?.externalUnselected && !arraysEqual(fields.externalUnselected, state.unselected)) payload.unselected = fields.externalUnselected;
-        if (Object.keys(payload).length) dispatch({
-            type: "SET_STATE",
-            payload
-        });
-        if (actions?.onSelectedChange) actions.onSelectedChange(state.selected);
-        if (actions?.onOptionsChange) actions.onOptionsChange(state.options);
-        if (actions?.onFilteredChange) actions.onFilteredChange(state.filtered);
-        if (actions?.onUnselectedChange) actions.onUnselectedChange(state.unselected);
-    }, [
-        state,
-        config
-    ]);
-    const updateState = (newPartial)=>{
-        dispatch({
-            type: "SET_STATE",
-            payload: newPartial
-        });
-    };
-    return {
-        state,
-        updateState
-    };
-}
-export { useMultiSelect };

package/dist/components/MultiSelect/interfaces/actions.d.ts

@@ -1,4 +0,0 @@
-export interface IMultiSelectActions {
-    clear: () => void;
-    search?: (query: string) => void;
-}

package/dist/components/MultiSelect/interfaces/config.d.ts

@@ -1,17 +0,0 @@
-import { IMultiSelectState, IMultiSelectOption } from "./state";
-export interface IMultiSelectConfigFields {
-    externalSelected?: IMultiSelectOption[];
-    externalOptions?: IMultiSelectOption[];
-    externalFiltered?: IMultiSelectOption[];
-    externalUnselected?: IMultiSelectOption[];
-}
-export interface IMultiSelectConfigActions {
-    onSelectedChange?: (selected: IMultiSelectState["selected"]) => void;
-    onOptionsChange?: (options: IMultiSelectState["options"]) => void;
-    onFilteredChange?: (filtered: IMultiSelectState["filtered"]) => void;
-    onUnselectedChange?: (unselected: IMultiSelectState["unselected"]) => void;
-}
-export interface IMultiSelectConfig {
-    fields?: IMultiSelectConfigFields;
-    actions?: IMultiSelectConfigActions;
-}

package/dist/components/MultiSelect/interfaces/state.d.ts

@@ -1,10 +0,0 @@
-export interface IMultiSelectOption {
-    value: string;
-    label: string;
-}
-export interface IMultiSelectState {
-    selected: IMultiSelectOption[];
-    options: IMultiSelectOption[];
-    filtered: IMultiSelectOption[];
-    unselected: IMultiSelectOption[];
-}

package/dist/components/MultiSelect/reducers/stateReducer.d.ts

@@ -1,21 +0,0 @@
-import { IMultiSelectOption, IMultiSelectState } from "../interfaces/state";
-type MultiSelectAction = {
-    type: "SET_STATE";
-    payload: Partial<IMultiSelectState>;
-} | {
-    type: "SET_OPTIONS";
-    payload: IMultiSelectOption[];
-} | {
-    type: "SET_SELECTED";
-    payload: IMultiSelectOption[];
-} | {
-    type: "SET_UNSELECTED";
-    payload: IMultiSelectOption[];
-} | {
-    type: "SET_FILTERED";
-    payload: IMultiSelectOption[];
-} | {
-    type: "CLEAR";
-};
-export declare function stateReducer(state: IMultiSelectState, action: MultiSelectAction): IMultiSelectState;
-export {};

package/dist/components/MultiSelect/reducers/stateReducer.js

@@ -1,44 +0,0 @@
-import { computeUnselected } from "../helpers/computeUnselected.js";
-import { computeSelected } from "../helpers/computeSelected.js";
-function stateReducer(state, action) {
-    switch(action.type){
-        case "SET_STATE":
-            return {
-                ...state,
-                ...action.payload,
-                unselected: computeUnselected(action.payload.options ?? state.options, action.payload.selected ?? state.selected)
-            };
-        case "SET_OPTIONS":
-            return {
-                ...state,
-                options: action.payload,
-                unselected: computeUnselected(action.payload, state.selected)
-            };
-        case "SET_SELECTED":
-            return {
-                ...state,
-                selected: action.payload,
-                unselected: computeUnselected(state.options, action.payload)
-            };
-        case "SET_UNSELECTED":
-            return {
-                ...state,
-                selected: computeSelected(state.options, action.payload),
-                unselected: action.payload
-            };
-        case "SET_FILTERED":
-            return {
-                ...state,
-                filtered: action.payload
-            };
-        case "CLEAR":
-            return {
-                ...state,
-                selected: [],
-                unselected: state.options
-            };
-        default:
-            return state;
-    }
-}
-export { stateReducer };

package/dist/components/Text/Paragraph/Paragraph.stories.d.ts

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Paragraph } from "../index";
-/**
- * Títulos são usados para mostrar textos regulares em uma página.
- * Este componente também funciona com os atributos nativos de um HTML paragraph element.
- */
-declare const meta: Meta<typeof Paragraph>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * Variação padrão do Paragraph quando apenas as propriedades obrigatórias são fornecidas.
- */
-export declare const Default: Story;
-/**
- * Variação de tamanho caption do Paragraph.
- */
-export declare const Caption: Story;
-/**
- * Variação de tamanho sm do Paragraph.
- */
-export declare const Sm: Story;
-/**
- * Variação de tamanho md do Paragraph.
- */
-export declare const Md: Story;
-/**
- * Todas as variações padrão de de tamanho do Paragraph.
- */
-export declare const Sizes: Story;