@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/styles/colors.js

@@ -1,15 +1,14 @@
 import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-
 var _context, _context2;
-
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import chroma from 'chroma-js'; // SEMANTIC COLORS
+import chroma from 'chroma-js';
 
+// SEMANTIC COLORS
 export var active = '#4462ED';
 export var critical = {
   bright: '#a31300',
@@ -25,8 +24,9 @@ export var warning = {
   bright: '#ffb91c',
   dark: '#b05b00',
   light: '#fff6e6'
-}; // NEUTRAL COLORS
+};
 
+// NEUTRAL COLORS
 export var black = '#000';
 export var white = '#fff';
 var steps = 9;
@@ -61,20 +61,17 @@ export var accent = {
   95: accentScale(7.5 / accentSteps).hex(),
   99: accentScale(8 / accentSteps).hex()
 };
-
 var _chroma$hsl = chroma('#D033FF').hsl(),
-    _chroma$hsl2 = _slicedToArray(_chroma$hsl, 3),
-    cHue = _chroma$hsl2[0],
-    cSaturation = _chroma$hsl2[1],
-    cLightness = _chroma$hsl2[2];
-
+  _chroma$hsl2 = _slicedToArray(_chroma$hsl, 3),
+  cHue = _chroma$hsl2[0],
+  cSaturation = _chroma$hsl2[1],
+  cLightness = _chroma$hsl2[2];
 var getDecorativeColor = function getDecorativeColor(index) {
   var h = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : cHue;
   var s = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : cSaturation;
   var l = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : cLightness;
   return index > 0 ? getDecorativeColor(index - 1, (h + 100) % 360, s, l * 0.95) : chroma(h, s, l, 'hsl').hex();
 };
-
 export var decorative = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = Array(11)).call(_context2, 0)).call(_context, function (_v, index) {
   return index !== 4 ? getDecorativeColor(index) : '#e30080';
 });
@@ -83,10 +80,12 @@ export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, fu
 });
 export var decorativeLight = _mapInstanceProperty(decorative).call(decorative, function (color) {
   return chroma(color).brighten(2).hex();
-}); // export const focus = chroma(accent[50]).alpha(0.75).hex();
+});
 
-export var focus = chroma('#D033FF').hex(); // COMPONENT COLORS
+// export const focus = chroma(accent[50]).alpha(0.75).hex();
+export var focus = chroma('#D033FF').hex();
 
+// COMPONENT COLORS
 export var button = {
   primary: active,
   border: active,
@@ -128,34 +127,27 @@ var allColors = {
   warning: warning
 };
 export default allColors;
-
 function flattenColors(obj) {
   var _context3, _context4;
-
   var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return _reduceInstanceProperty(_context3 = _mapInstanceProperty(_context4 = _Object$entries(obj)).call(_context4, function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
+      key = _ref2[0],
+      value = _ref2[1];
     if (typeof value === 'string') {
       var _context5;
-
       return [_concatInstanceProperty(_context5 = "".concat(prefix)).call(_context5, key), value];
-    } else if (_typeof(value) === 'object') {
+    }
+    if (_typeof(value) === 'object') {
       var _context6;
-
       return flattenColors(value, _concatInstanceProperty(_context6 = "".concat(prefix)).call(_context6, key, "."));
     }
-
     return [];
   })).call(_context3, function (result, current) {
     var _context7, _context8;
-
     return typeof current[0] === 'string' ? _concatInstanceProperty(_context7 = []).call(_context7, result, [current]) : _concatInstanceProperty(_context8 = []).call(_context8, result, current);
   }, []);
 }
-/* used by Storybook's stories */
-
 
+/* used by Storybook's stories */
 export var flatColorList = flattenColors(allColors);

package/lib/styles/forms/index.js

@@ -7,26 +7,32 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import * as checkbox from '../../components/Checkbox/Checkbox.styles';
+import colorField from '../../components/ColorField/ColorField.styles';
+import comboBox from '../../components/ComboBox/ComboBox.styles';
+import fileInputField from '../../components/FileInputField/FileInputField.styles';
+import * as input from '../../components/Input/Input.styles';
+import * as label from '../../components/Label/Label.styles';
+import numberField from '../../components/NumberField/NumberField.styles';
+import radio from '../../components/Radio/Radio.styles';
+import search from '../../components/SearchField/Search.styles';
+import * as select from '../../components/SelectField/Select.styles';
+import * as switchable from '../../components/Switch/Switch.styles'; // 'switch' is a reserved keyword
+import textarea from '../../components/TextArea/TextArea.styles';
 
