@ndlib/component-library 0.0.24 → 0.0.26

package/dist/components/elements/layout/Row.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { useMediaQuery } from '../../../utils/hooks/useMediaQuery';
 // Putting shared utils and types here so autodocs can pick them up
 export const convertFlexHelperProps = (props) => {
     const styleObject = {};
@@ -40,8 +39,14 @@ export const convertFlexHelperProps = (props) => {
 };
 export const Row = (_a) => {
     var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
-    const { breakpoint } = useMediaQuery();
-    const shouldRenderAsRow = breakpointParam !== undefined ? breakpoint > breakpointParam : true;
     const flexStyles = convertFlexHelperProps(rest);
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: shouldRenderAsRow ? 'row' : 'column' }) }, { children: children })));
+    let flexDirection = 'row';
+    if (breakpointParam !== undefined) {
+        flexDirection = [];
+        for (let i = 0; i <= breakpointParam; i++) {
+            flexDirection.push('column');
+        }
+        flexDirection.push('row');
+    }
+    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { children: children })));
 };

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export { List, ListItem, LIST_SIZE } from './components/elements/List';
 export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
-export { Pill } from './components/elements/Pill';
+export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/index.js

@@ -27,7 +27,7 @@ export { List, ListItem, LIST_SIZE } from './components/elements/List';
 export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
-export { Pill } from './components/elements/Pill';
+export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/utils/hooks/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
 export declare const useMediaQuery: () => {
     screenSize: number;
-    breakpoint: number;
+    breakpoint: number | undefined;
 };

package/dist/utils/hooks/useMediaQuery.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useTheme } from '../../theme';
 export const useMediaQuery = () => {
     const [screenSize, setScreenSize] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);
-    const [breakpoint, setBreakpoint] = useState(5);
+    const [breakpoint, setBreakpoint] = useState(undefined);
     const theme = useTheme();
     const breakpoints = theme.breakpoints.map((bp) => parseInt(bp.slice(0, -2)), [theme]);
     useEffect(() => {
@@ -17,6 +17,7 @@ export const useMediaQuery = () => {
             setScreenSize(screenSize);
         };
         window.addEventListener('resize', handleResize);
+        handleResize();
         return () => {
             window.removeEventListener('resize', handleResize);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "sideEffects": false,
   "files": [