@readme/markdown 7.10.0 → 7.10.1

package/components/Columns/index.tsx

@@ -8,10 +8,12 @@ export const Column = ({ children }) => {
   )
 }
 
-const Columns = ({ children, columns = 2, layout = 'auto'}) => {
+const Columns = ({ children, layout = 'auto'}) => {
   layout = layout === 'fixed' ? '1fr' : 'auto';
+  const columnsCount = React.Children.count(children);
+
   return (
-    <div className="Columns" style={{ gridTemplateColumns: `repeat(${columns}, ${layout})` }}>
+    <div className="Columns" style={{ gridTemplateColumns: `repeat(${columnsCount}, ${layout})` }}>
       {children}
     </div>
   );

package/components/Columns/style.scss

@@ -1,4 +1,10 @@
+$iphone-plus: 414px;
+
 .Columns {
   display: grid;
   gap: var(--md, 20px);
+
+  @media (max-width: $iphone-plus) {
+    grid-template-columns: 1fr !important;
+  }
 }

package/dist/components/Columns/index.d.ts

@@ -3,9 +3,8 @@ import './style.scss';
 export declare const Column: ({ children }: {
     children: any;
 }) => React.JSX.Element;
-declare const Columns: ({ children, columns, layout }: {
+declare const Columns: ({ children, layout }: {
     children: any;
-    columns?: number;
     layout?: string;
 }) => React.JSX.Element;
 export default Columns;

package/dist/main.css

@@ -1,6 +1,6 @@
 .Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-minimum, #637288);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}
 .CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:15px;padding-bottom:0;backdrop-filter:blur(20px);background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),0 2px 5px rgba(0, 0, 0, 0.02)}.CardsGrid .Card-top{display:inline-flex;flex-direction:row}.CardsGrid .Card-icon{color:var(--project-color-primary, inherit);font-size:20px}.CardsGrid .Card-title{color:var(--color-text-default, #384248);font-weight:600;margin-top:10px}.CardsGrid .Card-title:first-child{margin-top:0}.CardsGrid .Card-content{color:var(--color-text-muted, #4f5a66)}.CardsGrid a.Card:not([href=""]){text-decoration:none;color:inherit}.CardsGrid a.Card:not([href=""]):hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}
-.Columns{display:grid;gap:var(--md, 20px)}
+.Columns{display:grid;gap:var(--md, 20px)}@media(max-width: 414px){.Columns{grid-template-columns:1fr !important}}
 .TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--project-color-primary, var(--color-text-default, #384248));color:var(--project-color-primary, var(--color-text-default, #384248));font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}
 /* BASICS */
 

package/dist/main.js

@@ -13707,9 +13707,10 @@ const CodeTabs = props => {
 const Column = ({ children }) => {
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Column" }, children));
 };
-const Columns = ({ children, columns = 2, layout = 'auto' }) => {
+const Columns = ({ children, layout = 'auto' }) => {
     layout = layout === 'fixed' ? '1fr' : 'auto';
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Columns", style: { gridTemplateColumns: `repeat(${columns}, ${layout})` } }, children));
+    const columnsCount = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.count(children);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Columns", style: { gridTemplateColumns: `repeat(${columnsCount}, ${layout})` } }, children));
 };
 /* harmony default export */ const components_Columns = (Columns);
 

package/dist/main.node.js

@@ -8271,9 +8271,10 @@ const CodeTabs = props => {
 const Column = ({ children }) => {
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Column" }, children));
 };
-const Columns = ({ children, columns = 2, layout = 'auto' }) => {
+const Columns = ({ children, layout = 'auto' }) => {
     layout = layout === 'fixed' ? '1fr' : 'auto';
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Columns", style: { gridTemplateColumns: `repeat(${columns}, ${layout})` } }, children));
+    const columnsCount = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.count(children);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Columns", style: { gridTemplateColumns: `repeat(${columnsCount}, ${layout})` } }, children));
 };
 /* harmony default export */ const components_Columns = (Columns);
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "7.10.0",
+  "version": "7.10.1",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",