-import * as checkbox from './checkbox';
-import comboBox from './comboBox';
-import * as input from './input';
-import * as label from './label';
-import * as radio from './radio';
-import search from './search';
-import * as select from './select';
-import * as switchable from './switch'; // 'switch' is a reserved keyword
-
-import * as textarea from './textarea'; // See ThemeUI docs on variants and themes for intended structure
+// See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
-
-export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
-  comboBox: comboBox
-}, input), label), radio), select), textarea), {}, {
+export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+  colorField: colorField,
+  comboBox: comboBox,
+  fileInputField: fileInputField
+}, input), label), {}, {
+  numberField: numberField,
+  radio: radio
+}, select), {}, {
+  textarea: textarea,
   "switch": _objectSpread({}, switchable),
   search: search
 });

package/lib/styles/spacing.js

@@ -11,8 +11,8 @@ var scale = {
   xl: base * 4,
   // 40
   xx: base * 6.5 // 65
-
 };
+
 export var button = {
   vPadding: scale.xs,
   hPadding: scale.md

package/lib/styles/templates/Nav/HeaderBar.js

@@ -1,19 +1,17 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
+import ExploreIcon from 'mdi-react/CompassOutlineIcon';
 import HelpCircleOutlineIcon from 'mdi-react/HelpCircleOutlineIcon';
 import MenuDownIcon from 'mdi-react/MenuDownIcon';
-import ExploreIcon from 'mdi-react/CompassOutlineIcon';
 import { WithSections as EnvironmentBreadcrumb } from '../../../components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories';
 import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../../index';
 import { PersonIcon } from './NavData';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var CustomPopoverMenu = function CustomPopoverMenu() {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
     onOpenChange: setIsOpen
   }, ___EmotionJSX(IconButton, {
@@ -33,7 +31,6 @@ var CustomPopoverMenu = function CustomPopoverMenu() {
     key: "option3"
   }, "Third Option"))));
 };
-
 var HeaderBar = function HeaderBar() {
   var Rectangle = function Rectangle() {
     return ___EmotionJSX(Box, {
@@ -43,7 +40,6 @@ var HeaderBar = function HeaderBar() {
       mx: 25
     });
   };
-
   return ___EmotionJSX(Box, {
     ml: 230,
     px: 15,
@@ -89,5 +85,4 @@ var HeaderBar = function HeaderBar() {
     variant: "textEllipsis"
   }, "Alyssa Chambers"), ___EmotionJSX(CustomPopoverMenu, null))));
 };
-
 export default HeaderBar;

package/lib/styles/templates/Nav/Nav.stories.js

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import GlobeIcon from 'mdi-react/GlobeIcon';
-import { Box, Link, NavBar, NavBarItem, NavBarSection, Separator, Text } from '../../../index';
-import { logo, data, secondData, thirdData } from './NavData';
+import { Box, Link, NavBar, NavBarItem, NavBarSection, Separator, Text } from '../../..';
 import HeaderBar from './HeaderBar';
+import { data, logo, secondData, thirdData } from './NavData';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Templates/Nav',
@@ -17,10 +17,9 @@ export default {
     }
   }
 };
-
 var SideNav = function SideNav(_ref) {
   var setSelectedKey = _ref.setSelectedKey,
-      selectedKey = _ref.selectedKey;
+    selectedKey = _ref.selectedKey;
   return ___EmotionJSX(NavBar, {
     setSelectedKey: setSelectedKey,
     selectedKey: selectedKey
@@ -52,13 +51,11 @@ var SideNav = function SideNav(_ref) {
     items: thirdData
   })));
 };
