@opensea/ui-kit - npm Package Compare versions

Comparing version 0.0.40 to 0.0.41

dist/components/index.d.ts

@@ -7,2 +7,3 @@ export * from "./CenterAligned";
 export * from "./Icon";
+export * from "./IconButton";
 export * from "./InlineFlex";
@@ -21,2 +22,3 @@ export * from "./Input";
 export * from "./SpaceBetween";
+export * from "./Spinner";
 export * from "./Switch";
@@ -23,0 +25,0 @@ export * from "./Text";

dist/components/UnstyledButton/UnstyledButton.react.d.ts

@@ -1,6 +0,9 @@
-import React from "react";
-export type UnstyledButtonProps = JSX.IntrinsicElements["button"];
-export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
+import React, { ComponentPropsWithoutRef } from "react";
+import { SlotProps } from "../Slot";
+export type UnstyledButtonProps = ComponentPropsWithoutRef<"button"> & SlotProps<"button">;
+export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    asChild?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>> & {
     dataId: "UnstyledButton";
 };
 //# sourceMappingURL=UnstyledButton.react.d.ts.map

dist/index.modern.js

@@ -10,4 +10,4 @@ import { forwardRef, useRef, useMemo, useState, useContext, createContext } from 'react';
 import aspectRatio from '@tailwindcss/aspect-ratio';
+import { sanitizeUrl } from '@braintree/sanitize-url';
 import useMergedRef from '@react-hook/merged-ref';
-import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -72,3 +72,3 @@ import { Root } from '@radix-ui/react-visually-hidden';
 
