@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/components/FxInput/FxInput.md

@@ -0,0 +1,16 @@
+```jsx harmony
+const [auto, setAuto] = React.useState(false);
+const [value, setValue] = React.useState();
+
+function handleValueChange(value) {
+  setAuto(false);
+  setValue(value);
+}
+
+function handleRestore() {
+  setAuto(true);
+  setValue('auto');
+}
+
+<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
+```

package/components/FxInput/index/index.js

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

package/components/FxInput/index/index.js.map

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

package/components/FxInput/index/package.json

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

package/components/FxInput/index.d.ts

@@ -1 +1 @@
-export { default, FxInputProps } from './FxInput';
+export * from './FxInput';

package/components/FxInput/package.json

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

package/components/Gapped/Gapped/Gapped.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+/**
+ * Контейнер, расстояние между элементами в котором равно `gap`.
+ */
+
+export var Gapped = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Gapped, _React$Component);
+
+  function Gapped() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Gapped.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, this.props.vertical ? this.renderVertical() : this.renderHorizontal());
+  };
+
+  _proto.getGapValue = function getGapValue() {
+    // DEPRECATED remove in 4.0
+    var propsGap = this.props.gap;
+
+    if (propsGap !== undefined && propsGap !== null) {
+      return propsGap;
+    } else {
+      return 8;
+    }
+  };
+
+  _proto.renderVertical = function renderVertical() {
+    var subsequentItemStyle = {
+      paddingTop: this.getGapValue()
+    };
+    var children = React.Children.toArray(this.props.children).filter(this.filterChildren).map(function (child, index) {
+      var style = index === 0 ? undefined : subsequentItemStyle;
+      return /*#__PURE__*/React.createElement("div", {
+        style: style,
+        key: index
+      }, child);
+    });
+    return /*#__PURE__*/React.createElement("div", null, children);
+  };
+
+  _proto.renderHorizontal = function renderHorizontal() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        verticalAlign = _this$props.verticalAlign,
+        wrap = _this$props.wrap;
+    var gap = this.getGapValue();
+
+    var itemStyle = _extends({
+      display: 'inline-block',
+      verticalAlign: verticalAlign
+    }, wrap ? {
+      marginLeft: gap,
+      marginTop: gap
+    } : {});
+
+    var rootStyle = wrap ? {
+      paddingTop: 1
+    } : {};
+    var contStyle = wrap ? {
+      marginTop: -gap - 1,
+      marginLeft: -gap
+    } : {
+      whiteSpace: 'nowrap'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: rootStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: contStyle
+    }, React.Children.toArray(children).filter(this.filterChildren).map(function (child, index) {
+      var marginLeft = index === 0 ? undefined : gap;
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: _extends({
+          marginLeft: marginLeft
+        }, itemStyle)
+      }, child);
+    })));
+  };
+
+  _proto.filterChildren = function filterChildren(child) {
+    return Boolean(child) || typeof child === 'number';
+  };
+
+  return Gapped;
+}(React.Component);
+Gapped.__KONTUR_REACT_UI__ = 'Gapped';
+Gapped.propTypes = {
+  /**
+  * Расстояние между элементами.
+  */
+  gap: PropTypes.number,
+
+  /**
+  * Располагать элементы вертикально.
+  */
+  vertical: PropTypes.bool,
+
+  /**
+  * Вертикальное выравнивание элементов.
+  */
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom'])
+};
+Gapped.defaultProps = {
+  wrap: false,
+  vertical: false,
+  verticalAlign: 'baseline'
+};