-
 export var Default = function Default() {
   var _useState = useState('Overview'),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKey = _useState2[0],
-      setSelectedKey = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
   return ___EmotionJSX(Box, {
     bg: "accent.99",
     height: "100vh"

package/lib/styles/templates/Nav/NavData.js

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import ViewDashboard from 'mdi-react/ViewDashboardIcon';
 import AccountMultiple from 'mdi-react/AccountMultipleIcon';
-import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
+import Earth from 'mdi-react/EarthIcon';
 import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
-import Earth from 'mdi-react/EarthIcon';
+import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
+import ViewDashboard from 'mdi-react/ViewDashboardIcon';
 import { NavBarItemButton } from '../../../components/NavBarSection';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var Credentials = function Credentials(props) {
   return ___EmotionJSX("svg", _extends({
     width: "18px",
@@ -18,8 +17,7 @@ var Credentials = function Credentials(props) {
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     x: "0px",
-    y: "0px",
-    xml: "preserve"
+    y: "0px"
   }, props), ___EmotionJSX("g", {
     id: "Layer_2"
   }), ___EmotionJSX("g", {
@@ -39,7 +37,6 @@ var Credentials = function Credentials(props) {
     d: "M15.1,14.3c0-0.9,0.7-1.6,1.6-1.6c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6C15.9,15.9,15.1,15.2,15.1,14.3 M16.8,11 c-0.9,0-1.7,0.3-2.3,0.9c-0.6,0.6-1,1.4-1,2.3c0,0.9,0.3,1.7,1,2.3c0.6,0.6,1.4,1,2.3,1c0.9,0,1.7-0.3,2.3-1c0.6-0.6,1-1.4,1-2.3 c0-0.9-0.3-1.7-1-2.3C18.5,11.3,17.6,11,16.8,11 M21.1,14.3c0,0.5-0.1,1-0.3,1.5c-0.2,0.5-0.4,1-0.8,1.3v4.2l-3.3-1.1l-3.3,1.1 v-4.2c-0.7-0.8-1.1-1.8-1.1-2.9c0-1.2,0.4-2.3,1.3-3.1c0.8-0.8,1.9-1.3,3.1-1.3c1.2,0,2.3,0.4,3.1,1.3 C20.7,12,21.1,13.1,21.1,14.3z"
   }))));
 };
-
 var Verify = function Verify(props) {
   return ___EmotionJSX("svg", _extends({
     width: "18px",
@@ -69,7 +66,6 @@ var Verify = function Verify(props) {
     id: "Shape"
   }))))));
 };
