@burnsred/ui 0.6.2 → 0.6.3

package/dist/development.js

@@ -1,22 +1,19 @@
-import styled, { css, keyframes, ThemeConsumer, withTheme } from 'styled-components';
-import React from 'react';
-import { withEnhanceProps, colorFromPalette, mixins, color, useEnhanceProps, useCleanProps, media, variant, image, component } from '@burnsred/theme';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 import PropTypes from 'prop-types';
 import PropTypesImmutable from 'react-immutable-proptypes';
 import PropTypesPlus from '@burnsred/prop-types-plus';
+import React from 'react';
+import { withEnhanceProps, colorFromPalette, mixins, color, useEnhanceProps, useCleanProps, media, image, component } from '@burnsred/theme';
 import 'core-js/modules/es6.object.assign';
 import classnames from 'classnames';
 import { useDefault } from '@burnsred/default';
 import 'core-js/modules/es6.function.name';
+import styled, { css, keyframes, withTheme } from 'styled-components';
 import 'core-js/modules/es6.regexp.to-string';
 import 'core-js/modules/web.dom.iterable';
 import 'core-js/modules/es6.array.iterator';
-import 'core-js/modules/es6.object.keys';
+import { Map, List } from 'immutable';
 import _flowRight from 'lodash/flowRight';
 import { withProps } from '@burnsred/higher-order-component';
-import { Map, List } from 'immutable';
 import exact from 'prop-types-exact';
 import withOnClickOutside from 'react-onclickoutside';
 import ReactDOM from 'react-dom';
@@ -692,443 +689,7 @@ UIButton.defaultProps = {
   to: undefined,
   variant: 'standard'
 };
