@macolmenerori/component-library 1.1.2 → 1.3.0

package/README.md

@@ -40,9 +40,10 @@ Import components from the library. You can use the main entry point or subpath
 
 | Import Path                                        | Components     | Dependencies Required             |
 | -------------------------------------------------- | -------------- | --------------------------------- |
-| `@macolmenerori/component-library`                 | All            | react, react-markdown, remark-gfm |
-| `@macolmenerori/component-library/theme-switch`    | ThemeSwitch    | react                             |
-| `@macolmenerori/component-library/markdown-render` | MarkdownRender | react, react-markdown, remark-gfm |
+| `@macolmenerori/component-library`                    | All              | react, react-markdown, remark-gfm |
+| `@macolmenerori/component-library/theme-switch`       | ThemeSwitch      | react                             |
+| `@macolmenerori/component-library/monthly-calendar`   | MonthlyCalendar  | react                             |
+| `@macolmenerori/component-library/markdown-render`    | MarkdownRender   | react, react-markdown, remark-gfm |
 
 ### Available Components
 
@@ -81,6 +82,40 @@ function App() {
 
 </details>
 
+<details>
+<summary><strong>MonthlyCalendar</strong> - A monthly calendar grid with annotation support</summary>
+
+A zero-dependency monthly calendar component rendered as a semantic HTML table. Supports per-day annotations (any ReactNode), customizable headers, inline style overrides, and built-in light/dark themes.
+
+**Props:**
+
+- `year` (number, required): Full four-digit year (e.g. 2026)
+- `month` (number, required): Month to display, 1-based (1 = January, 12 = December)
+- `annotations` ((ReactNode | null | undefined)[], optional): Array of content per day. `annotations[0]` maps to Day 1
+- `headers` (string[7], optional): Array of 7 weekday labels. Omit to hide the header row
+- `style` (CSSProperties, optional): Inline styles merged onto the `<table>` element
+- `darkMode` (boolean, optional): Enables dark color theme (default: `false`)
+
+**Example:**
+
+```tsx
+import { MonthlyCalendar } from '@macolmenerori/component-library/monthly-calendar';
+
+function App() {
+  return (
+    <MonthlyCalendar
+      year={2026}
+      month={2}
+      headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
+    />
+  );
+}
+```
+
+> **Note:** No CSS import is needed. MonthlyCalendar uses inline styles only.
+
+</details>
+
 <details>
 <summary><strong>MarkdownRender</strong> - A component for rendering markdown strings as HTML</summary>
 
@@ -183,6 +218,7 @@ This will generate multiple entry points:
 
 - `dist/index.js` / `dist/index.cjs` - Main entry (all components)
 - `dist/theme-switch.js` / `dist/theme-switch.cjs` - ThemeSwitch only
+- `dist/monthly-calendar.js` / `dist/monthly-calendar.cjs` - MonthlyCalendar only
 - `dist/markdown-render.js` / `dist/markdown-render.cjs` - MarkdownRender only
 - `dist/types/` - TypeScript declarations
 

package/dist/MarkdownRender-BOGosy9w.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),h=require("react"),j=require("react-markdown"),l=require("remark-gfm"),x=({content:d,className:c,components:e,linkTarget:r,responsiveImages:o,rehypePlugins:u})=>{const a=h.useMemo(()=>{const s={};return r&&!e?.a&&(s.a=({children:i,...t})=>n.jsx("a",{...t,target:r,rel:r==="_blank"?"noreferrer":void 0,children:i})),o&&!e?.img&&(s.img=({alt:i,...t})=>n.jsx("img",{alt:i??"",...t,style:{maxWidth:"100%",height:"auto",...t.style}})),{...s,...e}},[e,r,o]),m=Object.keys(a).length>0;return n.jsx("div",{className:c,children:n.jsx(j,{remarkPlugins:[l],rehypePlugins:u,components:m?a:void 0,children:d})})};exports.MarkdownRender=x;
+//# sourceMappingURL=MarkdownRender-BOGosy9w.cjs.map

