@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ce2a893b1a

package/components/GlobalLoader/GlobalLoaderView.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/GlobalLoader/GlobalLoaderView.styles.js",
+  "module": "GlobalLoaderView.styles",
+  "types": "../GlobalLoaderView.styles.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/GlobalLoaderView.styles.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
+};
+export declare const animations: {
+    successAnimation(delayBeforeHide: number, width: number, left: number): string;
+    errorAnimation(t: Theme): string;
+    standardAnimation(t: Theme, expectedTime: number): string;
+    acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;
+    slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;
+    acceptWithoutAnimation(startWidth: number): string;
+};

package/components/GlobalLoader/index/index.js

@@ -0,0 +1 @@
+export * from "../GlobalLoader";

package/components/GlobalLoader/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAd","sourcesContent":["export * from './GlobalLoader';\n"]}

package/components/GlobalLoader/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/GlobalLoader/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/index.d.ts

@@ -0,0 +1 @@
+export * from './GlobalLoader';

package/components/GlobalLoader/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/GlobalLoader/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/useParams/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/GlobalLoader/useParams.js",
+  "module": "useParams",
+  "types": "../useParams.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/useParams/useParams.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+
+export var useGlobalLoaderPosition = function useGlobalLoaderPosition(ref) {
+  var _getDOMRect = getDOMRect(ref),
+      left = _getDOMRect.left;
+
+  return {
+    left: left
+  };
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+
+export var useGlobalLoaderWidth = function useGlobalLoaderWidth(status, ref) {
+  var _ref$current, _ref$current$parentEl;
+
+  var _getDOMRect2 = getDOMRect(ref),
+      width = _getDOMRect2.width;
+
+  var _useState = useState(0),
+      startWidth = _useState[0],
+      setStartWidth = _useState[1];
+
+  var fullWidth = ((_ref$current = ref.current) == null ? void 0 : (_ref$current$parentEl = _ref$current.parentElement) == null ? void 0 : _ref$current$parentEl.offsetWidth) || 0;
+  useEffect(function () {
+    if (status === 'error') {
+      setStartWidth(width);
+    } else if (status === 'accept') {
+      setStartWidth(startWidth);
+    } else {
+      setStartWidth(0);
+    }
+  }, [status]);
+  return {
+    width: width,
+    startWidth: startWidth,
+    fullWidth: fullWidth
+  };
+};

package/components/GlobalLoader/useParams/useParams.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useParams.ts"],"names":["useEffect","useState","getDOMRect","useGlobalLoaderPosition","ref","left","useGlobalLoaderWidth","status","width","startWidth","setStartWidth","fullWidth","current","parentElement","offsetWidth"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;;AAEA,SAASC,UAAT,QAA2B,0BAA3B;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,GAAD,EAA2C;AAChF,oBAAiBF,UAAU,CAACE,GAAD,CAA3B,CAAQC,IAAR,eAAQA,IAAR;AACA,SAAO,EAAEA,IAAI,EAAJA,IAAF,EAAP;AACD,CAHM;;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;AAClCC,MADkC;AAElCH,GAFkC;AAG/B;AACH,qBAAkBF,UAAU,CAACE,GAAD,CAA5B,CAAQI,KAAR,gBAAQA,KAAR;AACA,kBAAoCP,QAAQ,CAAC,CAAD,CAA5C,CAAOQ,UAAP,gBAAmBC,aAAnB;AACA,MAAMC,SAAS,GAAG,iBAAAP,GAAG,CAACQ,OAAJ,2DAAaC,aAAb,2CAA4BC,WAA5B,KAA2C,CAA7D;AACAd,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIO,MAAM,KAAK,OAAf,EAAwB;AACtBG,MAAAA,aAAa,CAACF,KAAD,CAAb;AACD,KAFD,MAEO,IAAID,MAAM,KAAK,QAAf,EAAyB;AAC9BG,MAAAA,aAAa,CAACD,UAAD,CAAb;AACD,KAFM,MAEA;AACLC,MAAAA,aAAa,CAAC,CAAD,CAAb;AACD;AACF,GARQ,EAQN,CAACH,MAAD,CARM,CAAT;;AAUA,SAAO,EAAEC,KAAK,EAALA,KAAF,EAASC,UAAU,EAAVA,UAAT,EAAqBE,SAAS,EAATA,SAArB,EAAP;AACD,CAlBM","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';\n\n/**\n * Вычисляет положение `GlobalLoader`\n *\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает положение полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderPosition = (ref: GlobalLoaderViewRef['refObject']) => {\n  const { left } = getDOMRect(ref);\n  return { left };\n};\n\n/**\n * Вычисляет ширину `GlobalLoader`\n *\n * @param status - статус `GlobalLoader`\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает ширину полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderWidth = (\n  status: GlobalLoaderViewProps['status'],\n  ref: GlobalLoaderViewRef['refObject'],\n) => {\n  const { width } = getDOMRect(ref);\n  const [startWidth, setStartWidth] = useState(0);\n  const fullWidth = ref.current?.parentElement?.offsetWidth || 0;\n  useEffect(() => {\n    if (status === 'error') {\n      setStartWidth(width);\n    } else if (status === 'accept') {\n      setStartWidth(startWidth);\n    } else {\n      setStartWidth(0);\n    }\n  }, [status]);\n\n  return { width, startWidth, fullWidth };\n};\n"]}

