colibri-ui 0.8.77 → 0.8.80

package/Modal/index.js

@@ -51,7 +51,7 @@ var ModalRoot = function ModalRoot(_ref) {
   var parentContainer = withinParent ? parentModal === null || parentModal === void 0 ? void 0 : parentModal.container : undefined;
   var isContained = Boolean(parentContainer);
   var isDesktop = index$4.useMediaSizes(function (bp) {
-    return bp.up("md");
+    return bp.up("lg");
   });
   var titleId = React.useId();
   var _useState3 = React.useState(0),

package/README.md

@@ -131,6 +131,71 @@ If you add a theme inside the library itself, create both layers:
 
 Then export it from `src/components/Theme/index.tsx` and update `scripts/variables.ts` if you want a generated CSS variables file in the package build.
 
+## Breakpoints
+
+Colibri UI uses one fixed set of breakpoints, shared with the apps that use the kit.
+
+| Name  | Value   | px   |
+| ----- | ------- | ---- |
+| `sm`  | `40rem` | 640  |
+| `md`  | `48rem` | 768  |
+| `lg`  | `64rem` | 1024 |
+| `xl`  | `80rem` | 1280 |
+| `2xl` | `96rem` | 1536 |
+
+The values match the Tailwind CSS defaults on purpose, because they are an industry standard. Tailwind is not a dependency of Colibri UI.
+
+Rules:
+
+- **Mobile first.** Base styles are for screens narrower than `sm`. There is no `xs`.
+- **rem, not px.** Layout follows the user's browser font size.
+- **Range syntax only.** Write `(width >= 48rem)` and `(width < 48rem)`. Do not use `min-width` / `max-width` or `- 1px` arithmetic: each edge belongs to exactly one side.
+
+### CSS
+
+CSS cannot read variables inside media queries, so write the value as a literal:
+
+```css
+.card {
+  padding: var(--space-4);
+}
+
+@media (width >= 64rem) {
+  .card {
+    padding: var(--space-6);
+  }
+}
+```
+
+Inside the kit, a test and a stylelint rule reject `min-width` / `max-width` and any width value outside the table.
+
+### JavaScript
+
+```ts
+import { BREAKPOINTS, media, useMediaSizes } from "colibri-ui";
+
+BREAKPOINTS.md; // "48rem"
+media.up("md"); // "(width >= 48rem)"
+media.down("md"); // "(width < 48rem)"
+media.between("md", "lg"); // "(48rem <= width < 64rem)"
+
+window.matchMedia(media.up("lg")).matches;
+
+// in a component
+const isDesktop = useMediaSizes((bp) => bp.up("lg"));
+
+// CSS-in-JS: add the @media prefix yourself
+const css = `@media ${media.down("sm")} { … }`;
+```
+
+`BREAKPOINTS` and `media` are also exported from `colibri-ui/Theme`.
+
+### useMediaSizes
+
+`useMediaSizes(query)` takes a query string or a function that receives `media`, and returns whether the query matches. It updates when the viewport crosses the edge.
+
+Returns `false` on the server and during hydration. Use it to decide whether to mount a heavy component; to show/hide markup use CSS media queries, otherwise the wrong variant renders until hydration.
+
 ## License
 
 MIT

package/Theme/breakpoints.d.ts

@@ -1,18 +1,22 @@
-export type Breakpoints = {
-    hd: number;
-    xl: number;
-    lg: number;
-    md: number;
-    sm: number;
-    xs: number;
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+export declare const BREAKPOINTS: {
+    readonly sm: "40rem";
+    readonly md: "48rem";
+    readonly lg: "64rem";
+    readonly xl: "80rem";
+    readonly "2xl": "96rem";
 };
-export type BreakpointName = keyof Breakpoints;
-export type BreakpointsTheme = {
-    values: Breakpoints;
-    up: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    under: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    between: ([from, to]: [BreakpointName, BreakpointName], isMedial?: boolean) => string;
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type Media = {
+    /** `(width >= <name>)` */
+    up: (name: BreakpointName) => string;
+    /** `(width < <name>)` */
+    down: (name: BreakpointName) => string;
+    /** `(<from> <= width < <to>)` */
+    between: (from: BreakpointName, to: BreakpointName) => string;
 };
-export type BreakpointMap<T = number> = Map<BreakpointName, T>;
-declare const Breakpoints: BreakpointsTheme;
-export default Breakpoints;
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+export declare const media: Media;

package/Theme/breakpoints.js

@@ -1,39 +1,28 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-
-var Breakpoints = {
-  values: {
-    hd: 2560,
-    xl: 1920,
-    lg: 1450,
-    md: 1075,
-    sm: 680,
-    xs: 320
-  },
-  up: function up(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(this.values[breakpoint], "px)");
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+var BREAKPOINTS = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+var media = {
+  up: function up(name) {
+    return "(width >= ".concat(BREAKPOINTS[name], ")");
   },
-  under: function under(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(max-width: ").concat(this.values[breakpoint] - 1, "px)");
+  down: function down(name) {
+    return "(width < ".concat(BREAKPOINTS[name], ")");
   },
-  between: function between(_ref) {
-    var _ref2 = _slicedToArray__default.default(_ref, 2),
-      min = _ref2[0],
-      max = _ref2[1];
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var from = this.values[min];
-    var to = this.values[max] - 1;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(from, "px) and (max-width: ").concat(to, "px)");
+  between: function between(from, to) {
+    return "(".concat(BREAKPOINTS[from], " <= width < ").concat(BREAKPOINTS[to], ")");
   }
 };
 
-exports.default = Breakpoints;
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.media = media;

package/Theme/index.d.ts

@@ -1,3 +1,5 @@
+export { BREAKPOINTS, media } from "./breakpoints";
+export type { BreakpointName, Media } from "./breakpoints";
 export declare const THEMES: {
     JAIPUR: {
         "component-button-primary-bg": "var(--color-action-primary)";

package/Theme/index.js

@@ -3,10 +3,13 @@
 var tokens = require('../Button/tokens.js');
 var jaipur = require('./themes/jaipur.js');
 var buenos_aires = require('./themes/buenos_aires.js');
+var breakpoints = require('./breakpoints.js');
 
 var THEMES = {
   JAIPUR: Object.assign(Object.assign({}, jaipur.default), tokens.BUTTON_TOKENS),
   BA: Object.assign(Object.assign({}, buenos_aires.default), tokens.BUTTON_TOKENS)
 };
 
+exports.BREAKPOINTS = breakpoints.BREAKPOINTS;
+exports.media = breakpoints.media;
 exports.THEMES = THEMES;

package/esm/Autocomplete/index.js

@@ -0,0 +1 @@
+export { Autocomplete } from './Autocomplete.js';

package/esm/Calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from './Calendar.js';

package/esm/Card/index.js

@@ -0,0 +1 @@
+export { Card, CardContent, CardInnerContent } from './Card.js';

package/esm/CodeField/index.js

@@ -0,0 +1 @@
+export { CodeField, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, ONLY_DIGITS_PATTERN } from './CodeField.js';

package/esm/Drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer.js';

package/esm/Dropzone/index.js

@@ -0,0 +1 @@
+export { Dropzone } from './Dropzone.js';

package/esm/Editable/index.js

@@ -0,0 +1 @@
+export { Editable } from './Editable.js';

package/esm/Icons/index.js

@@ -0,0 +1,21 @@
+export { ArrowNext } from './ArrowNext.js';
+export { Cart } from './Cart.js';
+export { Check } from './Check.js';
+export { Chevron } from './Chevron.js';
+export { Close } from './Close.js';
+export { Copy } from './Copy.js';
+export { Cross } from './Cross.js';
+export { CrossFill } from './CrossFill.js';
+export { Edit } from './Edit.js';
+export { Exit } from './Exit.js';
+export { EyeOpen } from './EyeOpen.js';
+export { EyeClosed } from './EyeClosed.js';
+export { Help } from './Help.js';
+export { Info } from './Info.js';
+export { Minus } from './Minus.js';
+export { More } from './More.js';
+export { Plus } from './Plus.js';
+export { Setting } from './Setting.js';
+export { Shield } from './Shield.js';
+export { Trash } from './Trash.js';
+export { User } from './User.js';

package/esm/List/index.js

@@ -0,0 +1 @@
+export { List, ListItem, ListSection } from './List.js';

package/esm/Modal/index.js

@@ -41,7 +41,7 @@ var ModalRoot = function ModalRoot(_ref) {
   var parentContainer = withinParent ? parentModal === null || parentModal === void 0 ? void 0 : parentModal.container : undefined;
   var isContained = Boolean(parentContainer);
   var isDesktop = useMediaSizes(function (bp) {
-    return bp.up("md");
+    return bp.up("lg");
   });
   var titleId = useId();
   var _useState3 = useState(0),

package/esm/NumberInput/index.js

@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput.js';

package/esm/Progress/index.js

@@ -0,0 +1 @@
+export { Progress } from './Progress.js';

package/esm/Rating/index.js

@@ -0,0 +1 @@
+export { Rating } from './Rating.js';

package/esm/Slider/index.js

@@ -0,0 +1 @@
+export { Slider } from './Slider.js';

package/esm/Theme/breakpoints.d.ts

@@ -1,18 +1,22 @@
-export type Breakpoints = {
-    hd: number;
-    xl: number;
-    lg: number;
-    md: number;
-    sm: number;
-    xs: number;
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+export declare const BREAKPOINTS: {
+    readonly sm: "40rem";
+    readonly md: "48rem";
+    readonly lg: "64rem";
+    readonly xl: "80rem";
+    readonly "2xl": "96rem";
 };
-export type BreakpointName = keyof Breakpoints;
-export type BreakpointsTheme = {
-    values: Breakpoints;
-    up: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    under: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    between: ([from, to]: [BreakpointName, BreakpointName], isMedial?: boolean) => string;
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type Media = {
+    /** `(width >= <name>)` */
+    up: (name: BreakpointName) => string;
+    /** `(width < <name>)` */
+    down: (name: BreakpointName) => string;
+    /** `(<from> <= width < <to>)` */
+    between: (from: BreakpointName, to: BreakpointName) => string;
 };
-export type BreakpointMap<T = number> = Map<BreakpointName, T>;
-declare const Breakpoints: BreakpointsTheme;
-export default Breakpoints;
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+export declare const media: Media;

package/esm/Theme/breakpoints.js

@@ -1,31 +1,25 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-
-var Breakpoints = {
-  values: {
-    hd: 2560,
-    xl: 1920,
-    lg: 1450,
-    md: 1075,
-    sm: 680,
-    xs: 320
-  },
-  up: function up(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(this.values[breakpoint], "px)");
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+var BREAKPOINTS = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+var media = {
+  up: function up(name) {
+    return "(width >= ".concat(BREAKPOINTS[name], ")");
   },
-  under: function under(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(max-width: ").concat(this.values[breakpoint] - 1, "px)");
+  down: function down(name) {
+    return "(width < ".concat(BREAKPOINTS[name], ")");
   },
-  between: function between(_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      min = _ref2[0],
-      max = _ref2[1];
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var from = this.values[min];
-    var to = this.values[max] - 1;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(from, "px) and (max-width: ").concat(to, "px)");
+  between: function between(from, to) {
+    return "(".concat(BREAKPOINTS[from], " <= width < ").concat(BREAKPOINTS[to], ")");
   }
 };
 
-export { Breakpoints as default };
+export { BREAKPOINTS, media };

package/esm/Theme/index.d.ts

@@ -1,3 +1,5 @@
+export { BREAKPOINTS, media } from "./breakpoints";
+export type { BreakpointName, Media } from "./breakpoints";
 export declare const THEMES: {
     JAIPUR: {
         "component-button-primary-bg": "var(--color-action-primary)";

package/esm/Theme/index.js

@@ -1,6 +1,7 @@
 import { BUTTON_TOKENS } from '../Button/tokens.js';
 import theme_jaipur from './themes/jaipur.js';
 import THEME_BA from './themes/buenos_aires.js';
+export { BREAKPOINTS, media } from './breakpoints.js';
 
 var THEMES = {
   JAIPUR: Object.assign(Object.assign({}, theme_jaipur), BUTTON_TOKENS),

package/esm/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,9 @@
-import type { BreakpointsTheme } from "../../Theme/breakpoints";
-export type QueryInputFunction = (breakpoints: BreakpointsTheme) => string;
+import type { Media } from "../../Theme/breakpoints";
+export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/esm/hooks/useMediaSizes/index.js

@@ -1,38 +1,32 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useEffect } from 'react';
-import Breakpoints from '../../Theme/breakpoints.js';
+import { useCallback, useSyncExternalStore } from 'react';
+import { media } from '../../Theme/breakpoints.js';
 
-var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+var getMediaQueryList = function getMediaQueryList(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
+};
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(Breakpoints) : queryInput;
-  query = query.replace(/^@media( ?)/m, "");
-  var matchMedia = supportMatchMedia ? window.matchMedia : null;
-  var _useState = useState(function () {
-      if (matchMedia) {
-        return matchMedia(query).matches;
-      }
-      return false;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    match = _useState2[0],
-    setMatch = _useState2[1];
-  useEffect(function () {
-    if (!matchMedia) return undefined;
-    var active = true;
-    var queryList = matchMedia(query);
-    var updateMatch = function updateMatch() {
-      if (active) {
-        setMatch(queryList.matches);
-      }
-    };
-    updateMatch();
-    queryList.addEventListener("change", updateMatch);
+  // A function input is a new function every render: memoize on the query string.
+  var query = (typeof queryInput === "function" ? queryInput(media) : queryInput).replace(/^\s*@media\s*/, "");
+  var subscribe = useCallback(function (onChange) {
+    var queryList = getMediaQueryList(query);
+    if (!queryList) return function () {};
+    queryList.addEventListener("change", onChange);
     return function () {
-      active = false;
-      queryList.removeEventListener("change", updateMatch);
+      return queryList.removeEventListener("change", onChange);
     };
-  });
-  return match;
+  }, [query]);
+  var getSnapshot = useCallback(function () {
+    var _a, _b;
+    return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+  }, [query]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 export { useMediaSizes };

package/esm/index.d.ts

@@ -78,7 +78,8 @@ export { TabsPanels } from "./TabsPanels";
 export type { TabsPanelsProps } from "./TabsPanels/index.props";
 export { TextArea } from "./TextArea";
 export type { ITextAreaProps } from "./TextArea/index.props";
-export { THEMES } from "./Theme";
+export { THEMES, BREAKPOINTS, media } from "./Theme";
+export type { BreakpointName, Media } from "./Theme";
 export { TimeSelect } from "./TimeSelect";
 export type { TimeSelectProps } from "./TimeSelect/index.props";
 export { Tooltip } from "./Tooltip";

package/esm/index.js

@@ -65,6 +65,7 @@ export { Setting } from './Icons/Setting.js';
 export { Shield } from './Icons/Shield.js';
 export { Trash } from './Icons/Trash.js';
 export { User } from './Icons/User.js';
+export { BREAKPOINTS, media } from './Theme/breakpoints.js';
 export { Body as ModalBody } from './Modal/components/Body/index.js';
 export { Footer as ModalFooter } from './Modal/components/Footer/index.js';
 export { Header as ModalHeader } from './Modal/components/Header/index.js';

package/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,9 @@
-import type { BreakpointsTheme } from "../../Theme/breakpoints";
-export type QueryInputFunction = (breakpoints: BreakpointsTheme) => string;
+import type { Media } from "../../Theme/breakpoints";
+export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/hooks/useMediaSizes/index.js

@@ -1,44 +1,34 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var breakpoints = require('../../Theme/breakpoints.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-
-var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+var getMediaQueryList = function getMediaQueryList(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
+};
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(breakpoints.default) : queryInput;
-  query = query.replace(/^@media( ?)/m, "");
-  var matchMedia = supportMatchMedia ? window.matchMedia : null;
-  var _useState = React.useState(function () {
-      if (matchMedia) {
-        return matchMedia(query).matches;
-      }
-      return false;
-    }),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    match = _useState2[0],
-    setMatch = _useState2[1];
-  React.useEffect(function () {
-    if (!matchMedia) return undefined;
-    var active = true;
-    var queryList = matchMedia(query);
-    var updateMatch = function updateMatch() {
-      if (active) {
-        setMatch(queryList.matches);
-      }
-    };
-    updateMatch();
-    queryList.addEventListener("change", updateMatch);
+  // A function input is a new function every render: memoize on the query string.
+  var query = (typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput).replace(/^\s*@media\s*/, "");
+  var subscribe = React.useCallback(function (onChange) {
+    var queryList = getMediaQueryList(query);
+    if (!queryList) return function () {};
+    queryList.addEventListener("change", onChange);
     return function () {
-      active = false;
-      queryList.removeEventListener("change", updateMatch);
+      return queryList.removeEventListener("change", onChange);
     };
-  });
-  return match;
+  }, [query]);
+  var getSnapshot = React.useCallback(function () {
+    var _a, _b;
+    return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+  }, [query]);
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 exports.useMediaSizes = useMediaSizes;

package/index.d.ts

@@ -78,7 +78,8 @@ export { TabsPanels } from "./TabsPanels";
 export type { TabsPanelsProps } from "./TabsPanels/index.props";
 export { TextArea } from "./TextArea";
 export type { ITextAreaProps } from "./TextArea/index.props";
-export { THEMES } from "./Theme";
+export { THEMES, BREAKPOINTS, media } from "./Theme";
+export type { BreakpointName, Media } from "./Theme";
 export { TimeSelect } from "./TimeSelect";
 export type { TimeSelectProps } from "./TimeSelect/index.props";
 export { Tooltip } from "./Tooltip";

package/index.js

@@ -49,6 +49,7 @@ var index$B = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Autocomplete = require('./Autocomplete/Autocomplete.js');
+var breakpoints = require('./Theme/breakpoints.js');
 var Calendar = require('./Calendar/Calendar.js');
 var Card = require('./Card/Card.js');
 var Cart = require('./Icons/Cart.js');
@@ -124,6 +125,8 @@ exports.useMediaSizes = index$A.useMediaSizes;
 exports.useScrollLock = index$B.useScrollLock;
 exports.ArrowNext = ArrowNext.ArrowNext;
 exports.Autocomplete = Autocomplete.Autocomplete;
+exports.BREAKPOINTS = breakpoints.BREAKPOINTS;
+exports.media = breakpoints.media;
 exports.Calendar = Calendar.Calendar;
 exports.Card = Card.Card;
 exports.CardContent = Card.CardContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.77",
+  "version": "0.8.80",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",