@janbox/storefront-ui 1.0.0

package/dist/theme/provider.cjs

@@ -0,0 +1,303 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("@emotion/react");
+const theme_palette = require("./palette.cjs");
+const flat = require("flat");
+const lodashEs = require("lodash-es");
+const theme_typography = require("./typography.cjs");
+const ThemeProvider = ({ theme, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: createGlobalStyle(theme) }),
+    children
+  ] });
+};
+const createGlobalStyle = ({ palette, typography }) => {
+  const flattenPalette = flat.flatten(palette);
+  const colorVars = Object.fromEntries(
+    Object.keys(flattenPalette).map((key) => [
+      theme_palette.getColorVar(key, false),
+      flattenPalette[key]
+    ])
+  );
+  const typographyVars = Object.fromEntries(
+    lodashEs.flatMap(
+      Object.keys(typography).map((key) => {
+        const typographyVar = theme_typography.getTypographyVar(
+          key,
+          false
+        );
+        const { fontSize, lineHeight } = typography[key];
+        return [
+          [typographyVar.fontSize, fontSize],
+          [typographyVar.lineHeight, lineHeight]
+        ];
+      })
+    )
+  );
+  return {
+    // ─── Reset / Preflight ───────────────────────────────────────────────────
+    // 1. Prevent padding and border from affecting element width.
+    // 2. Allow adding a border to an element by just adding a border-width.
+    "*, ::before, ::after": {
+      boxSizing: "border-box",
+      // 1
+      borderWidth: 0,
+      // 2
+      borderStyle: "solid",
+      // 2
+      borderColor: theme_palette.getColorVar("border.default")
+    },
+    // 1. Use a consistent sensible line-height in all browsers.
+    // 2. Prevent adjustments of font size after orientation changes in iOS.
+    // 3. Use a more readable tab size.
+    // 4. Use the user's configured `sans` font-family by default.
+    // 5. Use the user's configured `sans` font-feature-settings by default.
+    // 6. Use the user's configured `sans` font-variation-settings by default.
+    // 7. Disable tap highlights on iOS
+    "html, :host": {
+      lineHeight: 1.5,
+      // 1
+      WebkitTextSizeAdjust: "100%",
+      // 2
+      MozTabSize: 4,
+      // 3
+      tabSize: 4,
+      // 3
+      fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      // 4
+      fontFeatureSettings: "normal",
+      // 5
+      fontVariationSettings: "normal",
+      // 6
+      WebkitTapHighlightColor: "transparent"
+      // 7
+    },
+    // 1. Remove the margin in all browsers.
+    // 2. Inherit line-height from `html` — overridden below by app-level typography.
+    body: {
+      margin: 0,
+      // 1
+      // ─── App-level styles ───────────────────────────────────────────
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100dvh",
+      color: theme_palette.getColorVar("neutral.600"),
+      backgroundColor: theme_palette.getColorVar("background.default"),
+      fontSize: theme_typography.getTypographyVar("sm").fontSize,
+      lineHeight: theme_typography.getTypographyVar("sm").lineHeight
+    },
+    // 1. Add the correct height in Firefox.
+    // 2. Correct the inheritance of border color in Firefox.
+    // 3. Ensure horizontal rules are visible by default.
+    hr: {
+      height: 0,
+      // 1
+      color: "inherit",
+      // 2
+      borderTopWidth: "1px"
+      // 3
+    },
+    // Add the correct text decoration in Chrome, Edge, and Safari.
+    "abbr:where([title])": {
+      textDecoration: "underline dotted"
+    },
+    // Remove the default font size and weight for headings.
+    "h1, h2, h3, h4, h5, h6": {
+      fontSize: "inherit",
+      fontWeight: "inherit"
+    },
+    // Reset links to optimize for opt-in styling instead of opt-out.
+    a: {
+      color: "inherit",
+      textDecoration: "inherit"
+    },
+    // Add the correct font weight in Edge and Safari.
+    "b, strong": {
+      fontWeight: "bolder"
+    },
+    // 1. Use the user's configured `mono` font-family by default.
+    // 2. Use the user's configured `mono` font-feature-settings by default.
+    // 3. Use the user's configured `mono` font-variation-settings by default.
+    // 4. Correct the odd `em` font sizing in all browsers.
+    "code, kbd, samp, pre": {
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      // 1
+      fontFeatureSettings: "normal",
+      // 2
+      fontVariationSettings: "normal",
+      // 3
+      fontSize: "1em"
+      // 4
+    },
+    // Add the correct font size in all browsers.
+    small: {
+      fontSize: "80%"
+    },
+    // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+    "sub, sup": {
+      fontSize: "75%",
+      lineHeight: 0,
+      position: "relative",
+      verticalAlign: "baseline"
+    },
+    sub: {
+      bottom: "-0.25em"
+    },
+    sup: {
+      top: "-0.5em"
+    },
+    // 1. Remove text indentation from table contents in Chrome and Safari.
+    // 2. Correct table border color inheritance in all Chrome and Safari.
+    // 3. Remove gaps between table borders by default.
+    table: {
+      textIndent: 0,
+      // 1
+      borderColor: "inherit",
+      // 2
+      borderCollapse: "collapse"
+      // 3
+    },
+    // 1. Change the font styles in all browsers.
+    // 2. Remove the margin in Firefox and Safari.
+    // 3. Remove default padding in all browsers.
+    "button, input, optgroup, select, textarea": {
+      fontFamily: "inherit",
+      // 1
+      fontFeatureSettings: "inherit",
+      // 1
+      fontVariationSettings: "inherit",
+      // 1
+      fontSize: "100%",
+      // 1
+      fontWeight: "inherit",
+      // 1
+      lineHeight: "inherit",
+      // 1
+      letterSpacing: "inherit",
+      // 1
+      color: "inherit",
+      // 1
+      margin: 0,
+      // 2
+      padding: 0
+      // 3
+    },
+    // Remove the inheritance of text transform in Edge and Firefox.
+    "button, select": {
+      textTransform: "none"
+    },
+    // 1. Correct the inability to style clickable types in iOS and Safari.
+    // 2. Remove default button styles.
+    "button, input:where([type='button']), input:where([type='reset']), input:where([type='submit'])": {
+      WebkitAppearance: "button",
+      // 1
+      backgroundColor: "transparent",
+      // 2
+      backgroundImage: "none"
+      // 2
+    },
+    // Use the modern Firefox focus style for all focusable elements.
+    ":-moz-focusring": {
+      outline: "auto"
+    },
+    // Remove the additional `:invalid` styles in Firefox.
+    ":-moz-ui-invalid": {
+      boxShadow: "none"
+    },
+    // Add the correct vertical alignment in Chrome and Firefox.
+    progress: {
+      verticalAlign: "baseline"
+    },
+    // Correct the cursor style of increment and decrement buttons in Safari.
+    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
+      height: "auto"
+    },
+    // 1. Correct the odd appearance in Chrome and Safari.
+    // 2. Correct the outline style in Safari.
+    "[type='search']": {
+      WebkitAppearance: "textfield",
+      // 1
+      outlineOffset: "-2px"
+      // 2
+    },
+    // Remove the inner padding in Chrome and Safari on macOS.
+    "::-webkit-search-decoration": {
+      WebkitAppearance: "none"
+    },
+    // 1. Correct the inability to style clickable types in iOS and Safari.
+    // 2. Change font properties to `inherit` in Safari.
+    "::-webkit-file-upload-button": {
+      WebkitAppearance: "button",
+      // 1
+      font: "inherit"
+      // 2
+    },
+    // Add the correct display in Chrome and Safari.
+    summary: {
+      display: "list-item"
+    },
+    // Removes the default spacing and border for appropriate elements.
+    "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": {
+      margin: 0
+    },
+    fieldset: {
+      margin: 0,
+      padding: 0
+    },
+    legend: {
+      padding: 0
+    },
+    "ol, ul, menu": {
+      listStyle: "none",
+      margin: 0,
+      padding: 0
+    },
+    // Reset default styling for dialogs.
+    dialog: {
+      padding: 0
+    },
+    // Prevent resizing textareas horizontally by default.
+    textarea: {
+      resize: "vertical"
+    },
+    // 1. Reset the default placeholder opacity in Firefox.
+    // 2. Set the default placeholder color to gray 400.
+    "input::placeholder, textarea::placeholder": {
+      opacity: 1,
+      // 1
+      color: theme_palette.getColorVar("neutral.400")
+    },
+    // Set the default cursor for buttons.
+    "button, [role='button']": {
+      cursor: "pointer"
+    },
+    // Make sure disabled buttons don't get the pointer cursor.
+    ":disabled": {
+      cursor: "default"
+    },
+    // 1. Make replaced elements `display: block` by default.
+    // 2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
+    "img, svg, video, canvas, audio, iframe, embed, object": {
+      display: "block",
+      // 1
+      verticalAlign: "middle"
+      // 2
+    },
+    // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
+    "img, video": {
+      maxWidth: "100%",
+      height: "auto"
+    },
+    // Make elements with the HTML hidden attribute stay hidden by default.
+    "[hidden]:where(:not([hidden='until-found']))": {
+      display: "none"
+    },
+    // ─── CSS Variables ───────────────────────────────────────────────────────
+    ":root": {
+      ...colorVars,
+      ...typographyVars
+    }
+  };
+};
+exports.ThemeProvider = ThemeProvider;