package/components/GlobalLoader/useParams.d.ts

@@ -0,0 +1,22 @@
+import { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderPosition: (ref: GlobalLoaderViewRef['refObject']) => {
+    left: number;
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderWidth: (status: GlobalLoaderViewProps['status'], ref: GlobalLoaderViewRef['refObject']) => {
+    width: number;
+    startWidth: number;
+    fullWidth: number;
+};

package/components/Group/Group/Group.js

@@ -1,14 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { isIE11, isEdge } from "../../../lib/utils";
-import { Corners } from "../../Button/Corners";
+import { isIE11, isEdge } from "../../../lib/client";
 import { isButton } from "../../Button";
-import { jsStyles } from "../Group.styles";
-export var Group =
-/*#__PURE__*/
-function (_React$Component) {
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Group.styles";
+
+var getFirstChild = function getFirstChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  return children == null ? void 0 : children[0];
+};
+
+var getLastChild = function getLastChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  var numberOfChildren = React.Children.count(children);
+  return children == null ? void 0 : children[numberOfChildren - 1];
+};
+
+var getButtonCorners = function getButtonCorners(child, firstChild, lastChild) {
+  if (firstChild === lastChild) {
+    return {};
+  }
+
+  if (child === firstChild) {
+    return {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }
+
+  if (child === lastChild) {
+    return {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    };
+  }
+
+  return {
+    borderRadius: 0
+  };
+};
+
+var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild) {
+  if (isButton(child)) {
+    var corners = getButtonCorners(child, firstChild, lastChild);
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: corners
+    });
+  }
+
+  return child;
+};
+
+export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Group, _React$Component);
 
   function Group() {
@@ -23,53 +79,33 @@ function (_React$Component) {
     var style = {
       width: this.props.width
     };
-    var first = null;
-    var last = null;
-    React.Children.forEach(this.props.children, function (child) {
-      if (child && React.isValidElement(child)) {
-        first = first || child;
-        last = child;
-      }
-    });
-    return React.createElement("span", {
-      className: jsStyles.root(),
+    var childrenArray = React.Children.toArray(this.props.children);
+    var firstChild = getFirstChild(childrenArray);
+    var lastChild = getLastChild(childrenArray);
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("span", {
+      className: styles.root(),
       style: style
-    }, React.Children.map(this.props.children, function (child) {
-      var _cn, _cn2;
+    }, React.Children.map(childrenArray, function (child) {
+      var _cx, _cx2;
 
-      if (!child || !React.isValidElement(child)) {
+      if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
         return null;
       }
 
       var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-      var itemCss = cn((_cn = {}, _cn[jsStyles.item()] = true, _cn[jsStyles.itemFirst()] = child === first, _cn));
-      var corners = 0;
-
-      if (child !== first) {
-        corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;
-      }
-
-      if (child !== last) {
-        corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;
-      }
-
-      if (isButton(child)) {
-        child = React.cloneElement(child, {
-          corners: corners
-        });
-      }
-
-      return React.createElement("div", {
-        className: cn((_cn2 = {}, _cn2[jsStyles.fixed()] = !isWidthInPercent, _cn2[jsStyles.stretch()] = isWidthInPercent, _cn2[jsStyles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cn2))
-      }, React.createElement("div", {
-        className: itemCss
-      }, child));
-    }));
+      var modifiedChild = passCornersIfButton(child, firstChild, lastChild);
+      var isFirstChild = child === firstChild;
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx2 = {}, _cx2[styles.item()] = true, _cx2[styles.itemFirst()] = isFirstChild, _cx2))
+      }, modifiedChild));
+    })));
   };
 
   return Group;
