@opensea/ui-kit - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

dist/components/index.d.ts

@@ -5,2 +5,4 @@ export * from "./Slot";
 export * from "./Separator";
+export * from "./UnstyledButton";
+export * from "./Media";
 //# sourceMappingURL=index.d.ts.map

dist/components/Text/Text.react.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="react" />
 import { type VariantProps } from "class-variance-authority";
+import React from "react";
 import { SlotProps } from "../Slot";
@@ -17,8 +17,36 @@ export type BodyProps = SlotProps & VariantProps<typeof body> & Required<Pick<VariantProps<typeof body>, "size">>;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const Text: (({ asChild, className, weight, size, ...rest }: BodyProps) => JSX.Element) & {
-    Body: ({ asChild, className, weight, size, ...rest }: BodyProps) => JSX.Element;
-    Heading: ({ asChild, className, size, ...rest }: HeadingProps) => JSX.Element;
-    Display: ({ asChild, className, size, ...rest }: DisplayProps) => JSX.Element;
+export declare const Text: React.ForwardRefExoticComponent<import("@radix-ui/react-slot").SlotProps & {
+    asChild?: boolean | undefined;
+} & VariantProps<(props?: ({
+    size?: "tiny" | "small" | "medium" | null | undefined;
+    weight?: "regular" | "semibold" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & Required<Pick<VariantProps<(props?: ({
+    size?: "tiny" | "small" | "medium" | null | undefined;
+    weight?: "regular" | "semibold" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>, "size">> & React.RefAttributes<HTMLElement>> & {
+    Body: React.ForwardRefExoticComponent<import("@radix-ui/react-slot").SlotProps & {
+        asChild?: boolean | undefined;
+    } & VariantProps<(props?: ({
+        size?: "tiny" | "small" | "medium" | null | undefined;
+        weight?: "regular" | "semibold" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & Required<Pick<VariantProps<(props?: ({
+        size?: "tiny" | "small" | "medium" | null | undefined;
+        weight?: "regular" | "semibold" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>, "size">> & React.RefAttributes<HTMLElement>>;
+    Heading: React.ForwardRefExoticComponent<import("@radix-ui/react-slot").SlotProps & {
+        asChild?: boolean | undefined;
+    } & VariantProps<(props?: ({
+        size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & Required<Pick<VariantProps<(props?: ({
+        size?: "tiny" | "small" | "medium" | "large" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>, "size">> & React.RefAttributes<HTMLElement>>;
+    Display: React.ForwardRefExoticComponent<import("@radix-ui/react-slot").SlotProps & {
+        asChild?: boolean | undefined;
+    } & VariantProps<(props?: ({
+        size?: "small" | "medium" | "large" | "extraLarge" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & Required<Pick<VariantProps<(props?: ({
+        size?: "small" | "medium" | "large" | "extraLarge" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>, "size">> & React.RefAttributes<HTMLElement>>;
 };
 export {};
 //# sourceMappingURL=Text.react.d.ts.map

dist/index.d.ts

 export * from "./components";
 export * from "./utils";
-export { ThemeProvider, useTheme, useThemeValues, } from "./providers/ThemeProvider";
+export * from "./providers";
 export { ThemeVariant, Theme } from "./types";
@@ -5,0 +5,0 @@ export { getTheme } from "./theme";

dist/index.modern.js

 import { Slot } from '@radix-ui/react-slot';
 export { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { forwardRef, useState, useMemo, useContext, createContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useMemo, useContext, createContext } from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { createMedia } from '@opensea/react-media';
 import { rgba } from 'polished';
@@ -42,3 +43,3 @@
 
-const _excluded$1 = ["asChild", "className", "weight", "size"],
+const _excluded$2 = ["asChild", "className", "weight", "size"],
   _excluded2 = ["asChild", "className", "size"],
@@ -70,3 +71,3 @@ _excluded3 = ["asChild", "className", "size"];
  */
-const Body = _ref => {
+const Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
   let {
@@ -78,5 +79,6 @@ asChild,
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const Comp = asChild ? Slot : "span";
   return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
     className: classNames(body({
@@ -87,3 +89,3 @@ weight,
   }, rest));
-};
+});
 const heading = cva("font-semibold", {
@@ -104,3 +106,3 @@ variants: {
  */
-const Heading = _ref2 => {
+const Heading = /*#__PURE__*/forwardRef(function Heading(_ref2, ref) {
   let {
@@ -114,2 +116,3 @@ asChild,
   return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
     className: classNames(heading({
@@ -119,3 +122,3 @@ size
   }, rest));
-};
+});
 const display = cva("font-semibold", {
@@ -126,3 +129,3 @@ variants: {
       medium: "text-display-md leading-display-md",
-      large: "text-display-lg leading-display-kg",
+      large: "text-display-lg leading-display-lg",
       extraLarge: "text-display-xl leading-display-xl"
@@ -136,3 +139,3 @@ }
  */
-const Display = _ref3 => {
+const Display = /*#__PURE__*/forwardRef(function Display(_ref3, ref) {
   let {
@@ -146,2 +149,3 @@ asChild,
   return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
     className: classNames(display({
@@ -151,3 +155,3 @@ size
   }, rest));
-};
+});
 const Text = Object.assign(Body, {
@@ -185,3 +189,3 @@ Body,
 
-const _excluded = ["className", "orientation", "decorative"];
+const _excluded$1 = ["className", "orientation", "decorative"];
 const Separator = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -193,3 +197,3 @@ let {
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return /*#__PURE__*/jsx(SeparatorPrimitive.Root, _extends({
@@ -203,2 +207,48 @@ ref: ref,
 
+const _excluded = ["className"];
+const UnstyledButton = _ref => {
+  let {
+      className
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/jsx("button", _extends({
+    className: classNames("inline-flex items-center border-0 bg-inherit font-[inherit] text-[100%]", className),
+    type: "button"
+  }, rest));
+};
+
+const breakpoints = {
+  xs: 0,
+  sm: 600,
+  md: 768,
+  lg: 1024,
+  xl: 1200,
+  xxl: 1600,
+  xxxl: 2256
+};
+const {
+  createMediaStyle,
+  useSizeContextSelector,
+  Media,
+  SizeProvider
+} = createMedia(breakpoints);
+// Make styles for injection into the header of the page
+const mediaStyles = createMediaStyle();
+const getBreakpointPixelValue = bp => {
+  return breakpoints[bp];
+};
+const useLessThanBreakpointContextSelector = breakpoint => {
+  return useSizeContextSelector(value => !!value.width && value.width < breakpoints[breakpoint]);
+};
+const useIsLessThanSm = () => useLessThanBreakpointContextSelector("sm");
+const useIsLessThanMd = () => useLessThanBreakpointContextSelector("md");
+const useIsLessThanLg = () => useLessThanBreakpointContextSelector("lg");
+const useIsLessThanXl = () => useLessThanBreakpointContextSelector("xl");
+const useIsLessThanXXl = () => useLessThanBreakpointContextSelector("xxl");
+const useIsLessThanXXXl = () => useLessThanBreakpointContextSelector("xxxl");
+const useIsGreaterThanOrEqualToLg = () => !useIsLessThanLg();
+const useIsLessThanBreakpoint = breakpoint => {
+  return useLessThanBreakpointContextSelector(breakpoint);
+};
+
 const COLORS = {
@@ -421,2 +471,3 @@ white: "#ffffff",
   "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
+  "green-3": "rgb(var(--color-green-3) / <alpha-value>)",
   // Yellows
@@ -518,4 +569,4 @@ "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)",
       xs: "18px",
-      s: "20px",
-      m: "24px",
+      sm: "20px",
+      md: "24px",
       // Heading
@@ -536,2 +587,2 @@ "heading-xs": "26px",
 
-export { Icon, Separator, Text, ThemeProvider, classNames, getTheme, tailwindBase, useTheme, useThemeValues };
+export { Icon, Media, Separator, SizeProvider, Text, ThemeProvider, UnstyledButton, breakpoints, classNames, getBreakpointPixelValue, getTheme, mediaStyles, tailwindBase, useIsGreaterThanOrEqualToLg, useIsLessThanBreakpoint, useIsLessThanLg, useIsLessThanMd, useIsLessThanSm, useIsLessThanXXXl, useIsLessThanXXl, useIsLessThanXl, useTheme, useThemeValues };

dist/index.module.js

 import { Slot } from '@radix-ui/react-slot';
 export { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { forwardRef, useState, useMemo, useContext, createContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useMemo, useContext, createContext } from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { createMedia } from '@opensea/react-media';
 import { rgba } from 'polished';
@@ -42,3 +43,3 @@
 
-var _excluded$1 = ["asChild", "className", "weight", "size"],
+var _excluded$2 = ["asChild", "className", "weight", "size"],
   _excluded2 = ["asChild", "className", "size"],
@@ -70,3 +71,3 @@ _excluded3 = ["asChild", "className", "size"];
  */
-var Body = function Body(_ref) {
+var Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
   var asChild = _ref.asChild,
@@ -76,5 +77,6 @@ className = _ref.className,
     size = _ref.size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var Comp = asChild ? Slot : "span";
   return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
     className: classNames(body({
@@ -85,3 +87,3 @@ weight: weight,
   }, rest));
-};
+});
 var heading = cva("font-semibold", {
@@ -102,3 +104,3 @@ variants: {
  */
-var Heading = function Heading(_ref2) {
+var Heading = /*#__PURE__*/forwardRef(function Heading(_ref2, ref) {
   var asChild = _ref2.asChild,
@@ -110,2 +112,3 @@ className = _ref2.className,
   return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
     className: classNames(heading({
@@ -115,3 +118,3 @@ size: size
   }, rest));
-};
+});
 var display = cva("font-semibold", {
@@ -122,3 +125,3 @@ variants: {
       medium: "text-display-md leading-display-md",
-      large: "text-display-lg leading-display-kg",
+      large: "text-display-lg leading-display-lg",
       extraLarge: "text-display-xl leading-display-xl"
@@ -132,3 +135,3 @@ }
  */
-var Display = function Display(_ref3) {
+var Display = /*#__PURE__*/forwardRef(function Display(_ref3, ref) {
   var asChild = _ref3.asChild,
@@ -140,2 +143,3 @@ className = _ref3.className,
   return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
     className: classNames(display({
@@ -145,3 +149,3 @@ size: size
   }, rest));
-};
+});
 var Text = Object.assign(Body, {
@@ -184,3 +188,3 @@ Body: Body,
 
-var _excluded = ["className", "orientation", "decorative"];
+var _excluded$1 = ["className", "orientation", "decorative"];
 var Separator = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -192,3 +196,3 @@ var className = _ref.className,
     decorative = _ref$decorative === void 0 ? true : _ref$decorative,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return /*#__PURE__*/jsx(SeparatorPrimitive.Root, _extends({
@@ -202,2 +206,61 @@ ref: ref,
 
+var _excluded = ["className"];
+var UnstyledButton = function UnstyledButton(_ref) {
+  var className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/jsx("button", _extends({
+    className: classNames("inline-flex items-center border-0 bg-inherit font-[inherit] text-[100%]", className),
+    type: "button"
+  }, rest));
+};
+
+var breakpoints = {
+  xs: 0,
+  sm: 600,
+  md: 768,
+  lg: 1024,
+  xl: 1200,
+  xxl: 1600,
+  xxxl: 2256
+};
+var _createMedia = createMedia(breakpoints),
+  createMediaStyle = _createMedia.createMediaStyle,
+  useSizeContextSelector = _createMedia.useSizeContextSelector,
+  Media = _createMedia.Media,
+  SizeProvider = _createMedia.SizeProvider;
+// Make styles for injection into the header of the page
+var mediaStyles = createMediaStyle();
+var getBreakpointPixelValue = function getBreakpointPixelValue(bp) {
+  return breakpoints[bp];
+};
+var useLessThanBreakpointContextSelector = function useLessThanBreakpointContextSelector(breakpoint) {
+  return useSizeContextSelector(function (value) {
+    return !!value.width && value.width < breakpoints[breakpoint];
+  });
+};
+var useIsLessThanSm = function useIsLessThanSm() {
+  return useLessThanBreakpointContextSelector("sm");
+};
+var useIsLessThanMd = function useIsLessThanMd() {
+  return useLessThanBreakpointContextSelector("md");
+};
+var useIsLessThanLg = function useIsLessThanLg() {
+  return useLessThanBreakpointContextSelector("lg");
+};
+var useIsLessThanXl = function useIsLessThanXl() {
+  return useLessThanBreakpointContextSelector("xl");
+};
+var useIsLessThanXXl = function useIsLessThanXXl() {
+  return useLessThanBreakpointContextSelector("xxl");
+};
+var useIsLessThanXXXl = function useIsLessThanXXXl() {
+  return useLessThanBreakpointContextSelector("xxxl");
+};
+var useIsGreaterThanOrEqualToLg = function useIsGreaterThanOrEqualToLg() {
+  return !useIsLessThanLg();
+};
+var useIsLessThanBreakpoint = function useIsLessThanBreakpoint(breakpoint) {
+  return useLessThanBreakpointContextSelector(breakpoint);
+};
+
 var COLORS = {
@@ -423,2 +486,3 @@ white: "#ffffff",
   "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
+  "green-3": "rgb(var(--color-green-3) / <alpha-value>)",
   // Yellows
@@ -520,4 +584,4 @@ "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)",
       xs: "18px",
-      s: "20px",
-      m: "24px",
+      sm: "20px",
+      md: "24px",
       // Heading
@@ -538,2 +602,2 @@ "heading-xs": "26px",
 
-export { Icon, Separator, Text, ThemeProvider, classNames, getTheme, tailwindBase, useTheme, useThemeValues };
+export { Icon, Media, Separator, SizeProvider, Text, ThemeProvider, UnstyledButton, breakpoints, classNames, getBreakpointPixelValue, getTheme, mediaStyles, tailwindBase, useIsGreaterThanOrEqualToLg, useIsLessThanBreakpoint, useIsLessThanLg, useIsLessThanMd, useIsLessThanSm, useIsLessThanXXXl, useIsLessThanXXl, useIsLessThanXl, useTheme, useThemeValues };

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('tailwind-merge'), require('react/jsx-runtime'), require('react'), require('@radix-ui/react-separator'), require('polished')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', 'tailwind-merge', 'react/jsx-runtime', 'react', '@radix-ui/react-separator', 'polished'], factory) :
-  (global = global || self, factory(global.uiKit = {}, global.reactSlot, global.classVarianceAuthority, global.clsx, global.tailwindMerge, global.jsx, global.react, global.SeparatorPrimitive, global.polished));
-})(this, (function (exports, reactSlot, classVarianceAuthority, clsx, tailwindMerge, jsxRuntime, react, SeparatorPrimitive, polished) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@radix-ui/react-slot'), require('class-variance-authority'), require('react'), require('clsx'), require('tailwind-merge'), require('react/jsx-runtime'), require('@radix-ui/react-separator'), require('@opensea/react-media'), require('polished')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@radix-ui/react-slot', 'class-variance-authority', 'react', 'clsx', 'tailwind-merge', 'react/jsx-runtime', '@radix-ui/react-separator', '@opensea/react-media', 'polished'], factory) :
+  (global = global || self, factory(global.uiKit = {}, global.reactSlot, global.classVarianceAuthority, global.react, global.clsx, global.tailwindMerge, global.jsx, global.SeparatorPrimitive, global.reactMedia, global.polished));
+})(this, (function (exports, reactSlot, classVarianceAuthority, react, clsx, tailwindMerge, jsxRuntime, SeparatorPrimitive, reactMedia, polished) {
   function _interopNamespace(e) {
@@ -57,3 +57,3 @@ if (e && e.__esModule) return e;
 
-  var _excluded$1 = ["asChild", "className", "weight", "size"],
+  var _excluded$2 = ["asChild", "className", "weight", "size"],
     _excluded2 = ["asChild", "className", "size"],
@@ -85,3 +85,3 @@ _excluded3 = ["asChild", "className", "size"];
    */
-  var Body = function Body(_ref) {
+  var Body = /*#__PURE__*/react.forwardRef(function Body(_ref, ref) {
     var asChild = _ref.asChild,
@@ -91,5 +91,6 @@ className = _ref.className,
       size = _ref.size,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     var Comp = asChild ? reactSlot.Slot : "span";
     return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
+      ref: ref,
       className: classNames(body({
@@ -100,3 +101,3 @@ weight: weight,
     }, rest));
-  };
+  });
   var heading = classVarianceAuthority.cva("font-semibold", {
@@ -117,3 +118,3 @@ variants: {
    */
-  var Heading = function Heading(_ref2) {
+  var Heading = /*#__PURE__*/react.forwardRef(function Heading(_ref2, ref) {
     var asChild = _ref2.asChild,
@@ -125,2 +126,3 @@ className = _ref2.className,
     return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
+      ref: ref,
       className: classNames(heading({
@@ -130,3 +132,3 @@ size: size
     }, rest));
-  };
+  });
   var display = classVarianceAuthority.cva("font-semibold", {
@@ -137,3 +139,3 @@ variants: {
         medium: "text-display-md leading-display-md",
-        large: "text-display-lg leading-display-kg",
+        large: "text-display-lg leading-display-lg",
         extraLarge: "text-display-xl leading-display-xl"
@@ -147,3 +149,3 @@ }
    */
-  var Display = function Display(_ref3) {
+  var Display = /*#__PURE__*/react.forwardRef(function Display(_ref3, ref) {
     var asChild = _ref3.asChild,
@@ -155,2 +157,3 @@ className = _ref3.className,
     return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
+      ref: ref,
       className: classNames(display({
@@ -160,3 +163,3 @@ size: size
     }, rest));
-  };
+  });
   var Text = Object.assign(Body, {
@@ -199,3 +202,3 @@ Body: Body,
 
-  var _excluded = ["className", "orientation", "decorative"];
+  var _excluded$1 = ["className", "orientation", "decorative"];
   var Separator = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
@@ -207,3 +210,3 @@ var className = _ref.className,
       decorative = _ref$decorative === void 0 ? true : _ref$decorative,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     return /*#__PURE__*/jsxRuntime.jsx(SeparatorPrimitive__namespace.Root, _extends({
@@ -217,2 +220,61 @@ ref: ref,
 
+  var _excluded = ["className"];
+  var UnstyledButton = function UnstyledButton(_ref) {
+    var className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/jsxRuntime.jsx("button", _extends({
+      className: classNames("inline-flex items-center border-0 bg-inherit font-[inherit] text-[100%]", className),
+      type: "button"
+    }, rest));
+  };
+
+  var breakpoints = {
+    xs: 0,
+    sm: 600,
+    md: 768,
+    lg: 1024,
+    xl: 1200,
+    xxl: 1600,
+    xxxl: 2256
+  };
+  var _createMedia = reactMedia.createMedia(breakpoints),
+    createMediaStyle = _createMedia.createMediaStyle,
+    useSizeContextSelector = _createMedia.useSizeContextSelector,
+    Media = _createMedia.Media,
+    SizeProvider = _createMedia.SizeProvider;
+  // Make styles for injection into the header of the page
+  var mediaStyles = createMediaStyle();
+  var getBreakpointPixelValue = function getBreakpointPixelValue(bp) {
+    return breakpoints[bp];
+  };
+  var useLessThanBreakpointContextSelector = function useLessThanBreakpointContextSelector(breakpoint) {
+    return useSizeContextSelector(function (value) {
+      return !!value.width && value.width < breakpoints[breakpoint];
+    });
+  };
+  var useIsLessThanSm = function useIsLessThanSm() {
+    return useLessThanBreakpointContextSelector("sm");
+  };
+  var useIsLessThanMd = function useIsLessThanMd() {
+    return useLessThanBreakpointContextSelector("md");
+  };
+  var useIsLessThanLg = function useIsLessThanLg() {
+    return useLessThanBreakpointContextSelector("lg");
+  };
+  var useIsLessThanXl = function useIsLessThanXl() {
+    return useLessThanBreakpointContextSelector("xl");
+  };
+  var useIsLessThanXXl = function useIsLessThanXXl() {
+    return useLessThanBreakpointContextSelector("xxl");
+  };
+  var useIsLessThanXXXl = function useIsLessThanXXXl() {
+    return useLessThanBreakpointContextSelector("xxxl");
+  };
+  var useIsGreaterThanOrEqualToLg = function useIsGreaterThanOrEqualToLg() {
+    return !useIsLessThanLg();
+  };
+  var useIsLessThanBreakpoint = function useIsLessThanBreakpoint(breakpoint) {
+    return useLessThanBreakpointContextSelector(breakpoint);
+  };
+
   var COLORS = {
@@ -438,2 +500,3 @@ white: "#ffffff",
     "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
+    "green-3": "rgb(var(--color-green-3) / <alpha-value>)",
     // Yellows
@@ -535,4 +598,4 @@ "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)",
         xs: "18px",
-        s: "20px",
-        m: "24px",
+        sm: "20px",
+        md: "24px",
         // Heading
@@ -558,8 +621,22 @@ "heading-xs": "26px",
   exports.Icon = Icon;
+  exports.Media = Media;
   exports.Separator = Separator;
+  exports.SizeProvider = SizeProvider;
   exports.Text = Text;
   exports.ThemeProvider = ThemeProvider;
+  exports.UnstyledButton = UnstyledButton;
+  exports.breakpoints = breakpoints;
   exports.classNames = classNames;
+  exports.getBreakpointPixelValue = getBreakpointPixelValue;
   exports.getTheme = getTheme;
+  exports.mediaStyles = mediaStyles;
   exports.tailwindBase = tailwindBase;
+  exports.useIsGreaterThanOrEqualToLg = useIsGreaterThanOrEqualToLg;
+  exports.useIsLessThanBreakpoint = useIsLessThanBreakpoint;
+  exports.useIsLessThanLg = useIsLessThanLg;
+  exports.useIsLessThanMd = useIsLessThanMd;
+  exports.useIsLessThanSm = useIsLessThanSm;
+  exports.useIsLessThanXXXl = useIsLessThanXXXl;
+  exports.useIsLessThanXXl = useIsLessThanXXl;
+  exports.useIsLessThanXl = useIsLessThanXl;
   exports.useTheme = useTheme;
@@ -566,0 +643,0 @@ exports.useThemeValues = useThemeValues;

dist/styles/tailwind-base.d.ts

@@ -33,2 +33,3 @@ export declare const tailwindBase: {
             "green-2": "rgb(var(--color-green-2) / <alpha-value>)";
+            "green-3": "rgb(var(--color-green-3) / <alpha-value>)";
             "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)";
@@ -72,2 +73,3 @@ "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)";
             "green-2": "rgb(var(--color-green-2) / <alpha-value>)";
+            "green-3": "rgb(var(--color-green-3) / <alpha-value>)";
             "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)";
@@ -104,2 +106,3 @@ "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)";
             "green-2": "rgb(var(--color-green-2) / <alpha-value>)";
+            "green-3": "rgb(var(--color-green-3) / <alpha-value>)";
             "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)";
@@ -151,4 +154,4 @@ "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)";
             xs: string;
-            s: string;
-            m: string;
+            sm: string;
+            md: string;
             "heading-xs": string;
@@ -155,0 +158,0 @@ "heading-sm": string;

package.json

 {
   "name": "@opensea/ui-kit",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "OpenSea's Design System implementation in React",
@@ -41,2 +41,3 @@ "license": "MIT",
   "dependencies": {
+    "@opensea/react-media": "^1.0.9",
     "@radix-ui/react-separator": "^1.0.3",
@@ -58,3 +59,3 @@ "@radix-ui/react-slot": "^1.0.2",
     "@storybook/addon-links": "7.4.0",
-    "@storybook/addon-styling": "1.3.6",
+    "@storybook/addon-styling": "1.3.7",
     "@storybook/blocks": "7.4.0",
@@ -61,0 +62,0 @@ "@storybook/nextjs": "7.4.0",

src/components/index.ts

@@ -5,1 +5,3 @@ export * from "./Slot"
 export * from "./Separator"
+export * from "./UnstyledButton"
+export * from "./Media"

src/index.ts

 export * from "./components"
 export * from "./utils"
-export {
-  ThemeProvider,
-  useTheme,
-  useThemeValues,
-} from "./providers/ThemeProvider"
+export * from "./providers"
 export { ThemeVariant, Theme } from "./types"
 export { getTheme } from "./theme"
 export { tailwindBase } from "./styles/tailwind-base"

src/styles/tailwind-base.ts

@@ -27,2 +27,3 @@ import type { Config } from "tailwindcss"
   "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
+  "green-3": "rgb(var(--color-green-3) / <alpha-value>)",
 
@@ -145,4 +146,4 @@ // Yellows
       xs: "18px",
-      s: "20px",
-      m: "24px",
+      sm: "20px",
+      md: "24px",
 
@@ -149,0 +150,0 @@ // Heading

No alert changes

Improved metrics

Total package byte prevSize

771371

4.53%

Number of package files

111

24.72%

Lines of code

7640

7.33%

Worsened metrics

Dependency count

9

12.5%

Dependency changes

• + Added

  @opensea/react-media@^1.0.9

• + Added

  @opensea/react-media@1.0.9
  (transitive)

• + Added

  lodash.throttle@4.1.1
  (transitive)

• + Added

  use-context-selector@2.0.0
  (transitive)