package/dist/MarkdownRender-BOGosy9w.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRender-BOGosy9w.cjs","sources":["../src/components/MarkdownRender/MarkdownRender.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactMarkdown, { type Components, type Options } from 'react-markdown';\n\nimport remarkGfm from 'remark-gfm';\n\nexport interface MarkdownProps {\n  /** The markdown string to render */\n  content: string;\n  /** Optional CSS class name for the container */\n  className?: string;\n  /** Custom component overrides for markdown elements */\n  components?: Partial<Components>;\n  /** Target for all links (defaults to '_self') */\n  linkTarget?: '_blank' | '_self' | '_parent' | '_top';\n  /** Make all images responsive (defaults to false) */\n  responsiveImages?: boolean;\n  /** Optional rehype plugins for HTML processing */\n  rehypePlugins?: Options['rehypePlugins'];\n}\n\n/**\n * A component that renders a markdown string as HTML.\n * Supports GitHub Flavored Markdown (GFM) including tables,\n * strikethrough, task lists, and autolinks.\n */\nconst MarkdownRender: React.FC<MarkdownProps> = ({\n  content,\n  className,\n  components,\n  linkTarget,\n  responsiveImages,\n  rehypePlugins\n}) => {\n  const mergedComponents = useMemo(() => {\n    const generated: Partial<Components> = {};\n\n    // Auto-generate link component if linkTarget is set and no custom 'a' provided\n    if (linkTarget && !components?.a) {\n      generated.a = ({ children, ...props }) => (\n        <a {...props} target={linkTarget} rel={linkTarget === '_blank' ? 'noreferrer' : undefined}>\n          {children}\n        </a>\n      );\n    }\n\n    // Auto-generate image component if responsiveImages and no custom 'img' provided\n    if (responsiveImages && !components?.img) {\n      generated.img = ({ alt, ...props }) => (\n        <img\n          alt={alt ?? ''}\n          {...props}\n          style={{ maxWidth: '100%', height: 'auto', ...props.style }}\n        />\n      );\n    }\n\n    // User-provided components override auto-generated ones\n    return { ...generated, ...components };\n  }, [components, linkTarget, responsiveImages]);\n\n  const hasComponents = Object.keys(mergedComponents).length > 0;\n\n  return (\n    <div className={className}>\n      <ReactMarkdown\n        remarkPlugins={[remarkGfm]}\n        rehypePlugins={rehypePlugins}\n        components={hasComponents ? mergedComponents : undefined}\n      >\n        {content}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default MarkdownRender;\n"],"names":["MarkdownRender","content","className","components","linkTarget","responsiveImages","rehypePlugins","mergedComponents","useMemo","generated","children","props","jsx","alt","hasComponents","ReactMarkdown","remarkGfm"],"mappings":"yHAyBMA,EAA0C,CAAC,CAC/C,QAAAC,EACA,UAAAC,EACA,WAAAC,EACA,WAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,IAAM,CACJ,MAAMC,EAAmBC,EAAAA,QAAQ,IAAM,CACrC,MAAMC,EAAiC,CAAA,EAGvC,OAAIL,GAAc,CAACD,GAAY,IAC7BM,EAAU,EAAI,CAAC,CAAE,SAAAC,EAAU,GAAGC,KAC5BC,EAAAA,IAAC,IAAA,CAAG,GAAGD,EAAO,OAAQP,EAAY,IAAKA,IAAe,SAAW,aAAe,OAC7E,SAAAM,EACH,GAKAL,GAAoB,CAACF,GAAY,MACnCM,EAAU,IAAM,CAAC,CAAE,IAAAI,EAAK,GAAGF,KACzBC,EAAAA,IAAC,MAAA,CACC,IAAKC,GAAO,GACX,GAAGF,EACJ,MAAO,CAAE,SAAU,OAAQ,OAAQ,OAAQ,GAAGA,EAAM,KAAA,CAAM,CAAA,GAMzD,CAAE,GAAGF,EAAW,GAAGN,CAAA,CAC5B,EAAG,CAACA,EAAYC,EAAYC,CAAgB,CAAC,EAEvCS,EAAgB,OAAO,KAAKP,CAAgB,EAAE,OAAS,EAE7D,OACEK,EAAAA,IAAC,OAAI,UAAAV,EACH,SAAAU,EAAAA,IAACG,EAAA,CACC,cAAe,CAACC,CAAS,EACzB,cAAAV,EACA,WAAYQ,EAAgBP,EAAmB,OAE9C,SAAAN,CAAA,CAAA,EAEL,CAEJ"}

package/dist/MarkdownRender-BmrS3q0l.js

@@ -0,0 +1,37 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import l from "react-markdown";
+import g from "remark-gfm";
+const y = ({
+  content: d,
+  className: f,
+  components: r,
+  linkTarget: e,
+  responsiveImages: a,
+  rehypePlugins: s
+}) => {
+  const n = c(() => {
+    const m = {};
+    return e && !r?.a && (m.a = ({ children: i, ...t }) => /* @__PURE__ */ o("a", { ...t, target: e, rel: e === "_blank" ? "noreferrer" : void 0, children: i })), a && !r?.img && (m.img = ({ alt: i, ...t }) => /* @__PURE__ */ o(
+      "img",
+      {
+        alt: i ?? "",
+        ...t,
+        style: { maxWidth: "100%", height: "auto", ...t.style }
+      }
+    )), { ...m, ...r };
+  }, [r, e, a]), h = Object.keys(n).length > 0;
+  return /* @__PURE__ */ o("div", { className: f, children: /* @__PURE__ */ o(
+    l,
+    {
+      remarkPlugins: [g],
+      rehypePlugins: s,
+      components: h ? n : void 0,
+      children: d
+    }
+  ) });
+};
+export {
+  y as M
+};
+//# sourceMappingURL=MarkdownRender-BmrS3q0l.js.map

package/dist/MarkdownRender-BmrS3q0l.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRender-BmrS3q0l.js","sources":["../src/components/MarkdownRender/MarkdownRender.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactMarkdown, { type Components, type Options } from 'react-markdown';\n\nimport remarkGfm from 'remark-gfm';\n\nexport interface MarkdownProps {\n  /** The markdown string to render */\n  content: string;\n  /** Optional CSS class name for the container */\n  className?: string;\n  /** Custom component overrides for markdown elements */\n  components?: Partial<Components>;\n  /** Target for all links (defaults to '_self') */\n  linkTarget?: '_blank' | '_self' | '_parent' | '_top';\n  /** Make all images responsive (defaults to false) */\n  responsiveImages?: boolean;\n  /** Optional rehype plugins for HTML processing */\n  rehypePlugins?: Options['rehypePlugins'];\n}\n\n/**\n * A component that renders a markdown string as HTML.\n * Supports GitHub Flavored Markdown (GFM) including tables,\n * strikethrough, task lists, and autolinks.\n */\nconst MarkdownRender: React.FC<MarkdownProps> = ({\n  content,\n  className,\n  components,\n  linkTarget,\n  responsiveImages,\n  rehypePlugins\n}) => {\n  const mergedComponents = useMemo(() => {\n    const generated: Partial<Components> = {};\n\n    // Auto-generate link component if linkTarget is set and no custom 'a' provided\n    if (linkTarget && !components?.a) {\n      generated.a = ({ children, ...props }) => (\n        <a {...props} target={linkTarget} rel={linkTarget === '_blank' ? 'noreferrer' : undefined}>\n          {children}\n        </a>\n      );\n    }\n\n    // Auto-generate image component if responsiveImages and no custom 'img' provided\n    if (responsiveImages && !components?.img) {\n      generated.img = ({ alt, ...props }) => (\n        <img\n          alt={alt ?? ''}\n          {...props}\n          style={{ maxWidth: '100%', height: 'auto', ...props.style }}\n        />\n      );\n    }\n\n    // User-provided components override auto-generated ones\n    return { ...generated, ...components };\n  }, [components, linkTarget, responsiveImages]);\n\n  const hasComponents = Object.keys(mergedComponents).length > 0;\n\n  return (\n    <div className={className}>\n      <ReactMarkdown\n        remarkPlugins={[remarkGfm]}\n        rehypePlugins={rehypePlugins}\n        components={hasComponents ? mergedComponents : undefined}\n      >\n        {content}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default MarkdownRender;\n"],"names":["MarkdownRender","content","className","components","linkTarget","responsiveImages","rehypePlugins","mergedComponents","useMemo","generated","children","props","jsx","alt","hasComponents","ReactMarkdown","remarkGfm"],"mappings":";;;;AAyBA,MAAMA,IAA0C,CAAC;AAAA,EAC/C,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC;AACF,MAAM;AACJ,QAAMC,IAAmBC,EAAQ,MAAM;AACrC,UAAMC,IAAiC,CAAA;AAGvC,WAAIL,KAAc,CAACD,GAAY,MAC7BM,EAAU,IAAI,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAC5B,gBAAAC,EAAC,KAAA,EAAG,GAAGD,GAAO,QAAQP,GAAY,KAAKA,MAAe,WAAW,eAAe,QAC7E,UAAAM,GACH,IAKAL,KAAoB,CAACF,GAAY,QACnCM,EAAU,MAAM,CAAC,EAAE,KAAAI,GAAK,GAAGF,QACzB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKC,KAAO;AAAA,QACX,GAAGF;AAAA,QACJ,OAAO,EAAE,UAAU,QAAQ,QAAQ,QAAQ,GAAGA,EAAM,MAAA;AAAA,MAAM;AAAA,IAAA,IAMzD,EAAE,GAAGF,GAAW,GAAGN,EAAA;AAAA,EAC5B,GAAG,CAACA,GAAYC,GAAYC,CAAgB,CAAC,GAEvCS,IAAgB,OAAO,KAAKP,CAAgB,EAAE,SAAS;AAE7D,SACE,gBAAAK,EAAC,SAAI,WAAAV,GACH,UAAA,gBAAAU;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,eAAe,CAACC,CAAS;AAAA,MACzB,eAAAV;AAAA,MACA,YAAYQ,IAAgBP,IAAmB;AAAA,MAE9C,UAAAN;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/MonthlyCalendar-D-tD_2xK.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),C=require("react"),j={dayColor:"#222",headerColor:"#555",annotationColor:"inherit"},b={dayColor:"#f0f0f0",headerColor:"#a0a0b8",annotationColor:"#d0d0e0"},w={borderCollapse:"collapse",border:"none",width:"100%",tableLayout:"fixed",fontFamily:"sans-serif"},y={border:"none",verticalAlign:"top",padding:0,position:"relative",textAlign:"center"},v=({year:s,month:i,annotations:d=[],headers:c,style:p={},darkMode:x=!1})=>{const a=x?b:j,g=C.useMemo(()=>{const t=new Date(s,i,0).getDate(),n=new Date(s,i-1,1).getDay(),o=Math.ceil((n+t)/7)*7,l=[];let r=1-n;for(let h=0;h<o/7;h++){const f=[];for(let u=0;u<7;u++)f.push(r>=1&&r<=t?r:null),r++;l.push(f)}return l},[s,i]),m={...w,...p};return e.jsxs("table",{style:m,children:[c&&e.jsx("thead",{children:e.jsx("tr",{children:c.map((t,n)=>e.jsx("th",{style:{...y,fontWeight:600,fontSize:"0.85rem",paddingBottom:6,color:a.headerColor},children:t},n))})}),e.jsx("tbody",{children:g.map((t,n)=>e.jsx("tr",{children:t.map((o,l)=>e.jsx("td",{style:y,children:e.jsx("div",{style:{width:"100%",paddingBottom:"100%",position:"relative"},children:e.jsx("div",{style:{position:"absolute",inset:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",paddingTop:6,gap:4,overflow:"hidden"},children:o!==null&&e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{fontFamily:"sans-serif",fontSize:"0.95rem",fontWeight:500,color:a.dayColor},children:o}),d[o-1]!=null&&e.jsx("div",{style:{fontSize:"0.75rem",lineHeight:1.2,overflow:"hidden",width:"100%",textAlign:"center",color:a.annotationColor},children:d[o-1]})]})})})},l))},n))})]})};exports.MonthlyCalendar=v;
+//# sourceMappingURL=MonthlyCalendar-D-tD_2xK.cjs.map

package/dist/MonthlyCalendar-D-tD_2xK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthlyCalendar-D-tD_2xK.cjs","sources":["../src/components/MonthlyCalendar/MonthlyCalendar.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, useMemo } from 'react';\n\n/**\n * Props for the MonthlyCalendar component\n */\nexport interface MonthlyCalendarProps {\n  /** Full four-digit year (e.g. 2026) */\n  year: number;\n  /** Month to display, 1-based: 1 = January, 12 = December */\n  month: number;\n  /**\n   * Array of React nodes, one per day of the month.\n   * annotations[0] maps to Day 1, annotations[1] maps to Day 2, etc.\n   * Use null or undefined for days with no annotation.\n   */\n  annotations?: (ReactNode | null | undefined)[];\n  /**\n   * Array of exactly 7 strings for the weekday header labels.\n   * Omit to hide the header row entirely.\n   */\n  headers?: [string, string, string, string, string, string, string];\n  /**\n   * Inline styles merged onto the table element, overriding defaults via shallow spread.\n   */\n  style?: CSSProperties;\n  /**\n   * Enables the dark color theme for day numbers, headers, and annotation text.\n   * The component does not set its own background — wrap it in a dark container when enabled.\n   * @default false\n   */\n  darkMode?: boolean;\n}\n\n// ─── Theme definitions ───\n\nconst LIGHT_THEME = {\n  dayColor: '#222',\n  headerColor: '#555',\n  annotationColor: 'inherit'\n};\n\nconst DARK_THEME = {\n  dayColor: '#f0f0f0',\n  headerColor: '#a0a0b8',\n  annotationColor: '#d0d0e0'\n};\n\n// ─── Static style objects ───\n\nconst defaultTableStyle: CSSProperties = {\n  borderCollapse: 'collapse',\n  border: 'none',\n  width: '100%',\n  tableLayout: 'fixed',\n  fontFamily: 'sans-serif'\n};\n\nconst defaultCellStyle: CSSProperties = {\n  border: 'none',\n  verticalAlign: 'top',\n  padding: 0,\n  position: 'relative',\n  textAlign: 'center'\n};\n\n/**\n * MonthlyCalendar Component\n *\n * A zero-dependency monthly calendar grid rendered as a semantic HTML table.\n * Each day occupies a square cell with an optional annotation slot that accepts\n * any ReactNode (text, images, badges, icons, or entire sub-components).\n *\n * Features built-in light and dark themes, customizable headers, and\n * table-level style overrides. All styling is inline — no CSS files required.\n *\n * @component\n * @example\n * ```tsx\n * <MonthlyCalendar\n *   year={2026}\n *   month={2}\n *   headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}\n *   darkMode={false}\n * />\n * ```\n */\nconst MonthlyCalendar: React.FC<MonthlyCalendarProps> = ({\n  year,\n  month,\n  annotations = [],\n  headers,\n  style = {},\n  darkMode = false\n}) => {\n  const theme = darkMode ? DARK_THEME : LIGHT_THEME;\n\n  const weeks = useMemo(() => {\n    const daysInMonth = new Date(year, month, 0).getDate();\n    const startDay = new Date(year, month - 1, 1).getDay(); // 0=Sun\n    const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;\n    const result: (number | null)[][] = [];\n    let currentDay = 1 - startDay;\n\n    for (let w = 0; w < totalCells / 7; w++) {\n      const week: (number | null)[] = [];\n      for (let d = 0; d < 7; d++) {\n        week.push(currentDay >= 1 && currentDay <= daysInMonth ? currentDay : null);\n        currentDay++;\n      }\n      result.push(week);\n    }\n    return result;\n  }, [year, month]);\n\n  const mergedTableStyle = { ...defaultTableStyle, ...style };\n\n  return (\n    <table style={mergedTableStyle}>\n      {headers && (\n        <thead>\n          <tr>\n            {headers.map((h, i) => (\n              <th\n                key={i}\n                style={{\n                  ...defaultCellStyle,\n                  fontWeight: 600,\n                  fontSize: '0.85rem',\n                  paddingBottom: 6,\n                  color: theme.headerColor\n                }}\n              >\n                {h}\n              </th>\n            ))}\n          </tr>\n        </thead>\n      )}\n      <tbody>\n        {weeks.map((week, wi) => (\n          <tr key={wi}>\n            {week.map((day, di) => (\n              <td key={di} style={defaultCellStyle}>\n                <div\n                  style={{\n                    width: '100%',\n                    paddingBottom: '100%',\n                    position: 'relative'\n                  }}\n                >\n                  <div\n                    style={{\n                      position: 'absolute',\n                      inset: 0,\n                      display: 'flex',\n                      flexDirection: 'column',\n                      alignItems: 'center',\n                      justifyContent: 'flex-start',\n                      paddingTop: 6,\n                      gap: 4,\n                      overflow: 'hidden'\n                    }}\n                  >\n                    {day !== null && (\n                      <>\n                        <span\n                          style={{\n                            fontFamily: 'sans-serif',\n                            fontSize: '0.95rem',\n                            fontWeight: 500,\n                            color: theme.dayColor\n                          }}\n                        >\n                          {day}\n                        </span>\n                        {annotations[day - 1] != null && (\n                          <div\n                            style={{\n                              fontSize: '0.75rem',\n                              lineHeight: 1.2,\n                              overflow: 'hidden',\n                              width: '100%',\n                              textAlign: 'center',\n                              color: theme.annotationColor\n                            }}\n                          >\n                            {annotations[day - 1]}\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                </div>\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthlyCalendar;\n"],"names":["LIGHT_THEME","DARK_THEME","defaultTableStyle","defaultCellStyle","MonthlyCalendar","year","month","annotations","headers","style","darkMode","theme","weeks","useMemo","daysInMonth","startDay","totalCells","result","currentDay","w","week","d","mergedTableStyle","jsxs","jsx","h","i","wi","day","di","Fragment"],"mappings":"qEAmCMA,EAAc,CAClB,SAAU,OACV,YAAa,OACb,gBAAiB,SACnB,EAEMC,EAAa,CACjB,SAAU,UACV,YAAa,UACb,gBAAiB,SACnB,EAIMC,EAAmC,CACvC,eAAgB,WAChB,OAAQ,OACR,MAAO,OACP,YAAa,QACb,WAAY,YACd,EAEMC,EAAkC,CACtC,OAAQ,OACR,cAAe,MACf,QAAS,EACT,SAAU,WACV,UAAW,QACb,EAuBMC,EAAkD,CAAC,CACvD,KAAAC,EACA,MAAAC,EACA,YAAAC,EAAc,CAAA,EACd,QAAAC,EACA,MAAAC,EAAQ,CAAA,EACR,SAAAC,EAAW,EACb,IAAM,CACJ,MAAMC,EAAQD,EAAWT,EAAaD,EAEhCY,EAAQC,EAAAA,QAAQ,IAAM,CAC1B,MAAMC,EAAc,IAAI,KAAKT,EAAMC,EAAO,CAAC,EAAE,QAAA,EACvCS,EAAW,IAAI,KAAKV,EAAMC,EAAQ,EAAG,CAAC,EAAE,OAAA,EACxCU,EAAa,KAAK,MAAMD,EAAWD,GAAe,CAAC,EAAI,EACvDG,EAA8B,CAAA,EACpC,IAAIC,EAAa,EAAIH,EAErB,QAASI,EAAI,EAAGA,EAAIH,EAAa,EAAGG,IAAK,CACvC,MAAMC,EAA0B,CAAA,EAChC,QAASC,EAAI,EAAGA,EAAI,EAAGA,IACrBD,EAAK,KAAKF,GAAc,GAAKA,GAAcJ,EAAcI,EAAa,IAAI,EAC1EA,IAEFD,EAAO,KAAKG,CAAI,CAClB,CACA,OAAOH,CACT,EAAG,CAACZ,EAAMC,CAAK,CAAC,EAEVgB,EAAmB,CAAE,GAAGpB,EAAmB,GAAGO,CAAA,EAEpD,OACEc,EAAAA,KAAC,QAAA,CAAM,MAAOD,EACX,SAAA,CAAAd,GACCgB,EAAAA,IAAC,SACC,SAAAA,EAAAA,IAAC,KAAA,CACE,WAAQ,IAAI,CAACC,EAAGC,IACfF,EAAAA,IAAC,KAAA,CAEC,MAAO,CACL,GAAGrB,EACH,WAAY,IACZ,SAAU,UACV,cAAe,EACf,MAAOQ,EAAM,WAAA,EAGd,SAAAc,CAAA,EATIC,CAAA,CAWR,EACH,CAAA,CACF,QAED,QAAA,CACE,SAAAd,EAAM,IAAI,CAACQ,EAAMO,IAChBH,EAAAA,IAAC,KAAA,CACE,SAAAJ,EAAK,IAAI,CAACQ,EAAKC,IACdL,EAAAA,IAAC,KAAA,CAAY,MAAOrB,EAClB,SAAAqB,EAAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,cAAe,OACf,SAAU,UAAA,EAGZ,SAAAA,EAAAA,IAAC,MAAA,CACC,MAAO,CACL,SAAU,WACV,MAAO,EACP,QAAS,OACT,cAAe,SACf,WAAY,SACZ,eAAgB,aAChB,WAAY,EACZ,IAAK,EACL,SAAU,QAAA,EAGX,SAAAI,IAAQ,MACPL,EAAAA,KAAAO,EAAAA,SAAA,CACE,SAAA,CAAAN,EAAAA,IAAC,OAAA,CACC,MAAO,CACL,WAAY,aACZ,SAAU,UACV,WAAY,IACZ,MAAOb,EAAM,QAAA,EAGd,SAAAiB,CAAA,CAAA,EAEFrB,EAAYqB,EAAM,CAAC,GAAK,MACvBJ,EAAAA,IAAC,MAAA,CACC,MAAO,CACL,SAAU,UACV,WAAY,IACZ,SAAU,SACV,MAAO,OACP,UAAW,SACX,MAAOb,EAAM,eAAA,EAGd,SAAAJ,EAAYqB,EAAM,CAAC,CAAA,CAAA,CACtB,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,GAjDKC,CAmDT,CACD,GAtDMF,CAuDT,CACD,CAAA,CACH,CAAA,EACF,CAEJ"}

package/dist/MonthlyCalendar-D9jC2b2L.js

@@ -0,0 +1,116 @@
+import { jsxs as y, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+const v = {
+  dayColor: "#222",
+  headerColor: "#555",
+  annotationColor: "inherit"
+}, D = {
+  dayColor: "#f0f0f0",
+  headerColor: "#a0a0b8",
+  annotationColor: "#d0d0e0"
+}, M = {
+  borderCollapse: "collapse",
+  border: "none",
+  width: "100%",
+  tableLayout: "fixed",
+  fontFamily: "sans-serif"
+}, m = {
+  border: "none",
+  verticalAlign: "top",
+  padding: 0,
+  position: "relative",
+  textAlign: "center"
+}, A = ({
+  year: i,
+  month: a,
+  annotations: d = [],
+  headers: c,
+  style: g = {},
+  darkMode: u = !1
+}) => {
+  const s = u ? D : v, C = x(() => {
+    const t = new Date(i, a, 0).getDate(), o = new Date(i, a - 1, 1).getDay(), l = Math.ceil((o + t) / 7) * 7, n = [];
+    let r = 1 - o;
+    for (let h = 0; h < l / 7; h++) {
+      const f = [];
+      for (let p = 0; p < 7; p++)
+        f.push(r >= 1 && r <= t ? r : null), r++;
+      n.push(f);
+    }
+    return n;
+  }, [i, a]), b = { ...M, ...g };
+  return /* @__PURE__ */ y("table", { style: b, children: [
+    c && /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: c.map((t, o) => /* @__PURE__ */ e(
+      "th",
+      {
+        style: {
+          ...m,
+          fontWeight: 600,
+          fontSize: "0.85rem",
+          paddingBottom: 6,
+          color: s.headerColor
+        },
+        children: t
+      },
+      o
+    )) }) }),
+    /* @__PURE__ */ e("tbody", { children: C.map((t, o) => /* @__PURE__ */ e("tr", { children: t.map((l, n) => /* @__PURE__ */ e("td", { style: m, children: /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          width: "100%",
+          paddingBottom: "100%",
+          position: "relative"
+        },
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              paddingTop: 6,
+              gap: 4,
+              overflow: "hidden"
+            },
+            children: l !== null && /* @__PURE__ */ y(w, { children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    fontFamily: "sans-serif",
+                    fontSize: "0.95rem",
+                    fontWeight: 500,
+                    color: s.dayColor
+                  },
+                  children: l
+                }
+              ),
+              d[l - 1] != null && /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "0.75rem",
+                    lineHeight: 1.2,
+                    overflow: "hidden",
+                    width: "100%",
+                    textAlign: "center",
+                    color: s.annotationColor
+                  },
+                  children: d[l - 1]
+                }
+              )
+            ] })
+          }
+        )
+      }
+    ) }, n)) }, o)) })
+  ] });
+};
+export {
+  A as M
+};
+//# sourceMappingURL=MonthlyCalendar-D9jC2b2L.js.map

