@apia/theme 2.0.11 → 3.0.2

package/dist/index.d.ts

@@ -1,33 +1,584 @@
-import { TParsedPalette } from './base/colors/types.js';
-export { TColorDefinition, TCustomPalette, TPalette, TThemeModifier } from './base/colors/types.js';
-export { default as parsePalette } from './base/colors/util/parsePalette.js';
-export { CustomTheme } from './themeuiExports.js';
-export * from '@theme-ui/match-media';
-export { default as applyStatesGetColor } from './base/colors/util/applyStatesGetColor.js';
-export { default as getColorState } from './base/colors/util/getColorState.js';
-export { default as getColorStates } from './base/colors/util/getColorStates.js';
-export { default as getColorsAndStatesByDefinition } from './base/colors/util/getColorsAndStatesByDefinition.js';
-export { default as getColorsAndStatesByPath } from './base/colors/util/getColorsAndStatesByPath.js';
-export { default as getColorsByDefinition } from './base/colors/util/getColorsByDefinition.js';
-export { default as getColorsByPath } from './base/colors/util/getColorsByPath.js';
-export { default as getOneColorState } from './base/colors/util/getOneColorState.js';
-export { useMainTheme } from './methods/useMainTheme.js';
-export { makeStyledComponent } from './methods/makeStyledComponent.js';
-export { injectStyles } from './methods/injectStyles.js';
-export { TSpacingLayout, getSpacingLayouts, spacingLayouts } from './methods/spacingLayout/index.js';
-export { ApiaThemeProvider } from './ApiaThemeProvider.js';
-export { focusOutline, responsive, smallButton, spacing } from './util.js';
-export { getVariant } from './util/getVariant.js';
-export { MarkdownBuilder } from './markdown/builder/MarkdownBuilder.js';
-export { MarkdownBlock } from './markdown/builder/elements/MarkdownBlock.js';
-export { MarkdownList } from './markdown/builder/elements/list.js';
-export { MarkdownParagraph } from './markdown/builder/elements/paragraph.js';
-export { MarkdownTable } from './markdown/builder/elements/table.js';
-export { MarkdownTableOfContents } from './markdown/builder/elements/tableOfContents.js';
-export { MarkdownTableCell, MarkdownTableObjectCell } from './markdown/extensions/table/types.js';
-export { parseMarkdown } from './markdown/parseMarkdown.js';
-export { IMarkdownStylesAggregator, RemarkableExtension } from './markdown/types.js';
+import { ResponsiveStyleValue, ThemeUICSSObject, Theme } from 'theme-ui';
 export { Alert, AlertProps, AspectImage, AspectImageProps, AspectRatio, AspectRatioProps, Avatar, AvatarProps, Badge, BadgeProps, BaseStyles, Box, BoxOwnProps, BoxProps, Button, ButtonProps, CSSObject, CSSProperties, CSSPseudoSelectorProps, Card, CardProps, Checkbox, CheckboxProps, Close, CloseIcon, CloseProps, ColorMode, ColorModesScale, Container, ContainerProps, Divider, DividerProps, Donut, DonutProps, Embed, EmbedProps, Field, FieldOwnProps, FieldProps, Flex, FlexOwnProps, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, InitializeColorMode, Input, InputProps, Label, LabelProps, Link, LinkProps, MenuButton, MenuButtonProps, MenuIcon, Message, MessageProps, NavLink, NavLinkProps, Paragraph, ParagraphProps, Progress, ProgressProps, Radio, RadioProps, ResponsiveStyleValue, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, StylePropertyValue, Switch, SwitchProps, SxProp, TLengthStyledSystem, Text, TextProps, Textarea, TextareaProps, Theme, ThemeStyles, ThemeUICSSObject, ThemeUICSSProperties, ThemeUIContextValue, ThemeUIStyleObject, createElement, css, get, merge, useColorMode, useThemeUI } from 'theme-ui';
