@apia/theme 1.0.4 → 2.0.0

package/dist/markdown/getRemarkable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getRemarkable.js","sources":["../../src/markdown/getRemarkable.ts"],"sourcesContent":["import { markdownExtensions } from './extensions';\nimport {\n  ErrorImporting,\n  IRemarkableBlockExtension,\n  IRemarkableInlineExtension,\n  RemarkableExtension,\n} from './types';\n\nfunction isInlineExtension(\n  ext: RemarkableExtension,\n): ext is IRemarkableInlineExtension {\n  return ext.parser.length === 2;\n}\n\nfunction isBlockExtension(\n  ext: RemarkableExtension,\n): ext is IRemarkableBlockExtension {\n  return ext.parser.length === 4;\n}\n\nexport async function getRemarkable(extensions?: RemarkableExtension[]) {\n  const md = new ((await import('remarkable'))?.Remarkable ?? ErrorImporting)({\n    html: true,\n  });\n  if (md instanceof ErrorImporting)\n    throw new Error('Could not import remarkable, cannot continue');\n\n  md.block.ruler.disable(['table']);\n\n  [...(extensions ?? []), ...markdownExtensions].forEach((ext) => {\n    if (isInlineExtension(ext))\n      md.inline.ruler.before('text', ext.name, ext.parser, {});\n    else if (isBlockExtension(ext))\n      md.block.ruler.before('code', ext.name, ext.parser, {});\n    md.renderer.rules[ext.name] = ext.replacer(md);\n  });\n\n  return md;\n}\n"],"names":[],"mappings":";;;AAQA,SAAS,kBACP,GACmC,EAAA;AACnC,EAAO,OAAA,GAAA,CAAI,OAAO,MAAW,KAAA,CAAA,CAAA;AAC/B,CAAA;AAEA,SAAS,iBACP,GACkC,EAAA;AAClC,EAAO,OAAA,GAAA,CAAI,OAAO,MAAW,KAAA,CAAA,CAAA;AAC/B,CAAA;AAEA,eAAsB,cAAc,UAAoC,EAAA;AACtE,EAAA,MAAM,KAAK,KAAM,CAAA,MAAM,OAAO,YAAY,CAAA,GAAI,cAAc,cAAgB,EAAA;AAAA,IAC1E,IAAM,EAAA,IAAA;AAAA,GACP,CAAA,CAAA;AACD,EAAA,IAAI,EAAc,YAAA,cAAA;AAChB,IAAM,MAAA,IAAI,MAAM,8CAA8C,CAAA,CAAA;AAEhE,EAAA,EAAA,CAAG,KAAM,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,OAAO,CAAC,CAAA,CAAA;AAEhC,EAAC,CAAA,GAAI,cAAc,EAAC,EAAI,GAAG,kBAAkB,CAAA,CAAE,OAAQ,CAAA,CAAC,GAAQ,KAAA;AAC9D,IAAA,IAAI,kBAAkB,GAAG,CAAA;AACvB,MAAG,EAAA,CAAA,MAAA,CAAO,MAAM,MAAO,CAAA,MAAA,EAAQ,IAAI,IAAM,EAAA,GAAA,CAAI,MAAQ,EAAA,EAAE,CAAA,CAAA;AAAA,SAAA,IAChD,iBAAiB,GAAG,CAAA;AAC3B,MAAG,EAAA,CAAA,KAAA,CAAM,MAAM,MAAO,CAAA,MAAA,EAAQ,IAAI,IAAM,EAAA,GAAA,CAAI,MAAQ,EAAA,EAAE,CAAA,CAAA;AACxD,IAAA,EAAA,CAAG,SAAS,KAAM,CAAA,GAAA,CAAI,IAAI,CAAI,GAAA,GAAA,CAAI,SAAS,EAAE,CAAA,CAAA;AAAA,GAC9C,CAAA,CAAA;AAED,EAAO,OAAA,EAAA,CAAA;AACT;;;;"}

package/dist/markdown/help.js

@@ -0,0 +1,28 @@
+function assignHelp(fn) {
+  Object.assign(fn, {
+    help: `A markdown parser. Accepts a configuration object with the following structure: 
+  
+interface IMarkdownFile {
+  /**
+   * Cadena de caracteres de CSS
+   */
+  additionalStyles?: string;
+  /**
+   * Contenido markdown
+   */
+  content: string;
+  /**
+   * Si el template html por defecto no es suficiente, se puede optar por un
+   * template a medida.
+   */
+  htmlTemplate?: IMarkdownHtml;
+  /**
+   * T\xEDtulo que se mostrar\xE1 en el html
+   */
+  title: string;
+}`
+  });
+}
+
+export { assignHelp };
+//# sourceMappingURL=help.js.map

package/dist/markdown/help.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"help.js","sources":["../../src/markdown/help.ts"],"sourcesContent":["import { IMarkdownParser } from './types';\n\nexport function assignHelp(fn: IMarkdownParser) {\n  Object.assign(fn, {\n    help: `A markdown parser. Accepts a configuration object with the following structure: \n  \ninterface IMarkdownFile {\n  /**\n   * Cadena de caracteres de CSS\n   */\n  additionalStyles?: string;\n  /**\n   * Contenido markdown\n   */\n  content: string;\n  /**\n   * Si el template html por defecto no es suficiente, se puede optar por un\n   * template a medida.\n   */\n  htmlTemplate?: IMarkdownHtml;\n  /**\n   * Título que se mostrará en el html\n   */\n  title: string;\n}`,\n  });\n}\n"],"names":[],"mappings":"AAEO,SAAS,WAAW,EAAqB,EAAA;AAC9C,EAAA,MAAA,CAAO,OAAO,EAAI,EAAA;AAAA,IAChB,IAAM,EAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAAA,GAqBP,CAAA,CAAA;AACH;;;;"}

package/dist/markdown/html.js