-var UIButton$1 = React.memo(UIButton);
-
-var Wrapper =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Buttonstories__Wrapper",
-  componentId: "sc-17igda1-0"
-})(["text-align:center;margin:1rem;"]);
-var createStoryForUIButton = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(UIButton$1, {
-        content: text('children', 'Hello Button'),
-        disabled: boolean('disabled', false),
-        iconFont: "material",
-        iconName: "delete",
-        onClick: action('clicked'),
-        palette: "primary",
-        processing: boolean('processing', false),
-        variant: select('variant', variant({
-          name: 'component_uiButton_'
-        })({
-          theme: theme
-        }), 'text')
-      });
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiButton_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper, {
-          key: name
-        }, React.createElement(UIButton$1, {
-          content: name,
-          iconFont: "material",
-          iconName: "delete",
-          palette: "primary",
-          variant: name
-        }));
-      });
-    });
-  });
-});
-
-function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var iconCss =
-/*#__PURE__*/
-css(["margin-right:0.5rem;max-width:2rem;vertical-align:middle;"]);
-var Wrapper$1 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Iconstories__Wrapper",
-  componentId: "sc-1p3nfhe-0"
-})(["display:inline-block;margin:1rem;position:relative;&:after{content:'", "';font-size:0.75rem;left:50%;position:absolute;top:calc(100% + 1rem);transform:translateX(-50%);white-space:pre;}"], function (props) {
-  return props.label;
-});
-var createStoryForUIIcon = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(_StyledUIIcon, {
-        fontawesome: boolean('fontawesome', false),
-        material: boolean('material', false),
-        name: select('name', ['apple', 'delete', 'plus'], 'apple'),
-        variant: select('variant', variant({
-          name: 'component_uiIcon_'
-        })({
-          theme: theme
-        }), 'main')
-      });
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiIcon_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$1, {
-          key: name
-        }, React.createElement(UIIcon, {
-          name: "apple",
-          variant: name
-        }), name);
-      });
-    });
-  });
-});
-
-var _StyledUIIcon = styled(UIIcon)(_templateObject$3(), iconCss);
-
-var UIImage =
-/*#__PURE__*/
-styled.img.withConfig({
-  displayName: "Image__UIImage",
-  componentId: "sc-1fmo7bh-0"
-})(["", " ", ""], component(), function (props) {
-  return props.css;
-});
-UIImage.propTypes = {
-  alt: PropTypes.string.isRequired,
-  namespace: PropTypesPlus.string,
-  src: PropTypes.string.isRequired,
-  variant: PropTypes.string
-};
-UIImage.defaultProps = {
-  namespace: 'component_uiImage',
-  variant: 'standard'
-};
-var UIImage$1 = _flowRight([withTheme, withProps(function (props) {
-  return {
-    alt: props.name,
-    src: image(props)
-  };
-})])(UIImage);
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var imageCss =
-/*#__PURE__*/
-css(["margin-right:0.5rem;max-width:2rem;vertical-align:middle;"]);
-var Wrapper$2 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Imagestories__Wrapper",
-  componentId: "a2mbve-0"
-})(["display:inline-block;margin:1rem;position:relative;&:after{content:'", "';font-size:0.75rem;left:50%;position:absolute;top:calc(100% + 1rem);transform:translateX(-50%);white-space:pre;}"], function (props) {
-  return props.label;
-});
-var createStoryForUIImage = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(_StyledUIImage, {
-        name: select('name', Object.keys(theme.images || {}), Object.keys(theme.images || {})[0]),
-        variant: select('variant', variant({
-          name: 'component_uiImage_'
-        })({
-          theme: theme
-        }), 'main')
-      });
-    });
-  }).add('names', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'images_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$2, {
-          key: name,
-          label: name
-        }, React.createElement(_StyledUIImage2, {
-          name: name
-        }));
-      });
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiImage_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$2, {
-          key: name
-        }, React.createElement(UIImage$1, {
-          name: variant({
-            name: 'images_'
-          })({
-            theme: theme
-          })[0],
-          variant: name
-        }), name);
-      });
-    });
-  });
-});
-
-var _StyledUIImage = styled(UIImage$1)(_templateObject$4(), imageCss);
-
-var _StyledUIImage2 = styled(UIImage$1)(_templateObject2(), imageCss);
-
-var createStoryForUIProcessingCircle = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ProgressCircle, {
-      palette: select('palette', ['primary', 'secondary', 'black']),
-      size: select('size', ['16px', '32px', '48px'], '32px'),
-      thickness: select('thickness', [10, 20, 40], 20),
-      value: select('value', [null, 0, 33, 50, 100], null)
-    });
-  });
-});
-
-var primaryScale =
-/*#__PURE__*/
-keyframes(["0%{transform:scaleX(0.08);}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(0.08);}65.15%{animation-timing-function:cubmic-bezier(0.06,0.11,0.6,1);transform:scaleX(0.661479);}100%{transform:scaleX(0.08);}"]);
-var primaryTranslate =
-/*#__PURE__*/
-keyframes(["0%{transform:translateX(0);}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0);}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(83.67142%);}100%{transform:translateX(200.611057%);}"]);
-var secondaryScale =
-/*#__PURE__*/
-keyframes(["0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.45397);transform:scaleX(0.08);}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.004315);transform:scaleX(0.457104);}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(0.72796);}100%{transform:scaleX(0.08);}"]);
-var secondaryTranslate =
-/*#__PURE__*/
-keyframes(["0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0);}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(37.651913%);}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(84.386165%);}100%{transform:translateX(160.277782%);}"]);
-var Block =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__Block",
-  componentId: "gwo5u1-0"
-})(["display:flex;align-items:center;height:", ";min-width:2rem;overflow:hidden;position:relative;transition:opacity 0.25s cubic-bezier(0.4,0,0.6,1) 0ms;transform:translateZ(0);", ""], function (props) {
-  return props.height;
-}, mixins.margin);
-var BarWrapper =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__BarWrapper",
-  componentId: "gwo5u1-1"
-})(["height:", ";position:relative;flex:1;"], function (props) {
-  return props.thickness;
-});
-var Buffer =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__Buffer",
-  componentId: "gwo5u1-2"
-})(["background-color:", ";height:100%;position:absolute;transition:transform ", ";transform-origin:left top;width:100%;", ""], function (props) {
-  return color({
-    palette: props.palette || 'gray',
-    paletteWeight: props.paletteWeight
-  })(props);
-}, function (props) {
-  return props.transitionDuration || '225ms';
-}, function (props) {
-  return props.value !== null && css(["transform:translateX(", "%);"], props.value - 100);
-});
-var BarPrimary =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__BarPrimary",
-  componentId: "gwo5u1-3"
-})(["height:100%;position:absolute;transform-origin:left top;width:100%;", ""], function (props) {
-  return props.value === null && css(["transform:scaleX(0);animation:", " 2s infinite linear;left:-145.166611%;transition:none;"], primaryTranslate);
-});
-var BarPrimaryInner =
-/*#__PURE__*/
-styled.span.withConfig({
-  displayName: "ProgressLinestyles__BarPrimaryInner",
-  componentId: "gwo5u1-4"
-})(["background-color:", ";display:inline-block;height:100%;position:absolute;width:100%;", " ", ""], function (props) {
-  return color({
-    palette: props.palette || 'primary',
-    paletteWeight: props.paletteWeight
-  })(props);
-}, function (props) {
-  return props.value === null && css(["animation:", " 2s infinite linear;"], primaryScale);
-}, function (props) {
-  return props.value !== null && css(["transform:translateX(", "%);transition:transform ", " cubic-bezier(0.4,0,0.6,1) 0ms;"], props.value - 100, props.transitionDuration || '225ms');
-});
-var BarSecondary =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__BarSecondary",
-  componentId: "gwo5u1-5"
-})(["animation:", " 2s infinite linear;height:100%;left:-54.888891%;position:absolute;transition:none;transform-origin:left top;visibility:visible;width:100%;"], secondaryTranslate);
-var BarSecondaryInner =
-/*#__PURE__*/
-styled.span.withConfig({
-  displayName: "ProgressLinestyles__BarSecondaryInner",
-  componentId: "gwo5u1-6"
-})(["animation:", " 2s infinite linear;background-color:", ";display:inline-block;height:100%;position:absolute;visibility:visible;width:100%;"], secondaryScale, function (props) {
-  return color({
-    palette: props.palette || 'primary',
-    paletteWeight: props.paletteWeight
-  })(props);
-});
-
-function UIProgressLine(props) {
-  var _React$useState = React.useState(props.valueInitial === undefined ? props.value : props.valueInitial),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      value = _React$useState2[0],
-      setValue = _React$useState2[1];
-
-  var _React$useState3 = React.useState(props.bufferValueInitial === undefined ? props.bufferValue : props.bufferValueInitial),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      bufferValue = _React$useState4[0],
-      setBufferValue = _React$useState4[1];
-
-  React.useEffect(function () {
-    setTimeout(function () {
-      setValue(props.value);
-      setBufferValue(props.bufferValue);
-    }, 0);
-  }, [props.value, props.bufferValue]);
-  return React.createElement(Block, {
-    className: props.className,
-    height: props.height,
-    $margin: props.margin,
-    $marginBottom: props.marginBottom,
-    $marginLeft: props.marginLeft,
-    $marginRight: props.marginRight,
-    $marginTop: props.marginTop
-  }, React.createElement(Buffer, {
-    palette: props.bufferPalette,
-    paletteWeight: props.bufferPaletteWeight,
-    transitionDuration: props.transitionDuration,
-    value: bufferValue
-  }), React.createElement(BarWrapper, {
-    thickness: props.thickness || props.height
-  }, React.createElement(BarPrimary, {
-    value: props.value,
-    transitionDuration: props.transitionDuration
-  }, React.createElement(BarPrimaryInner, {
-    palette: props.palette,
-    paletteWeight: props.paletteWeight,
-    transitionDuration: props.transitionDuration,
-    value: value
-  })), value === null && React.createElement(BarSecondary, null, React.createElement(BarSecondaryInner, {
-    palette: props.palette,
-    paletteWeight: props.paletteWeight
-  }))));
-}
-
-UIProgressLine.propTypes = {
-  bufferPalette: PropTypes.string,
-  bufferPaletteWeight: PropTypes.string,
-  bufferValue: PropTypes.number,
-  bufferValueInitial: PropTypes.number,
-  height: PropTypes.string,
-  margin: PropTypes.string,
-  marginBottom: PropTypes.string,
-  marginLeft: PropTypes.string,
-  marginRight: PropTypes.string,
-  marginTop: PropTypes.string,
-  palette: PropTypes.string,
-  paletteWeight: PropTypes.string,
-  thickness: PropTypes.string,
-  transitionDuration: PropTypes.string,
-  value: PropTypes.number,
-  valueInitial: PropTypes.number
-};
-UIProgressLine.defaultProps = {
-  bufferPalette: undefined,
-  bufferPaletteWeight: undefined,
-  bufferValue: 100,
-  bufferValueInitial: undefined,
-  height: '4px',
-  margin: undefined,
-  marginBottom: undefined,
-  marginLeft: undefined,
-  marginRight: undefined,
-  marginTop: undefined,
-  palette: undefined,
-  paletteWeight: undefined,
-  thickness: undefined,
-  transitionDuration: undefined,
-  value: null,
-  valueInitial: undefined
-};
-
-var Block$1 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestories__Block",
-  componentId: "rcgabs-0"
-})(["width:300px;"]);
-var createStoryForUIProcessingLine = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(Block$1, null, React.createElement(UIProgressLine, {
-      bufferPalette: select('bufferPalette', ['primary', 'secondary', 'gray']),
-      height: select('height', ['1px', '2px', '4px', '8px', '16px'], '4px'),
-      palette: select('palette', ['primary', 'secondary', 'gray']),
-      value: select('value', [null, 0, 33, 50, 100], null)
-    }));
-  });
-});
-
-var Wrapper$3 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Typestories__Wrapper",
-  componentId: "nme558-0"
-})(["text-align:center;margin:1rem;"]);
-var createStoryForUIType = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(UIType$1, {
-        variant: select('variant', variant({
-          name: 'component_uiType_'
-        })({
-          theme: theme
-        }), 'body1')
-      }, text('children', 'Hello TypeSet'));
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiType_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$3, {
-          key: name
-        }, React.createElement(UIType$1, {
-          variant: name
-        }, name));
-      });
-    });
-  });
-});
+var Button$1 = React.memo(UIButton);
 
 var UICard = withEnhanceProps(styled.div.withConfig({
   displayName: "Card__UICard",
@@ -1161,46 +722,6 @@ UICard.defaultProps = {
   variant: 'standard'
 };
 
-var Wrapper$4 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Cardstories__Wrapper",
-  componentId: "sc-1ogn9bx-0"
-})(["text-align:center;margin:1rem;"]);
-var createStoryForUICard = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      var _ref2;
-
-      return React.createElement(UICard, {
-        variant: select('variant', Object.keys(((_ref2 = theme) != null ? (_ref2 = _ref2.components) != null ? _ref2.uiCard : _ref2 : _ref2) || {}), 'main')
-      }, text('children', 'Hello Well'));
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      var _ref;
-
-      return Object.keys(((_ref = theme) != null ? (_ref = _ref.components) != null ? _ref.uiCard : _ref : _ref) || {}).map(function (variant) {
-        return React.createElement(Wrapper$4, {
-          key: variant
-        }, React.createElement(UICard, {
-          variant: variant
-        }, variant));
-      });
-    });
-  });
-});
-
-function createStoriesForUI(storyFactory) {
-  createStoryForUIButton(storyFactory('Button'));
-  createStoryForUICard(storyFactory('Card'));
-  createStoryForUIIcon(storyFactory('Icon'));
-  createStoryForUIImage(storyFactory('Image'));
-  createStoryForUIProcessingCircle(storyFactory('ProcessingCircle'));
-  createStoryForUIProcessingLine(storyFactory('ProcessingLine'));
-  createStoryForUIType(storyFactory('Type'));
-}
-
 var UIError = function UIError(props) {
   return React.createElement(UIType$1, _extends({
     variant: "body2",
@@ -1333,6 +854,31 @@ UIFlexBox.defaultProps = {
   variant: 'standard'
 };
 
+var UIImage =
+/*#__PURE__*/
+styled.img.withConfig({
+  displayName: "Image__UIImage",
+  componentId: "sc-1fmo7bh-0"
+})(["", " ", ""], component(), function (props) {
+  return props.css;
+});
+UIImage.propTypes = {
+  alt: PropTypes.string.isRequired,
+  namespace: PropTypesPlus.string,
+  src: PropTypes.string.isRequired,
+  variant: PropTypes.string
+};
+UIImage.defaultProps = {
+  namespace: 'component_uiImage',
+  variant: 'standard'
+};
+var Image = _flowRight([withTheme, withProps(function (props) {
+  return {
+    alt: props.name,
+    src: image(props)
+  };
+})])(UIImage);
+
 var hooks$2 = {
   usePropsTrigger: function usePropsTrigger(props, styles, hidden, setHidden) {
     return React.useMemo(function () {
@@ -1345,7 +891,7 @@ var hooks$2 = {
   }
 };
 
-var Wrapper$5 =
+var Wrapper =
 /*#__PURE__*/
 styled.div.withConfig({
   displayName: "Tooltipstyles__Wrapper",
@@ -1365,10 +911,10 @@ var styles = {
   }))
 };
 
-function _templateObject$5() {
+function _templateObject$3() {
   var data = _taggedTemplateLiteral(["", ""]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$3 = function _templateObject() {
     return data;
   };
 
@@ -1408,7 +954,7 @@ UITooltip.defaultProps = {
 };
 var UITooltip$1 = React.memo(UITooltip);
 
-var _StyledWrapper = styled(Wrapper$5)(_templateObject$5(), function (p) {
+var _StyledWrapper = styled(Wrapper)(_templateObject$3(), function (p) {
   return p._css;
 });
 
@@ -1450,10 +996,10 @@ var styles$1 = {
   tooltip: css(["margin-left:0.5rem;"])
 };
 
-function _templateObject$6() {
+function _templateObject$4() {
   var data = _taggedTemplateLiteral(["", ""]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -1526,7 +1072,7 @@ UILabel.defaultProps = {
 };
 var Label$1 = React.memo(UILabel);
 
-var _StyledUILabelRoot = styled(UILabelRoot)(_templateObject$6(), function (p) {
+var _StyledUILabelRoot = styled(UILabelRoot)(_templateObject$4(), function (p) {
   return p._css;
 });
 
@@ -1869,6 +1415,173 @@ function Portal$1(props) {
   return elementRef && ReactDOM.createPortal(props.children, elementRef);
 }
 
+var primaryScale =
+/*#__PURE__*/
+keyframes(["0%{transform:scaleX(0.08);}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(0.08);}65.15%{animation-timing-function:cubmic-bezier(0.06,0.11,0.6,1);transform:scaleX(0.661479);}100%{transform:scaleX(0.08);}"]);
+var primaryTranslate =
+/*#__PURE__*/
+keyframes(["0%{transform:translateX(0);}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0);}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(83.67142%);}100%{transform:translateX(200.611057%);}"]);
+var secondaryScale =
+/*#__PURE__*/
+keyframes(["0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.45397);transform:scaleX(0.08);}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.004315);transform:scaleX(0.457104);}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(0.72796);}100%{transform:scaleX(0.08);}"]);
+var secondaryTranslate =
+/*#__PURE__*/
+keyframes(["0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0);}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(37.651913%);}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(84.386165%);}100%{transform:translateX(160.277782%);}"]);
+var Block =
+/*#__PURE__*/
+styled.div.withConfig({
+  displayName: "ProgressLinestyles__Block",
+  componentId: "gwo5u1-0"
+})(["display:flex;align-items:center;height:", ";min-width:2rem;overflow:hidden;position:relative;transition:opacity 0.25s cubic-bezier(0.4,0,0.6,1) 0ms;transform:translateZ(0);", ""], function (props) {
+  return props.height;
+}, mixins.margin);
+var BarWrapper =
+/*#__PURE__*/
+styled.div.withConfig({
+  displayName: "ProgressLinestyles__BarWrapper",
+  componentId: "gwo5u1-1"
+})(["height:", ";position:relative;flex:1;"], function (props) {
+  return props.thickness;
+});
+var Buffer =
+/*#__PURE__*/
+styled.div.withConfig({
+  displayName: "ProgressLinestyles__Buffer",
+  componentId: "gwo5u1-2"
+})(["background-color:", ";height:100%;position:absolute;transition:transform ", ";transform-origin:left top;width:100%;", ""], function (props) {
+  return color({
+    palette: props.palette || 'gray',
+    paletteWeight: props.paletteWeight
+  })(props);
+}, function (props) {
+  return props.transitionDuration || '225ms';
+}, function (props) {
+  return props.value !== null && css(["transform:translateX(", "%);"], props.value - 100);
+});
+var BarPrimary =
+/*#__PURE__*/
+styled.div.withConfig({
+  displayName: "ProgressLinestyles__BarPrimary",
+  componentId: "gwo5u1-3"
+})(["height:100%;position:absolute;transform-origin:left top;width:100%;", ""], function (props) {
+  return props.value === null && css(["transform:scaleX(0);animation:", " 2s infinite linear;left:-145.166611%;transition:none;"], primaryTranslate);
+});
+var BarPrimaryInner =
+/*#__PURE__*/
+styled.span.withConfig({
+  displayName: "ProgressLinestyles__BarPrimaryInner",
+  componentId: "gwo5u1-4"
+})(["background-color:", ";display:inline-block;height:100%;position:absolute;width:100%;", " ", ""], function (props) {
+  return color({
+    palette: props.palette || 'primary',
+    paletteWeight: props.paletteWeight
+  })(props);
+}, function (props) {
+  return props.value === null && css(["animation:", " 2s infinite linear;"], primaryScale);
+}, function (props) {
+  return props.value !== null && css(["transform:translateX(", "%);transition:transform ", " cubic-bezier(0.4,0,0.6,1) 0ms;"], props.value - 100, props.transitionDuration || '225ms');
+});
+var BarSecondary =
+/*#__PURE__*/
+styled.div.withConfig({
+  displayName: "ProgressLinestyles__BarSecondary",
+  componentId: "gwo5u1-5"
+})(["animation:", " 2s infinite linear;height:100%;left:-54.888891%;position:absolute;transition:none;transform-origin:left top;visibility:visible;width:100%;"], secondaryTranslate);
+var BarSecondaryInner =
+/*#__PURE__*/
+styled.span.withConfig({
+  displayName: "ProgressLinestyles__BarSecondaryInner",
+  componentId: "gwo5u1-6"
+})(["animation:", " 2s infinite linear;background-color:", ";display:inline-block;height:100%;position:absolute;visibility:visible;width:100%;"], secondaryScale, function (props) {
+  return color({
+    palette: props.palette || 'primary',
+    paletteWeight: props.paletteWeight
+  })(props);
+});
+
+function UIProgressLine(props) {
+  var _React$useState = React.useState(props.valueInitial === undefined ? props.value : props.valueInitial),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1];
+
+  var _React$useState3 = React.useState(props.bufferValueInitial === undefined ? props.bufferValue : props.bufferValueInitial),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      bufferValue = _React$useState4[0],
+      setBufferValue = _React$useState4[1];
+
+  React.useEffect(function () {
+    setTimeout(function () {
+      setValue(props.value);
+      setBufferValue(props.bufferValue);
+    }, 0);
+  }, [props.value, props.bufferValue]);
+  return React.createElement(Block, {
+    className: props.className,
+    height: props.height,
+    $margin: props.margin,
+    $marginBottom: props.marginBottom,
+    $marginLeft: props.marginLeft,
+    $marginRight: props.marginRight,
+    $marginTop: props.marginTop
+  }, React.createElement(Buffer, {
+    palette: props.bufferPalette,
+    paletteWeight: props.bufferPaletteWeight,
+    transitionDuration: props.transitionDuration,
+    value: bufferValue
+  }), React.createElement(BarWrapper, {
+    thickness: props.thickness || props.height
+  }, React.createElement(BarPrimary, {
+    value: props.value,
+    transitionDuration: props.transitionDuration
+  }, React.createElement(BarPrimaryInner, {
+    palette: props.palette,
+    paletteWeight: props.paletteWeight,
+    transitionDuration: props.transitionDuration,
+    value: value
+  })), value === null && React.createElement(BarSecondary, null, React.createElement(BarSecondaryInner, {
+    palette: props.palette,
+    paletteWeight: props.paletteWeight
+  }))));
+}
+
+UIProgressLine.propTypes = {
+  bufferPalette: PropTypes.string,
+  bufferPaletteWeight: PropTypes.string,
+  bufferValue: PropTypes.number,
+  bufferValueInitial: PropTypes.number,
+  height: PropTypes.string,
+  margin: PropTypes.string,
+  marginBottom: PropTypes.string,
+  marginLeft: PropTypes.string,
+  marginRight: PropTypes.string,
+  marginTop: PropTypes.string,
+  palette: PropTypes.string,
+  paletteWeight: PropTypes.string,
+  thickness: PropTypes.string,
+  transitionDuration: PropTypes.string,
+  value: PropTypes.number,
+  valueInitial: PropTypes.number
+};
+UIProgressLine.defaultProps = {
+  bufferPalette: undefined,
+  bufferPaletteWeight: undefined,
+  bufferValue: 100,
+  bufferValueInitial: undefined,
+  height: '4px',
+  margin: undefined,
+  marginBottom: undefined,
+  marginLeft: undefined,
+  marginRight: undefined,
+  marginTop: undefined,
+  palette: undefined,
+  paletteWeight: undefined,
+  thickness: undefined,
+  transitionDuration: undefined,
+  value: null,
+  valueInitial: undefined
+};
+
 var UISpacer = withEnhanceProps(styled.div.withConfig({
   displayName: "Spacer__UISpacer",
   componentId: "sc-62ugl2-0"
@@ -1884,5 +1597,5 @@ UISpacer.defaultProps = {
   variant: 'standard'
 };
 
-export { UIButton$1 as UIButton, UICard, UIError$1 as UIError, ErrorBoundary as UIErrorBoundary, ErrorWell as UIErrorWell, UIFlexBox, UIIcon, UIImage$1 as UIImage, Label$1 as UILabel, UILine, EnhancedPopup as UIPopup, Portal$1 as UIPortal, ProgressCircle as UIProgressCircle, UIProgressLine, UISpacer, UIType$1 as UIType, createStoriesForUI, createStoryForUIButton, createStoryForUIIcon, createStoryForUIImage, createStoryForUIProcessingCircle, createStoryForUIProcessingLine, createStoryForUIType, createStoryForUICard };
+export { Button$1 as UIButton, UICard, UIError$1 as UIError, ErrorBoundary as UIErrorBoundary, ErrorWell as UIErrorWell, UIFlexBox, UIIcon, Image as UIImage, Label$1 as UILabel, UILine, EnhancedPopup as UIPopup, Portal$1 as UIPortal, ProgressCircle as UIProgressCircle, UIProgressLine, UISpacer, UIType$1 as UIType };
 //# sourceMappingURL=development.js.map