@bolio-ui/core 1.1.7 → 2.0.0-alpha.0

package/esm/Snippet/stories.js

@@ -1,177 +0,0 @@
-import Snippet from '.';
-import Grid from '../Grid';
-export default {
-  title: 'Others/Snippet',
-  component: Snippet
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var Width = function Width() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "100%"
-  })));
-};
-export var Types = function Types() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "primary",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "success",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "warning",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "error",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "lite",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "dark",
-    width: "300px"
-  })));
-};
-export var Rounded = function Rounded() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "primary",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "success",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "warning",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "error",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "lite",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "dark",
-    width: "300px",
-    rounded: true
-  })));
-};
-export var Multiline = function Multiline() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: ['cd project', 'now'],
-    width: "300px"
-  })));
-};
-export var DisabledCopy = function DisabledCopy() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    copy: "prevent",
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var CustomSymbol = function CustomSymbol() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    symbol: ">",
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var CustomToast = function CustomToast() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    toastText: "Code copied!",
-    toastType: "secondary",
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var Filled = function Filled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "primary",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "success",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "warning",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "error",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "info",
-    filled: true,
-    width: "300px"
-  })));
-};

package/esm/Spacer/stories.js

@@ -1,54 +0,0 @@
-import Spacer from '.';
-import Grid from '../Grid';
-export default {
-  title: 'Layout/Spacer',
-  component: Spacer
-};
-export var Vertical = function Vertical() {
-  return /*#__PURE__*/React.createElement(Grid.Container, null, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    style: {
-      background: '#444',
-      borderRadius: '15px'
-    }
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    h: 2
-  })), /*#__PURE__*/React.createElement(Spacer, {
-    h: 2
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    style: {
-      background: '#666',
-      borderRadius: '15px'
-    }
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    h: 3
-  })), /*#__PURE__*/React.createElement(Spacer, {
-    h: 3
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    style: {
-      background: '#999',
-      borderRadius: '15px'
-    }
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    h: 4
-  })));
-};
-export var Horizontal = function Horizontal() {
-  return /*#__PURE__*/React.createElement(Grid.Container, null, /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    style: {
-      background: '#444',
-      borderRadius: '15px'
-    }
-  }), /*#__PURE__*/React.createElement(Spacer, {
-    w: 5
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    style: {
-      background: '#444',
-      borderRadius: '15px'
-    }
-  }));
-};

package/esm/Spinner/stories.js

@@ -1,13 +0,0 @@
-import Spinner from '.';
-import Grid from '../Grid';
-export default {
-  title: 'Feedback/Spinner',
-  component: Spinner
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Spinner, {
-    scale: 2
-  })));
-};

package/esm/Table/stories.js