-}(React.Component);
-Group.__KONTUR_REACT_UI__ = 'Group';
-Group.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
+}, _temp)) || _class;

package/components/Group/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","cn","isIE11","isEdge","Corners","isButton","jsStyles","Group","render","style","width","props","first","last","Children","forEach","children","child","isValidElement","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isIE11, isEdge } from '../../lib/utils';\r\nimport { Corners } from '../Button/Corners';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isButton } from '../Button';\r\n\r\nimport { jsStyles } from './Group.styles';\r\n\r\nexport interface GroupProps {\r\n  width?: React.CSSProperties['width'];\r\n}\r\n\r\ninterface GroupChildProps {\r\n  width?: React.CSSProperties['width'];\r\n  corners?: number;\r\n}\r\n\r\nexport class Group extends React.Component<GroupProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Group';\r\n\r\n  public static propTypes = {\r\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n  };\r\n\r\n  public render() {\r\n    const style: React.CSSProperties = {\r\n      width: this.props.width,\r\n    };\r\n\r\n    let first: Nullable<React.ReactElement<any>> = null;\r\n    let last: Nullable<React.ReactElement<any>> = null;\r\n\r\n    React.Children.forEach(this.props.children, child => {\r\n      if (child && React.isValidElement(child)) {\r\n        first = first || child;\r\n        last = child;\r\n      }\r\n    });\r\n\r\n    return (\r\n      <span className={jsStyles.root()} style={style}>\r\n        {React.Children.map(this.props.children, child => {\r\n          if (!child || !React.isValidElement<GroupChildProps>(child)) {\r\n            return null;\r\n          }\r\n\r\n          const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\r\n          const itemCss = cn({\r\n            [jsStyles.item()]: true,\r\n            [jsStyles.itemFirst()]: child === first,\r\n          });\r\n\r\n          let corners = 0;\r\n          if (child !== first) {\r\n            corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\r\n          }\r\n          if (child !== last) {\r\n            corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\r\n          }\r\n\r\n          if (isButton(child)) {\r\n            child = React.cloneElement(child, { corners });\r\n          }\r\n\r\n          return (\r\n            <div\r\n              className={cn({\r\n                [jsStyles.fixed()]: !isWidthInPercent,\r\n                [jsStyles.stretch()]: isWidthInPercent,\r\n                [jsStyles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\r\n              })}\r\n            >\r\n              <div className={itemCss}>{child}</div>\r\n            </div>\r\n          );\r\n        })}\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","child","firstChild","lastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","corners","cloneElement","Group","render","style","width","props","childrenArray","toArray","setRootNode","root","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","isFirstChild","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nconst getButtonCorners = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n): React.CSSProperties => {\n  if (firstChild === lastChild) {\n    return {};\n  }\n\n  if (child === firstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (child === lastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  if (isButton(child)) {\n    const corners = getButtonCorners(child, firstChild, lastChild);\n\n    return React.cloneElement(child, { corners });\n  }\n\n  return child;\n};\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild);\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-export interface GroupProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface GroupProps extends CommonProps {
     width?: React.CSSProperties['width'];
 }
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
+    private setRootNode;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };

package/components/Group/Group.md

