td-stylekit 24.8.0 → 25.2.0

package/.babelrc.js

@@ -1,34 +1,19 @@
 module.exports = {
+  presets: [
+    '@babel/preset-react',
+    ['@babel/preset-env'],
+    '@emotion/babel-preset-css-prop',
+    '@babel/preset-typescript'
+  ],
   // babel-preset-css-prop needs to be inserted after both overrides:
   // https://emotion.sh/docs/@emotion/babel-preset-css-prop
-  overrides: [
-    {
-      test: ['./**/*.js'],
-      presets: [
-        ['react-app', { absoluteRuntime: false, typescript: false }],
-        ['@emotion/babel-preset-css-prop']
-      ]
-    },
-    {
-      test: [
-        './src/**/*.ts',
-        './src/**/*.tsx',
-        './docs/**/*.ts',
-        './docs/**/*.tsx'
-      ],
-      presets: [
-        ['react-app', { absoluteRuntime: false, typescript: true }],
-        ['@emotion/babel-preset-css-prop']
-      ]
-    }
-  ],
   plugins: [
     'babel-plugin-autoinstrument',
-    '@babel/plugin-transform-typescript',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-proposal-nullish-coalescing-operator'
-  ]
+  ],
+  overrides: []
 }
 
 // hack to prevent dangerjs from using the same babel config as our build step

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [25.2.0](https://github.com/treasure-data/td-stylekit/compare/v25.1.0...v25.2.0) (2022-02-03)
+
+
+### Features
+
+* **CON-9200:** Add more Marketplace icons ([#1222](https://github.com/treasure-data/td-stylekit/issues/1222)) ([3d93e2b](https://github.com/treasure-data/td-stylekit/commit/3d93e2b))
+
+# [25.1.0](https://github.com/treasure-data/td-stylekit/compare/v25.0.0...v25.1.0) (2022-01-27)
+
+
+### Features
+
+* Fix emotion export ([#1221](https://github.com/treasure-data/td-stylekit/issues/1221)) ([88d6e30](https://github.com/treasure-data/td-stylekit/commit/88d6e30))
+
+# [25.0.0](https://github.com/treasure-data/td-stylekit/compare/v24.8.1...v25.0.0) (2022-01-25)
+
+
+### Features
+
+* **CON-8887:** Upgrade Emotion to v11 ([#1212](https://github.com/treasure-data/td-stylekit/issues/1212)) ([08f8377](https://github.com/treasure-data/td-stylekit/commit/08f8377))
+
+
+### BREAKING CHANGES
+
+* **CON-8887:** Typescript consumers will have to update the typing for useTheme and some styled components might have broken types. In Tests using Enzyme, simulate calls need to be performed on the raw html element.
+
+Co-authored-by: Bert Froeba <bert.froeba@treasure-data.com>
+
+## [24.8.1](https://github.com/treasure-data/td-stylekit/compare/v24.8.0...v24.8.1) (2022-01-21)
+
+
+### Bug Fixes
+
+* **CON-9130:**  Added dark version of the TD Logo ([#1214](https://github.com/treasure-data/td-stylekit/issues/1214)) ([4d58762](https://github.com/treasure-data/td-stylekit/commit/4d58762))
+
 # [24.8.0](https://github.com/treasure-data/td-stylekit/compare/v24.7.0...v24.8.0) (2022-01-14)
 
 

package/dist/es/ActionBar/ActionBar.js

@@ -1,38 +1,59 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { jsx as ___EmotionJSX } from "@emotion/core";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.IconButtonLink = exports.ActionBar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _components = require("./components");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["renderContainer", "children"];
+
+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 _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 _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; }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-import React from 'react';
-import { Container, IconButton, Prefix, ActionMenu } from './components';
-export var IconButtonLink = function IconButtonLink(_ref) {
+
+var IconButtonLink = function IconButtonLink(_ref) {
   var _ref$renderContainer = _ref.renderContainer,
       renderContainer = _ref$renderContainer === void 0 ? function (props) {
-    return ___EmotionJSX(IconButton, _extends({
+    return (0, _react2.jsx)(_components.IconButton, _extends({
       "data-gs": gs("src", "actionbar", "actionbar.tsx", "icon-button")
     }, props));
   } : _ref$renderContainer,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["renderContainer", "children"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return renderContainer(_objectSpread({
     children: children
   }, props));
 };
 
+exports.IconButtonLink = IconButtonLink;
+
 var createActionItem = function createActionItem(item, index, dataInstrumentation) {
   if (item.hidden || item.visibility === 'menu') {
     return null;
   }
 
   var Icon = item.iconComponent;
-  return ___EmotionJSX(IconButton, {
+  return (0, _react2.jsx)(_components.IconButton, {
     "data-gs-c": gsC(item.tooltip),
     "data-gs": gs("src", "actionbar", "actionbar.tsx", "icon-button"),
     key: index,
@@ -42,12 +63,12 @@ var createActionItem = function createActionItem(item, index, dataInstrumentatio
     icon: !item.label || Icon && item.iconOnly,
     disabled: item.disabled,
     onClick: item.onClick
-  }, Icon ? ___EmotionJSX(Icon, {
+  }, Icon ? (0, _react2.jsx)(Icon, {
     "data-gs": gs("src", "actionbar", "actionbar.tsx", "icon-button", "icon")
   }) : null, item.label && !item.iconOnly ? item.label : null);
 };
 
-export var ActionBar = function ActionBar(props) {
+var ActionBar = function ActionBar(props) {
   var records = props.records,
       actions = props.actions,
       menu = props.menu,
@@ -55,15 +76,15 @@ export var ActionBar = function ActionBar(props) {
       menuLabel = _props$menuLabel === void 0 ? 'More Menu Items' : _props$menuLabel,
       children = props.children,
       dataInstrumentation = props['data-instrumentation'];
-  return ___EmotionJSX(Container, {
+  return (0, _react2.jsx)(_components.Container, {
     "data-gs": gs("src", "actionbar", "actionbar.tsx", "container"),
     "data-instrumentation": "".concat(dataInstrumentation, "-container")
-  }, ___EmotionJSX(Prefix, {
+  }, (0, _react2.jsx)(_components.Prefix, {
     "data-gs": gs("src", "actionbar", "actionbar.tsx", "container", "prefix"),
     records: records
   }), actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) {
     return createActionItem(item, index, dataInstrumentation || 'actionbar');
-  }), children, ___EmotionJSX(ActionMenu, {
+  }), children, (0, _react2.jsx)(_components.ActionMenu, {
     "data-gs": gs("src", "actionbar", "actionbar.tsx", "container", "action-menu"),
     actions: actions,
     hidden: menu === false,
@@ -71,11 +92,14 @@ export var ActionBar = function ActionBar(props) {
     menuLabel: menuLabel
   }));
 };
+
+exports.ActionBar = ActionBar;
 ActionBar.displayName = 'ActionBar';
-ActionBar.Button = IconButton;
+ActionBar.Button = _components.IconButton;
 ActionBar.ButtonLink = IconButtonLink;
-ActionBar.Menu = ActionMenu;
+ActionBar.Menu = _components.ActionMenu;
 ActionBar.defaultProps = {
   'data-instrumentation': 'actionbar'
 };
-export default ActionBar;
+var _default = ActionBar;
+exports["default"] = _default;

package/dist/es/ActionBar/components/ActionMenu.js

@@ -1,19 +1,41 @@
-import { jsx as ___EmotionJSX } from "@emotion/core";
+"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.ActionMenu = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _IconButton = require("./IconButton");
+
+var _Menu = _interopRequireDefault(require("../../Menu"));
+
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _TooltipPopover = _interopRequireDefault(require("../../TooltipPopover"));
+
+var _VisuallyHidden = _interopRequireDefault(require("../../VisuallyHidden"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-import React, { useRef } from 'react';
-import { IconButton } from './IconButton';
-import Menu from '../../Menu';
-import Icon from '../../Icon';
-import TooltipPopover from '../../TooltipPopover';
-import VisuallyHidden from '../../VisuallyHidden';
 
 var createMenuItem = function createMenuItem(item, index, dataInstrumentation) {
   if (item.hidden || item.visibility === 'bar' || !item.label) {
     return null;
   }
 
-  return ___EmotionJSX(Menu.MenuItem, {
+  return (0, _react2.jsx)(_Menu["default"].MenuItem, {
     "data-gs-c": gsC(item.label),
     "data-gs": gs("src", "actionbar", "components", "menu-menuitem"),
     key: index,
@@ -23,18 +45,18 @@ var createMenuItem = function createMenuItem(item, index, dataInstrumentation) {
   }, item.label);
 };
 
-export var ActionMenu = function ActionMenu(props) {
+var ActionMenu = function ActionMenu(props) {
   var _props$actions;
 
-  var ref = useRef(null);
+  var ref = (0, _react.useRef)(null);
 
   if (props.hidden || props.actions === undefined && !props.children) {
     return null;
   }
 
-  var DropdownIcon = props.icon || Icon.Medium.More;
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TooltipPopover, {
-    "data-gs-c": gsC(props.children ? ___EmotionJSX(React.Fragment, null, props.children) : ___EmotionJSX(Menu, {
+  var DropdownIcon = props.icon || _Icon["default"].Medium.More;
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TooltipPopover["default"], {
+    "data-gs-c": gsC(props.children ? (0, _react2.jsx)(_react["default"].Fragment, null, props.children) : (0, _react2.jsx)(_Menu["default"], {
       "data-gs-c": gsC((_props$actions = props.actions) === null || _props$actions === void 0 ? void 0 : _props$actions.map(function (item, index) {
         return createMenuItem(item, index, props['data-instrumentation']);
       })),
@@ -47,24 +69,26 @@ export var ActionMenu = function ActionMenu(props) {
     placement: "bottom",
     target: ref,
     trigger: "click"
-  }, props.children ? ___EmotionJSX(React.Fragment, null, props.children) : ___EmotionJSX(Menu, {
+  }, props.children ? (0, _react2.jsx)(_react["default"].Fragment, null, props.children) : (0, _react2.jsx)(_Menu["default"], {
     "data-gs-c": gsC((_props$actions = props.actions) === null || _props$actions === void 0 ? void 0 : _props$actions.map(function (item, index) {
       return createMenuItem(item, index, props['data-instrumentation']);
     })),
     "data-gs": gs("src", "actionbar", "components", "tooltip-popover", "menu")
   }, _props$actions.map(function (item, index) {
     return createMenuItem(item, index, props['data-instrumentation']);
-  }))), ___EmotionJSX(IconButton, {
+  }))), (0, _react2.jsx)(_IconButton.IconButton, {
     "data-gs-c": gsC("dropdownicon"),
     "data-gs": gs("src", "actionbar", "components", "icon-button"),
     icon: true,
     "data-instrumentation": "".concat(props['data-instrumentation'], "-more"),
     ref: ref
-  }, ___EmotionJSX(VisuallyHidden, {
+  }, (0, _react2.jsx)(_VisuallyHidden["default"], {
     "data-gs-c": gsC(props.menuLabel),
     "data-gs": gs("src", "actionbar", "components", "icon-button", "visually-hidden")
-  }, props.menuLabel), ___EmotionJSX(DropdownIcon, {
+  }, props.menuLabel), (0, _react2.jsx)(DropdownIcon, {
     "data-gs": gs("src", "actionbar", "components", "icon-button", "dropdown-icon")
   })));
 };
+
+exports.ActionMenu = ActionMenu;
 ActionMenu.displayName = 'ActionMenu';

package/dist/es/ActionBar/components/Container.d.ts

@@ -1,128 +1,6 @@
 /// <reference types="react" />
-/// <reference types="types/@emotion/styled" />
-export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, {
-    readonly space: string[];
-    readonly palette: {
-        success: string[];
-        warning: string[];
-        error: string[];
-        primary: string[];
-        secondary: string[];
-        neutral: string[];
-    };
-    readonly fontFamily: {
-        body: string;
-        monospace: string;
-    };
-    readonly fontSize: string[];
-    readonly lineHeight: number[];
-    readonly radius: string[];
-    readonly borderWidth: string[];
-    readonly grid: number[];
-    readonly shadows: {
-        small: string;
-        big: string;
-        pill: string;
-        bigCentered: string;
-        popover: string;
-        secondaryNavActiveItem: string;
-    };
-    readonly sizes: {
-        PageHeaderIcon: number;
-    };
-    readonly zIndex: {
-        Base: number;
-        Overlay: number;
-        FormControl: number;
-        SecondaryNav: number;
-        SecondaryNavActiveItem: number;
-        PrimaryNav: number;
-        PopOver: number;
-        PageHeaderSearch: number;
-        Modal: number;
-        Tether: number;
-        GlobalNav: number;
-        Toast: number;
-    };
-    readonly color: {
-        Dune: string;
-        CuriousBlue: string;
-        FlushMahogany: string;
-        Maroon: string;
-        PinkSwan: string;
-        Matisse: string;
-        HummingBird: string;
-        Primary: string;
-        PrimaryContrast: string;
-        PrimaryFade: string;
-        PrimaryLight: string;
-        PrimaryLightFade: string;
-        PrimaryLightHighlight: string;
-        PrimaryAccent: string;
-        DarkBackground: string;
-        DarkBar: string;
-        DarkHover: string;
-        DarkPrimary: string;
-        DarkSecondary: string;
-        LightBackground: string;
-        LightBar: string;
-        LightDisabled: string;
-        LightDivider: string;
-        LightDividerNew: string;
-        LightHint: string;
-        LightHover: string;
-        LightPrimary: string;
-        LightSecondary: string;
-        BorderGrey: string;
-        Blue: string;
-        BlueFade: string;
-        Green: string;
-        GreenFade: string;
-        GreenBackground: string;
-        Red: string;
-        RedFade: string;
-        Yellow: string;
-        YellowFade: string;
-        YellowHighlight: string;
-        Orange: string;
-        OrangeFill: string;
-        OrangeBackground: string;
-        Error: string;
-        ErrorFade: string;
-        ErrorBackground: string;
-        DraggableDraggingBackground: string;
-        Aquamarine: string;
-        Azure: string;
-        AzureNew: string;
-        AzureFade: string;
-        AzureHighlight: string;
-        Silver: string;
-        BlueNavy: string;
-        Black: string;
-        TurquoiseBlue: string;
-        SummerSky: string;
-        Mondo: string;
-        HeavyMetal: string;
-        BokaraGrey: string;
-        Cyan: string;
-        Eucalyptus: string;
-        Flamingo: string;
-        Zorba: string;
-        Flint: string;
-        Maya: string;
-        Bondi: string;
-        Emerald: string;
-        Carissma: string;
-        Solitude: string;
-        WhiteSmoke: string;
-        Violet: string;
-        FireBrick: string;
-        Purple: string;
-        Buckthorn: string;
-    };
-    readonly gradient: {
-        main: string;
-        neutral: string;
-    };
-}>;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=Container.d.ts.map

package/dist/es/ActionBar/components/Container.js

@@ -1,9 +1,23 @@
-import _styled from "@emotion/styled-base";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _color = _interopRequireDefault(require("color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-import color from 'color';
-export var Container = /*#__PURE__*/_styled('div', {
+var Container = ( /*#__PURE__*/0, _base["default"])('div', process.env.NODE_ENV === "production" ? {
   target: "e5g4ckp0"
+} : {
+  target: "e5g4ckp0",
+  label: "Container"
 })(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -11,11 +25,12 @@ export var Container = /*#__PURE__*/_styled('div', {
     backgroundColor: theme.palette.primary[0],
     border: "".concat(theme.borderWidth[1], " solid ").concat(theme.palette.primary[2]),
     boxSizing: 'border-box',
-    boxShadow: "0px ".concat(theme.borderWidth[3], " ").concat(theme.borderWidth[3], " ").concat(color(theme.palette.neutral[3]).alpha(0.3).string()),
+    boxShadow: "0px ".concat(theme.borderWidth[3], " ").concat(theme.borderWidth[3], " ").concat((0, _color["default"])(theme.palette.neutral[3]).alpha(0.3).string()),
     borderRadius: 100,
     display: 'flex',
     flexDirection: 'row',
     padding: "".concat(theme.space[1], " ").concat(theme.space[4], " ").concat(theme.space[1], " ").concat(theme.space[4]),
     alignItems: 'center'
   };
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BY3Rpb25CYXIvY29tcG9uZW50cy9Db250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUd5QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQWN0aW9uQmFyL2NvbXBvbmVudHMvQ29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IGNvbG9yIGZyb20gJ2NvbG9yJ1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdkaXYnKSgoeyB0aGVtZSB9KSA9PiAoe1xuICBoZWlnaHQ6IDQ4LFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeVswXSxcbiAgYm9yZGVyOiBgJHt0aGVtZS5ib3JkZXJXaWR0aFsxXX0gc29saWQgJHt0aGVtZS5wYWxldHRlLnByaW1hcnlbMl19YCxcbiAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gIGJveFNoYWRvdzogYDBweCAke3RoZW1lLmJvcmRlcldpZHRoWzNdfSAke3RoZW1lLmJvcmRlcldpZHRoWzNdfSAke2NvbG9yKFxuICAgIHRoZW1lLnBhbGV0dGUubmV1dHJhbFszXVxuICApXG4gICAgLmFscGhhKDAuMylcbiAgICAuc3RyaW5nKCl9YCxcbiAgYm9yZGVyUmFkaXVzOiAxMDAsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgZmxleERpcmVjdGlvbjogJ3JvdycsXG4gIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNlWzFdfSAke3RoZW1lLnNwYWNlWzRdfSAke3RoZW1lLnNwYWNlWzFdfSAke3RoZW1lLnNwYWNlWzRdfWAsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInXG59KSlcbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BY3Rpb25CYXIvY29tcG9uZW50cy9Db250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUd5QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQWN0aW9uQmFyL2NvbXBvbmVudHMvQ29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IGNvbG9yIGZyb20gJ2NvbG9yJ1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdkaXYnKSgoeyB0aGVtZSB9KSA9PiAoe1xuICBoZWlnaHQ6IDQ4LFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeVswXSxcbiAgYm9yZGVyOiBgJHt0aGVtZS5ib3JkZXJXaWR0aFsxXX0gc29saWQgJHt0aGVtZS5wYWxldHRlLnByaW1hcnlbMl19YCxcbiAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gIGJveFNoYWRvdzogYDBweCAke3RoZW1lLmJvcmRlcldpZHRoWzNdfSAke3RoZW1lLmJvcmRlcldpZHRoWzNdfSAke2NvbG9yKFxuICAgIHRoZW1lLnBhbGV0dGUubmV1dHJhbFszXVxuICApXG4gICAgLmFscGhhKDAuMylcbiAgICAuc3RyaW5nKCl9YCxcbiAgYm9yZGVyUmFkaXVzOiAxMDAsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgZmxleERpcmVjdGlvbjogJ3JvdycsXG4gIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNlWzFdfSAke3RoZW1lLnNwYWNlWzRdfSAke3RoZW1lLnNwYWNlWzFdfSAke3RoZW1lLnNwYWNlWzRdfWAsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInXG59KSlcbiJdfQ== */");
+exports.Container = Container;

package/dist/es/ActionBar/components/IconButton.d.ts

@@ -1,138 +1,12 @@
 /// <reference types="react" />
-/// <reference types="types/@emotion/styled" />
-import Button from '../../Button';
-declare type IconButtonProps = Omit<React.ComponentProps<typeof Button>, 'borderless' | 'borderlessAlt' | 'circle' | 'component' | 'danger' | 'dangerAlt' | 'plain' | 'primary' | 'small'> & {
+export declare const IconButton: import("@emotion/styled").StyledComponent<Partial<import("../../Button").UnstyledButtonProps> & import("react").RefAttributes<import("../../Button").UnstyledButton> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Omit<Partial<import("../../Button").UnstyledButtonProps> & import("react").RefAttributes<import("../../Button").UnstyledButton>, "small" | "circle" | "plain" | "primary" | "borderless" | "borderlessAlt" | "danger" | "dangerAlt" | "component"> & {
     /** Accent color */
-    accent?: string;
+    accent?: string | undefined;
     /** The hover background color. */
-    hoverBackgroundColor?: string;
+    hoverBackgroundColor?: string | undefined;
     /** The hover foreground color. */
-    hoverForegroundColor?: string;
-};
-export declare const IconButton: import("@emotion/styled-base").StyledComponent<Partial<import("../../Button").UnstyledButtonProps> & import("react").RefAttributes<import("../../Button").UnstyledButton>, IconButtonProps, {
-    readonly space: string[];
-    readonly palette: {
-        success: string[];
-        warning: string[];
-        error: string[];
-        primary: string[];
-        secondary: string[];
-        neutral: string[];
-    };
-    readonly fontFamily: {
-        body: string;
-        monospace: string;
-    };
-    readonly fontSize: string[];
-    readonly lineHeight: number[];
-    readonly radius: string[];
-    readonly borderWidth: string[];
-    readonly grid: number[];
-    readonly shadows: {
-        small: string;
-        big: string;
-        pill: string;
-        bigCentered: string;
-        popover: string;
-        secondaryNavActiveItem: string;
-    };
-    readonly sizes: {
-        PageHeaderIcon: number;
-    };
-    readonly zIndex: {
-        Base: number;
-        Overlay: number;
-        FormControl: number;
-        SecondaryNav: number;
-        SecondaryNavActiveItem: number;
-        PrimaryNav: number;
-        PopOver: number;
-        PageHeaderSearch: number;
-        Modal: number;
-        Tether: number;
-        GlobalNav: number;
-        Toast: number;
-    };
-    readonly color: {
-        Dune: string;
-        CuriousBlue: string;
-        FlushMahogany: string;
-        Maroon: string;
-        PinkSwan: string;
-        Matisse: string;
-        HummingBird: string;
-        Primary: string;
-        PrimaryContrast: string;
-        PrimaryFade: string;
-        PrimaryLight: string;
-        PrimaryLightFade: string;
-        PrimaryLightHighlight: string;
-        PrimaryAccent: string;
-        DarkBackground: string;
-        DarkBar: string;
-        DarkHover: string;
-        DarkPrimary: string;
-        DarkSecondary: string;
-        LightBackground: string;
-        LightBar: string;
-        LightDisabled: string;
-        LightDivider: string;
-        LightDividerNew: string;
-        LightHint: string;
-        LightHover: string;
-        LightPrimary: string;
-        LightSecondary: string;
-        BorderGrey: string;
-        Blue: string;
-        BlueFade: string;
-        Green: string;
-        GreenFade: string;
-        GreenBackground: string;
-        Red: string;
-        RedFade: string;
-        Yellow: string;
-        YellowFade: string;
-        YellowHighlight: string;
-        Orange: string;
-        OrangeFill: string;
-        OrangeBackground: string;
-        Error: string;
-        ErrorFade: string;
-        ErrorBackground: string;
-        DraggableDraggingBackground: string;
-        Aquamarine: string;
-        Azure: string;
-        AzureNew: string;
-        AzureFade: string;
-        AzureHighlight: string;
-        Silver: string;
-        BlueNavy: string;
-        Black: string;
-        TurquoiseBlue: string;
-        SummerSky: string;
-        Mondo: string;
-        HeavyMetal: string;
-        BokaraGrey: string;
-        Cyan: string;
-        Eucalyptus: string;
-        Flamingo: string;
-        Zorba: string;
-        Flint: string;
-        Maya: string;
-        Bondi: string;
-        Emerald: string;
-        Carissma: string;
-        Solitude: string;
-        WhiteSmoke: string;
-        Violet: string;
-        FireBrick: string;
-        Purple: string;
-        Buckthorn: string;
-    };
-    readonly gradient: {
-        main: string;
-        neutral: string;
-    };
-}>;
-export {};
+    hoverForegroundColor?: string | undefined;
+}, {}, {}>;
 //# sourceMappingURL=IconButton.d.ts.map