@@ -0,0 +1,17 @@
+const markdownHtml = (title, css, body) => `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <style>
+${css}
+  </style>
+</head>
+<body>
+  <main id="Container">${body}</main>
+</body>
+</html>`;
+
+export { markdownHtml };
+//# sourceMappingURL=html.js.map

package/dist/markdown/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sources":["../../src/markdown/html.ts"],"sourcesContent":["import { IMarkdownHtml } from './types';\n\nexport const markdownHtml: IMarkdownHtml = (\n  title: string,\n  css: string,\n  body: string,\n) => `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>${title}</title>\n  <style>\n${css}\n  </style>\n</head>\n<body>\n  <main id=\"Container\">${body}</main>\n</body>\n</html>`;\n"],"names":[],"mappings":"AAEO,MAAM,YAA8B,GAAA,CACzC,KACA,EAAA,GAAA,EACA,IACG,KAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EAKM,KAAK,CAAA;AAAA;AAAA,EAEd,GAAG,CAAA;AAAA;AAAA;AAAA;AAAA,uBAAA,EAIoB,IAAI,CAAA;AAAA;AAAA,OAAA;;;;"}

package/dist/markdown/parseMarkdown.d.ts

@@ -0,0 +1,10 @@
+import { IMarkdownParser } from './types.js';
+
+/**
+ * Toma una cadena de markdown y la convierte a html, incluyendo estilos por
+ * defecto
+ */
+declare const parseMarkdown: IMarkdownParser;
+
+export { parseMarkdown };
+//# sourceMappingURL=parseMarkdown.d.ts.map

package/dist/markdown/parseMarkdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseMarkdown.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/markdown/parseMarkdown.js

@@ -0,0 +1,31 @@
+import { assignHelp } from './help.js';
+import { ErrorImporting } from './types.js';
+import { getRemarkable } from './getRemarkable.js';
+import { MarkdownBuilder } from './builder/MarkdownBuilder.js';
+
+const parseMarkdown = async (options) => {
+  const markdownLibrary = await getRemarkable(options.extensions);
+  const css = (await import('./styles.js')).markdownParserStyles ?? new ErrorImporting();
+  if (css instanceof ErrorImporting)
+    throw new Error("Could not import css, cannot continue");
+  const html = options.htmlTemplate ?? (await import('./html.js')).markdownHtml ?? new ErrorImporting();
+  if (html instanceof ErrorImporting)
+    throw new Error("Could not import html, cannot continue");
+  const markdownString = options.content;
+  const markdownParser = markdownLibrary.render.bind(markdownLibrary);
+  let htmlString = markdownParser(markdownString);
+  if (options.tableOfContentsTitle) {
+    const b = new MarkdownBuilder();
+    htmlString = b.addTableOfContents(options.tableOfContentsTitle, htmlString);
+  }
+  const rendered = html(
+    options.title,
+    css(options.additionalStyles, options.extensions),
+    `${options?.additionalBodyContent?.before ?? ""}${htmlString}${options?.additionalBodyContent?.after ?? ""}`
+  );
+  return rendered;
+};
+assignHelp(parseMarkdown);
+
+export { parseMarkdown };
+//# sourceMappingURL=parseMarkdown.js.map

package/dist/markdown/parseMarkdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseMarkdown.js","sources":["../../src/markdown/parseMarkdown.ts"],"sourcesContent":["import { assignHelp } from './help';\nimport { ErrorImporting, IMarkdownParser } from './types';\nimport { getRemarkable } from './getRemarkable';\nimport { MarkdownBuilder } from './builder/MarkdownBuilder';\n\n/**\n * Toma una cadena de markdown y la convierte a html, incluyendo estilos por\n * defecto\n */\nexport const parseMarkdown: IMarkdownParser = async (options) => {\n  const markdownLibrary = await getRemarkable(options.extensions);\n\n  const css =\n    (await import('./styles')).markdownParserStyles ?? new ErrorImporting();\n  if (css instanceof ErrorImporting)\n    throw new Error('Could not import css, cannot continue');\n\n  const html =\n    options.htmlTemplate ??\n    (await import('./html')).markdownHtml ??\n    new ErrorImporting();\n  if (html instanceof ErrorImporting)\n    throw new Error('Could not import html, cannot continue');\n\n  const markdownString = options.content;\n\n  const markdownParser = markdownLibrary.render.bind(markdownLibrary);\n  let htmlString = markdownParser(markdownString);\n\n  if (options.tableOfContentsTitle) {\n    const b = new MarkdownBuilder();\n    htmlString = b.addTableOfContents(options.tableOfContentsTitle, htmlString);\n  }\n\n  const rendered = html(\n    options.title,\n    css(options.additionalStyles, options.extensions),\n    `${options?.additionalBodyContent?.before ?? ''}${htmlString}${options?.additionalBodyContent?.after ?? ''}`,\n  );\n\n  return rendered;\n};\n\nassignHelp(parseMarkdown);\n"],"names":[],"mappings":";;;;;AASa,MAAA,aAAA,GAAiC,OAAO,OAAY,KAAA;AAC/D,EAAA,MAAM,eAAkB,GAAA,MAAM,aAAc,CAAA,OAAA,CAAQ,UAAU,CAAA,CAAA;AAE9D,EAAA,MAAM,OACH,MAAM,OAAO,aAAU,CAAG,EAAA,oBAAA,IAAwB,IAAI,cAAe,EAAA,CAAA;AACxE,EAAA,IAAI,GAAe,YAAA,cAAA;AACjB,IAAM,MAAA,IAAI,MAAM,uCAAuC,CAAA,CAAA;AAEzD,EAAM,MAAA,IAAA,GACJ,QAAQ,YACP,IAAA,CAAA,MAAM,OAAO,WAAQ,CAAA,EAAG,YACzB,IAAA,IAAI,cAAe,EAAA,CAAA;AACrB,EAAA,IAAI,IAAgB,YAAA,cAAA;AAClB,IAAM,MAAA,IAAI,MAAM,wCAAwC,CAAA,CAAA;AAE1D,EAAA,MAAM,iBAAiB,OAAQ,CAAA,OAAA,CAAA;AAE/B,EAAA,MAAM,cAAiB,GAAA,eAAA,CAAgB,MAAO,CAAA,IAAA,CAAK,eAAe,CAAA,CAAA;AAClE,EAAI,IAAA,UAAA,GAAa,eAAe,cAAc,CAAA,CAAA;AAE9C,EAAA,IAAI,QAAQ,oBAAsB,EAAA;AAChC,IAAM,MAAA,CAAA,GAAI,IAAI,eAAgB,EAAA,CAAA;AAC9B,IAAA,UAAA,GAAa,CAAE,CAAA,kBAAA,CAAmB,OAAQ,CAAA,oBAAA,EAAsB,UAAU,CAAA,CAAA;AAAA,GAC5E;AAEA,EAAA,MAAM,QAAW,GAAA,IAAA;AAAA,IACf,OAAQ,CAAA,KAAA;AAAA,IACR,GAAI,CAAA,OAAA,CAAQ,gBAAkB,EAAA,OAAA,CAAQ,UAAU,CAAA;AAAA,IAChD,CAAA,EAAG,OAAS,EAAA,qBAAA,EAAuB,MAAU,IAAA,EAAE,CAAG,EAAA,UAAU,CAAG,EAAA,OAAA,EAAS,qBAAuB,EAAA,KAAA,IAAS,EAAE,CAAA,CAAA;AAAA,GAC5G,CAAA;AAEA,EAAO,OAAA,QAAA,CAAA;AACT,EAAA;AAEA,UAAA,CAAW,aAAa,CAAA;;;;"}