package/dist/theme/provider.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '@emotion/react';
+import { PropsWithChildren } from 'react';
+export type ThemeProviderProps = PropsWithChildren<{
+    theme: Theme;
+}>;
+export declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=provider.d.ts.map

package/dist/theme/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EAGN,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,qDAOpE,CAAC"}

package/dist/theme/provider.js

@@ -0,0 +1,303 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { ThemeProvider as ThemeProvider$1, Global } from "@emotion/react";
+import { getColorVar } from "./palette.js";
+import { flatten } from "flat";
+import { flatMap } from "lodash-es";
+import { getTypographyVar } from "./typography.js";
+const ThemeProvider = ({ theme, children }) => {
+  return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme, children: [
+    /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
+    children
+  ] });
+};
+const createGlobalStyle = ({ palette, typography }) => {
+  const flattenPalette = flatten(palette);
+  const colorVars = Object.fromEntries(
+    Object.keys(flattenPalette).map((key) => [
+      getColorVar(key, false),
+      flattenPalette[key]
+    ])
+  );
+  const typographyVars = Object.fromEntries(
+    flatMap(
+      Object.keys(typography).map((key) => {
+        const typographyVar = getTypographyVar(
+          key,
+          false
+        );
+        const { fontSize, lineHeight } = typography[key];
+        return [
+          [typographyVar.fontSize, fontSize],
+          [typographyVar.lineHeight, lineHeight]
+        ];
+      })
+    )
+  );
+  return {
+    // ─── Reset / Preflight ───────────────────────────────────────────────────
+    // 1. Prevent padding and border from affecting element width.
+    // 2. Allow adding a border to an element by just adding a border-width.
+    "*, ::before, ::after": {
+      boxSizing: "border-box",
+      // 1
+      borderWidth: 0,
+      // 2
+      borderStyle: "solid",
+      // 2
+      borderColor: getColorVar("border.default")
+    },
+    // 1. Use a consistent sensible line-height in all browsers.
+    // 2. Prevent adjustments of font size after orientation changes in iOS.
+    // 3. Use a more readable tab size.
+    // 4. Use the user's configured `sans` font-family by default.
+    // 5. Use the user's configured `sans` font-feature-settings by default.
+    // 6. Use the user's configured `sans` font-variation-settings by default.
+    // 7. Disable tap highlights on iOS
+    "html, :host": {
+      lineHeight: 1.5,
+      // 1
+      WebkitTextSizeAdjust: "100%",
+      // 2
+      MozTabSize: 4,
+      // 3
+      tabSize: 4,
+      // 3
+      fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      // 4
+      fontFeatureSettings: "normal",
+      // 5
+      fontVariationSettings: "normal",
+      // 6
+      WebkitTapHighlightColor: "transparent"
+      // 7
+    },
+    // 1. Remove the margin in all browsers.
+    // 2. Inherit line-height from `html` — overridden below by app-level typography.
+    body: {
+      margin: 0,
+      // 1
+      // ─── App-level styles ───────────────────────────────────────────
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100dvh",
+      color: getColorVar("neutral.600"),
+      backgroundColor: getColorVar("background.default"),
+      fontSize: getTypographyVar("sm").fontSize,
+      lineHeight: getTypographyVar("sm").lineHeight
+    },
+    // 1. Add the correct height in Firefox.
+    // 2. Correct the inheritance of border color in Firefox.
+    // 3. Ensure horizontal rules are visible by default.
+    hr: {
+      height: 0,
+      // 1
+      color: "inherit",
+      // 2
+      borderTopWidth: "1px"
+      // 3
+    },
+    // Add the correct text decoration in Chrome, Edge, and Safari.
+    "abbr:where([title])": {
+      textDecoration: "underline dotted"
+    },
+    // Remove the default font size and weight for headings.
+    "h1, h2, h3, h4, h5, h6": {
+      fontSize: "inherit",
+      fontWeight: "inherit"
+    },
+    // Reset links to optimize for opt-in styling instead of opt-out.
+    a: {
+      color: "inherit",
+      textDecoration: "inherit"
+    },
+    // Add the correct font weight in Edge and Safari.
+    "b, strong": {
+      fontWeight: "bolder"
+    },
+    // 1. Use the user's configured `mono` font-family by default.
+    // 2. Use the user's configured `mono` font-feature-settings by default.
+    // 3. Use the user's configured `mono` font-variation-settings by default.
+    // 4. Correct the odd `em` font sizing in all browsers.
+    "code, kbd, samp, pre": {
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      // 1
+      fontFeatureSettings: "normal",
+      // 2
+      fontVariationSettings: "normal",
+      // 3
+      fontSize: "1em"
+      // 4
+    },
+    // Add the correct font size in all browsers.
+    small: {
+      fontSize: "80%"
+    },
+    // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+    "sub, sup": {
+      fontSize: "75%",
+      lineHeight: 0,
+      position: "relative",
+      verticalAlign: "baseline"
+    },
+    sub: {
+      bottom: "-0.25em"
+    },
+    sup: {
+      top: "-0.5em"
+    },
+    // 1. Remove text indentation from table contents in Chrome and Safari.
+    // 2. Correct table border color inheritance in all Chrome and Safari.
+    // 3. Remove gaps between table borders by default.
+    table: {
+      textIndent: 0,
+      // 1
+      borderColor: "inherit",
+      // 2
+      borderCollapse: "collapse"
+      // 3
+    },
+    // 1. Change the font styles in all browsers.
+    // 2. Remove the margin in Firefox and Safari.
+    // 3. Remove default padding in all browsers.
+    "button, input, optgroup, select, textarea": {
+      fontFamily: "inherit",
+      // 1
+      fontFeatureSettings: "inherit",
+      // 1
+      fontVariationSettings: "inherit",
+      // 1
+      fontSize: "100%",
+      // 1
+      fontWeight: "inherit",
+      // 1
+      lineHeight: "inherit",
+      // 1
+      letterSpacing: "inherit",
+      // 1
+      color: "inherit",
+      // 1
+      margin: 0,
+      // 2
+      padding: 0
+      // 3
+    },
+    // Remove the inheritance of text transform in Edge and Firefox.
+    "button, select": {
+      textTransform: "none"
+    },
+    // 1. Correct the inability to style clickable types in iOS and Safari.
+    // 2. Remove default button styles.
+    "button, input:where([type='button']), input:where([type='reset']), input:where([type='submit'])": {
+      WebkitAppearance: "button",
+      // 1
+      backgroundColor: "transparent",
+      // 2
+      backgroundImage: "none"
+      // 2
+    },
+    // Use the modern Firefox focus style for all focusable elements.
+    ":-moz-focusring": {
+      outline: "auto"
+    },
+    // Remove the additional `:invalid` styles in Firefox.
+    ":-moz-ui-invalid": {
+      boxShadow: "none"
+    },
+    // Add the correct vertical alignment in Chrome and Firefox.
+    progress: {
+      verticalAlign: "baseline"
+    },
+    // Correct the cursor style of increment and decrement buttons in Safari.
+    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
+      height: "auto"
+    },
+    // 1. Correct the odd appearance in Chrome and Safari.
+    // 2. Correct the outline style in Safari.
+    "[type='search']": {
+      WebkitAppearance: "textfield",
+      // 1
+      outlineOffset: "-2px"
+      // 2
+    },
+    // Remove the inner padding in Chrome and Safari on macOS.
+    "::-webkit-search-decoration": {
+      WebkitAppearance: "none"
+    },
+    // 1. Correct the inability to style clickable types in iOS and Safari.
+    // 2. Change font properties to `inherit` in Safari.
+    "::-webkit-file-upload-button": {
+      WebkitAppearance: "button",
+      // 1
+      font: "inherit"
+      // 2
+    },
+    // Add the correct display in Chrome and Safari.
+    summary: {
+      display: "list-item"
+    },
+    // Removes the default spacing and border for appropriate elements.
+    "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": {
+      margin: 0
+    },
+    fieldset: {
+      margin: 0,
+      padding: 0
+    },
+    legend: {
+      padding: 0
+    },
+    "ol, ul, menu": {
+      listStyle: "none",
+      margin: 0,
+      padding: 0
+    },
+    // Reset default styling for dialogs.
+    dialog: {
+      padding: 0
+    },
+    // Prevent resizing textareas horizontally by default.
+    textarea: {
+      resize: "vertical"
+    },
+    // 1. Reset the default placeholder opacity in Firefox.
+    // 2. Set the default placeholder color to gray 400.
+    "input::placeholder, textarea::placeholder": {
+      opacity: 1,
+      // 1
+      color: getColorVar("neutral.400")
+    },
+    // Set the default cursor for buttons.
+    "button, [role='button']": {
+      cursor: "pointer"
+    },
+    // Make sure disabled buttons don't get the pointer cursor.
+    ":disabled": {
+      cursor: "default"
+    },
+    // 1. Make replaced elements `display: block` by default.
+    // 2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
+    "img, svg, video, canvas, audio, iframe, embed, object": {
+      display: "block",
+      // 1
+      verticalAlign: "middle"
+      // 2
+    },
+    // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
+    "img, video": {
+      maxWidth: "100%",
+      height: "auto"
+    },
+    // Make elements with the HTML hidden attribute stay hidden by default.
+    "[hidden]:where(:not([hidden='until-found']))": {
+      display: "none"
+    },
+    // ─── CSS Variables ───────────────────────────────────────────────────────
+    ":root": {
+      ...colorVars,
+      ...typographyVars
+    }
+  };
+};
+export {
+  ThemeProvider
+};

