baseui 11.2.1 → 12.0.0

package/tabs-motion/tabs.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,25 +11,29 @@ var React = _interopRequireWildcard(require("react"));
 
 var _reactUid = require("react-uid");
 
-var _index = require("../styles/index.js");
+var _styles = require("../styles");
 
-var _overrides = require("../helpers/overrides.js");
+var _overrides = require("../helpers/overrides");
 
-var _focusVisible = require("../utils/focusVisible.js");
+var _focusVisible = require("../utils/focusVisible");
 
-var _constants = require("./constants.js");
+var _constants = require("./constants");
 
-var _styledComponents = require("./styled-components.js");
+var _styledComponents = require("./styled-components");
 
-var _utils = require("./utils.js");
+var _utils = require("./utils");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _excluded = ["childKey", "childIndex", "activeKey", "orientation", "activeTabRef", "updateHighlight", "parseKeyDown", "activateOnFocus", "uid", "disabled", "sharedStylingProps", "onChange"],
+    _excluded2 = ["artwork", "overrides", "tabRef", "onClick", "title"],
+    _excluded3 = ["childKey", "childIndex", "activeKey", "uid", "sharedStylingProps", "renderAll"];
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -37,7 +41,7 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
@@ -45,7 +49,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -55,7 +59,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -206,7 +210,11 @@ function Tabs(_ref) {
   React.useEffect(function () {
     // Flow needs this condition pulled out.
     if (activeTabRef.current) {
-      if ((0, _utils.isHorizontal)(orientation) ? activeTabRef.current.parentNode.scrollWidth > activeTabRef.current.parentNode.clientWidth : activeTabRef.current.parentNode.scrollHeight > activeTabRef.current.parentNode.clientHeight) {
+      if ((0, _utils.isHorizontal)(orientation) ? // @ts-expect-error todo(flow->ts) maybe parentElement?
+      activeTabRef.current.parentNode.scrollWidth > // @ts-expect-error todo(flow->ts) maybe parentElement?
+      activeTabRef.current.parentNode.clientWidth : // @ts-expect-error todo(flow->ts) maybe parentElement?
+      activeTabRef.current.parentNode.scrollHeight > // @ts-expect-error todo(flow->ts) maybe parentElement?
+      activeTabRef.current.parentNode.clientHeight) {
         if (keyUpdated > 1) {
           activeTabRef.current.scrollIntoView({
             behavior: 'smooth',
@@ -226,7 +234,7 @@ function Tabs(_ref) {
   }; // Helper for parsing directional keys
   // TODO(WPT-6473): move to universal keycode aliases
 
-  var _useStyletron = (0, _index.useStyletron)(),
+  var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       theme = _useStyletron2[1];
 
@@ -326,7 +334,7 @@ function InternalTab(_ref2) {
       disabled = _ref2.disabled,
       sharedStylingProps = _ref2.sharedStylingProps,
       onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, ["childKey", "childIndex", "activeKey", "orientation", "activeTabRef", "updateHighlight", "parseKeyDown", "activateOnFocus", "uid", "disabled", "sharedStylingProps", "onChange"]);
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -337,7 +345,7 @@ function InternalTab(_ref2) {
       tabRef = props.tabRef,
       _onClick = props.onClick,
       title = props.title,
-      restProps = _objectWithoutProperties(props, ["artwork", "overrides", "tabRef", "onClick", "title"]); // A way to share our internal activeTabRef via the "tabRef" prop.
+      restProps = _objectWithoutProperties(props, _excluded2); // A way to share our internal activeTabRef via the "tabRef" prop.
 
 
   var ref = React.useRef();
@@ -403,6 +411,7 @@ function InternalTab(_ref2) {
       setFocusVisible(false);
     }
   }, [focusVisible]); // Keyboard focus management
+  // @ts-expect-error todo(flow->ts): deps are required
 
   var handleKeyDown = React.useCallback(function (event) {
     // WAI-ARIA 1.1
@@ -490,7 +499,7 @@ function InternalTabPanel(_ref3) {
       uid = _ref3.uid,
       sharedStylingProps = _ref3.sharedStylingProps,
       renderAll = _ref3.renderAll,
-      props = _objectWithoutProperties(_ref3, ["childKey", "childIndex", "activeKey", "uid", "sharedStylingProps", "renderAll"]);
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;

package/tabs-motion/types.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants';
+import type { Override } from '../helpers/overrides';
+import type { IconProps } from '../icon';
+export declare type Orientation = typeof ORIENTATION[keyof typeof ORIENTATION];
+export declare type Fill = typeof FILL[keyof typeof FILL];
+export declare type StateChange = typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE];
+export declare type TabsOverrides = {
+    Root?: Override;
+    TabList?: Override;
+    TabHighlight?: Override;
+    TabBorder?: Override;
+};
+export declare type TabOverrides = {
+    Tab?: Override;
+    ArtworkContainer?: Override;
+    TabPanel?: Override;
+};
+export declare type StatefulTabsState = {
+    activeKey: React.Key;
+};
+export declare type StatefulTabsAction = {
+    type: StateChange;
+    payload: React.Key;
+};
+export declare type StatefulTabsReducer = (state: StatefulTabsState, action: StatefulTabsAction) => StatefulTabsState;
+export declare type onChange = (params: {
+    activeKey: React.Key;
+}) => void;
+export declare type TabsProps = {
+    children: React.ReactNode;
+    activeKey?: React.Key;
+    disabled?: boolean;
+    fill?: Fill;
+    orientation?: Orientation;
+    activateOnFocus?: boolean;
+    onChange?: onChange;
+    overrides?: TabsOverrides;
+    renderAll?: boolean;
+    uid?: string;
+};
+export declare type StatefulTabsProps = {
+    initialState?: StatefulTabsState;
+    stateReducer?: StatefulTabsReducer;
+} & TabsProps;
+export declare type TabProps = {
+    title?: React.ReactNode;
+    key?: React.Key;
+    tabRef?: React.Ref<HTMLButtonElement>;
+    overrides?: TabOverrides;
+    children?: React.ReactNode;
+    artwork?: React.ComponentType<{
+        size: IconProps['size'];
+        color: IconProps['color'];
+    } & IconProps>;
+    disabled?: boolean;
+};

package/tabs-motion/types.js

@@ -1,11 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-var React = _interopRequireWildcard(require("react"));
-
-var _constants = require("./constants.js");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/tabs-motion/utils.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { Fill, Orientation } from './types';
+export declare const getTabId: (uid: string, key: React.Key) => string;
+export declare const getTabPanelId: (uid: string, key: React.Key) => string;
+export declare const isHorizontal: (orientation: Orientation) => boolean;
+export declare const isVertical: (orientation: Orientation) => boolean;
+export declare const isRTL: (direction: string) => boolean;
+export declare const isIntrinsic: (fill: Fill) => boolean;
+export declare const isFixed: (fill: Fill) => boolean;

package/tabs-motion/utils.js

@@ -1,19 +1,11 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isFixed = exports.isIntrinsic = exports.isRTL = exports.isVertical = exports.isHorizontal = exports.getTabPanelId = exports.getTabId = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _constants = require("./constants.js");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+exports.isVertical = exports.isRTL = exports.isIntrinsic = exports.isHorizontal = exports.isFixed = exports.getTabPanelId = exports.getTabId = void 0;
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _constants = require("./constants");
 
 /*
 Copyright (c) Uber Technologies, Inc.

package/tag/constants.d.ts

@@ -0,0 +1,27 @@
+export declare const SIZE: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+export declare const VARIANT: Readonly<{
+    readonly solid: "solid";
+    readonly light: "light";
+    readonly outlined: "outlined";
+}>;
+export declare const KIND: {
+    readonly custom: "custom";
+    readonly neutral: "neutral";
+    readonly primary: "primary";
+    readonly accent: "accent";
+    readonly positive: "positive";
+    readonly warning: "warning";
+    readonly negative: "negative";
+    readonly black: "black";
+    readonly blue: "blue";
+    readonly green: "green";
+    readonly red: "red";
+    readonly yellow: "yellow";
+    readonly orange: "orange";
+    readonly purple: "purple";
+    readonly brown: "brown";
+};

package/tag/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KIND = exports.VARIANT = exports.SIZE = void 0;
+exports.VARIANT = exports.SIZE = exports.KIND = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -21,7 +21,8 @@ var VARIANT = Object.freeze({
   solid: 'solid',
   light: 'light',
   outlined: 'outlined'
-});
+}); // todo: dynamic identity map generation
+
 exports.VARIANT = VARIANT;
 var KIND = {
   custom: 'custom',

package/tag/index.d.ts

@@ -1,70 +1,4 @@
-import * as React from 'react';
-import { StyletronComponent } from 'styletron-react';
-import { Override } from '../overrides';
-
-export declare const KIND: {
-  custom: 'custom';
-  neutral: 'neutral';
-  primary: 'primary';
-  accent: 'accent';
-  positive: 'positive';
-  warning: 'warning';
-  negative: 'negative';
-  white: 'white';
-  black: 'black';
-  blue: 'blue';
-  red: 'red';
-  orange: 'orange';
-  yellow: 'yellow';
-  green: 'green';
-  purple: 'purple';
-  brown: 'brown';
-};
-
-export declare const VARIANT: {
-  solid: 'solid';
-  light: 'light';
-  outlined: 'outlined';
-};
-
-export declare const SIZE: {
-  small: 'small';
-  medium: 'medium';
-  large: 'large';
-};
-
-export interface TagOverrides {
-  Root?: Override<any>;
-  Action?: Override<any>;
-  ActionIcon?: Override<any>;
-  StartEnhancerContainer?: Override<any>;
-  Text?: Override<any>;
-}
-
-export interface TagProps {
-  overrides?: TagOverrides;
-  closeable?: boolean;
-  disabled?: boolean;
-  isFocused?: boolean;
-  isHovered?: boolean;
-  kind?: typeof KIND[keyof typeof KIND];
-  variant?: typeof VARIANT[keyof typeof VARIANT];
-  children?: React.ReactNode;
-  title?: string;
-  color?: string;
-  size?: typeof SIZE[keyof typeof SIZE];
-  onActionClick?: (e: Event, children?: React.ReactNode) => any;
-  onActionKeyDown?: (e: Event, children?: React.ReactNode) => any;
-  onClick?: (event: Event) => any;
-  onKeyDown?: (event: Event) => any;
-  startEnhancer?: () => React.ReactNode;
-}
-
-export class Tag extends React.Component<TagProps> {
-  handleKeyDown(event: KeyboardEvent): void;
-  handleActionKeyDown(event: KeyboardEvent): void;
-}
-
-export declare const StyledRoot: StyletronComponent<any, any>;
-export declare const StyledAction: StyletronComponent<any, any>;
-export declare const StyledText: StyletronComponent<any, any>;
+export { default as Tag } from './tag';
+export { Root as StyledRoot, Action as StyledAction, Text as StyledText, } from './styled-components';
+export { KIND, VARIANT, SIZE } from './constants';
+export * from './types';

package/tag/index.js

@@ -3,16 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Tag", {
+var _exportNames = {
+  Tag: true,
+  StyledRoot: true,
+  StyledAction: true,
+  StyledText: true,
+  KIND: true,
+  VARIANT: true,
+  SIZE: true
+};
+Object.defineProperty(exports, "KIND", {
   enumerable: true,
   get: function get() {
-    return _tag.default;
+    return _constants.KIND;
   }
 });
-Object.defineProperty(exports, "StyledRoot", {
+Object.defineProperty(exports, "SIZE", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.Root;
+    return _constants.SIZE;
   }
 });
 Object.defineProperty(exports, "StyledAction", {
@@ -21,35 +30,49 @@ Object.defineProperty(exports, "StyledAction", {
     return _styledComponents.Action;
   }
 });
-Object.defineProperty(exports, "StyledText", {
+Object.defineProperty(exports, "StyledRoot", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.Text;
+    return _styledComponents.Root;
   }
 });
-Object.defineProperty(exports, "KIND", {
+Object.defineProperty(exports, "StyledText", {
   enumerable: true,
   get: function get() {
-    return _constants.KIND;
+    return _styledComponents.Text;
   }
 });
-Object.defineProperty(exports, "VARIANT", {
+Object.defineProperty(exports, "Tag", {
   enumerable: true,
   get: function get() {
-    return _constants.VARIANT;
+    return _tag.default;
   }
 });
-Object.defineProperty(exports, "SIZE", {
+Object.defineProperty(exports, "VARIANT", {
   enumerable: true,
   get: function get() {
-    return _constants.SIZE;
+    return _constants.VARIANT;
   }
 });
 
-var _tag = _interopRequireDefault(require("./tag.js"));
+var _tag = _interopRequireDefault(require("./tag"));
 
-var _styledComponents = require("./styled-components.js");
+var _styledComponents = require("./styled-components");
 
-var _constants = require("./constants.js");
+var _constants = require("./constants");
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/tag/styled-components.d.ts

@@ -0,0 +1,6 @@
+import type { SharedPropsArg } from './types';
+export declare function customOnRamp(color?: string, unit?: string): string;
+export declare const Action: import("styletron-react").StyletronComponent<"span", SharedPropsArg>;
+export declare const StartEnhancerContainer: import("styletron-react").StyletronComponent<"div", SharedPropsArg>;
+export declare const Text: import("styletron-react").StyletronComponent<"span", SharedPropsArg>;
+export declare const Root: import("styletron-react").StyletronComponent<"span", SharedPropsArg>;

package/tag/styled-components.js

@@ -3,26 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Text = exports.StartEnhancerContainer = exports.Root = exports.Action = void 0;
 exports.customOnRamp = customOnRamp;
-exports.Root = exports.Text = exports.StartEnhancerContainer = exports.Action = void 0;
 
 var _tint = _interopRequireDefault(require("polished/lib/color/tint.js"));
 
 var _shade = _interopRequireDefault(require("polished/lib/color/shade.js"));
 
-var _index = require("../styles/index.js");
+var _styles = require("../styles");
 
-var _constants = require("./constants.js");
+var _constants = require("./constants");
 
-var _index2 = require("../tokens/index.js");
+var _tokens = require("../tokens");
 
 var _neutralColorStates, _primaryColorStates, _accentColorStates, _positiveColorStates, _warningColorStates, _negativeColorStates, _orangeColorStates, _purpleColorStates, _brownColorStates, _customColorStates, _colorMap;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -192,59 +192,59 @@ var negativeColorStates = (_negativeColorStates = {}, _defineProperty(_negativeC
 }), _negativeColorStates);
 var orangeColorStates = (_orangeColorStates = {}, _defineProperty(_orangeColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
-    color: pick(theme, _index2.colors.orange200, _index2.colors.orange600),
+    color: pick(theme, _tokens.colors.orange200, _tokens.colors.orange600),
     backgroundColor: null,
-    borderColor: pick(theme, _index2.colors.orange200, _index2.colors.orange700)
+    borderColor: pick(theme, _tokens.colors.orange200, _tokens.colors.orange700)
   };
 }), _defineProperty(_orangeColorStates, COLOR_STATE.solid, function (theme, color) {
   return {
-    color: _index2.colors.white,
-    backgroundColor: pick(theme, _index2.colors.orange400, _index2.colors.orange500),
+    color: _tokens.colors.white,
+    backgroundColor: pick(theme, _tokens.colors.orange400, _tokens.colors.orange500),
     borderColor: null
   };
 }), _defineProperty(_orangeColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
-    color: pick(theme, _index2.colors.orange400, _index2.colors.orange300),
+    color: pick(theme, _tokens.colors.orange400, _tokens.colors.orange300),
     backgroundColor: null,
-    borderColor: pick(theme, _index2.colors.orange200, _index2.colors.orange500)
+    borderColor: pick(theme, _tokens.colors.orange200, _tokens.colors.orange500)
   };
 }), _orangeColorStates);
 var purpleColorStates = (_purpleColorStates = {}, _defineProperty(_purpleColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
-    color: pick(theme, _index2.colors.purple200, _index2.colors.purple600),
+    color: pick(theme, _tokens.colors.purple200, _tokens.colors.purple600),
     backgroundColor: null,
-    borderColor: pick(theme, _index2.colors.purple200, _index2.colors.purple700)
+    borderColor: pick(theme, _tokens.colors.purple200, _tokens.colors.purple700)
   };
 }), _defineProperty(_purpleColorStates, COLOR_STATE.solid, function (theme, color) {
   return {
-    color: _index2.colors.white,
-    backgroundColor: pick(theme, _index2.colors.purple400, _index2.colors.purple500),
+    color: _tokens.colors.white,
+    backgroundColor: pick(theme, _tokens.colors.purple400, _tokens.colors.purple500),
     borderColor: null
   };
 }), _defineProperty(_purpleColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
-    color: pick(theme, _index2.colors.purple400, _index2.colors.purple300),
+    color: pick(theme, _tokens.colors.purple400, _tokens.colors.purple300),
     backgroundColor: null,
-    borderColor: pick(theme, _index2.colors.purple200, _index2.colors.purple500)
+    borderColor: pick(theme, _tokens.colors.purple200, _tokens.colors.purple500)
   };
 }), _purpleColorStates);
 var brownColorStates = (_brownColorStates = {}, _defineProperty(_brownColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
-    color: pick(theme, _index2.colors.brown200, _index2.colors.brown600),
+    color: pick(theme, _tokens.colors.brown200, _tokens.colors.brown600),
     backgroundColor: null,
-    borderColor: pick(theme, _index2.colors.brown200, _index2.colors.brown700)
+    borderColor: pick(theme, _tokens.colors.brown200, _tokens.colors.brown700)
   };
 }), _defineProperty(_brownColorStates, COLOR_STATE.solid, function (theme, color) {
   return {
-    color: _index2.colors.white,
-    backgroundColor: pick(theme, _index2.colors.brown400, _index2.colors.brown500),
+    color: _tokens.colors.white,
+    backgroundColor: pick(theme, _tokens.colors.brown400, _tokens.colors.brown500),
     borderColor: null
   };
 }), _defineProperty(_brownColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
-    color: pick(theme, _index2.colors.brown400, _index2.colors.brown300),
+    color: pick(theme, _tokens.colors.brown400, _tokens.colors.brown300),
     backgroundColor: null,
-    borderColor: pick(theme, _index2.colors.brown200, _index2.colors.brown500)
+    borderColor: pick(theme, _tokens.colors.brown200, _tokens.colors.brown500)
   };
 }), _brownColorStates);
 var customColorStates = (_customColorStates = {}, _defineProperty(_customColorStates, COLOR_STATE.disabled, function (theme, color) {
@@ -274,7 +274,7 @@ var getColorStateFromProps = function getColorStateFromProps(props) {
   return COLOR_STATE.outline;
 };
 
-var Action = (0, _index.styled)('span', function (props) {
+var Action = (0, _styles.styled)('span', function (props) {
   var _SIZE$small$SIZE$medi, _ref;
 
   var $theme = props.$theme,
@@ -290,7 +290,7 @@ var Action = (0, _index.styled)('span', function (props) {
 });
 exports.Action = Action;
 Action.displayName = "Action";
-var StartEnhancerContainer = (0, _index.styled)('div', function (_ref2) {
+var StartEnhancerContainer = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$size = _ref2.$size,
       $size = _ref2$$size === void 0 ? _constants.SIZE.small : _ref2$$size;
@@ -310,7 +310,7 @@ var StartEnhancerContainer = (0, _index.styled)('div', function (_ref2) {
 });
 exports.StartEnhancerContainer = StartEnhancerContainer;
 StartEnhancerContainer.displayName = "StartEnhancerContainer";
-var Text = (0, _index.styled)('span', function (props) {
+var Text = (0, _styles.styled)('span', function (props) {
   var $theme = props.$theme;
   return {
     overflow: 'hidden',
@@ -322,7 +322,7 @@ var Text = (0, _index.styled)('span', function (props) {
 });
 exports.Text = Text;
 Text.displayName = "Text";
-var Root = (0, _index.styled)('span', function (props) {
+var Root = (0, _styles.styled)('span', function (props) {
   var _SIZE$small$SIZE$medi2, _SIZE$small$SIZE$medi3, _SIZE$small$SIZE$medi4;
 
   var $theme = props.$theme,

package/tag/tag.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { TagProps } from './types';
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export default Tag;