-const _excluded$k = ["asChild", "className"];
+const _excluded$l = ["asChild", "className"];
 const Flex = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -79,3 +79,3 @@ let {
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   const Comp = asChild ? Slot : "div";
@@ -89,3 +89,3 @@ return /*#__PURE__*/jsx(Comp, _extends({
 
-const _excluded$j = ["className"];
+const _excluded$k = ["className"];
 const FlexColumn = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -95,3 +95,3 @@ let {
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return /*#__PURE__*/jsx(Flex, _extends({
@@ -104,3 +104,3 @@ ref: ref,
 
-const _excluded$i = ["className"];
+const _excluded$j = ["className"];
 const VerticalAligned = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -110,3 +110,3 @@ let {
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return /*#__PURE__*/jsx(FlexColumn, _extends({
@@ -119,3 +119,3 @@ ref: ref,
 
-const _excluded$h = ["className"];
+const _excluded$i = ["className"];
 const CenterAligned = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -125,3 +125,3 @@ let {
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/jsx(VerticalAligned, _extends({
@@ -150,2 +150,5 @@ ref: ref,
   black: "rgb(var(--color-black) / <alpha-value>)",
+  // Base background, but can be used for Text in certain situations (e.g inverse of primary text color)
+  "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+  "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
   // Grays
@@ -204,5 +207,2 @@ "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
     colors: _extends({}, COMMON_COLORS, {
-      // Base background
-      "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
-      "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
       // Component background grays
@@ -338,3 +338,4 @@ "component-gray-1": "var(--color-component-gray-1)",
       default: "text-blue-3 hover:text-blue-4",
-      subtle: "font-semibold text-primary hover:text-secondary"
+      subtle: "font-semibold text-primary hover:text-secondary",
+      unstyled: ""
     }
@@ -403,6 +404,7 @@ }
 
-const _excluded$g = ["className", "checked", "disabled", "size", "onCheckedChange"];
+const _excluded$h = ["className", "checked", "disabled", "size", "onCheckedChange"];
 const checkboxVariants = cva(undefined, {
   variants: {
     checked: {
+      false: "border-level-2",
       true: "border-blue-3 bg-blue-3",
@@ -425,6 +427,6 @@ indeterminate: "border-blue-3 bg-blue-3"
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return /*#__PURE__*/jsx(CheckboxPrimitive.Root, _extends({
     ref: ref,
-    className: classNames("rounded-md border border-level-2 outline-none",
+    className: classNames("rounded-md border outline-none",
     // Only show focus border when keyboard is used, not on mouse click
@@ -456,3 +458,3 @@ "focus:border-level-3 [&:not(:focus-visible)]:border-level-2", checkboxVariants({
 
-const _excluded$f = ["className"];
+const _excluded$g = ["className"];
 const Container = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -462,3 +464,3 @@ let {
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return /*#__PURE__*/jsx("div", _extends({
@@ -471,25 +473,42 @@ className: classNames("mx-auto w-full max-w-[2560px]", "px-4 sm:px-8 xxl:px-16", className),
 
-const _excluded$e = ["asChild", "className"];
-const InlineFlex = /*#__PURE__*/forwardRef((_ref, ref) => {
+const isClickableElement = props => {
+  return Boolean(props.onClick);
+};
+const isLinkElement = props => {
+  return Boolean(props.href);
+};
+
+const _excluded$f = ["className", "href", "variant", "disabled"];
+const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      asChild,
-      className
+      className,
+      href,
+      variant = "default",
+      disabled
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-  const Comp = asChild ? Slot : "div";
-  return /*#__PURE__*/jsx(Comp, _extends({
-    ref: ref,
-    className: classNames("inline-flex", className)
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return /*#__PURE__*/jsx("a", _extends({
+    className: classNames(linkVariants({
+      variant
+    }), disabledVariants({
+      disabled
+    }), className),
+    tabIndex: disabled ? -1 : undefined,
+    "aria-disabled": disabled != null ? disabled : undefined,
+    href: sanitizeUrl(href),
+    ref: ref
   }, rest));
 });
-InlineFlex.displayName = "InlineFlex";
+Link.displayName = "Link";
 
-const _excluded$d = ["className"];
+const _excluded$e = ["asChild", "className"];
 const UnstyledButtonDataId = "UnstyledButton";
 const UnstyledButton = Object.assign( /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
+      asChild,
       className
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  return /*#__PURE__*/jsx("button", _extends({
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  const Comp = asChild ? Slot : "button";
+  return /*#__PURE__*/jsx(Comp, _extends({
     ref: ref,
@@ -505,3 +524,61 @@ className: classNames("inline-flex items-center border-0 bg-inherit font-[inherit] text-[100%]", className),
 
-const _excluded$c = ["startEnhancer", "endEnhancer", "onKeyDown", "clearable", "clearOnEscape", "className", "style", "inputRef", "disabled", "onClick", "onMouseDown", "onEnter", "value", "error", "overrides"];
+const _excluded$d = ["renderLink"],
+  _excluded2$5 = ["children", "disabled", "className", "renderLink"];
+const LinkIconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      renderLink
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  const Comp = renderLink != null ? renderLink : Link;
+  return /*#__PURE__*/jsx(Comp, _extends({
+    variant: "unstyled"
+  }, rest, {
+    ref: ref
+  }));
+});
+const IconButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      children,
+      disabled,
+      className: propsClassName,
+      renderLink
+    } = _ref2,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
+  const className = classNames("flex items-center justify-center", "h-12 w-12 rounded-full", "bg-base-1 active:bg-component-gray-1", disabledVariants({
+    disabled
+  }), propsClassName);
+  if (isLinkElement(rest)) {
+    return /*#__PURE__*/jsx(LinkIconButton, _extends({}, rest, {
+      className: className,
+      renderLink: renderLink,
+      ref: ref,
+      children: children
+    }));
+  }
+  return /*#__PURE__*/jsx(UnstyledButton, _extends({
+    className: className,
+    disabled: disabled
+  }, rest, {
+    ref: ref,
+    children: children
+  }));
+});
+IconButton.displayName = "IconButton";
+
+const _excluded$c = ["asChild", "className"];
+const InlineFlex = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      asChild,
+      className
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  const Comp = asChild ? Slot : "div";
+  return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
+    className: classNames("inline-flex", className)
+  }, rest));
+});
+InlineFlex.displayName = "InlineFlex";
+
+const _excluded$b = ["startEnhancer", "endEnhancer", "onKeyDown", "clearable", "clearOnEscape", "className", "style", "inputRef", "disabled", "onClick", "onMouseDown", "onEnter", "value", "error", "overrides"];
 const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -526,3 +603,3 @@ var _overrides$Container, _localInputRef$curren3;
     } = _ref,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const localInputRef = useRef(null);
@@ -594,9 +671,2 @@ const clearValue = () => {
 
-const isClickableElement = props => {
-  return Boolean(props.onClick);
-};
-const isLinkElement = props => {
-  return Boolean(props.href);
-};
-
 const objectFitVariants = cva(undefined, {
@@ -614,3 +684,3 @@ variants: {
 
-const _excluded$b = ["renderImage"],
+const _excluded$a = ["renderImage"],
   _excluded2$4 = ["size", "style"],
@@ -634,3 +704,3 @@ _excluded3$3 = ["icon"];
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   const Comp = renderImage != null ? renderImage : "img";
@@ -693,25 +763,2 @@ return /*#__PURE__*/jsx(Comp, _extends({}, rest, {
 
-const _excluded$a = ["className", "href", "variant", "disabled"];
-const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      className,
-      href,
-      variant = "default",
-      disabled
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  return /*#__PURE__*/jsx("a", _extends({
-    className: classNames(linkVariants({
-      variant
-    }), disabledVariants({
-      disabled
-    }), className),
-    tabIndex: disabled ? -1 : undefined,
-    "aria-disabled": disabled != null ? disabled : undefined,
-    href: sanitizeUrl(href),
-    ref: ref
-  }, rest));
-});
-Link.displayName = "Link";
-
 const _excluded$9 = ["asChild", "className", "weight", "responsive", "color", "size"],
@@ -732,3 +779,3 @@ _excluded2$3 = ["asChild", "className", "responsive", "color", "size"],
     responsive: {
-      true: undefined
+      true: ""
     }
@@ -790,3 +837,3 @@ },
     responsive: {
-      true: undefined
+      true: ""
     }
@@ -847,3 +894,3 @@ },
     responsive: {
-      true: undefined
+      true: ""
     }
@@ -925,3 +972,5 @@ },
   const Comp = renderLink != null ? renderLink : Link;
-  return /*#__PURE__*/jsx(Comp, _extends({}, rest));
+  return /*#__PURE__*/jsx(Comp, _extends({
+    variant: "unstyled"
+  }, rest));
 };
@@ -1330,2 +1379,24 @@ const ItemDataId = "Item";
 
+const spinnerVariants = cva(undefined, {
+  variants: {
+    size: {
+      small: "h-6 w-6 border-[3px]",
+      medium: "h-12 w-12 border-4",
+      large: "h-[72px] w-[72px] border-[5px]"
+    }
+  }
+});
+const Spinner = ({
+  className,
+  size: _size = "small"
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    "aria-live": "polite",
+    role: "status",
+    className: classNames("inline-block animate-spin rounded-full", "border-gray-3 !border-b-transparent dark:border-white", spinnerVariants({
+      size: _size
+    }), className)
+  });
+};
+
 const _excluded$1 = ["checked", "disabled"];
@@ -1588,2 +1659,2 @@ const switchVariants = cva(undefined, {
 
-export { CenterAligned, Checkbox, Container, Flex, FlexColumn, Icon, InlineFlex, Input, Item, Label, Link, Media, Progress, RadioButtonGroup, RadioGroup, Separator, SizeProvider, Slider, SpaceBetween, Switch, Text, TextArea, ThemeProvider, UnstyledButton, VerticalAligned, VisuallyHidden, breakpoints, classNames, disabledVariants, getBreakpointPixelValue, getTheme, inputVariants, linkVariants, mediaStyles, preventInputZoomStyles, tailwindBase, textColorVariants, twDataIdSelector, useIsGreaterThanOrEqualToLg, useIsLessThanBreakpoint, useIsLessThanLg, useIsLessThanMd, useIsLessThanSm, useIsLessThanXXXl, useIsLessThanXXl, useIsLessThanXl, useTheme, useThemeValues };
+export { CenterAligned, Checkbox, Container, Flex, FlexColumn, Icon, IconButton, InlineFlex, Input, Item, Label, Link, Media, Progress, RadioButtonGroup, RadioGroup, Separator, SizeProvider, Slider, SpaceBetween, Spinner, Switch, Text, TextArea, ThemeProvider, UnstyledButton, VerticalAligned, VisuallyHidden, breakpoints, classNames, disabledVariants, getBreakpointPixelValue, getTheme, inputVariants, linkVariants, mediaStyles, preventInputZoomStyles, tailwindBase, textColorVariants, twDataIdSelector, useIsGreaterThanOrEqualToLg, useIsLessThanBreakpoint, useIsLessThanLg, useIsLessThanMd, useIsLessThanSm, useIsLessThanXXXl, useIsLessThanXXl, useIsLessThanXl, useTheme, useThemeValues };

dist/index.module.js

@@ -10,4 +10,4 @@ import { forwardRef, useRef, useMemo, useState, useContext, createContext } from 'react';
 import aspectRatio from '@tailwindcss/aspect-ratio';
+import { sanitizeUrl } from '@braintree/sanitize-url';
 import useMergedRef from '@react-hook/merged-ref';
-import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -74,7 +74,7 @@ import { Root } from '@radix-ui/react-visually-hidden';
 
-var _excluded$k = ["asChild", "className"];
+var _excluded$l = ["asChild", "className"];
 var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var asChild = _ref.asChild,
     className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var Comp = asChild ? Slot : "div";
@@ -88,6 +88,6 @@ return /*#__PURE__*/jsx(Comp, _extends({
 
-var _excluded$j = ["className"];
+var _excluded$k = ["className"];
 var FlexColumn = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   return /*#__PURE__*/jsx(Flex, _extends({
@@ -100,6 +100,6 @@ ref: ref,
 
-var _excluded$i = ["className"];
+var _excluded$j = ["className"];
 var VerticalAligned = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return /*#__PURE__*/jsx(FlexColumn, _extends({
@@ -112,6 +112,6 @@ ref: ref,
 
-var _excluded$h = ["className"];
+var _excluded$i = ["className"];
 var CenterAligned = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/jsx(VerticalAligned, _extends({
@@ -144,2 +144,5 @@ ref: ref,
   black: "rgb(var(--color-black) / <alpha-value>)",
+  // Base background, but can be used for Text in certain situations (e.g inverse of primary text color)
+  "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+  "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
   // Grays
@@ -198,5 +201,2 @@ "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
     colors: _extends({}, COMMON_COLORS, {
-      // Base background
-      "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
-      "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
       // Component background grays
@@ -332,3 +332,4 @@ "component-gray-1": "var(--color-component-gray-1)",
       "default": "text-blue-3 hover:text-blue-4",
-      subtle: "font-semibold text-primary hover:text-secondary"
+      subtle: "font-semibold text-primary hover:text-secondary",
+      unstyled: ""
     }
@@ -402,6 +403,7 @@ }
 
-var _excluded$g = ["className", "checked", "disabled", "size", "onCheckedChange"];
+var _excluded$h = ["className", "checked", "disabled", "size", "onCheckedChange"];
 var checkboxVariants = cva(undefined, {
   variants: {
     checked: {
+      "false": "border-level-2",
       "true": "border-blue-3 bg-blue-3",
@@ -424,6 +426,6 @@ indeterminate: "border-blue-3 bg-blue-3"
     _onCheckedChange = _ref.onCheckedChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return /*#__PURE__*/jsx(CheckboxPrimitive.Root, _extends({
     ref: ref,
-    className: classNames("rounded-md border border-level-2 outline-none",
+    className: classNames("rounded-md border outline-none",
     // Only show focus border when keyboard is used, not on mouse click
@@ -455,6 +457,6 @@ "focus:border-level-3 [&:not(:focus-visible)]:border-level-2", checkboxVariants({
 
-var _excluded$f = ["className"];
+var _excluded$g = ["className"];
 var Container = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return /*#__PURE__*/jsx("div", _extends({
@@ -467,22 +469,40 @@ className: classNames("mx-auto w-full max-w-[2560px]", "px-4 sm:px-8 xxl:px-16", className),
 
+var isClickableElement = function isClickableElement(props) {
+  return Boolean(props.onClick);
+};
+var isLinkElement = function isLinkElement(props) {
+  return Boolean(props.href);
+};
+
+var _excluded$f = ["className", "href", "variant", "disabled"];
+var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    href = _ref.href,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    disabled = _ref.disabled,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return /*#__PURE__*/jsx("a", _extends({
+    className: classNames(linkVariants({
+      variant: variant
+    }), disabledVariants({
+      disabled: disabled
+    }), className),
+    tabIndex: disabled ? -1 : undefined,
+    "aria-disabled": disabled != null ? disabled : undefined,
+    href: sanitizeUrl(href),
+    ref: ref
+  }, rest));
+});
+Link.displayName = "Link";
+
 var _excluded$e = ["asChild", "className"];
-var InlineFlex = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var UnstyledButtonDataId = "UnstyledButton";
+var UnstyledButton = Object.assign( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var asChild = _ref.asChild,
     className = _ref.className,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-  var Comp = asChild ? Slot : "div";
+  var Comp = asChild ? Slot : "button";
   return /*#__PURE__*/jsx(Comp, _extends({
     ref: ref,
-    className: classNames("inline-flex", className)
-  }, rest));
-});
-InlineFlex.displayName = "InlineFlex";
-
-var _excluded$d = ["className"];
-var UnstyledButtonDataId = "UnstyledButton";
-var UnstyledButton = Object.assign( /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  return /*#__PURE__*/jsx("button", _extends({
-    ref: ref,
     className: classNames("inline-flex items-center border-0 bg-inherit font-[inherit] text-[100%]", className),
@@ -497,3 +517,55 @@ type: "button",
 
-var _excluded$c = ["startEnhancer", "endEnhancer", "onKeyDown", "clearable", "clearOnEscape", "className", "style", "inputRef", "disabled", "onClick", "onMouseDown", "onEnter", "value", "error", "overrides"];
+var _excluded$d = ["renderLink"],
+  _excluded2$5 = ["children", "disabled", "className", "renderLink"];
+var LinkIconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var renderLink = _ref.renderLink,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  var Comp = renderLink != null ? renderLink : Link;
+  return /*#__PURE__*/jsx(Comp, _extends({
+    variant: "unstyled"
+  }, rest, {
+    ref: ref
+  }));
+});
+var IconButton = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    disabled = _ref2.disabled,
+    propsClassName = _ref2.className,
+    renderLink = _ref2.renderLink,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
+  var className = classNames("flex items-center justify-center", "h-12 w-12 rounded-full", "bg-base-1 active:bg-component-gray-1", disabledVariants({
+    disabled: disabled
+  }), propsClassName);
+  if (isLinkElement(rest)) {
+    return /*#__PURE__*/jsx(LinkIconButton, _extends({}, rest, {
+      className: className,
+      renderLink: renderLink,
+      ref: ref,
+      children: children
+    }));
+  }
+  return /*#__PURE__*/jsx(UnstyledButton, _extends({
+    className: className,
+    disabled: disabled
+  }, rest, {
+    ref: ref,
+    children: children
+  }));
+});
+IconButton.displayName = "IconButton";
+
+var _excluded$c = ["asChild", "className"];
+var InlineFlex = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var asChild = _ref.asChild,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var Comp = asChild ? Slot : "div";
+  return /*#__PURE__*/jsx(Comp, _extends({
+    ref: ref,
+    className: classNames("inline-flex", className)
+  }, rest));
+});
+InlineFlex.displayName = "InlineFlex";
+
+var _excluded$b = ["startEnhancer", "endEnhancer", "onKeyDown", "clearable", "clearOnEscape", "className", "style", "inputRef", "disabled", "onClick", "onMouseDown", "onEnter", "value", "error", "overrides"];
 var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -516,3 +588,3 @@ var _overrides$Container, _localInputRef$curren3;
     overrides = _ref.overrides,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var localInputRef = useRef(null);
@@ -586,9 +658,2 @@ var clearValue = function clearValue() {
 
-var isClickableElement = function isClickableElement(props) {
-  return Boolean(props.onClick);
-};
-var isLinkElement = function isLinkElement(props) {
-  return Boolean(props.href);
-};
-
 var objectFitVariants = cva(undefined, {
@@ -606,3 +671,3 @@ variants: {
 
-var _excluded$b = ["renderImage"],
+var _excluded$a = ["renderImage"],
   _excluded2$4 = ["size", "style"],
@@ -624,3 +689,3 @@ _excluded3$3 = ["icon"];
   var renderImage = _ref.renderImage,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var Comp = renderImage != null ? renderImage : "img";
@@ -680,24 +745,2 @@ return /*#__PURE__*/jsx(Comp, _extends({}, rest, {
 
-var _excluded$a = ["className", "href", "variant", "disabled"];
-var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    href = _ref.href,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "default" : _ref$variant,
-    disabled = _ref.disabled,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  return /*#__PURE__*/jsx("a", _extends({
-    className: classNames(linkVariants({
-      variant: variant
-    }), disabledVariants({
-      disabled: disabled
-    }), className),
-    tabIndex: disabled ? -1 : undefined,
-    "aria-disabled": disabled != null ? disabled : undefined,
-    href: sanitizeUrl(href),
-    ref: ref
-  }, rest));
-});
-Link.displayName = "Link";
-
 var _excluded$9 = ["asChild", "className", "weight", "responsive", "color", "size"],
@@ -718,3 +761,3 @@ _excluded2$3 = ["asChild", "className", "responsive", "color", "size"],
     responsive: {
-      "true": undefined
+      "true": ""
     }
@@ -775,3 +818,3 @@ },
     responsive: {
-      "true": undefined
+      "true": ""
     }
@@ -830,3 +873,3 @@ },
     responsive: {
-      "true": undefined
+      "true": ""
     }
@@ -904,3 +947,5 @@ },
   var Comp = renderLink != null ? renderLink : Link;
-  return /*#__PURE__*/jsx(Comp, _extends({}, rest));
+  return /*#__PURE__*/jsx(Comp, _extends({
+    variant: "unstyled"
+  }, rest));
 };
@@ -1299,2 +1344,24 @@ var ItemDataId = "Item";
 
+var spinnerVariants = cva(undefined, {
+  variants: {
+    size: {
+      small: "h-6 w-6 border-[3px]",
+      medium: "h-12 w-12 border-4",
+      large: "h-[72px] w-[72px] border-[5px]"
+    }
+  }
+});
+var Spinner = function Spinner(_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "small" : _ref$size;
+  return /*#__PURE__*/jsx("span", {
+    "aria-live": "polite",
+    role: "status",
+    className: classNames("inline-block animate-spin rounded-full", "border-gray-3 !border-b-transparent dark:border-white", spinnerVariants({
+      size: size
+    }), className)
+  });
+};
+
 var _excluded$1 = ["checked", "disabled"];
@@ -1557,2 +1624,2 @@ var switchVariants = cva(undefined, {
 
-export { CenterAligned, Checkbox, Container, Flex, FlexColumn, Icon, InlineFlex, Input, Item, Label, Link, Media, Progress, RadioButtonGroup, RadioGroup, Separator, SizeProvider, Slider, SpaceBetween, Switch, Text, TextArea, ThemeProvider, UnstyledButton, VerticalAligned, VisuallyHidden, breakpoints, classNames, disabledVariants, getBreakpointPixelValue, getTheme, inputVariants, linkVariants, mediaStyles, preventInputZoomStyles, tailwindBase, textColorVariants, twDataIdSelector, useIsGreaterThanOrEqualToLg, useIsLessThanBreakpoint, useIsLessThanLg, useIsLessThanMd, useIsLessThanSm, useIsLessThanXXXl, useIsLessThanXXl, useIsLessThanXl, useTheme, useThemeValues };
+export { CenterAligned, Checkbox, Container, Flex, FlexColumn, Icon, IconButton, InlineFlex, Input, Item, Label, Link, Media, Progress, RadioButtonGroup, RadioGroup, Separator, SizeProvider, Slider, SpaceBetween, Spinner, Switch, Text, TextArea, ThemeProvider, UnstyledButton, VerticalAligned, VisuallyHidden, breakpoints, classNames, disabledVariants, getBreakpointPixelValue, getTheme, inputVariants, linkVariants, mediaStyles, preventInputZoomStyles, tailwindBase, textColorVariants, twDataIdSelector, 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('react'), require('clsx'), require('tailwind-merge'), require('@radix-ui/react-slot'), require('react/jsx-runtime'), require('@radix-ui/react-checkbox'), require('class-variance-authority'), require('@tailwindcss/aspect-ratio'), require('@react-hook/merged-ref'), require('@braintree/sanitize-url'), require('@radix-ui/react-label'), require('@radix-ui/react-visually-hidden'), require('@opensea/react-media'), require('@radix-ui/react-progress'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-switch'), require('polished')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'clsx', 'tailwind-merge', '@radix-ui/react-slot', 'react/jsx-runtime', '@radix-ui/react-checkbox', 'class-variance-authority', '@tailwindcss/aspect-ratio', '@react-hook/merged-ref', '@braintree/sanitize-url', '@radix-ui/react-label', '@radix-ui/react-visually-hidden', '@opensea/react-media', '@radix-ui/react-progress', '@radix-ui/react-radio-group', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-switch', 'polished'], factory) :
-  (global = global || self, factory(global.uiKit = {}, global.react, global.clsx, global.tailwindMerge, global.reactSlot, global.jsx, global.CheckboxPrimitive, global.classVarianceAuthority, global.aspectRatio, global.useMergedRef, global.sanitizeUrl, global.LabelPrimitive, global.reactVisuallyHidden, global.reactMedia, global.ProgressPrimitive, global.RadioGroupPrimitive, global.SeparatorPrimitive, global.SliderPrimitive, global.SwitchPrimitives, global.polished));
-})(this, (function (exports, react, clsx, tailwindMerge, reactSlot, jsxRuntime, CheckboxPrimitive, classVarianceAuthority, aspectRatio, useMergedRef, sanitizeUrl, LabelPrimitive, reactVisuallyHidden, reactMedia, ProgressPrimitive, RadioGroupPrimitive, SeparatorPrimitive, SliderPrimitive, SwitchPrimitives, polished) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('clsx'), require('tailwind-merge'), require('@radix-ui/react-slot'), require('react/jsx-runtime'), require('@radix-ui/react-checkbox'), require('class-variance-authority'), require('@tailwindcss/aspect-ratio'), require('@braintree/sanitize-url'), require('@react-hook/merged-ref'), require('@radix-ui/react-label'), require('@radix-ui/react-visually-hidden'), require('@opensea/react-media'), require('@radix-ui/react-progress'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-switch'), require('polished')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'clsx', 'tailwind-merge', '@radix-ui/react-slot', 'react/jsx-runtime', '@radix-ui/react-checkbox', 'class-variance-authority', '@tailwindcss/aspect-ratio', '@braintree/sanitize-url', '@react-hook/merged-ref', '@radix-ui/react-label', '@radix-ui/react-visually-hidden', '@opensea/react-media', '@radix-ui/react-progress', '@radix-ui/react-radio-group', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-switch', 'polished'], factory) :
+  (global = global || self, factory(global.uiKit = {}, global.react, global.clsx, global.tailwindMerge, global.reactSlot, global.jsx, global.CheckboxPrimitive, global.classVarianceAuthority, global.aspectRatio, global.sanitizeUrl, global.useMergedRef, global.LabelPrimitive, global.reactVisuallyHidden, global.reactMedia, global.ProgressPrimitive, global.RadioGroupPrimitive, global.SeparatorPrimitive, global.SliderPrimitive, global.SwitchPrimitives, global.polished));
+})(this, (function (exports, react, clsx, tailwindMerge, reactSlot, jsxRuntime, CheckboxPrimitive, classVarianceAuthority, aspectRatio, sanitizeUrl, useMergedRef, LabelPrimitive, reactVisuallyHidden, reactMedia, ProgressPrimitive, RadioGroupPrimitive, SeparatorPrimitive, SliderPrimitive, SwitchPrimitives, polished) {
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -87,7 +87,7 @@
 
-  var _excluded$k = ["asChild", "className"];
+  var _excluded$l = ["asChild", "className"];
   var Flex = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     var asChild = _ref.asChild,
       className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     var Comp = asChild ? reactSlot.Slot : "div";
@@ -101,6 +101,6 @@ return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
 
-  var _excluded$j = ["className"];
+  var _excluded$k = ["className"];
   var FlexColumn = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     return /*#__PURE__*/jsxRuntime.jsx(Flex, _extends({
@@ -113,6 +113,6 @@ ref: ref,
 
-  var _excluded$i = ["className"];
+  var _excluded$j = ["className"];
   var VerticalAligned = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
     return /*#__PURE__*/jsxRuntime.jsx(FlexColumn, _extends({
@@ -125,6 +125,6 @@ ref: ref,
 
-  var _excluded$h = ["className"];
+  var _excluded$i = ["className"];
   var CenterAligned = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/jsxRuntime.jsx(VerticalAligned, _extends({
@@ -157,2 +157,5 @@ ref: ref,
     black: "rgb(var(--color-black) / <alpha-value>)",
+    // Base background, but can be used for Text in certain situations (e.g inverse of primary text color)
+    "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+    "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
     // Grays
@@ -211,5 +214,2 @@ "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
       colors: _extends({}, COMMON_COLORS, {
-        // Base background
-        "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
-        "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
         // Component background grays
@@ -345,3 +345,4 @@ "component-gray-1": "var(--color-component-gray-1)",
         "default": "text-blue-3 hover:text-blue-4",
-        subtle: "font-semibold text-primary hover:text-secondary"
+        subtle: "font-semibold text-primary hover:text-secondary",
+        unstyled: ""
       }
@@ -415,6 +416,7 @@ }
 
-  var _excluded$g = ["className", "checked", "disabled", "size", "onCheckedChange"];
+  var _excluded$h = ["className", "checked", "disabled", "size", "onCheckedChange"];
   var checkboxVariants = classVarianceAuthority.cva(undefined, {
     variants: {
       checked: {
+        "false": "border-level-2",
         "true": "border-blue-3 bg-blue-3",
@@ -437,6 +439,6 @@ indeterminate: "border-blue-3 bg-blue-3"
       _onCheckedChange = _ref.onCheckedChange,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     return /*#__PURE__*/jsxRuntime.jsx(CheckboxPrimitive__namespace.Root, _extends({
       ref: ref,
-      className: classNames("rounded-md border border-level-2 outline-none",
+      className: classNames("rounded-md border outline-none",
       // Only show focus border when keyboard is used, not on mouse click
@@ -468,6 +470,6 @@ "focus:border-level-3 [&:not(:focus-visible)]:border-level-2", checkboxVariants({
 
-  var _excluded$f = ["className"];
+  var _excluded$g = ["className"];
   var Container = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     return /*#__PURE__*/jsxRuntime.jsx("div", _extends({
@@ -480,22 +482,40 @@ className: classNames("mx-auto w-full max-w-[2560px]", "px-4 sm:px-8 xxl:px-16", className),
 
+  var isClickableElement = function isClickableElement(props) {
+    return Boolean(props.onClick);
+  };
+  var isLinkElement = function isLinkElement(props) {
+    return Boolean(props.href);
+  };
+
+  var _excluded$f = ["className", "href", "variant", "disabled"];
+  var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+      href = _ref.href,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "default" : _ref$variant,
+      disabled = _ref.disabled,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    return /*#__PURE__*/jsxRuntime.jsx("a", _extends({
+      className: classNames(linkVariants({
+        variant: variant
+      }), disabledVariants({
+        disabled: disabled
+      }), className),
+      tabIndex: disabled ? -1 : undefined,
+      "aria-disabled": disabled != null ? disabled : undefined,
+      href: sanitizeUrl.sanitizeUrl(href),
+      ref: ref
+    }, rest));
+  });
+  Link.displayName = "Link";
+
   var _excluded$e = ["asChild", "className"];
-  var InlineFlex = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var UnstyledButtonDataId = "UnstyledButton";
+  var UnstyledButton = Object.assign( /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     var asChild = _ref.asChild,
       className = _ref.className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-    var Comp = asChild ? reactSlot.Slot : "div";
+    var Comp = asChild ? reactSlot.Slot : "button";
     return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
       ref: ref,
-      className: classNames("inline-flex", className)
-    }, rest));
-  });
-  InlineFlex.displayName = "InlineFlex";
-
-  var _excluded$d = ["className"];
-  var UnstyledButtonDataId = "UnstyledButton";
-  var UnstyledButton = Object.assign( /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-    return /*#__PURE__*/jsxRuntime.jsx("button", _extends({
-      ref: ref,
       className: classNames("inline-flex items-center border-0 bg-inherit font-[inherit] text-[100%]", className),
@@ -510,3 +530,55 @@ type: "button",
 
-  var _excluded$c = ["startEnhancer", "endEnhancer", "onKeyDown", "clearable", "clearOnEscape", "className", "style", "inputRef", "disabled", "onClick", "onMouseDown", "onEnter", "value", "error", "overrides"];
+  var _excluded$d = ["renderLink"],
+    _excluded2$5 = ["children", "disabled", "className", "renderLink"];
+  var LinkIconButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+    var renderLink = _ref.renderLink,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    var Comp = renderLink != null ? renderLink : Link;
+    return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
+      variant: "unstyled"
+    }, rest, {
+      ref: ref
+    }));
+  });
+  var IconButton = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
+    var children = _ref2.children,
+      disabled = _ref2.disabled,
+      propsClassName = _ref2.className,
+      renderLink = _ref2.renderLink,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
+    var className = classNames("flex items-center justify-center", "h-12 w-12 rounded-full", "bg-base-1 active:bg-component-gray-1", disabledVariants({
+      disabled: disabled
+    }), propsClassName);
+    if (isLinkElement(rest)) {
+      return /*#__PURE__*/jsxRuntime.jsx(LinkIconButton, _extends({}, rest, {
+        className: className,
+        renderLink: renderLink,
+        ref: ref,
+        children: children
+      }));
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(UnstyledButton, _extends({
+      className: className,
+      disabled: disabled
+    }, rest, {
+      ref: ref,
+      children: children
+    }));
+  });
+  IconButton.displayName = "IconButton";
+
+  var _excluded$c = ["asChild", "className"];
+  var InlineFlex = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+    var asChild = _ref.asChild,
+      className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    var Comp = asChild ? reactSlot.Slot : "div";
+    return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
+      ref: ref,
+      className: classNames("inline-flex", className)
+    }, rest));
+  });
+  InlineFlex.displayName = "InlineFlex";
+
+  var _excluded$b = ["startEnhancer", "endEnhancer", "onKeyDown", "clearable", "clearOnEscape", "className", "style", "inputRef", "disabled", "onClick", "onMouseDown", "onEnter", "value", "error", "overrides"];
   var Input = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
@@ -529,3 +601,3 @@ var _overrides$Container, _localInputRef$curren3;
       overrides = _ref.overrides,
-      inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
     var localInputRef = react.useRef(null);
@@ -599,9 +671,2 @@ var clearValue = function clearValue() {
 
-  var isClickableElement = function isClickableElement(props) {
-    return Boolean(props.onClick);
-  };
-  var isLinkElement = function isLinkElement(props) {
-    return Boolean(props.href);
-  };
-
   var objectFitVariants = classVarianceAuthority.cva(undefined, {
@@ -619,3 +684,3 @@ variants: {
 
-  var _excluded$b = ["renderImage"],
+  var _excluded$a = ["renderImage"],
     _excluded2$4 = ["size", "style"],
@@ -637,3 +702,3 @@ _excluded3$3 = ["icon"];
     var renderImage = _ref.renderImage,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var Comp = renderImage != null ? renderImage : "img";
@@ -693,24 +758,2 @@ return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({}, rest, {
 
-  var _excluded$a = ["className", "href", "variant", "disabled"];
-  var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-      href = _ref.href,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "default" : _ref$variant,
-      disabled = _ref.disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-    return /*#__PURE__*/jsxRuntime.jsx("a", _extends({
-      className: classNames(linkVariants({
-        variant: variant
-      }), disabledVariants({
-        disabled: disabled
-      }), className),
-      tabIndex: disabled ? -1 : undefined,
-      "aria-disabled": disabled != null ? disabled : undefined,
-      href: sanitizeUrl.sanitizeUrl(href),
-      ref: ref
-    }, rest));
-  });
-  Link.displayName = "Link";
-
   var _excluded$9 = ["asChild", "className", "weight", "responsive", "color", "size"],
@@ -731,3 +774,3 @@ _excluded2$3 = ["asChild", "className", "responsive", "color", "size"],
       responsive: {
-        "true": undefined
+        "true": ""
       }
@@ -788,3 +831,3 @@ },
       responsive: {
-        "true": undefined
+        "true": ""
       }
@@ -843,3 +886,3 @@ },
       responsive: {
-        "true": undefined
+        "true": ""
       }
@@ -917,3 +960,5 @@ },
     var Comp = renderLink != null ? renderLink : Link;
-    return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({}, rest));
+    return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
+      variant: "unstyled"
+    }, rest));
   };
@@ -1312,2 +1357,24 @@ var ItemDataId = "Item";
 
+  var spinnerVariants = classVarianceAuthority.cva(undefined, {
+    variants: {
+      size: {
+        small: "h-6 w-6 border-[3px]",
+        medium: "h-12 w-12 border-4",
+        large: "h-[72px] w-[72px] border-[5px]"
+      }
+    }
+  });
+  var Spinner = function Spinner(_ref) {
+    var className = _ref.className,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "small" : _ref$size;
+    return /*#__PURE__*/jsxRuntime.jsx("span", {
+      "aria-live": "polite",
+      role: "status",
+      className: classNames("inline-block animate-spin rounded-full", "border-gray-3 !border-b-transparent dark:border-white", spinnerVariants({
+        size: size
+      }), className)
+    });
+  };
+
   var _excluded$1 = ["checked", "disabled"];
@@ -1580,2 +1647,3 @@ var switchVariants = classVarianceAuthority.cva(undefined, {
   exports.Icon = Icon;
+  exports.IconButton = IconButton;
   exports.InlineFlex = InlineFlex;
@@ -1594,2 +1662,3 @@ exports.Input = Input;
   exports.SpaceBetween = SpaceBetween;
+  exports.Spinner = Spinner;
   exports.Switch = Switch;
@@ -1596,0 +1665,0 @@ exports.Text = Text;

dist/styles/tailwindBase.d.ts

@@ -7,4 +7,2 @@ import type { Config } from "tailwindcss";
         readonly colors: {
-            readonly "base-1": "rgb(var(--color-base-1) / <alpha-value>)";
-            readonly "base-2": "rgb(var(--color-base-2) / <alpha-value>)";
             readonly "component-gray-1": "var(--color-component-gray-1)";
@@ -28,2 +26,4 @@ readonly "component-gray-2": "var(--color-component-gray-2)";
             readonly black: "rgb(var(--color-black) / <alpha-value>)";
+            readonly "base-1": "rgb(var(--color-base-1) / <alpha-value>)";
+            readonly "base-2": "rgb(var(--color-base-2) / <alpha-value>)";
             readonly "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)";
@@ -71,2 +71,4 @@ readonly "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)";
             readonly black: "rgb(var(--color-black) / <alpha-value>)";
+            readonly "base-1": "rgb(var(--color-base-1) / <alpha-value>)";
+            readonly "base-2": "rgb(var(--color-base-2) / <alpha-value>)";
             readonly "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)";
@@ -107,2 +109,4 @@ readonly "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)";
             readonly black: "rgb(var(--color-black) / <alpha-value>)";
+            readonly "base-1": "rgb(var(--color-base-1) / <alpha-value>)";
+            readonly "base-2": "rgb(var(--color-base-2) / <alpha-value>)";
             readonly "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)";
@@ -109,0 +113,0 @@ readonly "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)";

dist/styles/utils/color.d.ts

 import { VariantProps } from "class-variance-authority";
 export type TextColorVariantProps = VariantProps<typeof textColorVariants>;
 export declare const textColorVariants: (props?: ({
-    color?: "transparent" | "inherit" | "current" | "white" | "black" | "gray-1" | "gray-2" | "gray-3" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "green-1" | "green-2" | "green-3" | "yellow-1" | "yellow-2" | "red-1" | "red-2" | "red-3" | "accent-red" | "accent-purple" | "accent-fuchsia" | "accent-orange" | "accent-cerulean" | "accent-aqua" | "success" | "warning" | "error" | "primary" | "secondary" | "interactive-primary" | "interactive-primary-hover" | "interactive-secondary" | "interactive-secondary-hover" | "icon-primary" | "icon-primary-hover" | "icon-secondary" | "icon-secondary-hover" | null | undefined;
+    color?: "transparent" | "inherit" | "current" | "white" | "black" | "base-1" | "base-2" | "gray-1" | "gray-2" | "gray-3" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "green-1" | "green-2" | "green-3" | "yellow-1" | "yellow-2" | "red-1" | "red-2" | "red-3" | "accent-red" | "accent-purple" | "accent-fuchsia" | "accent-orange" | "accent-cerulean" | "accent-aqua" | "success" | "warning" | "error" | "primary" | "secondary" | "interactive-primary" | "interactive-primary-hover" | "interactive-secondary" | "interactive-secondary-hover" | "icon-primary" | "icon-primary-hover" | "icon-secondary" | "icon-secondary-hover" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=color.d.ts.map

dist/styles/utils/link.d.ts

 import { VariantProps } from "class-variance-authority";
 export type LinkVariantProps = VariantProps<typeof linkVariants>;
 export declare const linkVariants: (props?: ({
-    variant?: "default" | "subtle" | null | undefined;
+    variant?: "default" | "subtle" | "unstyled" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=link.d.ts.map

package.json

 {
   "name": "@opensea/ui-kit",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "OpenSea's Design System implementation in React",
@@ -64,11 +64,11 @@ "license": "MIT",
   "devDependencies": {
-    "@faker-js/faker": "8.0.2",
-    "@playwright/test": "1.38.0",
-    "@storybook/addon-essentials": "7.4.3",
-    "@storybook/addon-interactions": "7.4.3",
-    "@storybook/addon-links": "7.4.3",
+    "@faker-js/faker": "8.1.0",
+    "@playwright/test": "1.38.1",
+    "@storybook/addon-essentials": "7.4.4",
+    "@storybook/addon-interactions": "7.4.4",
+    "@storybook/addon-links": "7.4.4",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/blocks": "7.4.3",
-    "@storybook/nextjs": "7.4.3",
-    "@storybook/react": "7.4.3",
+    "@storybook/blocks": "7.4.4",
+    "@storybook/nextjs": "7.4.4",
+    "@storybook/react": "7.4.4",
     "@storybook/testing-library": "0.2.1",
@@ -88,4 +88,4 @@ "@testing-library/jest-dom": "6.1.3",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.46.1",
-    "storybook": "7.4.3",
+    "react-hook-form": "7.46.2",
+    "storybook": "7.4.4",
     "tailwindcss": "3.3.3",
@@ -92,0 +92,0 @@ "vite-tsconfig-paths": "4.2.1"

src/components/index.ts

@@ -7,2 +7,3 @@ export * from "./CenterAligned"
 export * from "./Icon"
+export * from "./IconButton"
 export * from "./InlineFlex"
@@ -21,2 +22,3 @@ export * from "./Input"
 export * from "./SpaceBetween"
+export * from "./Spinner"
 export * from "./Switch"
@@ -23,0 +25,0 @@ export * from "./Text"

src/components/Link/Link.visual.spec.ts

@@ -6,30 +6,10 @@ import { getStoryId, loadStory } from "../../../tests/story"
 
-test("Link light", async ({ page }) => {
-  const story = await loadStory(page, getStoryId(kind, "Default"), "light")
+test("AllVariants light", async ({ page }) => {
+  const story = await loadStory(page, getStoryId(kind, "AllVariants"), "light")
   await expect(story).toHaveScreenshot()
 })
 
-test("Link subtle light", async ({ page }) => {
-  const story = await loadStory(page, getStoryId(kind, "Subtle"), "light")
+test("AllVariants dark", async ({ page }) => {
+  const story = await loadStory(page, getStoryId(kind, "AllVariants"), "dark")
   await expect(story).toHaveScreenshot()
 })
-
-test("Link disabled light", async ({ page }) => {
-  const story = await loadStory(page, getStoryId(kind, "Disabled"), "light")
-  await expect(story).toHaveScreenshot()
-})
-
-test("Link dark", async ({ page }) => {
-  const story = await loadStory(page, getStoryId(kind, "Default"), "dark")
-  await expect(story).toHaveScreenshot()
-})
-
-test("Link subtle dark ", async ({ page }) => {
-  const story = await loadStory(page, getStoryId(kind, "Subtle"), "dark")
-  await expect(story).toHaveScreenshot()
-})
-
-test("Link disabled dark ", async ({ page }) => {
-  const story = await loadStory(page, getStoryId(kind, "Disabled"), "dark")
-  await expect(story).toHaveScreenshot()
-})

src/styles/tailwindBase.ts

@@ -13,2 +13,6 @@ import aspectRatio from "@tailwindcss/aspect-ratio"
 
+  // Base background, but can be used for Text in certain situations (e.g inverse of primary text color)
+  "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+  "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
+
   // Grays
@@ -84,5 +88,2 @@ "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
       ...COMMON_COLORS,
-      // Base background
-      "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
-      "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
 
@@ -89,0 +90,0 @@ // Component background grays

src/styles/utils/link.ts

@@ -10,4 +10,5 @@ import { VariantProps, cva } from "class-variance-authority"
       subtle: "font-semibold text-primary hover:text-secondary",
+      unstyled: "",
     },
   },
 })

No alert changes

Improved metrics

Total package byte prevSize

1698252

increased by4.02%

Number of package files

366

increased by7.02%

Lines of code

15231

increased by4.48%

No dependency changes