package/dist/markdown/styles.js

@@ -0,0 +1,55 @@
+import { markdownTheme } from './theme/markdownTheme.js';
+import { markdownExtensions } from './extensions/index.js';
+
+const printStyles = () => `
+@media print {
+  body {
+    background: white;
+  }
+
+  #Container {
+    border: none;
+    margin: 0;
+    width: auto;
+    padding: 0;
+  }
+}
+`;
+const styles = (additionalStyles, extensions) => {
+  const generated = `
+${markdownTheme}
+
+#Container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  margin: var(--space-6) auto;
+  width: 920px;
+
+  & > * {
+    margin: 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+  }
+
+  li > *:not(:first-child) {
+    margin-top: var(--space-5);
+    margin-bottom: var(--space-5);
+  }
+}
+${printStyles()}
+
+${[...extensions ?? [], ...markdownExtensions].map((current) => current.styles()).join("\n\n")}
+
+${additionalStyles?.() ?? ""}
+`;
+  return generated;
+};
+const markdownParserStyles = (additionalStyles, extensions) => {
+  return styles(additionalStyles, extensions);
+};
+
+export { markdownParserStyles };
+//# sourceMappingURL=styles.js.map

package/dist/markdown/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../src/markdown/styles.ts"],"sourcesContent":["import { IMarkdownStylesAggregator, RemarkableExtension } from './types';\nimport { markdownTheme } from './theme/markdownTheme';\nimport { markdownExtensions } from './extensions';\n\nconst printStyles: IMarkdownStylesAggregator = () => `\n@media print {\n  body {\n    background: white;\n  }\n\n  #Container {\n    border: none;\n    margin: 0;\n    width: auto;\n    padding: 0;\n  }\n}\n`;\n\nconst styles = (\n  additionalStyles?: IMarkdownStylesAggregator,\n  extensions?: RemarkableExtension[],\n) => {\n  const generated = `\n${markdownTheme}\n\n#Container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  margin: var(--space-6) auto;\n  width: 920px;\n\n  & > * {\n    margin: 0;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    margin: 0;\n  }\n\n  li > *:not(:first-child) {\n    margin-top: var(--space-5);\n    margin-bottom: var(--space-5);\n  }\n}\n${printStyles()}\n\n${[...(extensions ?? []), ...markdownExtensions]\n  .map((current) => current.styles())\n  .join('\\n\\n')}\n\n${additionalStyles?.() ?? ''}\n`;\n\n  return generated;\n};\n\nexport const markdownParserStyles = (\n  additionalStyles?: IMarkdownStylesAggregator,\n  extensions?: RemarkableExtension[],\n) => {\n  return styles(additionalStyles, extensions);\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,cAAyC,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAerD,MAAM,MAAA,GAAS,CACb,gBAAA,EACA,UACG,KAAA;AACH,EAAA,MAAM,SAAY,GAAA,CAAA;AAAA,EAClB,aAAa,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBb,aAAa,CAAA;AAAA;AAAA,EAEb,CAAC,GAAI,UAAA,IAAc,EAAC,EAAI,GAAG,kBAAkB,CAAA,CAC5C,GAAI,CAAA,CAAC,YAAY,OAAQ,CAAA,MAAA,EAAQ,CACjC,CAAA,IAAA,CAAK,MAAM,CAAC,CAAA;AAAA;AAAA,EAEb,gBAAA,QAAwB,EAAE,CAAA;AAAA,CAAA,CAAA;AAG1B,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,oBAAA,GAAuB,CAClC,gBAAA,EACA,UACG,KAAA;AACH,EAAO,OAAA,MAAA,CAAO,kBAAkB,UAAU,CAAA,CAAA;AAC5C;;;;"}

package/dist/markdown/theme/markdownTheme.js

@@ -0,0 +1,143 @@
+const markdownTheme = `:root {
+  --color-error-back: #fff2f4;
+  --color-error-border: rgb(115, 7, 9);
+  --color-error-text: var(--color-text-default);
+  --color-warning-back: #fffdd9;
+  --color-warning-border: rgb(244, 239, 64);
+  --color-warning-text: var(--color-text-default);
+  --color-success-back: #e7ffd9;
+  --color-success-border: rgb(79, 205, 79);
+  --color-success-text: var(--color-text-default);
+  --color-primary: rgb(0, 73, 108);
+  --color-primary-light: #f8fdff;
+  --color-primary-contrast: white;
+  --color-back-paper: white;
+  --color-back-default: white;
+  --color-border-field: #aaa;
+  --color-border-section: #ddd;
+  --color-text-default: #333;
+  --color-text-disabled: #aaa;
+  --color-text-heading: var(--color-primary);
+  --font-size-h1: 32px;
+  --font-size-h2: 28px;
+  --font-size-h3: 25px;
+  --font-size-h4: 21px;
+  --font-size-h5: 18px;
+  --font-size-h6: 16px;
+  --font-size-default: 16px;
+  --font-family-heading: Inter, system-ui, "Segoe UI", "Helvetica Neue", sans-serif, Roboto;
+  --font-family-default: Inter, system-ui, "Segoe UI", "Helvetica Neue", sans-serif, Roboto;
+  --font-family-monospace: monospace;
+  --table-head-color-background: var(--color-primary);
+  --table-head-color-text: var(--color-primary-contrast);
+  --table-head-color-border: var(--color-primary);
+  --table-head-border: 1px solid var(--table-head-color-border);
+  --table-head-cell-padding: var(--space-4);
+  --table-head-font-weight: bold;
+  --table-head-text-align: center;
+  --table-body-color-background: transparent;
+  --table-body-color-background-odd: var(--color-primary-light);
+  --table-body-color-text: inherit;
+  --table-body-color-border: var(--color-border-section);
+  --table-body-border: 1px solid var(--table-body-color-border);
+  --table-body-cell-padding: var(--space-4);
+  --table-color-background: var(--color-back-paper);
+  --table-color-border: var(--color-border-section);
+  --table-border: 1px solid var(--table-color-border);
+  --table-border-collapse: collapse;
+  --shadow-sheet: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
+  --space-0: 0;
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 8px;
+  --space-4: 12px;
+  --space-5: 16px;
+  --space-6: 24px;
+}
+
+html {
+  margin: 0;
+  font-size: var(--font-size-default);
+  font-family: var(--font-family-default);
+  color: var(--color-text-default);
+}
+
+body {
+  background: var(--color-back-default);
+  margin: 0;
+}
+
+pre, code {
+  font-family: var(--font-family-monospace);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-family-heading);
+  color: var(--color-text-heading);
+}
+
+h1 {
+  font-size: var(--font-size-h1);
+}
+h1:first-of-type {
+  margin-top: 0;
+}
+
+h2 {
+  font-size: var(--font-size-h2);
+}
+
+h3 {
+  font-size: var(--font-size-h3);
+}
+
+h4 {
+  font-size: var(--font-size-h4);
+}
+
+h5 {
+  font-size: var(--font-size-h5);
+}
+
+h6 {
+  font-size: var(--font-size-h6);
+}
+
+a {
+  color: var(--color-text-default);
+}
+
+a:visited {
+  color: var(--color-primary);
+}
+
+table {
+  border-collapse: var(--table-border-collapse);
+  border: var(--table-border);
+  width: 100%;
+}
+table thead th, table thead td.heading, table tbody th, table tbody td.heading {
+  background: var(--table-head-color-background);
+  color: var(--table-head-color-text);
+  border: var(--table-head-border);
+  padding: var(--table-head-cell-padding);
+  font-weight: var(--table-head-font-weight);
+  text-align: var(--table-head-text-align);
+  text-wrap: nowrap;
+}
+table tbody td {
+  background: var(--table-body-color-background);
+  color: var(--table-body-color-text);
+  border: var(--table-body-border);
+  padding: var(--table-body-cell-padding);
+}
+table tbody tr:nth-child(2n) td:not(.heading) {
+  background: var(--table-body-color-background-odd);
+}
+
+img {
+  max-width: 100%;
+}`;
+
+export { markdownTheme };
+//# sourceMappingURL=markdownTheme.js.map

package/dist/markdown/theme/markdownTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownTheme.js","sources":["../../../src/markdown/theme/markdownTheme.ts"],"sourcesContent":["export const markdownTheme = `:root {\n  --color-error-back: #fff2f4;\n  --color-error-border: rgb(115, 7, 9);\n  --color-error-text: var(--color-text-default);\n  --color-warning-back: #fffdd9;\n  --color-warning-border: rgb(244, 239, 64);\n  --color-warning-text: var(--color-text-default);\n  --color-success-back: #e7ffd9;\n  --color-success-border: rgb(79, 205, 79);\n  --color-success-text: var(--color-text-default);\n  --color-primary: rgb(0, 73, 108);\n  --color-primary-light: #f8fdff;\n  --color-primary-contrast: white;\n  --color-back-paper: white;\n  --color-back-default: white;\n  --color-border-field: #aaa;\n  --color-border-section: #ddd;\n  --color-text-default: #333;\n  --color-text-disabled: #aaa;\n  --color-text-heading: var(--color-primary);\n  --font-size-h1: 32px;\n  --font-size-h2: 28px;\n  --font-size-h3: 25px;\n  --font-size-h4: 21px;\n  --font-size-h5: 18px;\n  --font-size-h6: 16px;\n  --font-size-default: 16px;\n  --font-family-heading: Inter, system-ui, \"Segoe UI\", \"Helvetica Neue\", sans-serif, Roboto;\n  --font-family-default: Inter, system-ui, \"Segoe UI\", \"Helvetica Neue\", sans-serif, Roboto;\n  --font-family-monospace: monospace;\n  --table-head-color-background: var(--color-primary);\n  --table-head-color-text: var(--color-primary-contrast);\n  --table-head-color-border: var(--color-primary);\n  --table-head-border: 1px solid var(--table-head-color-border);\n  --table-head-cell-padding: var(--space-4);\n  --table-head-font-weight: bold;\n  --table-head-text-align: center;\n  --table-body-color-background: transparent;\n  --table-body-color-background-odd: var(--color-primary-light);\n  --table-body-color-text: inherit;\n  --table-body-color-border: var(--color-border-section);\n  --table-body-border: 1px solid var(--table-body-color-border);\n  --table-body-cell-padding: var(--space-4);\n  --table-color-background: var(--color-back-paper);\n  --table-color-border: var(--color-border-section);\n  --table-border: 1px solid var(--table-color-border);\n  --table-border-collapse: collapse;\n  --shadow-sheet: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;\n  --space-0: 0;\n  --space-1: 2px;\n  --space-2: 4px;\n  --space-3: 8px;\n  --space-4: 12px;\n  --space-5: 16px;\n  --space-6: 24px;\n}\n\nhtml {\n  margin: 0;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family-default);\n  color: var(--color-text-default);\n}\n\nbody {\n  background: var(--color-back-default);\n  margin: 0;\n}\n\npre, code {\n  font-family: var(--font-family-monospace);\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-family-heading);\n  color: var(--color-text-heading);\n}\n\nh1 {\n  font-size: var(--font-size-h1);\n}\nh1:first-of-type {\n  margin-top: 0;\n}\n\nh2 {\n  font-size: var(--font-size-h2);\n}\n\nh3 {\n  font-size: var(--font-size-h3);\n}\n\nh4 {\n  font-size: var(--font-size-h4);\n}\n\nh5 {\n  font-size: var(--font-size-h5);\n}\n\nh6 {\n  font-size: var(--font-size-h6);\n}\n\na {\n  color: var(--color-text-default);\n}\n\na:visited {\n  color: var(--color-primary);\n}\n\ntable {\n  border-collapse: var(--table-border-collapse);\n  border: var(--table-border);\n  width: 100%;\n}\ntable thead th, table thead td.heading, table tbody th, table tbody td.heading {\n  background: var(--table-head-color-background);\n  color: var(--table-head-color-text);\n  border: var(--table-head-border);\n  padding: var(--table-head-cell-padding);\n  font-weight: var(--table-head-font-weight);\n  text-align: var(--table-head-text-align);\n  text-wrap: nowrap;\n}\ntable tbody td {\n  background: var(--table-body-color-background);\n  color: var(--table-body-color-text);\n  border: var(--table-body-border);\n  padding: var(--table-body-cell-padding);\n}\ntable tbody tr:nth-child(2n) td:not(.heading) {\n  background: var(--table-body-color-background-odd);\n}\n\nimg {\n  max-width: 100%;\n}`;\n"],"names":[],"mappings":"AAAO,MAAM,aAAgB,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/markdown/types.d.ts

@@ -0,0 +1,56 @@
+import { StateInline, TagToken, StateBlock } from 'remarkable/lib';
+import { Remarkable } from 'remarkable';
+
+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;
+
+export type { IMarkdownConfiguration, IMarkdownHtml, IMarkdownParser, IMarkdownStylesAggregator, IRemarkableBlockExtension, IRemarkableInlineExtension, RemarkableExtension };
+//# sourceMappingURL=types.d.ts.map

package/dist/markdown/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/markdown/types.js

@@ -0,0 +1,5 @@
+class ErrorImporting {
+}
+
+export { ErrorImporting };
+//# sourceMappingURL=types.js.map

package/dist/markdown/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../src/markdown/types.ts"],"sourcesContent":["import type { StateBlock, StateInline, TagToken } from 'remarkable/lib';\nimport type { Remarkable } from 'remarkable';\n\n// eslint-disable-next-line @typescript-eslint/no-extraneous-class\nexport class ErrorImporting {}\n\nexport type IMarkdownHtml = (\n  title: string,\n  css: string,\n  body: string,\n) => string;\n\nexport type IMarkdownParser = (\n  options: IMarkdownConfiguration,\n) => Promise<string>;\n\nexport interface IMarkdownConfiguration {\n  /**\n   * Cadena de caracteres de CSS\n   */\n  additionalStyles?: IMarkdownStylesAggregator;\n  /**\n   * Permite agregar contenido al body del html generado.\n   */\n  additionalBodyContent?: Partial<{ before: string; after: string }>;\n  /**\n   * Contenido markdown\n   */\n  content: string;\n  /**\n   * Permite el pasaje de extensiones adicionales\n   */\n  extensions?: RemarkableExtension[];\n  /**\n   * Si el template html por defecto no es suficiente, se puede optar por un\n   * template a medida.\n   */\n  htmlTemplate?: IMarkdownHtml;\n  /**\n   * If passed, will print the table of contents with the indicated title.\n   */\n  tableOfContentsTitle?: string;\n  /**\n   * Título que se mostrará en el html\n   */\n  title: string;\n}\n\nexport interface IRemarkableInlineExtension {\n  name: string;\n  parser: (state: StateInline, checkMode: boolean) => boolean;\n  replacer: (md: Remarkable) => (tokens: TagToken[], idx: number) => string;\n  styles: () => string;\n}\n\nexport interface IRemarkableBlockExtension {\n  name: string;\n  parser: (\n    state: StateBlock,\n    startLine: number,\n    endLine: number,\n    checkMode: boolean,\n  ) => boolean;\n  replacer: (md: Remarkable) => (tokens: TagToken[], idx: number) => string;\n  styles: () => string;\n}\n\nexport type RemarkableExtension =\n  | IRemarkableInlineExtension\n  | IRemarkableBlockExtension;\n\nexport type IMarkdownStylesAggregator = () => string;\n"],"names":[],"mappings":"AAIO,MAAM,cAAe,CAAA;AAAC;;;;"}

package/dist/methods/CustomThemeProvider.js

@@ -0,0 +1,14 @@
+import { jsx } from 'theme-ui/jsx-runtime';
+import { ThemeUIProvider } from 'theme-ui';
+import { getMainTheme } from './getMainTheme.js';
+
+const CustomThemeProvider = ({
+  children,
+  customTheme
+}) => {
+  const theme = getMainTheme(customTheme);
+  return /* @__PURE__ */ jsx(ThemeUIProvider, { theme, children });
+};
+
+export { CustomThemeProvider };
+//# sourceMappingURL=CustomThemeProvider.js.map

package/dist/methods/CustomThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomThemeProvider.js","sources":["../../src/methods/CustomThemeProvider.tsx"],"sourcesContent":["import { ThemeUIProvider, Theme } from 'theme-ui';\nimport { ReactNode } from 'react';\nimport { getMainTheme } from './getMainTheme';\n\ninterface TThemeProvider {\n  children: ReactNode;\n  customTheme?: () => Theme;\n}\n\nexport const CustomThemeProvider = ({\n  children,\n  customTheme,\n}: TThemeProvider) => {\n  const theme: Theme = getMainTheme(customTheme);\n\n  return <ThemeUIProvider theme={theme}>{children}</ThemeUIProvider>;\n};\n"],"names":[],"mappings":";;;;AASO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,WAAA;AACF,CAAsB,KAAA;AACpB,EAAM,MAAA,KAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAE7C,EAAO,uBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,KAAA,EAAe,QAAS,EAAA,CAAA,CAAA;AAClD;;;;"}

package/dist/methods/getMainTheme.js

@@ -0,0 +1,30 @@
+import merge from 'lodash-es/merge';
+import { baseTheme } from '../base/baseTheme.js';
+import { getThemeColorsObject } from '../base/colors/index.js';
+import defaultPalette from '../base/colors/defaultPalette.js';
+import forms from '../base/forms/index.js';
+import { layout } from '../base/layout/index.js';
+import parsePalette from '../base/colors/util/parsePalette.js';
+
+const makeTheme = (t) => {
+  return t;
+};
+let declaredStyles = {};
+function getMainTheme(customTheme, customPalette, themeModifier) {
+  const palette = parsePalette(merge({}, defaultPalette, customPalette));
+  window.currentPalette = palette;
+  const theme = makeTheme(
+    merge(baseTheme(), { layout: declaredStyles }, customTheme?.() ?? {}, {
+      palette: {}
+    })
+  );
+  theme.palette = palette;
+  theme.colors = getThemeColorsObject(theme);
+  theme.forms = forms(theme);
+  theme.layout = merge(layout(theme), theme.layout);
+  theme.styles = merge({}, customTheme?.().styles, { root: theme.layout.root });
+  return themeModifier?.(theme) ?? theme;
+}
+
+export { getMainTheme };
+//# sourceMappingURL=getMainTheme.js.map

package/dist/methods/getMainTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMainTheme.js","sources":["../../src/methods/getMainTheme.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\nimport {\n  ColorModesScale,\n  Theme,\n  ThemeUICSSObject,\n  ThemeUIStyleObject,\n} from 'theme-ui';\nimport merge from 'lodash-es/merge';\nimport { setValueByPath } from '@apia/util';\nimport { baseTheme } from '../base/baseTheme';\nimport {\n  TCustomPalette,\n  TParsedPalette,\n  TThemeModifier,\n} from '../base/colors/types';\nimport { getThemeColorsObject, parsePalette } from '../base/colors';\nimport defaultPalette from '../base/colors/defaultPalette';\nimport forms from '../base/forms';\nimport { layout } from '../base/layout';\n\nconst makeTheme = <T extends Theme>(t: T) => {\n  return t;\n};\n\nlet declaredStyles: ThemeUICSSObject = {};\n\nexport function declareStyles(\n  path: string,\n  styles: ThemeUICSSObject | Record<string, ThemeUICSSObject>,\n) {\n  const newStyles = {};\n  setValueByPath(newStyles, path, styles);\n  declaredStyles = merge(declaredStyles, newStyles);\n}\n\nexport function getMainTheme(\n  customTheme?: () => Omit<Theme, 'palette'>,\n  customPalette?: TCustomPalette,\n\n  themeModifier?: TThemeModifier,\n) {\n  const palette = parsePalette(merge({}, defaultPalette, customPalette));\n  window.currentPalette = palette;\n\n  const theme = makeTheme(\n    merge(baseTheme(), { layout: declaredStyles }, customTheme?.() ?? {}, {\n      palette: {} as TParsedPalette,\n    }),\n  );\n\n  theme.palette = palette;\n\n  theme.colors = getThemeColorsObject(theme) as unknown as ColorModesScale;\n  theme.forms = forms(theme) as Record<string, ThemeUIStyleObject>;\n  theme.layout = merge(layout(theme), theme.layout);\n\n  theme.styles = merge({}, customTheme?.().styles, { root: theme.layout.root });\n\n  return themeModifier?.(theme) ?? theme;\n}\n"],"names":[],"mappings":";;;;;;;;AAqBA,MAAM,SAAA,GAAY,CAAkB,CAAS,KAAA;AAC3C,EAAO,OAAA,CAAA,CAAA;AACT,CAAA,CAAA;AAEA,IAAI,iBAAmC,EAAC,CAAA;AAWxB,SAAA,YAAA,CACd,WACA,EAAA,aAAA,EAEA,aACA,EAAA;AACA,EAAA,MAAM,UAAU,YAAa,CAAA,KAAA,CAAM,EAAI,EAAA,cAAA,EAAgB,aAAa,CAAC,CAAA,CAAA;AACrE,EAAA,MAAA,CAAO,cAAiB,GAAA,OAAA,CAAA;AAExB,EAAA,MAAM,KAAQ,GAAA,SAAA;AAAA,IACZ,KAAA,CAAM,SAAU,EAAA,EAAG,EAAE,MAAA,EAAQ,gBAAkB,EAAA,WAAA,IAAmB,IAAA,EAAI,EAAA;AAAA,MACpE,SAAS,EAAC;AAAA,KACX,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,KAAA,CAAM,OAAU,GAAA,OAAA,CAAA;AAEhB,EAAM,KAAA,CAAA,MAAA,GAAS,qBAAqB,KAAK,CAAA,CAAA;AACzC,EAAM,KAAA,CAAA,KAAA,GAAQ,MAAM,KAAK,CAAA,CAAA;AACzB,EAAA,KAAA,CAAM,SAAS,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA,EAAG,MAAM,MAAM,CAAA,CAAA;AAEhD,EAAA,KAAA,CAAM,MAAS,GAAA,KAAA,CAAM,EAAC,EAAG,WAAc,IAAA,CAAE,MAAQ,EAAA,EAAE,IAAM,EAAA,KAAA,CAAM,MAAO,CAAA,IAAA,EAAM,CAAA,CAAA;AAE5E,EAAO,OAAA,aAAA,GAAgB,KAAK,CAAK,IAAA,KAAA,CAAA;AACnC;;;;"}

package/dist/methods/injectStyles.d.ts

@@ -0,0 +1,34 @@
+import { ThemeUICSSObject } from 'theme-ui';
+
+/**
+ * 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;
+
+export { injectStyles };
+//# sourceMappingURL=injectStyles.d.ts.map

package/dist/methods/injectStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectStyles.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/methods/injectStyles.js

@@ -0,0 +1,10 @@
+import { mainThemeEmitter } from './useMainTheme.js';
+
+function injectStyles(par1, par2) {
+  const path = typeof par1 === "string" ? par1 : "";
+  const styles = typeof par1 === "string" ? par2 : par1;
+  mainThemeEmitter.emit("newStyles", { path, styles });
+}
+
+export { injectStyles };
+//# sourceMappingURL=injectStyles.js.map

package/dist/methods/injectStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectStyles.js","sources":["../../src/methods/injectStyles.ts"],"sourcesContent":["import { ThemeUICSSObject } from 'theme-ui';\nimport { mainThemeEmitter } from './useMainTheme';\n\n/**\n * Esta función permite agregar estilos al tema principal de la aplicación, de\n * modo que estén disponibles para cualquier componente que lo requirea.\n *\n * @example\n *\n * injectStyles('buttons.myRedButton', {\n *   variant: 'buttons.primary',\n *   backgroundColor: 'red',\n * })\n */\nexport function injectStyles(path: string, styles: ThemeUICSSObject): void;\n\n/**\n * Esta función permite agregar estilos al tema principal de la aplicación, de\n * modo que estén disponibles para cualquier componente que lo requirea.\n *\n * @example\n *\n * injectStyles({\n *  layout: {\n *    panels: {\n *      myPanel: {\n *        ...\n *      }\n *    }\n *  }\n * })\n */\nexport function injectStyles(styles: ThemeUICSSObject): void;\n\nexport function injectStyles(\n  par1: string | ThemeUICSSObject,\n  par2?: ThemeUICSSObject,\n) {\n  const path = typeof par1 === 'string' ? par1 : '';\n  const styles = typeof par1 === 'string' ? (par2 as ThemeUICSSObject) : par1;\n\n  mainThemeEmitter.emit('newStyles', { path, styles });\n}\n"],"names":[],"mappings":";;AAkCgB,SAAA,YAAA,CACd,MACA,IACA,EAAA;AACA,EAAA,MAAM,IAAO,GAAA,OAAO,IAAS,KAAA,QAAA,GAAW,IAAO,GAAA,EAAA,CAAA;AAC/C,EAAA,MAAM,MAAS,GAAA,OAAO,IAAS,KAAA,QAAA,GAAY,IAA4B,GAAA,IAAA,CAAA;AAEvE,EAAA,gBAAA,CAAiB,IAAK,CAAA,WAAA,EAAa,EAAE,IAAA,EAAM,QAAQ,CAAA,CAAA;AACrD;;;;"}

package/dist/methods/makeStyledComponent.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { FC } from 'react';
+import { ThemeUICSSObject } from 'theme-ui';
+
+/**
+ * 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;
+};
+
+export { makeStyledComponent };
+//# sourceMappingURL=makeStyledComponent.d.ts.map

package/dist/methods/makeStyledComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeStyledComponent.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/methods/makeStyledComponent.js

@@ -0,0 +1,39 @@
+import { jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { setValueByPath } from '@apia/util';
+import { useRef, useMemo, Suspense } from 'react';
+import { useThemeUI, Box } from 'theme-ui';
+import { getVariant } from '../util/getVariant.js';
+import { CustomThemeProvider } from './CustomThemeProvider.js';
+
+function makeStyledComponent(displayName, stylesPath, styles, Component, unwraped = false) {
+  return Object.assign(
+    (props) => {
+      const avoidFirstRender = useRef(0);
+      const { theme: tuiTheme } = useThemeUI();
+      const theme = useMemo(
+        () => () => ({
+          ...tuiTheme,
+          ...setValueByPath({}, stylesPath, styles)
+        }),
+        [tuiTheme]
+      );
+      if (unwraped) {
+        return /* @__PURE__ */ jsx(CustomThemeProvider, { customTheme: theme, children: /* @__PURE__ */ jsx(NoThemePrevent, { avoidFirstRender, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, { ...props }) }) }) });
+      }
+      return /* @__PURE__ */ jsx(CustomThemeProvider, { customTheme: theme, children: /* @__PURE__ */ jsx(NoThemePrevent, { avoidFirstRender, children: /* @__PURE__ */ jsx(Box, { className: "variant__holder", ...getVariant(stylesPath), children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, { ...props }) }) }) }) });
+    },
+    { displayName }
+  );
+}
+const NoThemePrevent = ({
+  avoidFirstRender,
+  children
+}) => {
+  avoidFirstRender.current++;
+  if (avoidFirstRender.current <= 1)
+    return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+export { makeStyledComponent };
+//# sourceMappingURL=makeStyledComponent.js.map

package/dist/methods/makeStyledComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeStyledComponent.js","sources":["../../src/methods/makeStyledComponent.tsx"],"sourcesContent":["import { setValueByPath } from '@apia/util';\nimport {\n  FC,\n  MutableRefObject,\n  ReactNode,\n  Suspense,\n  useMemo,\n  useRef,\n} from 'react';\nimport { ThemeUICSSObject, Box, useThemeUI } from 'theme-ui';\nimport { getVariant } from '../util/getVariant';\nimport { CustomThemeProvider } from './CustomThemeProvider';\n\n/**\n * Permite crear un componente cuyos estilos pueden ser redefinidos por un\n * usuario final.\n *\n * Esto es así puesto que los estilos definidos serán agregados a un árbol que\n * el usuario puede consultar y sobreescribir. De esta manera los estilos\n * finales del componente serán aquellos definidos en este método pero\n * sobreescritos por los definidos por el usuario si es que existen.\n *\n * **Importante** Para aplicar la variante, se aplica un box alrededor del\n * componente que se está renderizando, con className=\"variant__holder\". En caso\n * de que se quisiera evitar este comportamiento, se debe pasar unwraped = true\n *\n * @param displayName Este parámetro es importante para el debugger de React.\n * @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.\n * @param styles Un objeto de estilos de ThemeUI\n * @param Component La definición del componente.\n * @returns Un componente reutilizable y exportable que tiene estilos aplicados.\n */\nexport function makeStyledComponent<T extends object>(\n  displayName: string,\n  stylesPath: string,\n  styles: ThemeUICSSObject,\n  Component: FC<T>,\n  unwraped = false,\n) {\n  return Object.assign(\n    (props: T) => {\n      const avoidFirstRender = useRef(0);\n      const { theme: tuiTheme } = useThemeUI();\n      const theme = useMemo(\n        () => () => ({\n          ...tuiTheme,\n          ...setValueByPath({}, stylesPath, styles),\n        }),\n        [tuiTheme],\n      );\n\n      if (unwraped) {\n        return (\n          <CustomThemeProvider customTheme={theme}>\n            <NoThemePrevent avoidFirstRender={avoidFirstRender}>\n              <Suspense>\n                <Component {...props} />\n              </Suspense>\n            </NoThemePrevent>\n          </CustomThemeProvider>\n        );\n      }\n      return (\n        <CustomThemeProvider customTheme={theme}>\n          <NoThemePrevent avoidFirstRender={avoidFirstRender}>\n            <Box className=\"variant__holder\" {...getVariant(stylesPath)}>\n              <Suspense>\n                <Component {...props} />\n              </Suspense>\n            </Box>\n          </NoThemePrevent>\n        </CustomThemeProvider>\n      );\n    },\n    { displayName },\n  );\n}\n\nconst NoThemePrevent = ({\n  avoidFirstRender,\n  children,\n}: {\n  avoidFirstRender: MutableRefObject<number>;\n  children: ReactNode;\n}) => {\n  // eslint-disable-next-line no-param-reassign\n  avoidFirstRender.current++;\n\n  if (avoidFirstRender.current <= 1) return null;\n\n  return <>{children}</>;\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,SAAS,oBACd,WACA,EAAA,UAAA,EACA,MACA,EAAA,SAAA,EACA,WAAW,KACX,EAAA;AACA,EAAA,OAAO,MAAO,CAAA,MAAA;AAAA,IACZ,CAAC,KAAa,KAAA;AACZ,MAAM,MAAA,gBAAA,GAAmB,OAAO,CAAC,CAAA,CAAA;AACjC,MAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,UAAW,EAAA,CAAA;AACvC,MAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,QACZ,MAAM,OAAO;AAAA,UACX,GAAG,QAAA;AAAA,UACH,GAAG,cAAA,CAAe,EAAC,EAAG,YAAY,MAAM,CAAA;AAAA,SAC1C,CAAA;AAAA,QACA,CAAC,QAAQ,CAAA;AAAA,OACX,CAAA;AAEA,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,uBACG,GAAA,CAAA,mBAAA,EAAA,EAAoB,WAAa,EAAA,KAAA,EAChC,8BAAC,cAAe,EAAA,EAAA,gBAAA,EACd,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACC,8BAAC,SAAW,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,EACxB,GACF,CACF,EAAA,CAAA,CAAA;AAAA,OAEJ;AACA,MACE,uBAAA,GAAA,CAAC,mBAAoB,EAAA,EAAA,WAAA,EAAa,KAChC,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAe,gBACd,EAAA,QAAA,kBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAU,iBAAmB,EAAA,GAAG,WAAW,UAAU,CAAA,EACxD,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA,EAAW,GAAG,KAAO,EAAA,CAAA,EACxB,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA,CAAA;AAAA,KAEJ;AAAA,IACA,EAAE,WAAY,EAAA;AAAA,GAChB,CAAA;AACF,CAAA;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,gBAAA;AAAA,EACA,QAAA;AACF,CAGM,KAAA;AAEJ,EAAiB,gBAAA,CAAA,OAAA,EAAA,CAAA;AAEjB,EAAA,IAAI,iBAAiB,OAAW,IAAA,CAAA;AAAG,IAAO,OAAA,IAAA,CAAA;AAE1C,EAAA,uCAAU,QAAS,EAAA,CAAA,CAAA;AACrB,CAAA;;;;"}

package/dist/methods/spacingLayout/index.d.ts

@@ -0,0 +1,23 @@
+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;
+    };
+};
+
+export { type TSpacingLayout, getSpacingLayouts, spacingLayouts };
+//# sourceMappingURL=index.d.ts.map

package/dist/methods/spacingLayout/index.d.ts.map

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