package/dist/MonthlyCalendar-D9jC2b2L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthlyCalendar-D9jC2b2L.js","sources":["../src/components/MonthlyCalendar/MonthlyCalendar.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, useMemo } from 'react';\n\n/**\n * Props for the MonthlyCalendar component\n */\nexport interface MonthlyCalendarProps {\n  /** Full four-digit year (e.g. 2026) */\n  year: number;\n  /** Month to display, 1-based: 1 = January, 12 = December */\n  month: number;\n  /**\n   * Array of React nodes, one per day of the month.\n   * annotations[0] maps to Day 1, annotations[1] maps to Day 2, etc.\n   * Use null or undefined for days with no annotation.\n   */\n  annotations?: (ReactNode | null | undefined)[];\n  /**\n   * Array of exactly 7 strings for the weekday header labels.\n   * Omit to hide the header row entirely.\n   */\n  headers?: [string, string, string, string, string, string, string];\n  /**\n   * Inline styles merged onto the table element, overriding defaults via shallow spread.\n   */\n  style?: CSSProperties;\n  /**\n   * Enables the dark color theme for day numbers, headers, and annotation text.\n   * The component does not set its own background — wrap it in a dark container when enabled.\n   * @default false\n   */\n  darkMode?: boolean;\n}\n\n// ─── Theme definitions ───\n\nconst LIGHT_THEME = {\n  dayColor: '#222',\n  headerColor: '#555',\n  annotationColor: 'inherit'\n};\n\nconst DARK_THEME = {\n  dayColor: '#f0f0f0',\n  headerColor: '#a0a0b8',\n  annotationColor: '#d0d0e0'\n};\n\n// ─── Static style objects ───\n\nconst defaultTableStyle: CSSProperties = {\n  borderCollapse: 'collapse',\n  border: 'none',\n  width: '100%',\n  tableLayout: 'fixed',\n  fontFamily: 'sans-serif'\n};\n\nconst defaultCellStyle: CSSProperties = {\n  border: 'none',\n  verticalAlign: 'top',\n  padding: 0,\n  position: 'relative',\n  textAlign: 'center'\n};\n\n/**\n * MonthlyCalendar Component\n *\n * A zero-dependency monthly calendar grid rendered as a semantic HTML table.\n * Each day occupies a square cell with an optional annotation slot that accepts\n * any ReactNode (text, images, badges, icons, or entire sub-components).\n *\n * Features built-in light and dark themes, customizable headers, and\n * table-level style overrides. All styling is inline — no CSS files required.\n *\n * @component\n * @example\n * ```tsx\n * <MonthlyCalendar\n *   year={2026}\n *   month={2}\n *   headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}\n *   darkMode={false}\n * />\n * ```\n */\nconst MonthlyCalendar: React.FC<MonthlyCalendarProps> = ({\n  year,\n  month,\n  annotations = [],\n  headers,\n  style = {},\n  darkMode = false\n}) => {\n  const theme = darkMode ? DARK_THEME : LIGHT_THEME;\n\n  const weeks = useMemo(() => {\n    const daysInMonth = new Date(year, month, 0).getDate();\n    const startDay = new Date(year, month - 1, 1).getDay(); // 0=Sun\n    const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;\n    const result: (number | null)[][] = [];\n    let currentDay = 1 - startDay;\n\n    for (let w = 0; w < totalCells / 7; w++) {\n      const week: (number | null)[] = [];\n      for (let d = 0; d < 7; d++) {\n        week.push(currentDay >= 1 && currentDay <= daysInMonth ? currentDay : null);\n        currentDay++;\n      }\n      result.push(week);\n    }\n    return result;\n  }, [year, month]);\n\n  const mergedTableStyle = { ...defaultTableStyle, ...style };\n\n  return (\n    <table style={mergedTableStyle}>\n      {headers && (\n        <thead>\n          <tr>\n            {headers.map((h, i) => (\n              <th\n                key={i}\n                style={{\n                  ...defaultCellStyle,\n                  fontWeight: 600,\n                  fontSize: '0.85rem',\n                  paddingBottom: 6,\n                  color: theme.headerColor\n                }}\n              >\n                {h}\n              </th>\n            ))}\n          </tr>\n        </thead>\n      )}\n      <tbody>\n        {weeks.map((week, wi) => (\n          <tr key={wi}>\n            {week.map((day, di) => (\n              <td key={di} style={defaultCellStyle}>\n                <div\n                  style={{\n                    width: '100%',\n                    paddingBottom: '100%',\n                    position: 'relative'\n                  }}\n                >\n                  <div\n                    style={{\n                      position: 'absolute',\n                      inset: 0,\n                      display: 'flex',\n                      flexDirection: 'column',\n                      alignItems: 'center',\n                      justifyContent: 'flex-start',\n                      paddingTop: 6,\n                      gap: 4,\n                      overflow: 'hidden'\n                    }}\n                  >\n                    {day !== null && (\n                      <>\n                        <span\n                          style={{\n                            fontFamily: 'sans-serif',\n                            fontSize: '0.95rem',\n                            fontWeight: 500,\n                            color: theme.dayColor\n                          }}\n                        >\n                          {day}\n                        </span>\n                        {annotations[day - 1] != null && (\n                          <div\n                            style={{\n                              fontSize: '0.75rem',\n                              lineHeight: 1.2,\n                              overflow: 'hidden',\n                              width: '100%',\n                              textAlign: 'center',\n                              color: theme.annotationColor\n                            }}\n                          >\n                            {annotations[day - 1]}\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                </div>\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthlyCalendar;\n"],"names":["LIGHT_THEME","DARK_THEME","defaultTableStyle","defaultCellStyle","MonthlyCalendar","year","month","annotations","headers","style","darkMode","theme","weeks","useMemo","daysInMonth","startDay","totalCells","result","currentDay","w","week","d","mergedTableStyle","jsxs","jsx","h","i","wi","day","di","Fragment"],"mappings":"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"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MarkdownRender-C-bSlM80.cjs"),r=require("./ThemeSwitch-C7k1_MA4.cjs");exports.MarkdownRender=e.MarkdownRender;exports.ThemeSwitch=r.ThemeSwitch;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MarkdownRender-BOGosy9w.cjs"),r=require("./MonthlyCalendar-D-tD_2xK.cjs"),n=require("./ThemeSwitch-C7k1_MA4.cjs");exports.MarkdownRender=e.MarkdownRender;exports.MonthlyCalendar=r.MonthlyCalendar;exports.ThemeSwitch=n.ThemeSwitch;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,7 +1,9 @@
-import { M as o } from "./MarkdownRender-DLY5lZNG.js";
-import { T as m } from "./ThemeSwitch-DbaEio36.js";
+import { M as o } from "./MarkdownRender-BmrS3q0l.js";
+import { M as t } from "./MonthlyCalendar-D9jC2b2L.js";
+import { T as n } from "./ThemeSwitch-DbaEio36.js";
 export {
   o as MarkdownRender,
-  m as ThemeSwitch
+  t as MonthlyCalendar,
+  n as ThemeSwitch
 };
 //# 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":";;;"}

