@bolio-ui/core 1.1.7 → 1.1.8

package/README.md

@@ -30,10 +30,6 @@
 
 Visit <a aria-label="bolio-ui learn" href="https://bolio-ui.com/docs/guide">https://bolio-ui.com/docs/guide</a> to get started with Bolio UI.
 
-## Documentation
-
-Visit [https://bolio-ui.com/docs](https://bolio-ui.com/docs) to view the full documentation.
-
 ## Quick Start
 
 1. Installation: Inside your React project directory, install Bolio UI by running either of the following:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolio-ui/core",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Amazing, modern and creative tools for React UI. 🥷🏼",
   "keywords": [
     "bolio",
@@ -48,7 +48,7 @@
     "build:storybook": "build-storybook -s ./public",
     "build:clear": "rm -rf ./dist ./esm",
     "build:rollup": "rollup -c scripts/rollup.config.js",
-    "build:babel": "babel --no-babelrc --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./core --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts\"",
+    "build:babel": "babel --no-babelrc --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./core --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts,**/stories.tsx\"",
     "build:after": "node scripts/move-built-in.js",
     "build:webpack": "webpack --config scripts/webpack.config.js",
     "build:types": "ttsc -p ./scripts & ttsc -p ./scripts --outDir ./esm",
@@ -65,28 +65,7 @@
     ]
   },
   "dependencies": {
-    "@mapbox/rehype-prism": "^0.6.0",
-    "@mdx-js/loader": "^1.6.22",
-    "@next/mdx": "^11.0.1",
-    "algoliasearch": "^4.14.2",
-    "classnames": "^2.3.1",
-    "gray-matter": "^4.0.3",
-    "jest-styled-components": "^7.0.5",
-    "kbar": "0.1.0-beta.6",
-    "next": "12.3.1",
-    "next-seo": "^5.5.0",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^18.2.0",
-    "react-autosuggest": "^10.1.0",
-    "react-device-detect": "^1.17.0",
-    "react-dom": "^18.2.0",
-    "react-instantsearch-dom": "^6.12.0",
-    "react-live": "^2.2.3",
-    "react-syntax-highlighter": "^15.5.0",
-    "rehype-join-line": "^1.0.2",
-    "remark-autolink-headings": "^6.0.1",
-    "remark-slug": "^6.0.0",
-    "styled-components": "^5.3.0"
+    "@babel/runtime": "^7.14.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.5",
@@ -96,6 +75,9 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@bolio-ui/icons": "^1.0.4",
+    "@mapbox/rehype-prism": "^0.6.0",
+    "@mdx-js/loader": "^1.6.22",
+    "@next/mdx": "^11.0.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@storybook/addon-essentials": "^6.5.12",
@@ -110,9 +92,11 @@
     "@types/styled-components": "^5.1.11",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
+    "algoliasearch": "^4.14.2",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.13.2",
     "babel-plugin-transform-rename-import": "^2.3.0",
+    "classnames": "^2.3.1",
     "eslint": "7.32.0",
     "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "^8.3.0",
@@ -120,14 +104,32 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-storybook": "^0.6.4",
+    "gray-matter": "^4.0.3",
     "husky": "^7.0.0",
     "jest": "^27.0.6",
+    "jest-styled-components": "^7.0.5",
+    "kbar": "0.1.0-beta.6",
     "lint-staged": "^11.1.1",
+    "next": "12.3.1",
+    "next-pwa": "^5.6.0",
+    "next-seo": "^5.5.0",
     "plop": "^2.7.4",
     "prettier": "2.3.2",
+    "prism-react-renderer": "^1.2.1",
+    "react": "^18.2.0",
+    "react-autosuggest": "^10.1.0",
+    "react-device-detect": "^1.17.0",
+    "react-dom": "^18.2.0",
+    "react-instantsearch-dom": "^6.12.0",
+    "react-live": "^2.2.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-join-line": "^1.0.2",
+    "remark-autolink-headings": "^6.0.1",
+    "remark-slug": "^6.0.0",
     "rollup": "^2.64.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-local-resolve": "^1.0.7",
+    "styled-components": "^5.3.0",
     "styled-jsx": "4.0.1",
     "ttypescript": "^1.5.13",
     "typescript": "^4.3.5",

package/esm/Avatar/stories.js

@@ -1,113 +0,0 @@
-import Avatar from '.';
-import Grid from '../Grid';
-export default {
-  title: 'Data Display/Avatar',
-  component: Avatar
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=60",
-    isSquare: true,
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "Bill",
-    isSquare: true,
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=30",
-    isSquare: true,
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "Max",
-    isSquare: true,
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=20",
-    isSquare: true,
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "Jane",
-    isSquare: true,
-    width: 1.5,
-    height: 1.5
-  })));
-};
-export var Text = function Text() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "BA",
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "ES",
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "MB",
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "WL",
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "ML",
-    width: 1.5,
-    height: 1.5
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
-    text: "TR",
-    width: 1.5,
-    height: 1.5
-  })));
-};
-export var Group = function Group() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar.Group, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=60",
-    width: 1.5,
-    height: 1.5,
-    stacked: true
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=30",
-    width: 1.5,
-    height: 1.5,
-    stacked: true
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=20",
-    width: 1.5,
-    height: 1.5,
-    stacked: true
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=10",
-    width: 1.5,
-    height: 1.5,
-    stacked: true
-  }))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar.Group, {
-    count: 6
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=60",
-    width: 1.5,
-    height: 1.5,
-    stacked: true
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    text: "C",
-    width: 1.5,
-    height: 1.5,
-    stacked: true
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    text: "Mag",
-    width: 1.5,
-    height: 1.5,
-    stacked: true
-  }))));
-};