+export * from '@theme-ui/match-media';
+import * as _theme_ui_css from '@theme-ui/css';
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { StateInline, TagToken, StateBlock } from 'remarkable/lib';
+import { Remarkable } from 'remarkable';
+
+/**
+ * Esta función devuelve un array de valores para los distintos breakpoints.
+ *
+ * **Importante** Debido a un issue con ThemeUI, es necesario agregar un
+ * breakpoint inicial de 0px para las vistas de impresión. El comportamiento por
+ * defecto será, si se pasa un valor para el índice 4, esta será tomada como
+ * vista de impresión, sino se tomará el valor de mayor índice menor que 4.
+ *
+ * @example
+ *
+ * display: responsive({0: 'none', 3: 'block'}) // display: ['block', 'none', null, null, 'block'];
+ */
+declare function responsive<T>(values: {
+    print?: T;
+    [key: number]: undefined | T;
+}): ResponsiveStyleValue<T>;
+/**
+ * Este método permite aplicar espacios (gaps, márgenes y paddings) que se
+ * tendrán un comportamiento responsivo por defecto. Esto es, cuando tenemos un
+ * padding en una vista de escritorio, probablemente sea demasiado grande al
+ * llevarlo a celular. Con esta función se elimina el problema de calcular para
+ * cada elemento en forma individual y el problema se convierte en encontrar
+ * una única fórmula que quede correcta para todos los breakpoints.
+ *
+ * @example
+ *
+ * '.wellPaddedElement': {
+ *    p: spacing(6),
+ *    pt: spacing(8)
+ * }
+ */
+declare function spacing(index: number): ResponsiveStyleValue<number>;
+declare const smallButton: {
+    py: number;
+    px: number;
+    fontSize: string;
+};
+declare const focusOutline: ThemeUICSSObject;
+
+interface TGetColorsAndStatesOptions {
+    mergeObject?: Record<string, any>;
+    states?: {
+        active?: boolean;
+        checked?: boolean;
+        default?: boolean;
+        disabled?: boolean;
+        focus?: boolean;
+        hover?: boolean;
+        readonly?: boolean;
+        path?: boolean;
+        selected?: boolean;
+    };
+}
+/**
+ * Esta función es útil para devolver los estados calculados por la aplicación
+ * dentro del objeto colors de ThemeUI. Si se desea calcular los estados en
+ * base a un color, se debe utilizar el método getColorsAndStatesByColor.
+ */
+declare function getColorsAndStatesByPath(incomingPath: string, options?: TGetColorsAndStatesOptions): Record<string, ThemeUICSSObject>;
+
+interface IColorDefinition {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: string;
+}
+interface IActionOpacity {
+    light: string;
+    dark: string;
+}
+interface TStates {
+    active?: boolean;
+    checked?: boolean;
+    default?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    readonly?: boolean;
+    selected?: boolean;
+}
+type TGetColorStateDefinition = Pick<ThemeUICSSObject, 'backgroundColor' | 'borderColor' | 'borderLeftColor' | 'borderRightColor' | 'borderBottomColor' | 'borderTopColor' | 'color'>;
+type TParsedPaletteColorStateRetriever = (color: string, state: keyof TStates) => string;
+type TColorStateRetriever = (color: string, state: keyof TStates, palette: TParsedPalette) => string;
+type TParsedPaletteStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates) => TGetColorStateDefinition;
+type TStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates, palette: TParsedPalette) => TGetColorStateDefinition;
+type TParsedPaletteStatesRetriever = (definition: Partial<TGetColorStateDefinition>, states?: TStates) => ThemeUICSSObject;
+type TStatesRetriever = (definition: Partial<TGetColorStateDefinition>, palette: TParsedPalette, states?: TStates) => ThemeUICSSObject;
+type TParsedPaletteStatesByDefinition = (definition: Partial<TGetColorStateDefinition>, options?: TGetColorsAndStatesOptions) => ThemeUICSSObject;
+type TApplyStates = (properties: Record<string, TColorDefinition | string | Record<string, unknown>>[], theme: Theme, states?: TStates) => void;
+interface TActionDefinition<OpacityColor = undefined | string | IActionOpacity> {
+    active: OpacityColor;
+    activeOpacity: number;
+    disabled: OpacityColor;
+    disabledOpacity: number;
+    focus: OpacityColor;
+    focusOpacity: number;
+    hover: OpacityColor;
+    hoverOpacity: number;
+    readonly: OpacityColor;
+    readonlyOpacity: number;
+    selected: OpacityColor;
+    selectedOpacity: number;
+}
+type TColorModifier = (color: string, ratio?: number) => string;
+interface TPalette<ColorDefinition = IColorDefinition, ColorModifier = TColorModifier, ActionDefinition = TActionDefinition> {
+    action: ActionDefinition;
+    background: {
+        default: string;
+        overlay: string;
+        paper: string;
+    };
+    border: {
+        article: string;
+        field: string;
+        ghost: string;
+        section: string;
+    };
+    common: {
+        white: string;
+        black: string;
+    };
+    error: ColorDefinition;
+    gray?: {
+        100: string;
+        150: string;
+        200: string;
+        250: string;
+        300: string;
+        350: string;
+        400: string;
+        450: string;
+        500: string;
+        550: string;
+        600: string;
+        650: string;
+        700: string;
+        750: string;
+        800: string;
+        850: string;
+        900: string;
+        950: string;
+    };
+    info: ColorDefinition;
+    primary: ColorDefinition;
+    secondary: ColorDefinition;
+    spacing: (index: number) => ResponsiveStyleValue<number>;
+    success: ColorDefinition;
+    text: {
+        accent: string;
+        disabled: string;
+        icon: string;
+        link: string;
+        primary: string;
+        secondary: string;
+        title: string;
+    };
+    warning: ColorDefinition;
+    lightenRatio?: number;
+    darkenRatio?: number;
+    /**
+     * Acepta un ratio entre 0 y 100
+     */
+    lightenColor?: ColorModifier;
+    /**
+     * Acepta un ratio entre 0 y 100
+     */
+    darkenColor?: ColorModifier;
+    getContrastText?: ColorModifier;
+    responsive: typeof responsive;
+    queryColumnsMultiplier?: number;
+}
+type TBuildStateObject = <T extends Partial<ThemeUICSSObject>>(props: T, state: keyof Required<TStates> | 'checked') => ThemeUICSSObject;
+type TBuildColorsObject = (definition: Partial<TGetColorStateDefinition>) => TGetColorStateDefinition;
+type TParsedPalette = Required<TPalette<Required<IColorDefinition>, TColorModifier, Required<TActionDefinition<IActionOpacity>>>> & {
+    applyStates: TApplyStates;
+    buildColorsObject: TBuildColorsObject;
+    buildStateObject: TBuildStateObject;
+    getColor: TParsedPaletteColorStateRetriever;
+    getColorStates: TParsedPaletteStatesRetriever;
+    getOneState: TParsedPaletteStateRetriever;
+    getStatesForColors: TParsedPaletteStatesRetriever;
+    getStatesFromDefinition: TParsedPaletteStatesByDefinition;
+    getStatesFromPath: typeof getColorsAndStatesByPath;
+    getSelectedColors: () => ThemeUICSSObject;
+    getColorsByPath: (path: string, options?: {
+        mergeObject?: Record<string, any>;
+    }) => TGetColorStateDefinition & Record<string, any>;
+};
+type TCustomPalette = Partial<TPalette> & Partial<Pick<TParsedPalette, 'applyStates' | 'buildColorsObject' | 'buildStateObject' | 'getColor' | 'getColorStates' | 'getSelectedColors' | 'getContrastText' | 'getOneState' | 'getStatesForColors' | 'getStatesFromDefinition' | 'getStatesFromPath'>>;
+type TColorDefinitionPrimitive = Pick<ThemeUICSSObject, 'color' | 'backgroundColor' | 'borderColor'>;
+type TColorDefinition = TColorDefinitionPrimitive & {
+    active?: TColorDefinitionPrimitive;
+    checked?: TColorDefinitionPrimitive;
+    disabled?: TColorDefinitionPrimitive;
+    focus?: TColorDefinitionPrimitive;
+    hover?: TColorDefinitionPrimitive;
+    preventParse?: boolean;
+    selected?: TColorDefinitionPrimitive;
+};
+declare global {
+    interface Window {
+        currentPalette: TParsedPalette;
+        customPalettes?: TPalette[];
+        defaultPalette?: TPalette;
+    }
+}
+type TThemeModifier = (theme: Theme) => Theme;
+
+declare function parsePalette(palette: TCustomPalette): TParsedPalette;
+
+type CustomTheme = Omit<Theme, 'palette'>;
+
+/**
+ * Este método está pensado para usarse únicamente dentro de applyStates, si se
+ * desea obtener un objeto con las propiedades correspondientes a un estado,
+ * utilizar el método getColorStates.
+ */
+declare const applyStatesGetColor: TStatesRetriever;
+
+/**
+ * Este método acepta un objeto con backgroundColor y borderColor y aplica el
+ * estado pasado como segundo parámetro de la siguiente manera:
+ *
+ * Si se pasa backgroundColor, se devuelve un backgroundColor y un color, que
+ * corresponden al backgroundColor con el estado aplicado y un color calculado
+ * con la función getContrastText.
+ *
+ * Si se pasa borderColor, se devuelve un nuevo borderColor calculado con el
+ * estado aplicado.
+ */
+declare const getColorState: TStateRetriever;
+
+/**
+ * Con este método es posible construir un objeto con las propiedades
+ * necesarias para aplicar los colores correspondientes a los estados deseados
+ * a partir de la definición provista.
+ */
+declare const getColorStates: TStatesRetriever;
+
+/**
+ * Esta función calcula los colores de los estados a partir de la definición
+ * pasada.
+ */
+declare function getColorsAndStatesByDefinition(definition: Partial<TGetColorStateDefinition>, palette: TParsedPalette, options?: TGetColorsAndStatesOptions): ThemeUICSSObject;
+
+/**
+ * Esta función arma un objeto con los colores que se deben aplicar para
+ * garantizar que el resultado sea el esperado, por ejemplo, al aplicar un
+ * color a un border. Esto es así ya que en ThemeUI hay situaciones en las que
+ * si no se aplican el color de borde a cada uno de los lados, no se aplica el
+ * color deseado.
+ *
+ * Ejemplo de lo antedicho es:
+ *
+ * borderRight: '1px solid',
+ * borderColor: 'red'.
+ *
+ * En este caso, el borde derecho no será rojo como se espera, ya que la
+ * propiedad borderRight aplicará un borderRightColor: 'initial', que solamente
+ * puede ser reescrito por borderRightColor: 'red'.
+ */
+declare function getColorsByDefinition(definition: Partial<TGetColorStateDefinition>, options?: {
+    mergeObject?: Record<string, any>;
+}): TGetColorStateDefinition & Record<string, any>;
+
+/**
+ * Esta función NO CALCULA ningún color, simplemente devuelve un objeto con las
+ * rutas de color con el formato de ThemeUI. Es útil cuando se desea aplicar
+ * colores definidos en el objeto colors.
+ *
+ * Si se desea generar un objeto con los colores a partir de una definición de
+ * colores del tipo TGetColorStateDefinition se debe utilizar el método
+ * getColorsByDefinition.
+ */
+declare function getColorsByPath(path: string, options?: {
+    mergeObject?: Record<string, any>;
+}): TGetColorStateDefinition & Record<string, any>;
+
+/**
+
+ * Este método acepta un color y aplica el estado pasado como segundo
+
+ * parámetro. De esta forma se puede obtener el color correspondiente al estado
+
+ * calculado automáticamente por la aplicación.
+
+ */
+declare const getOneColorState: TColorStateRetriever;
+
+declare function useMainTheme(customTheme?: () => CustomTheme, customPalette?: TCustomPalette, themeModifier?: TThemeModifier): _theme_ui_css.Theme<{}>;
+
+/**
+ * Permite crear un componente cuyos estilos pueden ser redefinidos por un
+ * usuario final.
+ *
+ * Esto es así puesto que los estilos definidos serán agregados a un árbol que
+ * el usuario puede consultar y sobreescribir. De esta manera los estilos
+ * finales del componente serán aquellos definidos en este método pero
+ * sobreescritos por los definidos por el usuario si es que existen.
+ *
+ * **Importante** Para aplicar la variante, se aplica un box alrededor del
+ * componente que se está renderizando, con className="variant__holder". En caso
+ * de que se quisiera evitar este comportamiento, se debe pasar unwraped = true
+ *
+ * @param displayName Este parámetro es importante para el debugger de React.
+ * @param stylesPath La ruta donde se aplicarán los estilos, es importante asegurarse de que esa ruta ya no está siendo utilizada por otro componente.
+ * @param styles Un objeto de estilos de ThemeUI
+ * @param Component La definición del componente.
+ * @returns Un componente reutilizable y exportable que tiene estilos aplicados.
+ */
+declare function makeStyledComponent<T extends object>(displayName: string, stylesPath: string, styles: ThemeUICSSObject, Component: FC<T>, unwraped?: boolean): ((props: T) => react.JSX.Element) & {
+    displayName: string;
+};
+
+/**
+ * Esta función permite agregar estilos al tema principal de la aplicación, de
+ * modo que estén disponibles para cualquier componente que lo requirea.
+ *
+ * @example
+ *
+ * injectStyles('buttons.myRedButton', {
+ *   variant: 'buttons.primary',
+ *   backgroundColor: 'red',
+ * })
+ */
+declare function injectStyles(path: string, styles: ThemeUICSSObject): void;
+/**
+ * Esta función permite agregar estilos al tema principal de la aplicación, de
+ * modo que estén disponibles para cualquier componente que lo requirea.
+ *
+ * @example
+ *
+ * injectStyles({
+ *  layout: {
+ *    panels: {
+ *      myPanel: {
+ *        ...
+ *      }
+ *    }
+ *  }
+ * })
+ */
+declare function injectStyles(styles: ThemeUICSSObject): void;
+
+declare const spacingLayouts: readonly ["dense", "clever", "vertical__clever", "horizontal__clever"];
+type TSpacingLayout = (typeof spacingLayouts)[number];
+declare function getSpacingLayouts(): {
+    '&.dense': {
+        px: number;
+        py: number;
+    };
+    '&.horizontal__clever': {
+        px: number;
+        py: number;
+    };
+    '&.vertical__clever': {
+        px: number;
+        py: number;
+    };
+    '&.clever': {
+        px: number;
+        py: number;
+    };
+};
+
+interface TThemeProvider {
+    children: ReactNode;
+    customTheme?: () => Omit<Theme, 'palette'>;
+    customPalette?: () => TCustomPalette | undefined;
+    themeModifier?: TThemeModifier;
+}
+declare const ApiaThemeProvider: ({ children, customTheme, customPalette, themeModifier, }: TThemeProvider) => react.JSX.Element;
+
+declare function getVariant(variant: string): {
+    variant: string;
+    'data-variant': string;
+};
+
+type TMarkdownTableAlignment = 'left' | 'center' | 'right' | 'justify';
+type MarkdownTableObjectCell = {
+    /**
+     * The html element class attribute, may contain one or more classes
+     * separated by space.
+     */
+    className?: string;
+    colSpan?: string;
+    content: string;
+    rowSpan?: string;
+    /**
+     * Any valid style attribute value: CSS properties separated by ;
+     */
+    style?: string;
+    align?: TMarkdownTableAlignment;
+};
+type MarkdownTableCell = string | MarkdownTableObjectCell;
+
+type IMarkdownHtml = (title: string, css: string, body: string) => string;
+type IMarkdownParser = (options: IMarkdownConfiguration) => Promise<string>;
+interface IMarkdownConfiguration {
+    /**
+     * Cadena de caracteres de CSS
+     */
+    additionalStyles?: IMarkdownStylesAggregator;
+    /**
+     * Permite agregar contenido al body del html generado.
+     */
+    additionalBodyContent?: Partial<{
+        before: string;
+        after: string;
+    }>;
+    /**
+     * Contenido markdown
+     */
+    content: string;
+    /**
+     * Permite el pasaje de extensiones adicionales
+     */
+    extensions?: RemarkableExtension[];
+    /**
+     * Si el template html por defecto no es suficiente, se puede optar por un
+     * template a medida.
+     */
+    htmlTemplate?: IMarkdownHtml;
+    /**
+     * If passed, will print the table of contents with the indicated title.
+     */
+    tableOfContentsTitle?: string;
+    /**
+     * Título que se mostrará en el html
+     */
+    title: string;
+}
+interface IRemarkableInlineExtension {
+    name: string;
+    parser: (state: StateInline, checkMode: boolean) => boolean;
+    replacer: (md: Remarkable) => (tokens: TagToken[], idx: number) => string;
+    styles: () => string;
+}
+interface IRemarkableBlockExtension {
+    name: string;
+    parser: (state: StateBlock, startLine: number, endLine: number, checkMode: boolean) => boolean;
+    replacer: (md: Remarkable) => (tokens: TagToken[], idx: number) => string;
+    styles: () => string;
+}
+type RemarkableExtension = IRemarkableInlineExtension | IRemarkableBlockExtension;
+type IMarkdownStylesAggregator = () => string;
+
+declare abstract class MarkdownBlock {
+    /**
+     * Each markdown block must export a valid markdown string
+     */
+    abstract toString(): string;
+}
+
+declare class MarkdownParagraph extends MarkdownBlock {
+    protected text: string;
+    constructor(text: string);
+    toString(): string;
+}
+
+type TDialogBoxTypes = 'success' | 'warning' | 'error';
+declare class MarkdownDialogBox extends MarkdownParagraph {
+    protected level: TDialogBoxTypes;
+    constructor(text: string, level?: TDialogBoxTypes);
+    toString(): string;
+}
+
+declare class MarkdownHeader extends MarkdownParagraph {
+    protected text: string;
+    private prefix;
+    constructor(text: string, prefix?: string);
+    toString(): string;
+}
+
+declare class MarkdownList extends MarkdownBlock {
+    protected sorted: boolean;
+    protected items: MarkdownBuilder[];
+    constructor(sorted?: boolean);
+    /**
+     * Cada elemento de la lista es un MarkdownBuilder.
+     *
+     * Si se pasa text como parámetro, este texto será agregado mediante
+     * builder.p(text)
+     */
+    add(text?: string): MarkdownBuilder;
+    toString(sorted?: boolean): string;
+}
+
+declare class MarkdownTable extends MarkdownBlock {
+    #private;
+    protected header: MarkdownTableCell[];
+    protected rows: MarkdownTableCell[][];
+    id: string;
+    constructor(header?: MarkdownTableCell[], rows?: MarkdownTableCell[][]);
+    /**
+     * Add rows to the body
+     */
+    addRows(rows: MarkdownTableCell[][]): void;
+    /**
+     * Removes every row from the body.
+     */
+    clear(): void;
+    /**
+     * The header allows an only row by now
+     */
+    setHeader(row: MarkdownTableCell[]): void;
+    setId(id: string): void;
+    toString(): string;
+}
+
+declare class MarkdownBuilder {
+    protected blocks: MarkdownBlock[];
+    protected extensions: RemarkableExtension[];
+    setExtensions(extensions: RemarkableExtension[]): this;
+    custom(block: MarkdownBlock): void;
+    h1(text: string): MarkdownHeader;
+    h2(text: string): MarkdownHeader;
+    h3(text: string): MarkdownHeader;
+    h4(text: string): MarkdownHeader;
+    h5(text: string): MarkdownHeader;
+    h6(text: string): MarkdownHeader;
+    p(text: string): MarkdownParagraph;
+    list(sorted?: boolean): MarkdownList;
+    dialogBox(text: string, level?: TDialogBoxTypes): MarkdownDialogBox;
+    table(header?: MarkdownTableCell[], rows?: MarkdownTableCell[][]): MarkdownTable;
+    /**
+     * Este método debería ser llamado una única vez dentro de un documento,
+     * agrega la tabla de contenidos la html
+     */
+    tableOfContents(): void;
+    /**
+     * Este método recibe un html y le agrega la tabla de contenidos, dentro de
+     * un div con id="TableOfCOntents"
+     */
+    addTableOfContents(tableOfContentsTitle: string, html: string): string;
+    toMarkdown(): string;
+    toHtml(options: Pick<IMarkdownConfiguration, 'additionalStyles' | 'extensions' | 'htmlTemplate' | 'title' | 'tableOfContentsTitle'>): Promise<string>;
+}
+
+declare class MarkdownTableOfContents extends MarkdownParagraph {
+    constructor();
+    /**
+     * Este método toma el html, busca todos los headings (que ya fueron
+     * procesados por setUniqueIds) y crea una tabla de contenidos a partir de
+     * esos ids
+     */
+    private static makeTableOfContents;
+    private static deletePrevValues;
+    private static getParent;
+    private static createNewLevel;
+    private static getNodeDepth;
+    /**
+     * Este método toma el html original, busca todos los headings y a cada uno
+     * le pone un id único, reemplazando el id original si lo tuviera:
+     *
+     * Si un heading no tiene id: le agrega uno autogenerado con autoincrement +
+     * texto del heading procesado (reemplazar espacios por guiones, etc)
+     *
+     * Si un heading tiene id: le agrega un autoincrement con un sufijo:
+     * {id_original}_-_{autoincrement}
+     *
+     * De esta forma, nos aseguramos que ningún heading tenga un id igual a otro
+     */
+    private static setUniqueId;
+    static appendTableOfContents(title: string, html: string): string;
+}
+
+/**
+ * Toma una cadena de markdown y la convierte a html, incluyendo estilos por
+ * defecto
+ */
+declare const parseMarkdown: IMarkdownParser;
 
 declare module '@theme-ui/css' {
     interface Theme {
@@ -35,5 +586,5 @@ declare module '@theme-ui/css' {
     }
 }
 
-export { TParsedPalette };
+export { ApiaThemeProvider, type CustomTheme, type IMarkdownStylesAggregator, MarkdownBlock, MarkdownBuilder, MarkdownList, MarkdownParagraph, MarkdownTable, type MarkdownTableCell, type MarkdownTableObjectCell, MarkdownTableOfContents, type RemarkableExtension, type TColorDefinition, type TCustomPalette, type TPalette, type TParsedPalette, type TSpacingLayout, type TThemeModifier, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parseMarkdown, parsePalette, responsive, smallButton, spacing, spacingLayouts, useMainTheme };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,26 +1,11 @@
-export { default as applyStatesGetColor } from './base/colors/util/applyStatesGetColor.js';
-export { default as parsePalette } from './base/colors/util/parsePalette.js';
+export { A as ApiaThemeProvider, M as MarkdownBlock, t as MarkdownBuilder, w as MarkdownList, x as MarkdownParagraph, y as MarkdownTable, z as MarkdownTableOfContents, h as applyStatesGetColor, o as focusOutline, g as getColorState, a as getColorStates, b as getColorsAndStatesByDefinition, c as getColorsAndStatesByPath, d as getColorsByDefinition, e as getColorsByPath, f as getOneColorState, k as getSpacingLayouts, q as getVariant, j as injectStyles, i as makeStyledComponent, v as parseMarkdown, p as parsePalette, r as responsive, n as smallButton, l as spacing, s as spacingLayouts, u as useMainTheme } from './index-YQcMmPq6.js';
 export * from '@theme-ui/match-media';
-export { ApiaThemeProvider } from './ApiaThemeProvider.js';
-export { focusOutline, responsive, smallButton, spacing } from './util.js';
-export { default as getColorState } from './base/colors/util/getColorState.js';
-export { default as getColorStates } from './base/colors/util/getColorStates.js';
-export { default as getColorsAndStatesByDefinition } from './base/colors/util/getColorsAndStatesByDefinition.js';
-export { default as getColorsAndStatesByPath } from './base/colors/util/getColorsAndStatesByPath.js';
-export { default as getOneColorState } from './base/colors/util/getOneColorState.js';
 export { Alert, AspectImage, AspectRatio, Avatar, Badge, BaseStyles, Box, Button, Card, Checkbox, Close, CloseIcon, Container, Divider, Donut, Embed, Flex, Global, Grid, Heading, IconButton, Image, InitializeColorMode, Input, Label, Link, MenuButton, MenuIcon, Message, NavLink, Paragraph, Progress, Radio, Select, Slider, Spinner, Switch, Text, Textarea, createElement, css, get, merge, useColorMode, useThemeUI } from 'theme-ui';
-export { makeStyledComponent } from './methods/makeStyledComponent.js';
-export { injectStyles } from './methods/injectStyles.js';
-export { getSpacingLayouts, spacingLayouts } from './methods/spacingLayout/index.js';
-export { useMainTheme } from './methods/useMainTheme.js';
-export { default as getColorsByDefinition } from './base/colors/util/getColorsByDefinition.js';
-export { default as getColorsByPath } from './base/colors/util/getColorsByPath.js';
-export { getVariant } from './util/getVariant.js';
-export { MarkdownBlock } from './markdown/builder/elements/MarkdownBlock.js';
-export { MarkdownBuilder } from './markdown/builder/MarkdownBuilder.js';
-export { parseMarkdown } from './markdown/parseMarkdown.js';
-export { MarkdownList } from './markdown/builder/elements/list.js';
-export { MarkdownParagraph } from './markdown/builder/elements/paragraph.js';
-export { MarkdownTable } from './markdown/builder/elements/table.js';
-export { MarkdownTableOfContents } from './markdown/builder/elements/tableOfContents.js';
+import 'lodash-es/cloneDeep';
+import 'tinycolor2';
+import 'lodash-es/merge';
+import 'theme-ui/jsx-runtime';
+import 'react';
+import '@apia/util';
+import '@apia/theme';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}