package/dist/markdown-render.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MarkdownRender-C-bSlM80.cjs");exports.MarkdownRender=e.MarkdownRender;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MarkdownRender-BOGosy9w.cjs");exports.MarkdownRender=e.MarkdownRender;
 //# sourceMappingURL=markdown-render.cjs.map

package/dist/markdown-render.js

@@ -1,4 +1,4 @@
-import { M as o } from "./MarkdownRender-DLY5lZNG.js";
+import { M as o } from "./MarkdownRender-BmrS3q0l.js";
 export {
   o as MarkdownRender
 };

package/dist/monthly-calendar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MonthlyCalendar-D-tD_2xK.cjs");exports.MonthlyCalendar=e.MonthlyCalendar;
+//# sourceMappingURL=monthly-calendar.cjs.map

package/dist/monthly-calendar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"monthly-calendar.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/monthly-calendar.js

@@ -0,0 +1,5 @@
+import { M as r } from "./MonthlyCalendar-D9jC2b2L.js";
+export {
+  r as MonthlyCalendar
+};
+//# sourceMappingURL=monthly-calendar.js.map

package/dist/monthly-calendar.js.map

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

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

@@ -1,8 +1,17 @@
+import { Components, Options } from 'react-markdown';
 export interface MarkdownProps {
     /** The markdown string to render */
     content: string;
     /** Optional CSS class name for the container */
     className?: string;
+    /** Custom component overrides for markdown elements */
+    components?: Partial<Components>;
+    /** Target for all links (defaults to '_self') */
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    /** Make all images responsive (defaults to false) */
+    responsiveImages?: boolean;
+    /** Optional rehype plugins for HTML processing */
+    rehypePlugins?: Options['rehypePlugins'];
 }
 /**
  * A component that renders a markdown string as HTML.

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

@@ -0,0 +1,54 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+/**
+ * Props for the MonthlyCalendar component
+ */
+export interface MonthlyCalendarProps {
+    /** Full four-digit year (e.g. 2026) */
+    year: number;
+    /** Month to display, 1-based: 1 = January, 12 = December */
+    month: number;
+    /**
+     * Array of React nodes, one per day of the month.
+     * annotations[0] maps to Day 1, annotations[1] maps to Day 2, etc.
+     * Use null or undefined for days with no annotation.
+     */
+    annotations?: (ReactNode | null | undefined)[];
+    /**
+     * Array of exactly 7 strings for the weekday header labels.
+     * Omit to hide the header row entirely.
+     */
+    headers?: [string, string, string, string, string, string, string];
+    /**
+     * Inline styles merged onto the table element, overriding defaults via shallow spread.
+     */
+    style?: CSSProperties;
+    /**
+     * Enables the dark color theme for day numbers, headers, and annotation text.
+     * The component does not set its own background — wrap it in a dark container when enabled.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+/**
+ * MonthlyCalendar Component
+ *
+ * A zero-dependency monthly calendar grid rendered as a semantic HTML table.
+ * Each day occupies a square cell with an optional annotation slot that accepts
+ * any ReactNode (text, images, badges, icons, or entire sub-components).
+ *
+ * Features built-in light and dark themes, customizable headers, and
+ * table-level style overrides. All styling is inline — no CSS files required.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <MonthlyCalendar
+ *   year={2026}
+ *   month={2}
+ *   headers={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
+ *   darkMode={false}
+ * />
+ * ```
+ */
+declare const MonthlyCalendar: React.FC<MonthlyCalendarProps>;
+export default MonthlyCalendar;

package/dist/types/components/MonthlyCalendar/index.d.ts

@@ -0,0 +1,2 @@
+export type { MonthlyCalendarProps } from './MonthlyCalendar';
+export { default as MonthlyCalendar } from './MonthlyCalendar';

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/MarkdownRender';
+export * from './components/MonthlyCalendar';
 export * from './components/ThemeSwitch';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macolmenerori/component-library",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "type": "module",
   "description": "",
   "keywords": [],
@@ -47,6 +47,16 @@
         "types": "./dist/types/components/MarkdownRender/index.d.ts",
         "default": "./dist/markdown-render.cjs"
       }