package/esm/Badge/stories.js

@@ -1,92 +0,0 @@
-import { useTheme } from '../use-theme/theme-context';
-import Badge from '.';
-import Grid from '../Grid';
-import Avatar from '../Avatar';
-import Button from '../Button';
-import Link from '../Link';
-export default {
-  title: 'Data Display/Badge',
-  component: Badge
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, null, "Default")));
-};
-export var Type = function Type() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, null, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    type: "primary"
-  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    type: "secondary"
-  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    type: "success"
-  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    type: "warning"
-  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    type: "error"
-  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    type: "info"
-  }, "Info")));
-};
-export var CustomColor = function CustomColor() {
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    style: {
-      backgroundColor: theme.palette.successDark
-    }
-  }, "Success Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    style: {
-      backgroundColor: theme.palette.alert
-    }
-  }, "Alert")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    style: {
-      backgroundColor: theme.palette.purple
-    }
-  }, "Purple")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
-    style: {
-      backgroundColor: theme.palette.secondary
-    }
-  }, "Violet")));
-};
-export var Anchor = function Anchor() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
-    scale: 0.5
-  }, "10"), /*#__PURE__*/React.createElement(Avatar, {
-    src: "https://i.pravatar.cc/150?img=60"
-  }))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, {
-    placement: "bottomRight"
-  }, /*#__PURE__*/React.createElement(Badge, {
-    scale: 0.5,
-    type: "success"
-  }, "10"), /*#__PURE__*/React.createElement(Avatar, {
-    scale: 1.5,
-    isSquare: true,
-    src: "https://i.pravatar.cc/150?img=30"
-  }))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
-    scale: 0.5,
-    type: "warning"
-  }, "99+"), /*#__PURE__*/React.createElement(Button, {
-    scale: 0.5,
-    auto: true
-  }, "Action"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
-    scale: 0.5,
-    type: "error",
-    dot: true
-  }), /*#__PURE__*/React.createElement(Link, {
-    target: "_blank",
-    href: "https://github.com/bolio-ui/bolio-ui/"
-  }, "Bolio UI"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
-    type: "error",
-    dot: true,
-    padding: "5px"
-  }), /*#__PURE__*/React.createElement(Link, {
-    target: "_blank",
-    href: "https://github.com/bolio-ui/bolio-ui/"
-  }, "Share Link"))));
-};

package/esm/Breadcrumbs/stories.js