@@ -1,26 +1,18 @@
-```jsx harmony
-import UndoIcon from '@skbkontur/react-icons/Undo';
-import FunctionIcon from '@skbkontur/react-icons/Function';
-import { Button, Input } from '@skbkontur/react-ui';
-
-let initialState = { auto: false };
-
-let auto = null;
-let icon = null;
-if (!state.auto) {
-  auto = (
-    <Button onClick={e => setState({ auto: true })}>
-      <UndoIcon />
-    </Button>
-  );
-} else {
-  icon = <FunctionIcon />;
-}
-
-<Group width={300}>
-  {auto}
-  <Input width="100%" leftIcon={icon} onChange={e => setState({ auto: false })} />
-  <Button>Hey</Button>
-  <Button>Ma</Button>
-</Group>;
-```
+```jsx harmony
+import FunctionIcon from '@skbkontur/react-icons/Function';
+import SearchIcon from '@skbkontur/react-icons/Search';
+import { Button, Input } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Foo');
+
+<Group width={300}>
+  <Button>
+    <FunctionIcon />
+  </Button>
+  <Input value={value} width="100%" onValueChange={setValue} />
+  <Button>
+    <SearchIcon />
+  </Button>
+  <Button>Bar</Button>
+</Group>;
+```

package/components/Group/Group.styles/Group.styles.js

@@ -1,84 +1,25 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin-left: 0;\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin-left: -1px;\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      flex-basis: 100%;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      flex-shrink: 0;\n      display: inline-block;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject());
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
   },
   fixed: function fixed() {
-    return css(_templateObject2());
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
   },
   stretch: function stretch() {
-    return css(_templateObject3());
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
   },
   stretchFallback: function stretchFallback() {
-    return css(_templateObject4());
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      flex-basis: 100%;\n    "])));
   },
   item: function item() {
-    return css(_templateObject5());
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-left: -1px;\n    "])));
   },
   itemFirst: function itemFirst() {
-    return css(_templateObject6());
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-left: 0;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Group/Group.styles/Group.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.styles.ts"],"names":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst","jsStyles"],"mappings":"usCAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;AAGD,GALY;;AAObI,EAAAA,KAPa,mBAOL;AACN,WAAOJ,GAAP;;;;AAID,GAZY;;AAcbK,EAAAA,OAda,qBAcH;AACR,WAAOL,GAAP;;;;AAID,GAnBY;;AAqBbM,EAAAA,eArBa,6BAqBK;AAChB,WAAON,GAAP;;;AAGD,GAzBY;;AA2BbO,EAAAA,IA3Ba,kBA2BN;AACL,WAAOP,GAAP;;;AAGD,GA/BY;;AAiCbQ,EAAAA,SAjCa,uBAiCD;AACV,WAAOR,GAAP;;;AAGD,GArCY,EAAf;;;AAwCA,OAAO,IAAMS,QAAQ,GAAGR,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      display: inline-flex;\r\n    `;\r\n  },\r\n\r\n  fixed() {\r\n    return css`\r\n      flex-shrink: 0;\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  stretch() {\r\n    return css`\r\n      flex-grow: 1;\r\n      flex-shrink: 1;\r\n    `;\r\n  },\r\n\r\n  stretchFallback() {\r\n    return css`\r\n      flex-basis: 100%;\r\n    `;\r\n  },\r\n\r\n  item() {\r\n    return css`\r\n      margin-left: -1px;\r\n    `;\r\n  },\r\n\r\n  itemFirst() {\r\n    return css`\r\n      margin-left: 0;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Group.styles.ts"],"names":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;AAID,GAbgC;;AAejCK,EAAAA,OAfiC,qBAevB;AACR,WAAOL,GAAP;;;;AAID,GApBgC;;AAsBjCM,EAAAA,eAtBiC,6BAsBf;AAChB,WAAON,GAAP;;;AAGD,GA1BgC;;AA4BjCO,EAAAA,IA5BiC,kBA4B1B;AACL,WAAOP,GAAP;;;AAGD,GAhCgC;;AAkCjCQ,EAAAA,SAlCiC,uBAkCrB;AACV,WAAOR,GAAP;;;AAGD,GAtCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-flex;\n      line-height: normal;\n    `;\n  },\n\n  fixed() {\n    return css`\n      flex-shrink: 0;\n      display: inline-block;\n    `;\n  },\n\n  stretch() {\n    return css`\n      flex-grow: 1;\n      flex-shrink: 1;\n    `;\n  },\n\n  stretchFallback() {\n    return css`\n      flex-basis: 100%;\n    `;\n  },\n\n  item() {\n    return css`\n      margin-left: -1px;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n});\n"]}

package/components/Group/Group.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const jsStyles: {
+export declare const styles: {
     root(): string;
     fixed(): string;
     stretch(): string;

package/components/Group/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Group';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Group';\n"]}