@@ -1,269 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-import Table from '.';
-import Code from '../Code';
-import Text from '../Text';
-import Button from '../Button';
-export default {
-  title: 'Data Display/Table',
-  component: Table
-};
-export var Default = function Default() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: 'string',
-    "default": '-'
-  }, {
-    property: 'bold',
-    description: 'Bold style',
-    type: 'boolean',
-    "default": 'true'
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type",
-    label: "type"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default",
-    label: "default"
-  }));
-};
-export var Compose = function Compose() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: /*#__PURE__*/React.createElement(Code, null, "string"),
-    "default": '-'
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
-    "default": /*#__PURE__*/React.createElement(Code, null, "true")
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type",
-    label: "type"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default",
-    label: "default"
-  }));
-};
-export var Width = function Width() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: /*#__PURE__*/React.createElement(Code, null, "string"),
-    "default": '-'
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
-    "default": /*#__PURE__*/React.createElement(Code, null, "true")
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property",
-    width: 50
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type",
-    label: "type"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default",
-    label: "default"
-  }));
-};
-export var Actions = function Actions() {
-  var dataSource = [{
-    property: 'type',
-    description: 'Content type',
-    operation: ''
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    operation: ''
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    operation: ''
-  }];
-
-  var _useState = useState(dataSource),
-      _useState2 = _slicedToArray(_useState, 2),
-      data = _useState2[0],
-      setData = _useState2[1];
-
-  var renderAction = function renderAction(value, rowData, index) {
-    var removeHandler = function removeHandler() {
-      setData(function (last) {
-        return last.filter(function (_, dataIndex) {
-          return dataIndex !== index;
-        });
-      });
-    };
-
-    return /*#__PURE__*/React.createElement(Button, {
-      type: "error",
-      auto: true,
-      scale: 1 / 3,
-      font: "12px",
-      onClick: removeHandler
-    }, "Remove");
-  };
-
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data,
-    onChange: function onChange(value) {
-      return setData(value);
-    }
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "operation",
-    label: "operation",
-    width: 150,
-    render: renderAction
-  }));
-};
-export var UpdateRow = function UpdateRow() {
-  var dataSource = [{
-    property: 'type',
-    description: 'Content type',
-    operation: ''
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    operation: ''
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    operation: ''
-  }];
-
-  var _React$useState = React.useState(dataSource),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      data = _React$useState2[0],
-      setData = _React$useState2[1];
-
-  var renderAction = function renderAction(value, rowData, rowIndex) {
-    var updateHandler = function updateHandler() {
-      setData(function (last) {
-        return last.map(function (item, dataIndex) {
-          if (dataIndex !== rowIndex) return item;
-          return _extends({}, item, {
-            property: Math.random().toString(16).slice(-5)
-          });
-        });
-      });
-    };
-
-    return /*#__PURE__*/React.createElement(Button, {
-      type: "secondary",
-      auto: true,
-      scale: 1 / 3,
-      font: "12px",
-      onClick: updateHandler
-    }, "Update");
-  };
-
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data,
-    onChange: function onChange(value) {
-      return setData(value);
-    }
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "operation",
-    label: "operation",
-    width: 150,
-    render: renderAction
-  }));
-};
-export var CustomHead = function CustomHead() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: /*#__PURE__*/React.createElement(Code, null, "string"),
-    "default": '-'
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
-    "default": /*#__PURE__*/React.createElement(Code, null, "true")
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type"
-  }, /*#__PURE__*/React.createElement(Code, null, "type")), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default"
-  }, /*#__PURE__*/React.createElement(Text, {
-    b: true
-  }, "default")));
-};

package/esm/Tabs/stories.js

@@ -1,92 +0,0 @@
-import Tabs from '.';
-import Text from '../Text';
-import Grid from '../Grid';
-import { Instagram, Facebook } from '@bolio-ui/icons';
-export default {
-  title: 'Navigation/Tabs',
-  component: Tabs
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "1"
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "1"
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "2"
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs."))));
-};
-export var Disabled = function Disabled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "1"
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "1"
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "2",
-    disabled: true
-  }))));
-};
-export var HideDivider = function HideDivider() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "react",
-    hideDivider: true
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "react"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "component-based"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
-};
-export var HideBorder = function HideBorder() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "react",
-    hideDivider: true,
-    hideBorder: true,
-    leftSpace: 0
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "react"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "component-based"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
-};
-export var WithIcon = function WithIcon() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "1",
-    align: "center",
-    leftSpace: 0
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Instagram, null), " Instagram"),
-    value: "1"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Hello, this is my profile.")), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Facebook, null), " Facebook"),
-    value: "2"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Hi, this is my page.")))));
-};

package/esm/Tag/stories.js

@@ -1,58 +0,0 @@
-import Tag from '.';
-import Grid from '../Grid';
-export default {
-  title: 'Data Display/Tag',
-  component: Tag
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, null, "Status: Unstable")));
-};
-export var Types = function Types() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, null, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "primary"
-  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "secondary"
-  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "success"
-  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "warning"
-  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "error"
-  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "dark"
-  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "lite"
-  }, "Lite")));
-};
-export var TypesInvert = function TypesInvert() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    invert: true
-  }, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "primary",
-    invert: true
-  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "secondary",
-    invert: true
-  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "success",
-    invert: true
-  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "warning",
-    invert: true
-  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "error",
-    invert: true
-  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "dark",
-    invert: true
-  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tag, {
-    type: "lite",
-    invert: true
-  }, "Lite")));
-};