package/dist/theme/screens.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lodashEs = require("lodash-es");
+const breakpoint = {
+  xs: { minWidth: 0, padding: 16 },
+  // mobile
+  sm: { minWidth: 768, padding: 28 },
+  // tablet
+  md: { minWidth: 1280, padding: 40 },
+  // desktop
+  lg: { minWidth: 1680, padding: 40 }
+  // large desktop
+};
+const screens = ["xs", "sm", "md", "lg"];
+const getSmallerScreens = (screen) => {
+  return screens.slice(0, screens.indexOf(screen)).reverse();
+};
+const mediaQuery = (value) => {
+  return `@media (min-width: ${lodashEs.isNumber(value) ? value : breakpoint[value].minWidth}px)`;
+};
+exports.breakpoint = breakpoint;
+exports.getSmallerScreens = getSmallerScreens;
+exports.mediaQuery = mediaQuery;
+exports.screens = screens;

package/dist/theme/screens.d.ts

@@ -0,0 +1,11 @@
+type BreakpointConfig = {
+    minWidth: number;
+    padding: number;
+};
+export type Screen = 'xs' | 'sm' | 'md' | 'lg';
+export declare const breakpoint: Record<Screen, BreakpointConfig>;
+export declare const screens: Screen[];
+export declare const getSmallerScreens: (screen: Screen) => Screen[];
+export declare const mediaQuery: (value: Screen | number) => string;
+export {};
+//# sourceMappingURL=screens.d.ts.map

package/dist/theme/screens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../src/theme/screens.ts"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAKvD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,EAA6B,CAAC;AAE1D,eAAO,MAAM,iBAAiB,WAAY,MAAM,aAE/C,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,MAAM,GAAG,MAAM,WAEhD,CAAC"}

package/dist/theme/screens.js

@@ -0,0 +1,24 @@
+import { isNumber } from "lodash-es";
+const breakpoint = {
+  xs: { minWidth: 0, padding: 16 },
+  // mobile
+  sm: { minWidth: 768, padding: 28 },
+  // tablet
+  md: { minWidth: 1280, padding: 40 },
+  // desktop
+  lg: { minWidth: 1680, padding: 40 }
+  // large desktop
+};
+const screens = ["xs", "sm", "md", "lg"];
+const getSmallerScreens = (screen) => {
+  return screens.slice(0, screens.indexOf(screen)).reverse();
+};
+const mediaQuery = (value) => {
+  return `@media (min-width: ${isNumber(value) ? value : breakpoint[value].minWidth}px)`;
+};
+export {
+  breakpoint,
+  getSmallerScreens,
+  mediaQuery,
+  screens
+};