+    },
+    "./monthly-calendar": {
+      "import": {
+        "types": "./dist/types/components/MonthlyCalendar/index.d.ts",
+        "default": "./dist/monthly-calendar.js"
+      },
+      "require": {
+        "types": "./dist/types/components/MonthlyCalendar/index.d.ts",
+        "default": "./dist/monthly-calendar.cjs"
+      }
     }
   },
   "sideEffects": [

package/dist/MarkdownRender-C-bSlM80.cjs

@@ -1,2 +0,0 @@
-"use strict";const r=require("react/jsx-runtime"),s=require("react-markdown"),i=require("remark-gfm"),t=({content:e,className:n})=>r.jsx("div",{className:n,children:r.jsx(s,{remarkPlugins:[i],children:e})});exports.MarkdownRender=t;
-//# sourceMappingURL=MarkdownRender-C-bSlM80.cjs.map

package/dist/MarkdownRender-C-bSlM80.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MarkdownRender-C-bSlM80.cjs","sources":["../src/components/MarkdownRender/MarkdownRender.tsx"],"sourcesContent":["import ReactMarkdown from 'react-markdown';\n\nimport remarkGfm from 'remark-gfm';\n\nexport interface MarkdownProps {\n  /** The markdown string to render */\n  content: string;\n  /** Optional CSS class name for the container */\n  className?: string;\n}\n\n/**\n * A component that renders a markdown string as HTML.\n * Supports GitHub Flavored Markdown (GFM) including tables,\n * strikethrough, task lists, and autolinks.\n */\nconst MarkdownRender: React.FC<MarkdownProps> = ({ content, className }) => {\n  return (\n    <div className={className}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>\n    </div>\n  );\n};\n\nexport default MarkdownRender;\n"],"names":["MarkdownRender","content","className","jsx","ReactMarkdown","remarkGfm"],"mappings":"sGAgBMA,EAA0C,CAAC,CAAE,QAAAC,EAAS,UAAAC,KAExDC,EAAAA,IAAC,MAAA,CAAI,UAAAD,EACH,SAAAC,EAAAA,IAACC,EAAA,CAAc,cAAe,CAACC,CAAS,EAAI,SAAAJ,CAAA,CAAQ,CAAA,CACtD"}

package/dist/MarkdownRender-DLY5lZNG.js

@@ -1,8 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import m from "react-markdown";
-import n from "remark-gfm";
-const d = ({ content: o, className: e }) => /* @__PURE__ */ r("div", { className: e, children: /* @__PURE__ */ r(m, { remarkPlugins: [n], children: o }) });
-export {
-  d as M
-};
-//# sourceMappingURL=MarkdownRender-DLY5lZNG.js.map

package/dist/MarkdownRender-DLY5lZNG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MarkdownRender-DLY5lZNG.js","sources":["../src/components/MarkdownRender/MarkdownRender.tsx"],"sourcesContent":["import ReactMarkdown from 'react-markdown';\n\nimport remarkGfm from 'remark-gfm';\n\nexport interface MarkdownProps {\n  /** The markdown string to render */\n  content: string;\n  /** Optional CSS class name for the container */\n  className?: string;\n}\n\n/**\n * A component that renders a markdown string as HTML.\n * Supports GitHub Flavored Markdown (GFM) including tables,\n * strikethrough, task lists, and autolinks.\n */\nconst MarkdownRender: React.FC<MarkdownProps> = ({ content, className }) => {\n  return (\n    <div className={className}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>\n    </div>\n  );\n};\n\nexport default MarkdownRender;\n"],"names":["MarkdownRender","content","className","jsx","ReactMarkdown","remarkGfm"],"mappings":";;;AAgBA,MAAMA,IAA0C,CAAC,EAAE,SAAAC,GAAS,WAAAC,QAExD,gBAAAC,EAAC,OAAA,EAAI,WAAAD,GACH,UAAA,gBAAAC,EAACC,GAAA,EAAc,eAAe,CAACC,CAAS,GAAI,UAAAJ,EAAA,CAAQ,EAAA,CACtD;"}