@@ -1,51 +0,0 @@
-import NextLink from 'next/link';
-import Breadcrumbs from '.';
-import Grid from '../Grid';
-import { Home, Settings } from '@bolio-ui/icons';
-export default {
-  title: 'Navigation/Breadcrumbs',
-  component: Breadcrumbs
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Home"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
-    href: ""
-  }, "Settings"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "General"))));
-};
-export var Separator = function Separator() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2,
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, {
-    separator: "-"
-  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Home"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
-    href: ""
-  }, "Categories"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Add"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, {
-    separator: ">"
-  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Home"), /*#__PURE__*/React.createElement(Breadcrumbs.Separator, null, ":"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
-    href: ""
-  }, "Pages"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
-    href: ""
-  }, "Default"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Index"))));
-};
-export var Icons = function Icons() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, /*#__PURE__*/React.createElement(Home, null)), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
-    href: ""
-  }, /*#__PURE__*/React.createElement(Settings, null), " Settings"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "General"))));
-};
-export var WithNextjs = function WithNextjs() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(NextLink, {
-    href: "/"
-  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
-    nextLink: true
-  }, "Home")), /*#__PURE__*/React.createElement(NextLink, {
-    href: "/settings"
-  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
-    nextLink: true
-  }, "Settings")), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "General"))));
-};

package/esm/Button/stories.js

@@ -1,221 +0,0 @@
-import Button from '.';
-import Grid from '../Grid';
-import { Zap, ZapOff, AlertCircle, XSquare } from '@bolio-ui/icons';
-export default {
-  title: 'General/Button',
-  component: Button
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, null, "Button")));
-};
-export var Loading = function Loading() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    loading: true
-  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    loading: true,
-    scale: 0.75
-  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    loading: true,
-    auto: true,
-    type: "primary",
-    scale: 2 / 3
-  }, "Button")));
-};
-export var Disabled = function Disabled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    disabled: true
-  }, "Button")));
-};
-export var Shadow = function Shadow() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    shadow: true,
-    type: "primary"
-  }, "Button Shadow")));
-};
-export var TypeColors = function TypeColors() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "primary"
-  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "secondary"
-  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "success"
-  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "warning"
-  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "error"
-  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "info"
-  }, "Info")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "abort"
-  }, "Abort")));
-};
-export var Lighted = function Lighted() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "primary-light"
-  }, "Primary Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "secondary-light"
-  }, "Secondary Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "success-light"
-  }, "Success Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "warning-light"
-  }, "Warning Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "error-light"
-  }, "Error Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    type: "info-light"
-  }, "Info Light")));
-};
-export var Ghost = function Ghost() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "secondary",
-    ghost: true,
-    auto: true,
-    scale: 0.7
-  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "success",
-    ghost: true,
-    auto: true,
-    scale: 0.7
-  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "warning",
-    ghost: true,
-    auto: true,
-    scale: 0.7
-  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "error",
-    ghost: true,
-    auto: true,
-    scale: 0.7
-  }, "Error")));
-};
-export var Rounded = function Rounded() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "secondary",
-    rounded: true,
-    auto: true,
-    scale: 0.7
-  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "success",
-    rounded: true,
-    auto: true,
-    scale: 0.7
-  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "warning",
-    rounded: true,
-    auto: true,
-    scale: 0.7
-  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    type: "error",
-    rounded: true,
-    auto: true,
-    scale: 0.7
-  }, "Error")));
-};
-export var Scale = function Scale() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 0.25
-  }, "0.25")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 0.35
-  }, "0.35")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 1 / 2
-  }, "1 / 2")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 0.75
-  }, "0.75")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    padding: 0
-  }, "NoPadding")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    font: 0.25
-  }, "Small Font")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    pl: 0,
-    ml: "25px"
-  }, "Offset")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Button, {
-    width: "100%"
-  }, "Full Width")), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    width: "30%",
-    mx: "5px"
-  }, "proportion"), /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    width: "30%",
-    mx: "5px"
-  }, "proportion"), /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    width: "30%",
-    mx: "5px"
-  }, "proportion")));
-};
-export var WithIcons = function WithIcons() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    iconRight: /*#__PURE__*/React.createElement(Zap, null),
-    auto: true,
-    scale: 2 / 3
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    iconRight: /*#__PURE__*/React.createElement(ZapOff, null),
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(AlertCircle, null),
-    auto: true
-  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    iconRight: /*#__PURE__*/React.createElement(AlertCircle, null),
-    type: "success",
-    scale: 0.85
-  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(AlertCircle, null),
-    type: "warning",
-    scale: 0.85
-  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(AlertCircle, null),
-    type: "secondary"
-  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(XSquare, null),
-    type: "error",
-    ghost: true
-  }, "Remove Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(XSquare, null),
-    disabled: true
-  }, "Remove Button")));
-};