package/components/Gapped/Gapped/Gapped.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Gapped.tsx"],"names":["React","PropTypes","CommonWrapper","Gapped","render","props","vertical","renderVertical","renderHorizontal","getGapValue","propsGap","gap","undefined","subsequentItemStyle","paddingTop","children","Children","toArray","filter","filterChildren","map","child","index","style","verticalAlign","wrap","itemStyle","display","marginLeft","marginTop","rootStyle","contStyle","whiteSpace","Boolean","Component","__KONTUR_REACT_UI__","propTypes","number","bool","oneOf","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nexport interface GappedProps extends CommonProps {\n  /**\n   * Расстояние между элементами в пикселях\n   * @default 8\n   */\n  gap?: number;\n  /**\n   * Вертикальное выравнивание\n   * @default \"baseline\"\n   */\n  verticalAlign: 'top' | 'middle' | 'baseline' | 'bottom';\n  /**\n   * Расположение элементов по вертикали\n   * @default false\n   */\n  vertical: boolean;\n  /**\n   * Перенос элементов на новую строку при горизонтальном расположении\n   * @default false\n   */\n  wrap: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Контейнер, расстояние между элементами в котором равно `gap`.\n */\nexport class Gapped extends React.Component<GappedProps> {\n  public static __KONTUR_REACT_UI__ = 'Gapped';\n\n  public static propTypes = {\n    /**\n     * Расстояние между элементами.\n     */\n    gap: PropTypes.number,\n\n    /**\n     * Располагать элементы вертикально.\n     */\n    vertical: PropTypes.bool,\n\n    /**\n     * Вертикальное выравнивание элементов.\n     */\n    verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom']),\n  };\n\n  public static defaultProps = {\n    wrap: false,\n    vertical: false,\n    verticalAlign: 'baseline',\n  };\n\n  public render() {\n    return (\n      <CommonWrapper {...this.props}>\n        {this.props.vertical ? this.renderVertical() : this.renderHorizontal()}\n      </CommonWrapper>\n    );\n  }\n\n  private getGapValue() {\n    // DEPRECATED remove in 4.0\n    const { gap: propsGap } = this.props;\n    if (propsGap !== undefined && propsGap !== null) {\n      return propsGap;\n    } else {\n      return 8;\n    }\n  }\n\n  private renderVertical() {\n    const subsequentItemStyle: React.CSSProperties = {\n      paddingTop: this.getGapValue(),\n    };\n    const children = React.Children.toArray(this.props.children)\n      .filter(this.filterChildren)\n      .map((child, index) => {\n        const style = index === 0 ? undefined : subsequentItemStyle;\n        return (\n          <div style={style} key={index}>\n            {child}\n          </div>\n        );\n      });\n\n    return <div>{children}</div>;\n  }\n\n  private renderHorizontal() {\n    const { children, verticalAlign, wrap } = this.props;\n    const gap = this.getGapValue();\n    const itemStyle: React.CSSProperties = {\n      display: 'inline-block',\n      verticalAlign,\n      ...(wrap ? { marginLeft: gap, marginTop: gap } : {}),\n    };\n    const rootStyle: React.CSSProperties = wrap ? { paddingTop: 1 } : {};\n    const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };\n\n    return (\n      <div style={rootStyle}>\n        <div style={contStyle}>\n          {React.Children.toArray(children)\n            .filter(this.filterChildren)\n            .map((child, index) => {\n              const marginLeft = index === 0 ? undefined : gap;\n              return (\n                <span key={index} style={{ marginLeft, ...itemStyle }}>\n                  {child}\n                </span>\n              );\n            })}\n        </div>\n      </div>\n    );\n  }\n\n  private filterChildren(child: React.ReactNode): boolean {\n    return Boolean(child) || typeof child === 'number';\n  }\n}\n"]}

package/components/Gapped/Gapped/package.json

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

package/components/Gapped/Gapped.d.ts

@@ -1,35 +1,56 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-export interface GappedProps {
-    gap?: number;
-    verticalAlign?: 'top' | 'middle' | 'baseline' | 'bottom';
-    vertical?: boolean;
-    children: React.ReactNode;
-}
-/**
- * Контейнер, расстояние между элементами в котором равно `gap`.
- */
-declare class Gapped extends React.Component<GappedProps> {
-    static propTypes: {
-        /**
-         * Расстояние между элементами.
-         */
-        gap: PropTypes.Requireable<number>;
-        /**
-         * Располагать элементы вертикально.
-         */
-        vertical: PropTypes.Requireable<boolean>;
-        /**
-         * Вертикальное выравнивание элементов.
-         */
-        verticalAlign: PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        gap: number;
-        verticalAlign: string;
-    };
-    render(): JSX.Element;
-    private _renderVertical;
-    private _renderHorizontal;
-}
-export default Gapped;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface GappedProps extends CommonProps {
+    /**
+     * Расстояние между элементами в пикселях
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Вертикальное выравнивание
+     * @default "baseline"
+     */
+    verticalAlign: 'top' | 'middle' | 'baseline' | 'bottom';
+    /**
+     * Расположение элементов по вертикали
+     * @default false
+     */
+    vertical: boolean;
+    /**
+     * Перенос элементов на новую строку при горизонтальном расположении
+     * @default false
+     */
+    wrap: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Контейнер, расстояние между элементами в котором равно `gap`.
+ */
+export declare class Gapped extends React.Component<GappedProps> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        /**
+         * Расстояние между элементами.
+         */
+        gap: PropTypes.Requireable<number>;
+        /**
+         * Располагать элементы вертикально.
+         */
+        vertical: PropTypes.Requireable<boolean>;
+        /**
+         * Вертикальное выравнивание элементов.
+         */
+        verticalAlign: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        wrap: boolean;
+        vertical: boolean;
+        verticalAlign: string;
+    };
+    render(): JSX.Element;
+    private getGapValue;
+    private renderVertical;
+    private renderHorizontal;
+    private filterChildren;
+}

package/components/Gapped/Gapped.md

@@ -0,0 +1,43 @@
+Вывод элементов с горизонтальным расположением
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Gapped gap={20}>
+  <Button use="primary">Сохранить</Button>
+  <Button>Отмена</Button>
+</Gapped>;
+```
+
+Вертикальное расположение
+
+```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
+<Gapped vertical gap={20}>
+  <Checkbox checked>Write todos</Checkbox>
+  <Checkbox initialIndeterminate>Work in progress</Checkbox>
+  <Checkbox>Make things done</Checkbox>
+</Gapped>;
+```
+
+По умолчанию `Gapped` выстраивает элементы в одну строчку, но с помощью свойства `wrap` можно включить перенос элементов на новую строку.
+При этом между строчками будет отступ равный значению свойста `gap`
+В таком случае из-за особенности верстки `Gapped` может перекрывать элементы расположенные сверху-слева.
+
+```jsx harmony
+import { Button, Checkbox, Toggle } from '@skbkontur/react-ui';
+
+<>
+  {"U Can't Touch This! => "}
+  <Toggle />
+
+  <div style={{ paddingTop: '10px', position: 'relative', width: '250px' }}>
+    <Gapped wrap gap={50}>
+      <Button use="primary">Сохранить</Button>
+      <Button>Отмена</Button>
+      <Checkbox>Я не робот</Checkbox>
+    </Gapped>
+  </div>
+</>;
+```

package/components/Gapped/index/index.js

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

package/components/Gapped/index/index.js.map

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

package/components/Gapped/index/package.json

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

package/components/Gapped/index.d.ts

@@ -1 +1 @@
-export { default, GappedProps } from './Gapped';
+export * from './Gapped';

package/components/Gapped/package.json

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

package/components/Group/Group/Group.js

@@ -0,0 +1,74 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isIE11, isEdge } from "../../../lib/client";
+import { Corners } from "../../Button/Corners";
+import { isButton } from "../../Button";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../Group.styles";
+export var Group = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Group, _React$Component);
+
+  function Group() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Group.prototype;
+
+  _proto.render = function render() {
+    var _this = this;
+
+    var style = {
+      width: this.props.width
+    };
+    var first = null;
+    var last = null;
+    React.Children.forEach(this.props.children, function (child) {
+      if (child && /*#__PURE__*/React.isValidElement(child)) {
+        first = first || child;
+        last = child;
+      }
+    });
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("span", {
+      className: styles.root(),
+      style: style
+    }, React.Children.map(this.props.children, function (child) {
+      var _cx, _cx2;
+
+      if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
+        return null;
+      }
+
+      var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
+      var itemCss = cx((_cx = {}, _cx[styles.item()] = true, _cx[styles.itemFirst()] = child === first, _cx));
+      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 = /*#__PURE__*/React.cloneElement(child, {
+          corners: corners
+        });
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx2 = {}, _cx2[styles.fixed()] = !isWidthInPercent, _cx2[styles.stretch()] = isWidthInPercent, _cx2[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx2))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: itemCss
+      }, child));
+    })));
+  };
+
+  return Group;
+}(React.Component);
+Group.__KONTUR_REACT_UI__ = 'Group';
+Group.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","Corners","isButton","CommonWrapper","cx","styles","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';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { Corners } from '../Button/Corners';\nimport { Nullable } from '../../typings/utility-types';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\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\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\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    let first: Nullable<React.ReactElement<any>> = null;\n    let last: Nullable<React.ReactElement<any>> = null;\n\n    React.Children.forEach(this.props.children, (child) => {\n      if (child && React.isValidElement(child)) {\n        first = first || child;\n        last = child;\n      }\n    });\n\n    return (\n      <CommonWrapper {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(this.props.children, (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            const itemCss = cx({\n              [styles.item()]: true,\n              [styles.itemFirst()]: child === first,\n            });\n\n            let corners = 0;\n            if (child !== first) {\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\n            }\n            if (child !== last) {\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\n            }\n\n            if (isButton(child)) {\n              child = React.cloneElement(child, { corners });\n            }\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 className={itemCss}>{child}</div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group/package.json

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

package/components/Group/Group.d.ts

@@ -1,23 +1,13 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import '../ensureOldIEClassName';
-export interface GroupProps {
-    width?: React.CSSProperties['width'];
-}
-export interface GroupChildProps {
-    /** @deprecated */
-    mainInGroup?: boolean;
-    width?: React.CSSProperties['width'];
-    corners?: number;
-}
-/**
- * Главному *Input*, который должен занимать всю доступную ширину, нужно
- * передать свойство `mainInGroup`;
- */
-declare class Group extends React.Component<GroupProps> {
-    static propTypes: {
-        width: PropTypes.Requireable<React.ReactText>;
-    };
-    render(): JSX.Element;
-}
-export default Group;
+import React from 'react';
+import PropTypes from 'prop-types';
+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;
+    static propTypes: {
+        width: PropTypes.Requireable<string | number>;
+    };
+    render(): JSX.Element;
+}

package/components/Group/Group.md

@@ -0,0 +1,18 @@
+```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

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

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

@@ -0,0 +1 @@
+{"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/package.json

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

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

@@ -0,0 +1,8 @@
+export declare const styles: {
+    root(): string;
+    fixed(): string;
+    stretch(): string;
+    stretchFallback(): string;
+    item(): string;
+    itemFirst(): string;
+};

package/components/Group/index/index.js

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

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

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

package/components/Group/index/package.json

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

package/components/Group/index.d.ts

@@ -1 +1 @@
-export { default, GroupProps, GroupChildProps } from './Group';
+export * from './Group';

package/components/Group/package.json

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