@auspices/eos 2.34.1 → 4.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 A React UI library
 
-[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![npm](https://img.shields.io/npm/v/@auspices/eos)](https://www.npmjs.com/package/@auspices/eos) [![Build Status](https://travis-ci.org/auspices/eos.svg?branch=master)](https://travis-ci.org/auspices/eos)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![npm](https://img.shields.io/npm/v/@auspices/eos)](https://www.npmjs.com/package/@auspices/eos) [![CircleCI](https://dl.circleci.com/status-badge/img/gh/auspices/eos/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/auspices/eos/tree/master)
 
 ## Meta
 

package/dist/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BoxProps } from "../Box";
-export declare type AlertProps = BoxProps & {
+export type AlertProps = BoxProps & {
     mode: "notification" | "error";
 };
 export declare const Alert: React.FC<AlertProps>;

package/dist/Alerts/Alerts.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { StackProps } from "../Stack";
-export declare type AlertsProps = Omit<StackProps, "spacing"> & {
+export type AlertsProps = Omit<StackProps, "spacing"> & {
     limit?: number;
     spacing?: number | string;
 };

package/dist/Alerts/useAlerts.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
-declare type Body = string | JSX.Element;
-export declare type TAlert = {
+type Body = string | JSX.Element;
+export type TAlert = {
     mode: "notification" | "error";
     id: string;
     body: Body;
 };
-declare type Message = {
+type Message = {
     body: Body;
     ttl?: number;
 };
-declare type State = {
+type State = {
     alerts: TAlert[];
 };
 export declare const AlertsContext: React.Context<{
@@ -17,7 +17,7 @@ export declare const AlertsContext: React.Context<{
     sendNotification(message: Message): void;
     sendError(message: Message): void;
 }>;
-export declare type AlertsProviderProps = {
+export type AlertsProviderProps = {
     children: React.ReactNode;
 };
 export declare const AlertsProvider: React.FC<AlertsProviderProps>;

package/dist/AspectRatioBox/AspectRatioBox.d.ts

@@ -1,13 +1,13 @@
 import React from "react";
 import { BoxProps } from "../Box";
-declare type MaxDimensions = {
+type MaxDimensions = {
     maxWidth?: number | "100%";
     maxHeight?: number;
 };
-declare type AspectDimensions = {
+type AspectDimensions = {
     aspectWidth: number;
     aspectHeight: number;
 };
-export declare type AspectRatioBoxProps = Omit<BoxProps, "maxWidth" | "maxHeight"> & AspectDimensions & MaxDimensions;
+export type AspectRatioBoxProps = Omit<BoxProps, "maxWidth" | "maxHeight"> & AspectDimensions & MaxDimensions;
 export declare const AspectRatioBox: React.FC<AspectRatioBoxProps>;
 export {};

package/dist/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 import { BoxProps } from "../Box";
-export declare type BannerProps = Omit<BoxProps, "bg"> & {
+export type BannerProps = Omit<BoxProps, "bg"> & {
     bg?: string;
     children: ReactNode;
     dismissable?: boolean;

package/dist/Box/Box.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { BorderProps, FlexboxProps, SpaceProps, TypographyProps, PositionProps, LayoutProps, ColorProps, ResponsiveValue } from "styled-system";
-export declare type BoxSpatialProps = FlexboxProps & SpaceProps & PositionProps & LayoutProps;
-export declare type TextColorProps = {
+export type BoxSpatialProps = FlexboxProps & SpaceProps & PositionProps & LayoutProps;
+export type TextColorProps = {
     textColor?: ResponsiveValue<string>;
 };
-export declare type TransitionProps = {
+export type TransitionProps = {
     transition?: ResponsiveValue<string>;
 };
-export declare type BoxProps = BorderProps & TypographyProps & BoxSpatialProps & Omit<ColorProps, "color"> & TextColorProps & TransitionProps & {
+export type BoxProps = BorderProps & TypographyProps & BoxSpatialProps & Omit<ColorProps, "color"> & TextColorProps & TransitionProps & {
     children?: React.ReactNode;
 };
 export declare const boxMixin: import("styled-system").styleFn;

package/dist/Button/Button.d.ts

@@ -1,22 +1,7 @@
 /// <reference types="react" />
 import { ClickableProps } from "../Clickable";
-export declare const BUTTON: {
-    display: string;
-    alignItems: string;
-    justifyContent: string;
-    backgroundColor: string;
-    borderColor: string;
-    borderStyle: string;
-    borderWidth: string;
-    color: string;
-    fontFamily: string;
-    fontSize: number[];
-    lineHeight: number;
-    px: number;
-    py: number;
-    transition: string;
-};
-export declare type ButtonProps = ClickableProps & {
+import { CellProps } from "../Cell";
+export type ButtonProps = ClickableProps & CellProps & {
     focus?: boolean;
     hover?: boolean;
     selected?: boolean;
@@ -26,13 +11,15 @@ export declare const buttonHoverMixin: import("styled-components").FlattenInterp
 export declare const buttonFocusMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare const buttonSelectedMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare const buttonDisabledMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export declare const buttonHighlightedMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const buttonHighlightedMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ButtonProps, import("styled-components").DefaultTheme>>;
 export declare const buttonMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ButtonProps, import("styled-components").DefaultTheme>>;
 export declare const Button: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & import("..").TextColorProps & import("..").TransitionProps & {
     children?: import("react").ReactNode;
 } & {
     cursor?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textDecoration?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+} & {
+    variant?: "small" | "default" | undefined;
 } & {
     focus?: boolean | undefined;
     hover?: boolean | undefined;

package/dist/Button/Button.js

@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -38,18 +27,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.buttonMixin = exports.buttonHighlightedMixin = exports.buttonDisabledMixin = exports.buttonSelectedMixin = exports.buttonFocusMixin = exports.buttonHoverMixin = exports.BUTTON = void 0;
+exports.Button = exports.buttonMixin = exports.buttonHighlightedMixin = exports.buttonDisabledMixin = exports.buttonSelectedMixin = exports.buttonFocusMixin = exports.buttonHoverMixin = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_get_1 = require("@styled-system/theme-get");
 var Clickable_1 = require("../Clickable");
 var Cell_1 = require("../Cell");
-exports.BUTTON = __assign(__assign({}, Cell_1.CELL), { display: "inline-flex", alignItems: "center", justifyContent: "center" });
 exports.buttonHoverMixin = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), (0, theme_get_1.themeGet)("colors.secondary"));
 exports.buttonFocusMixin = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: 0;\n  ", "\n"], ["\n  outline: 0;\n  ", "\n"])), Cell_1.cellFocusMixin);
 exports.buttonSelectedMixin = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: 0;\n  box-shadow: inset 0 0 0 ", " ", ";\n  text-decoration: underline;\n  color: ", ";\n  border-color: ", ";\n"], ["\n  outline: 0;\n  box-shadow: inset 0 0 0 ", " ", ";\n  text-decoration: underline;\n  color: ", ";\n  border-color: ", ";\n"])), (0, theme_get_1.themeGet)("space.1"), (0, theme_get_1.themeGet)("colors.primary"), (0, theme_get_1.themeGet)("colors.primary"), (0, theme_get_1.themeGet)("colors.tertiary"));
 exports.buttonDisabledMixin = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  color: ", ";\n  border-color: ", ";\n  pointer-events: none;\n  cursor: default;\n  z-index: -1;\n"], ["\n  position: relative;\n  color: ", ";\n  border-color: ", ";\n  pointer-events: none;\n  cursor: default;\n  z-index: -1;\n"])), (0, theme_get_1.themeGet)("colors.tertiary"), (0, theme_get_1.themeGet)("colors.tertiary"));
-exports.buttonHighlightedMixin = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &::before {\n    content: \"\u2192\u00A0\";\n    margin-left: -", ";\n  }\n"], ["\n  &::before {\n    content: \"\u2192\\u00A0\";\n    margin-left: -", ";\n  }\n"])), (0, theme_get_1.themeGet)("space.3"));
-exports.buttonMixin = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  cursor: pointer;\n  transition: ", ", color 200ms ease;\n  min-width: 0;\n  user-select: none;\n  font-weight: normal;\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n\n  ", "\n  &:disabled {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"], ["\n  cursor: pointer;\n  transition: ", ", color 200ms ease;\n  min-width: 0;\n  user-select: none;\n  font-weight: normal;\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n\n  ", "\n  &:disabled {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), Cell_1.CELL.transition, function (_a) {
+exports.buttonHighlightedMixin = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &::before {\n    content: \"\u2192\u00A0\";\n\n    ", ")}\n  }\n"], ["\n  &::before {\n    content: \"\u2192\\u00A0\";\n\n    ", ")}\n  }\n"])), function (_a) {
+    var variant = _a.variant;
+    if (variant !== "small") {
+        return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          margin-left: -", ";\n        "], ["\n          margin-left: -", ";\n        "])), (0, theme_get_1.themeGet)("space.3"));
+    }
+});
+exports.buttonMixin = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: box-shadow 250ms ease, color 200ms ease;\n  min-width: 0;\n  user-select: none;\n  font-weight: normal;\n\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n\n  ", "\n  &:disabled {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: box-shadow 250ms ease, color 200ms ease;\n  min-width: 0;\n  user-select: none;\n  font-weight: normal;\n\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n\n  ", "\n  &:disabled {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), Cell_1.cellMixin, function (_a) {
     var hover = _a.hover;
     return hover && exports.buttonHoverMixin;
 }, exports.buttonHoverMixin, function (_a) {
@@ -60,13 +53,13 @@ exports.buttonMixin = (0, styled_components_1.css)(templateObject_7 || (template
     return disabled && exports.buttonDisabledMixin;
 }, exports.buttonDisabledMixin, function (_a) {
     var selected = _a.selected;
-    return selected && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      ", "\n      &:focus {\n        ", "\n      }\n      &:disabled {\n        ", "\n      }\n    "], ["\n      ", "\n      &:focus {\n        ", "\n      }\n      &:disabled {\n        ", "\n      }\n    "])), exports.buttonSelectedMixin, exports.buttonSelectedMixin, exports.buttonSelectedMixin);
+    return selected && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      ", "\n\n      &:focus {\n        ", "\n      }\n\n      &:disabled {\n        ", "\n      }\n    "], ["\n      ", "\n\n      &:focus {\n        ", "\n      }\n\n      &:disabled {\n        ", "\n      }\n    "])), exports.buttonSelectedMixin, exports.buttonSelectedMixin, exports.buttonSelectedMixin);
 }, function (_a) {
     var highlighted = _a.highlighted;
     return highlighted && exports.buttonHighlightedMixin;
 });
-exports.Button = (0, styled_components_1.default)(Clickable_1.Clickable)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.buttonMixin);
-exports.Button.defaultProps = __assign({}, exports.BUTTON);
+exports.Button = (0, styled_components_1.default)(Clickable_1.Clickable)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.buttonMixin);
+exports.Button.defaultProps = { variant: "default" };
 exports.Button.displayName = "Button";
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 //# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAChD,sDAAoD;AACpD,0CAAyD;AACzD,gCAA+C;AAElC,QAAA,MAAM,yBACd,WAAI,KACP,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,IACxB;AASW,QAAA,gBAAgB,OAAG,uBAAG,wFAAA,aACxB,EAA4B,KACtC,KADU,IAAA,oBAAQ,EAAC,kBAAkB,CAAC,EACrC;AAEW,QAAA,gBAAgB,OAAG,uBAAG,+FAAA,qBAE/B,EAAc,IACjB,KADG,qBAAc,EAChB;AAEW,QAAA,mBAAmB,OAAG,uBAAG,mMAAA,6CAEV,EAAmB,GAAI,EAA0B,6CAElE,EAA0B,qBACnB,EAA2B,KAC5C,KAJ2B,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAAI,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EAElE,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAC3C;AAEW,QAAA,mBAAmB,OAAG,uBAAG,mMAAA,oCAE3B,EAA2B,qBACpB,EAA2B,kEAI5C,KALU,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAI3C;AAEW,QAAA,sBAAsB,OAAG,uBAAG,qJAAA,sEAGrB,EAAmB,UAEtC,KAFmB,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAErC;AAEW,QAAA,WAAW,OAAG,uBAAG,2UAAa,sCAE3B,EAAe,0FAK3B,EAAwC,qBAEtC,EAAgB,aAGlB,EAAwC,qBAEtC,EAAgB,aAGlB,EAAiD,wBAE/C,EAAmB,aAGrB,EAUC,QAED,EAA0D,IAC7D,KAjCe,WAAI,CAAC,UAAU,EAK3B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,wBAAgB;AAAzB,CAAyB,EAEtC,wBAAgB,EAGlB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,wBAAgB;AAAzB,CAAyB,EAEtC,wBAAgB,EAGlB,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,2BAAmB;AAA/B,CAA+B,EAE/C,2BAAmB,EAGrB,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ,QACR,uBAAG,2KAAA,UACC,EAAmB,6BAEjB,EAAmB,yCAGnB,EAAmB,iBAExB,KAPG,2BAAmB,EAEjB,2BAAmB,EAGnB,2BAAmB,CAExB;AATD,CASC,EAED,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,WAAW,IAAI,8BAAsB;AAArC,CAAqC,EAC5D;AAEW,QAAA,MAAM,GAAG,IAAA,2BAAM,EAAC,qBAAS,CAAC,+EAAa,MAChD,EAAW,IACd,KADG,mBAAW,EACb;AAEF,cAAM,CAAC,YAAY,gBAAQ,cAAM,CAAE,CAAC;AAEpC,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAChD,sDAAoD;AACpD,0CAAyD;AACzD,gCAA+D;AAUlD,QAAA,gBAAgB,OAAG,uBAAG,wFAAA,aACxB,EAA4B,KACtC,KADU,IAAA,oBAAQ,EAAC,kBAAkB,CAAC,EACrC;AAEW,QAAA,gBAAgB,OAAG,uBAAG,+FAAA,qBAE/B,EAAc,IACjB,KADG,qBAAc,EAChB;AAEW,QAAA,mBAAmB,OAAG,uBAAG,mMAAA,6CAEV,EAAmB,GAAI,EAA0B,6CAElE,EAA0B,qBACnB,EAA2B,KAC5C,KAJ2B,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAAI,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EAElE,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAC3C;AAEW,QAAA,mBAAmB,OAAG,uBAAG,mMAAA,oCAE3B,EAA2B,qBACpB,EAA2B,kEAI5C,KALU,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAI3C;AAEW,QAAA,sBAAsB,OAAG,uBAAG,0IAAa,0DAIhD,EAMD,WAEJ,KARK,UAAC,EAAW;QAAT,OAAO,aAAA;IACV,IAAI,OAAO,KAAK,OAAO,EAAE;QACvB,WAAO,uBAAG,+GAAA,4BACQ,EAAmB,aACpC,KADiB,IAAA,oBAAQ,EAAC,SAAS,CAAC,EACnC;KACH;AACH,CAAC,EAEH;AAEW,QAAA,WAAW,OAAG,uBAAG,mbAAa,gOAUvC,EAAS,QAET,EAAwC,qBAEtC,EAAgB,aAGlB,EAAwC,qBAEtC,EAAgB,aAGlB,EAAiD,wBAE/C,EAAmB,aAGrB,EAYC,QAED,EAA0D,IAC7D,KAhCG,gBAAS,EAET,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,wBAAgB;AAAzB,CAAyB,EAEtC,wBAAgB,EAGlB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,wBAAgB;AAAzB,CAAyB,EAEtC,wBAAgB,EAGlB,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,2BAAmB;AAA/B,CAA+B,EAE/C,2BAAmB,EAGrB,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ,QACR,uBAAG,+KAAA,UACC,EAAmB,+BAGjB,EAAmB,2CAInB,EAAmB,iBAExB,KATG,2BAAmB,EAGjB,2BAAmB,EAInB,2BAAmB,CAExB;AAXD,CAWC,EAED,UAAC,EAAe;QAAb,WAAW,iBAAA;IAAO,OAAA,WAAW,IAAI,8BAAsB;AAArC,CAAqC,EAC5D;AAEW,QAAA,MAAM,GAAG,IAAA,2BAAM,EAAC,qBAAS,CAAC,+EAAa,MAChD,EAAW,IACd,KADG,mBAAW,EACb;AAEF,cAAM,CAAC,YAAY,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAE7C,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/Caret/Caret.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from "../Box";
-export declare type CaretProps = BoxProps & {
+export type CaretProps = BoxProps & {
     direction?: "up" | "down" | "left" | "right";
     size?: number;
 };

package/dist/Cell/Cell.d.ts

@@ -1,22 +1,26 @@
 /// <reference types="react" />
 import { BoxProps } from "../Box";
-export declare type CellProps = BoxProps;
-export declare const CELL: {
-    alignItems: string;
-    backgroundColor: string;
-    borderColor: string;
-    borderStyle: string;
-    borderWidth: string;
-    color: string;
-    display: string;
-    fontFamily: string;
-    fontSize: number[];
-    lineHeight: number;
-    px: number;
-    py: number;
-    transition: string;
+export declare const CELL_VARIANTS: {
+    default: {
+        fontSize: number[];
+        px: number;
+        py: number;
+    };
+    small: {
+        fontSize: number[];
+        px: number;
+        py: number;
+    };
+};
+type CellVariant = keyof typeof CELL_VARIANTS;
+export type CellProps = BoxProps & {
+    variant?: CellVariant;
 };
 export declare const cellFocusMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const cellMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare const Cell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & import("../Box").TextColorProps & import("../Box").TransitionProps & {
     children?: import("react").ReactNode;
+} & {
+    variant?: "small" | "default" | undefined;
 }, never>;
+export {};

package/dist/Cell/Cell.js

@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -38,28 +27,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Cell = exports.cellFocusMixin = exports.CELL = void 0;
+exports.Cell = exports.cellMixin = exports.cellFocusMixin = exports.CELL_VARIANTS = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
+var styled_system_1 = require("styled-system");
 var theme_get_1 = require("@styled-system/theme-get");
 var Box_1 = require("../Box");
-exports.CELL = {
-    alignItems: "center",
-    backgroundColor: "background",
-    borderColor: "border",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    color: "primary",
-    display: "flex",
-    fontFamily: "body",
-    fontSize: [2, 2, 3],
-    lineHeight: 2,
-    px: 6,
-    py: 4,
-    transition: "box-shadow 250ms ease",
+exports.CELL_VARIANTS = {
+    default: {
+        fontSize: [2, 2, 3],
+        px: 6,
+        py: 4,
+    },
+    small: {
+        fontSize: [0, 0, 1],
+        px: 3,
+        py: 2,
+    },
 };
 exports.cellFocusMixin = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  outline: 0;\n  box-shadow: inset 0 0 0 ", " ", ";\n"], ["\n  outline: 0;\n  box-shadow: inset 0 0 0 ", " ", ";\n"])), (0, theme_get_1.themeGet)("space.1"), (0, theme_get_1.themeGet)("colors.accent"));
-exports.Cell = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:focus {\n    ", "\n  }\n"], ["\n  &:focus {\n    ", "\n  }\n"])), exports.cellFocusMixin);
-exports.Cell.defaultProps = __assign({}, exports.CELL);
+exports.cellMixin = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-color: ", ";\n  border-style: solid;\n  border-width: 1px;\n  color: ", ";\n  display: flex;\n  font-family: ", ";\n  line-height: ", ";\n  transition: box-shadow 250ms ease;\n\n  ", "\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-color: ", ";\n  border-style: solid;\n  border-width: 1px;\n  color: ", ";\n  display: flex;\n  font-family: ", ";\n  line-height: ", ";\n  transition: box-shadow 250ms ease;\n\n  ", "\n  ", "\n"])), (0, theme_get_1.themeGet)("colors.background"), (0, theme_get_1.themeGet)("colors.border"), (0, theme_get_1.themeGet)("colors.primary"), (0, theme_get_1.themeGet)("fonts.body"), (0, theme_get_1.themeGet)("lineHeights.2"), (0, styled_system_1.variant)({ variants: exports.CELL_VARIANTS }), Box_1.boxMixin);
+exports.Cell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n\n  &:focus {\n    ", "\n  }\n"], ["\n  ", "\n\n  &:focus {\n    ", "\n  }\n"])), exports.cellMixin, exports.cellFocusMixin);
+exports.Cell.defaultProps = { variant: "default" };
 exports.Cell.displayName = "Cell";
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=Cell.js.map

package/dist/Cell/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Cell/Cell.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAChD,sDAAoD;AACpD,8BAAuC;AAI1B,QAAA,IAAI,GAAG;IAClB,UAAU,EAAE,QAAQ;IACpB,eAAe,EAAE,YAAY;IAC7B,WAAW,EAAE,QAAQ;IACrB,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,KAAK;IAClB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnB,UAAU,EAAE,CAAC;IACb,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,UAAU,EAAE,uBAAuB;CACpC,CAAC;AAEW,QAAA,cAAc,OAAG,uBAAG,6HAAA,6CAEL,EAAmB,GAAI,EAAyB,KAC3E,KAD2B,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAAI,IAAA,oBAAQ,EAAC,eAAe,CAAC,EAC1E;AAEW,QAAA,IAAI,GAAG,IAAA,2BAAM,EAAC,SAAG,CAAC,mGAAW,qBAEpC,EAAc,SAEnB,KAFK,sBAAc,EAElB;AAEF,YAAI,CAAC,YAAY,gBAAQ,YAAI,CAAE,CAAC;AAEhC,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Cell/Cell.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAChD,+CAAwC;AACxC,sDAAoD;AACpD,8BAA4C;AAE/B,QAAA,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACnB,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,CAAC;KACN;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACnB,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,CAAC;KACN;CACF,CAAC;AAQW,QAAA,cAAc,OAAG,uBAAG,6HAAA,6CAEL,EAAmB,GAAI,EAAyB,KAC3E,KAD2B,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAAI,IAAA,oBAAQ,EAAC,eAAe,CAAC,EAC1E;AAEW,QAAA,SAAS,OAAG,uBAAG,sUAAA,gDAEN,EAA6B,qBACjC,EAAyB,4DAGhC,EAA0B,sCAEpB,EAAsB,oBACtB,EAAyB,+CAGtC,EAAoC,MACpC,EAAQ,IACX,KAZqB,IAAA,oBAAQ,EAAC,mBAAmB,CAAC,EACjC,IAAA,oBAAQ,EAAC,eAAe,CAAC,EAGhC,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EAEpB,IAAA,oBAAQ,EAAC,YAAY,CAAC,EACtB,IAAA,oBAAQ,EAAC,eAAe,CAAC,EAGtC,IAAA,uBAAO,EAAC,EAAE,QAAQ,EAAE,qBAAa,EAAE,CAAC,EACpC,cAAQ,EACV;AAEW,QAAA,IAAI,GAAG,2BAAM,CAAC,GAAG,6GAAW,MACrC,EAAS,uBAGP,EAAc,SAEnB,KALG,iBAAS,EAGP,sBAAc,EAElB;AAEF,YAAI,CAAC,YAAY,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAE3C,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Clear/Clear.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { RemoveProps } from "../Remove";
-export declare type ClearProps = RemoveProps;
+export type ClearProps = RemoveProps & {
+    variant?: "small" | "default";
+};
 export declare const clearHoverMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare const clearFocusMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare const Clear: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & import("..").TextColorProps & import("..").TransitionProps & {
@@ -11,4 +13,6 @@ export declare const Clear: import("styled-components").StyledComponent<"button"
 } & {
     hover?: boolean | undefined;
     focus?: boolean | undefined;
+} & {
+    variant?: "small" | "default" | undefined;
 }, never>;

package/dist/Clear/Clear.js

@@ -33,12 +33,22 @@ var theme_get_1 = require("@styled-system/theme-get");
 var Remove_1 = require("../Remove");
 exports.clearHoverMixin = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &::before,\n  &::after {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n\n  &::before,\n  &::after {\n    background-color: ", ";\n  }\n"])), (0, theme_get_1.themeGet)("colors.tertiary"), (0, theme_get_1.themeGet)("colors.primary"));
 exports.clearFocusMixin = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &,\n  &:hover {\n    background-color: ", ";\n\n    &::before,\n    &::after {\n      background-color: ", ";\n    }\n  }\n"], ["\n  &,\n  &:hover {\n    background-color: ", ";\n\n    &::before,\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), (0, theme_get_1.themeGet)("colors.tertiary"), (0, theme_get_1.themeGet)("colors.primary"));
-exports.Clear = (0, styled_components_1.default)(Remove_1.Remove)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  transition: color 250ms, background-color 250ms;\n\n  &::before,\n  &::after {\n    width: ", ";\n    height: 1px;\n    background-color: ", ";\n    transition: none;\n  }\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n"], ["\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: 50%;\n  background-color: ", ";\n  transition: color 250ms, background-color 250ms;\n\n  &::before,\n  &::after {\n    width: ", ";\n    height: 1px;\n    background-color: ", ";\n    transition: none;\n  }\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n"])), (0, theme_get_1.themeGet)("space.6"), (0, theme_get_1.themeGet)("space.6"), (0, theme_get_1.themeGet)("colors.hint"), (0, theme_get_1.themeGet)("space.4"), (0, theme_get_1.themeGet)("colors.secondary"), function (_a) {
+exports.Clear = (0, styled_components_1.default)(Remove_1.Remove)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 50%;\n  background-color: ", ";\n  transition: color 250ms, background-color 250ms;\n\n  &::before,\n  &::after {\n    height: 1px;\n    background-color: ", ";\n    transition: none;\n  }\n\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n"], ["\n  border-radius: 50%;\n  background-color: ", ";\n  transition: color 250ms, background-color 250ms;\n\n  &::before,\n  &::after {\n    height: 1px;\n    background-color: ", ";\n    transition: none;\n  }\n\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n  }\n\n  ", "\n  &:focus {\n    ", "\n  }\n"])), (0, theme_get_1.themeGet)("colors.hint"), (0, theme_get_1.themeGet)("colors.secondary"), function (_a) {
+    var variant = _a.variant;
+    if (variant === "small") {
+        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        min-width: ", ";\n        min-height: ", ";\n\n        &::before,\n        &::after {\n          width: ", ";\n        }\n      "], ["\n        min-width: ", ";\n        min-height: ", ";\n\n        &::before,\n        &::after {\n          width: ", ";\n        }\n      "])), (0, theme_get_1.themeGet)("space.5"), (0, theme_get_1.themeGet)("space.5"), (0, theme_get_1.themeGet)("space.3"));
+    }
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      min-width: ", ";\n      min-height: ", ";\n\n      &::before,\n      &::after {\n        width: ", ";\n      }\n    "], ["\n      min-width: ", ";\n      min-height: ", ";\n\n      &::before,\n      &::after {\n        width: ", ";\n      }\n    "])), (0, theme_get_1.themeGet)("space.6"), (0, theme_get_1.themeGet)("space.6"), (0, theme_get_1.themeGet)("space.4"));
+}, function (_a) {
     var hover = _a.hover;
     return hover && exports.clearHoverMixin;
 }, exports.clearHoverMixin, function (_a) {
     var focus = _a.focus;
     return focus && exports.clearFocusMixin;
 }, exports.clearFocusMixin);
-var templateObject_1, templateObject_2, templateObject_3;
+exports.Clear.displayName = "Clear";
+exports.Clear.defaultProps = {
+    variant: "default",
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=Clear.js.map

package/dist/Clear/Clear.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clear.js","sourceRoot":"","sources":["../../src/Clear/Clear.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAChD,sDAAoD;AACpD,oCAAgD;AAInC,QAAA,eAAe,OAAG,uBAAG,mKAAA,wBACZ,EAA2B,yDAIzB,EAA0B,UAEjD,KANqB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAIzB,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EAEhD;AAEW,QAAA,eAAe,OAAG,uBAAG,qMAAA,6CAGV,EAA2B,+DAIzB,EAA0B,iBAGnD,KAPuB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAIzB,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EAGlD;AAEW,QAAA,KAAK,GAAG,IAAA,2BAAM,EAAC,eAAM,CAAC,6ZAAA,iBACpB,EAAmB,mBAClB,EAAmB,gDAEb,EAAuB,kGAKhC,EAAmB,6CAER,EAA4B,qCAIhD,EAAuC,qBAErC,EAAe,aAGjB,EAAuC,qBAErC,EAAe,SAEpB,KAvBc,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAClB,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAEb,IAAA,oBAAQ,EAAC,aAAa,CAAC,EAKhC,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAER,IAAA,oBAAQ,EAAC,kBAAkB,CAAC,EAIhD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,uBAAe;AAAxB,CAAwB,EAErC,uBAAe,EAGjB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,uBAAe;AAAxB,CAAwB,EAErC,uBAAe,EAEnB"}
+{"version":3,"file":"Clear.js","sourceRoot":"","sources":["../../src/Clear/Clear.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAChD,sDAAoD;AACpD,oCAAgD;AAInC,QAAA,eAAe,OAAG,uBAAG,mKAAA,wBACZ,EAA2B,yDAIzB,EAA0B,UAEjD,KANqB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAIzB,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EAEhD;AAEW,QAAA,eAAe,OAAG,uBAAG,qMAAA,6CAGV,EAA2B,+DAIzB,EAA0B,iBAGnD,KAPuB,IAAA,oBAAQ,EAAC,iBAAiB,CAAC,EAIzB,IAAA,oBAAQ,EAAC,gBAAgB,CAAC,EAGlD;AAEW,QAAA,KAAK,GAAG,IAAA,2BAAM,EAAC,eAAM,CAAC,4WAAY,+CAEzB,EAAuB,+HAMrB,EAA4B,qCAIhD,EAsBD,QAEC,EAAuC,qBAErC,EAAe,aAGjB,EAAuC,qBAErC,EAAe,SAEpB,KA3CqB,IAAA,oBAAQ,EAAC,aAAa,CAAC,EAMrB,IAAA,oBAAQ,EAAC,kBAAkB,CAAC,EAIhD,UAAC,EAAW;QAAT,OAAO,aAAA;IACV,IAAI,OAAO,KAAK,OAAO,EAAE;QACvB,WAAO,uBAAG,gNAAA,uBACK,EAAmB,yBAClB,EAAmB,gEAItB,EAAmB,sBAE/B,KAPc,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAClB,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAItB,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAE9B;KACH;IAED,WAAO,uBAAG,kMAAA,qBACK,EAAmB,uBAClB,EAAmB,0DAItB,EAAmB,kBAE/B,KAPc,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAClB,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAItB,IAAA,oBAAQ,EAAC,SAAS,CAAC,EAE9B;AACJ,CAAC,EAEC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,uBAAe;AAAxB,CAAwB,EAErC,uBAAe,EAGjB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,IAAI,uBAAe;AAAxB,CAAwB,EAErC,uBAAe,EAEnB;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,aAAK,CAAC,YAAY,GAAG;IACnB,OAAO,EAAE,SAAS;CACnB,CAAC"}

package/dist/ClearableInput/ClearableInput.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { InputProps } from "../Input";
 import { BoxSpatialProps } from "../Box";
-export declare type ClearableInputProps = BoxSpatialProps & Omit<InputProps, "onChange" | "value"> & {
+export type ClearableInputProps = BoxSpatialProps & Omit<InputProps, "onChange" | "value"> & {
     onChange?(value: string): void;
     onClear?(): void;
     value?: string;

package/dist/ClearableInput/ClearableInput.js

@@ -70,7 +70,6 @@ var compose_react_refs_1 = __importDefault(require("@seznam/compose-react-refs")
 var Input_1 = require("../Input");
 var Box_1 = require("../Box");
 var Clear_1 = require("../Clear");
-var Cell_1 = require("../Cell");
 var theme_1 = require("../theme");
 var CLEARABLE_BUTTON_WITH_MARGINS = "".concat(parseFloat((0, theme_1.space)(4)) * 2 + parseFloat((0, theme_1.space)(6))).concat(theme_1.SPACE_SCALE_UNIT);
 exports.ClearableInput = react_1.default.forwardRef(function (_a, forwardedRef) {
@@ -80,7 +79,7 @@ exports.ClearableInput = react_1.default.forwardRef(function (_a, forwardedRef)
     _b = _a.value, 
     // Above are spatial props for wrapper, remainder
     // is split off into input
-    value = _b === void 0 ? "" : _b, onChange = _a.onChange, onClear = _a.onClear, rest = __rest(_a, ["m", "mt", "mr", "mb", "ml", "minWidth", "width", "flex", "flexGrow", "flexShrink", "flexBasis", "value", "onChange", "onClear"]);
+    value = _b === void 0 ? "" : _b, onChange = _a.onChange, onClear = _a.onClear, variant = _a.variant, rest = __rest(_a, ["m", "mt", "mr", "mb", "ml", "minWidth", "width", "flex", "flexGrow", "flexShrink", "flexBasis", "value", "onChange", "onClear", "variant"]);
     var ref = (0, react_1.useRef)(null);
     var _c = __read((0, react_1.useState)(value), 2), controlledValue = _c[0], setValue = _c[1];
     var handleClick = (0, react_1.useCallback)(function () {
@@ -108,8 +107,8 @@ exports.ClearableInput = react_1.default.forwardRef(function (_a, forwardedRef)
         flexShrink: flexShrink,
         flexBasis: flexBasis,
     }),
-        react_1.default.createElement(Input_1.Input, __assign({}, rest, { ref: (0, compose_react_refs_1.default)(ref, forwardedRef), width: "100%", value: controlledValue, onChange: handleChange, px: 0, pl: Cell_1.CELL.px, pr: CLEARABLE_BUTTON_WITH_MARGINS })),
-        controlledValue && (react_1.default.createElement(Clear_1.Clear, { onClick: handleClick, position: "absolute", top: "50%", right: 0, mx: 4, backgroundColor: "hint", borderRadius: "50%", type: "reset", style: { transform: "translateY(-50%)" } }))));
+        react_1.default.createElement(Input_1.Input, __assign({}, rest, { ref: (0, compose_react_refs_1.default)(ref, forwardedRef), variant: variant, width: "100%", value: controlledValue, onChange: handleChange, pr: CLEARABLE_BUTTON_WITH_MARGINS })),
+        controlledValue && (react_1.default.createElement(Clear_1.Clear, { variant: variant, onClick: handleClick, position: "absolute", top: "50%", right: 0, mx: 4, backgroundColor: "hint", borderRadius: "50%", type: "reset", style: { transform: "translateY(-50%)" } }))));
 });
 exports.ClearableInput.displayName = "ClearableInput";
 //# sourceMappingURL=ClearableInput.js.map

package/dist/ClearableInput/ClearableInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearableInput.js","sourceRoot":"","sources":["../../src/ClearableInput/ClearableInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ClearableInput.js","sourceRoot":"","sources":["../../src/ClearableInput/ClearableInput.tsx"],"names":[],"mappings":"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"}

package/dist/Clickable/Clickable.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ResponsiveValue } from "styled-system";
 import { BoxProps } from "../Box";
-export declare type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> & BoxProps & {
+export type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> & BoxProps & {
     cursor?: ResponsiveValue<string>;
     textDecoration?: ResponsiveValue<string>;
 };

package/dist/Clickable/Clickable.js

@@ -8,17 +8,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Clickable = void 0;
+var theme_get_1 = __importDefault(require("@styled-system/theme-get"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var styled_system_1 = require("styled-system");
 var Box_1 = require("../Box");
 var cursor = (0, styled_system_1.system)({ cursor: true });
 var textDecoration = (0, styled_system_1.system)({ textDecoration: true });
-exports.Clickable = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n  ", "\n"], ["\n  appearance: none;\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n  ", "\n"])), (0, styled_system_1.compose)(Box_1.boxMixin, cursor, textDecoration));
-exports.Clickable.defaultProps = {
-    fontFamily: "body",
-    fontSize: 2,
-    lineHeight: 0,
-    color: "primary",
-};
+exports.Clickable = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  appearance: none;\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n  ", "\n"])), (0, theme_get_1.default)("fonts.body"), (0, theme_get_1.default)("fontSizes.2"), (0, theme_get_1.default)("lineHeights.0"), (0, theme_get_1.default)("colors.primary"), (0, styled_system_1.compose)(Box_1.boxMixin, cursor, textDecoration));
 var templateObject_1;
 //# sourceMappingURL=Clickable.js.map

package/dist/Clickable/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.js","sourceRoot":"","sources":["../../src/Clickable/Clickable.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAuC;AACvC,+CAAiE;AACjE,8BAA4C;AAE5C,IAAM,MAAM,GAAG,IAAA,sBAAM,EAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;AACxC,IAAM,cAAc,GAAG,IAAA,sBAAM,EAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;AAQ3C,QAAA,SAAS,GAAG,2BAAM,CAAC,MAAM,mKAAgB,0FAKlD,EAAyC,IAC5C,KADG,IAAA,uBAAO,EAAC,cAAQ,EAAE,MAAM,EAAE,cAAc,CAAC,EAC3C;AAEF,iBAAS,CAAC,YAAY,GAAG;IACvB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,CAAC;IACb,KAAK,EAAE,SAAS;CACjB,CAAC"}
+{"version":3,"file":"Clickable.js","sourceRoot":"","sources":["../../src/Clickable/Clickable.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,uEAAgD;AAChD,wEAAuC;AACvC,+CAAiE;AACjE,8BAA4C;AAE5C,IAAM,MAAM,GAAG,IAAA,sBAAM,EAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;AACxC,IAAM,cAAc,GAAG,IAAA,sBAAM,EAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;AAQ3C,QAAA,SAAS,GAAG,2BAAM,CAAC,MAAM,qPAAgB,uGAKrC,EAAsB,kBACxB,EAAuB,oBACrB,EAAyB,cAC/B,EAA0B,SAEjC,EAAyC,IAC5C,KANgB,IAAA,mBAAQ,EAAC,YAAY,CAAC,EACxB,IAAA,mBAAQ,EAAC,aAAa,CAAC,EACrB,IAAA,mBAAQ,EAAC,eAAe,CAAC,EAC/B,IAAA,mBAAQ,EAAC,gBAAgB,CAAC,EAEjC,IAAA,uBAAO,EAAC,cAAQ,EAAE,MAAM,EAAE,cAAc,CAAC,EAC3C"}

package/dist/Confirm/Confirm.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BoxProps } from "../Box";
-export declare type ConfirmProps = BoxProps & {
+export type ConfirmProps = BoxProps & {
     children?: string;
     onCancel(): void;
     onConfirm(): void;

package/dist/Confirm/useConfirm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ModalProps } from "../Modal";
 import { ConfirmProps } from "./Confirm";
-export declare type UseConfirm = {
+export type UseConfirm = {
     onConfirm(): void;
     onCancel?(): void;
 };

package/dist/ContextMenu/ContextMenu.d.ts

@@ -16,7 +16,7 @@ export declare const Toggle: import("styled-components").StyledComponent<"button
     borderColor: string;
     backgroundColor: string;
 }, "backgroundColor" | "border" | "borderColor" | "p">;
-export declare type ContextMenuProps = BoxProps & {
+export type ContextMenuProps = BoxProps & {
     onOpen?(): void;
     onClose?(): void;
 };

package/dist/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from "../Box";
-export declare type DividerProps = BoxProps;
+export type DividerProps = BoxProps;
 export declare const Divider: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & import("../Box").TextColorProps & import("../Box").TransitionProps & {
     children?: import("react").ReactNode;
 }, never>;

package/dist/Dropdown/Dropdown.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { BoxProps } from "../Box";
 import { Placement } from "@popperjs/core";
-export declare type DropdownPaneOptions = React.ReactNode;
-export declare type DropdownRenderProps = ({ handleClose, }: {
+export type DropdownPaneOptions = React.ReactNode;
+export type DropdownRenderProps = ({ handleClose, }: {
     handleClose(): void;
 }) => DropdownPaneOptions;
 export declare const isDropdownRenderProps: (children: DropdownPaneOptions | DropdownRenderProps) => children is DropdownRenderProps;
-export declare type DropdownProps = BoxProps & {
+export type DropdownProps = BoxProps & {
     label: string | JSX.Element | ((anchorProps: {
         open: boolean;
         ref: React.MutableRefObject<HTMLButtonElement | null>;

package/dist/Ellipsis/Ellipsis.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BoxProps } from "../Box";
-export declare type EllipsisProps = BoxProps & {
+export type EllipsisProps = BoxProps & {
     size?: string;
     spacing?: number | string;
     orientation?: "horizontal" | "vertical";

package/dist/EmptyFrame/EmptyFrame.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BoxProps } from "../Box";
-export declare type EmptyFrameProps = BoxProps & {
+export type EmptyFrameProps = BoxProps & {
     color?: string;
     outline?: boolean;
     strokeWidth?: number;