-
 var logo = ___EmotionJSX("svg", {
   width: "130",
   height: "23",
@@ -92,7 +88,6 @@ var logo = ___EmotionJSX("svg", {
   d: "M36.9874 1.1947C35.9856 1.1947 35.1575 2.04867 35.1575 3.10948C35.1575 4.17059 35.964 5.02519 36.9435 5.02519C37.9457 5.02519 38.7528 4.17059 38.7528 3.10948C38.7528 2.04867 37.9678 1.1947 36.9874 1.1947ZM56.9033 15.1542L55.3339 15.1312C55.0284 15.1312 54.855 15.0152 54.855 14.8537C54.855 14.5314 55.2689 14.2548 56.009 13.8847C56.2262 13.9084 56.3134 13.9084 56.4446 13.9084C58.8193 13.9084 60.5636 12.4303 60.5636 10.4005C60.5636 9.61595 60.3439 9.0155 59.9081 8.46364L59.9605 8.47065L59.9606 8.47066C60.1397 8.49475 60.4151 8.5318 60.672 8.5318C61.4778 8.5318 62.0866 8.27764 62.7193 7.65479L61.4996 5.69332C60.8237 6.34046 59.9958 6.70963 59.1899 6.70963C58.8193 6.70963 58.4264 6.61608 57.8177 6.45516C57.0109 6.24833 56.4446 6.15619 55.8128 6.15619C52.9597 6.15619 51.1075 7.72483 51.1075 10.1476C51.1075 11.9005 51.8913 12.985 53.5037 13.424C51.673 13.9305 51.4561 14.6472 51.4561 15.4081C51.4561 16.216 51.7818 16.7461 52.3055 16.953C52.8291 17.1848 53.6782 17.2985 54.9848 17.3225L56.2262 17.3459C57.3822 17.3689 58.2745 17.6928 58.2745 18.7533C58.2745 19.2382 57.9916 19.676 57.5562 19.9526C57.0994 20.2536 56.467 20.3442 55.7268 20.3442C54.3761 20.3442 53.6337 19.8377 53.6337 18.8909C53.6337 18.5682 53.6561 18.4079 53.7657 18.1307H51.064C50.9545 18.3606 50.8029 18.6848 50.8029 19.331C50.8029 20.1367 51.1075 20.8304 51.7178 21.4296C52.7194 22.4222 54.3541 22.6985 55.9431 22.6985C57.6855 22.6985 59.3645 22.2842 60.3439 21.1757C60.9548 20.4841 61.2385 19.7232 61.2385 18.7312C61.2385 17.6691 60.9324 16.8615 60.2795 16.216C59.4945 15.4535 58.6016 15.1769 56.9033 15.1542ZM54.0479 10.1703C54.0479 9.06345 54.6801 8.41632 55.7907 8.41632C56.9033 8.41632 57.5562 9.06345 57.5562 10.1703C57.5562 11.2548 56.9244 11.8541 55.7692 11.8541C54.7452 11.8541 54.0479 11.3704 54.0479 10.1703ZM43.6997 9.82372C44.375 9.17909 45.1373 8.76354 45.7242 8.76354C46.4871 8.76354 46.7042 9.15543 46.7042 10.4931V18.1768H49.5808V9.54716C49.5808 8.80867 49.5151 8.30146 49.3627 7.86351C49.0144 6.8472 47.9252 6.15619 46.683 6.15619C46.0303 6.15619 45.2671 6.34046 44.6792 6.66278C44.2068 6.93488 43.8401 7.20758 43.4131 7.52507L43.3936 7.53962C43.3936 7.05529 43.2412 6.54855 42.9789 6.06359L40.3874 6.8472C40.6481 7.63176 40.779 8.60074 40.779 9.61595V18.1768H43.6997V9.82372ZM35.485 6.5697L38.4035 6.08505V18.1768H35.485V6.5697ZM32.0851 2.92521C31.2343 2.41721 30.4496 2.14096 27.8792 2.14096H23.8931V18.1768H26.9433V12.2702H28.6201C30.2969 12.2702 30.9512 12.0853 31.6485 11.7391C33.3037 10.9088 34.2612 9.20118 34.2612 7.07926C34.2612 5.23234 33.4995 3.75614 32.0851 2.92521ZM28.5333 9.63945C29.7748 9.63945 30.1457 9.47775 30.5583 8.80867C30.8212 8.3715 30.9288 7.90926 30.9288 7.14711C30.9288 5.64757 30.1668 4.74738 28.8805 4.74738H26.9433V9.63945H28.5333Z",
   fill: "white"
 }));
-
 var PersonIcon = function PersonIcon(props) {
   return ___EmotionJSX("svg", _extends({
     viewBox: "0 0 24 24"
@@ -101,7 +96,6 @@ var PersonIcon = function PersonIcon(props) {
     d: "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
   }));
 };
-
 var data = [{
   icon: ViewDashboard,
   key: 'Dashboard',
@@ -228,4 +222,4 @@ var thirdData = [{
     id: "Earth Button Group"
   }, "Group")]
 }];
-export { logo, data, secondData, thirdData, PersonIcon };
+export { data, logo, PersonIcon, secondData, thirdData };

package/lib/styles/text.js

@@ -1,15 +1,11 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 var _fontWeights;
-
-import { button, neutral, white, active } from './colors';
+import { active, button, neutral, white } from './colors';
 var baseSize = 15;
 var majorMultiplier = 1.15;
-
 var getFontSize = function getFontSize(major) {
   return Math.round(baseSize * Math.pow(majorMultiplier, major));
 };
-
 export var fontSizes = {
   'xs': getFontSize(-2),
   'sm': getFontSize(-1),

package/lib/styles/theme-ui/ThemeView.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { JSONTree } from 'react-json-tree';
+import theme from '../theme';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default (function () {
+  return ___EmotionJSX(JSONTree, {
+    data: theme
+  });
+});

package/lib/styles/theme.js

@@ -7,17 +7,14 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import spacing from './spacing';
-import colors, { accent, line, shadow, focus } from './colors';
-import { fontSizes, fontWeights, textColors } from './text';
 import breakpoints from './breakpoints';
+import colors, { accent, focus, line, shadow } from './colors';
 import forms from './forms';
-import { variants, buttons, text, images, links, bidirectionalIconButton } from './variants';
+import spacing from './spacing';
+import { fontSizes, fontWeights, textColors } from './text';
+import { badges, buttons, cards, images, links, text, variants } from './variants';
 export default {
   name: 'Astro',
   space: spacing,
@@ -52,9 +49,9 @@ export default {
   forms: forms,
   text: text,
   images: images,
-  buttons: _objectSpread(_objectSpread({}, buttons), {}, {
-    bidirectionalIconButton: bidirectionalIconButton
-  }),
+  buttons: buttons,
+  badges: badges,
+  cards: cards,
   textColors: textColors,
   links: links,
   variants: variants

package/lib/styles/themeOverrides/index.js

@@ -1 +1 @@
-export { default } from '.';
+export { default } from './uiLibraryOverride';

package/lib/styles/themeOverrides/stories/AccordionGroup.chromatic.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AccordionGroup, Item, Text } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only AccordionGroup',
+  component: AccordionGroup,
+  decorators: [WithUiLibraryCss]
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AccordionGroup, null, ___EmotionJSX(Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: "Accordion Label",
+    "data-id": "accordionItem"
+  }, ___EmotionJSX(Text, null, "Render me!")));
+};

package/lib/styles/themeOverrides/stories/Button.chromatic.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Button',
+  component: Button,
+  decorators: [WithUiLibraryCss]
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Button, null, "Button Text");
+};
+export var Critical = function Critical() {
+  return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+export var Success = function Success() {
+  return ___EmotionJSX(Button, {
+    variant: "success"
+  }, "Button Text");
+};
+export var Inline = function Inline() {
+  return ___EmotionJSX(Button, {
+    variant: "inline"
+  }, "Button Text");
+};
+export var Primary = function Primary() {
+  return ___EmotionJSX(Button, {
+    variant: "primary"
+  }, "Button Text");
+};
+export var Link = function Link() {
+  return ___EmotionJSX(Button, {
+    variant: "link"
+  }, "Button Text");
+};

package/lib/styles/themeOverrides/stories/EnvironmentBreadcrumb.chromatic.stories.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React, { useState } from 'react';
+import { Badge, Box, EnvironmentBreadcrumb, Item, Text } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only EnvironmentBreadcrumb',
+  component: EnvironmentBreadcrumb,
+  decorators: [WithUiLibraryCss]
+};
+var defaultEnvironments = [{
+  name: 'Default'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Slug'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Crab',
+  isSandbox: true
+}, {
+  name: 'Fish'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Banana'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goat'
+}];
+export var Default = function Default(args) {
+  var _useState = useState({
+      name: 'Snail',
+      isSandbox: true
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedEnvironment = _useState2[0],
+    setSelectedEnvironment = _useState2[1];
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true,
+    key: selectedEnvironment.name
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+    label: "SANDBOX",
+    variant: "environmentBadge",
+    bg: "neutral.40"
+  }) : null);
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref) {
+      var name = _ref.name;
+      return name === envName;
+    });
+  };
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref2) {
+    var name = _ref2.name,
+      isSandbox = _ref2.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Badge, {
+      label: "SANDBOX",
+      variant: "environmentBadge",
+      bg: "neutral.40"
+    }) : null);
+  });
+};

package/lib/styles/themeOverrides/stories/IconButton.chromatic.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import CreateIcon from 'mdi-react/CreateIcon';
+import { Icon, IconButton } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only IconButton',
+  component: IconButton,
+  decorators: [WithUiLibraryCss]
+};
+export var Base = function Base() {
+  return ___EmotionJSX(IconButton, {
+    "aria-label": "default icon button"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};
+export var Inverted = function Inverted() {
+  return ___EmotionJSX(IconButton, {
+    "aria-label": "default icon button",
+    variant: "inverted"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};

package/lib/styles/themeOverrides/stories/Label.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Label } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Label',
+  component: Label,
+  decorators: [WithUiLibraryCss]
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Label, null, "This is a label");
+};

package/lib/styles/themeOverrides/stories/Link.chromatic.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Link',
+  component: Link,
+  decorators: [WithUiLibraryCss]
+};
+export var Default = function Default() {
+  return ___EmotionJSX("div", null, ___EmotionJSX(Link, {
+    href: "https://uilibrary.ping-eng.com"
+  }, "A link"), ' ', "to your favorite website.");
+};