@clement_lores/admin-design-system 1.0.0

package/build/atoms/icon/icon.js

@@ -0,0 +1,134 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import * as FeatherIcons from 'react-feather';
+import { space, color as styledColor, borderRadius } from 'styled-system';
+import { styled, css } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+
+/**
+ * Prop Types of an Icon component.
+ * Apart from props defined below it extends all {@link ColorProps} and {@link SpaceProps}
+ *
+ * @memberof Icon
+ * @alias IconProps
+ * @property {string} [...] Other props from {@link ColorProps} and {@link SpaceProps}
+ */
+
+const spinCss = css`
+  @keyframes iconSpin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  animation-name: iconSpin;
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+`;
+const Wrapper = styled.span`
+  vertical-align: middle;
+  display: inline-block;
+  line-height: ${({
+  theme
+}) => theme.lineHeights.sm};
+  font-size: ${({
+  theme
+}) => theme.fontSizes.sm};
+
+  & > svg {
+    stroke: ${({
+  theme,
+  color
+}) => color && color !== 'inherit' ? theme.colors[color] : 'currentColor'};
+    ${({
+  spin
+}) => spin ? spinCss : ''};
+  }
+  ${({
+  rounded
+}) => rounded ? 'border-radius: 9999px;' : ''};
+  ${space};
+  ${styledColor};
+  ${borderRadius}
+`;
+
+/**
+ * @classdesc
+ *
+ * <img src="components/icon.png" />
+ *
+ * Component wrapping [react-feather](https://www.npmjs.com/package/react-feather).
+ * List of all icons can be found here: https://feathericons.com/
+ * If you have problem verifying the key of given icon - you can always open the
+ * Chrome Terminal (with AdminJS open) and write there:
+ *
+ * ```
+ * Object.keys(window.FeatherIcons)
+ * ```
+ *
+ * to see list of all available icon keys.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Icon, IconProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see IconProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-icon--default Storybook}
+ * @hideconstructor
+ * @example <caption>Icons inside other elements</caption>
+ * return (
+ *   <Box variant="grey">
+ *     <Label mb="default"><Icon icon="Camera" />Icon in Label</Label>
+ *     <Button><Icon icon="Camera" />Icon in button</Button>
+ *   </Box>
+ * )
+ * @example <caption>Different sizes</caption>
+ * const sizes = [16, 20, 24, 32]
+ * return (
+ *   <Box variant="grey">
+ *     {sizes.map(size => (
+ *       <Label m="default"><Icon icon="Camera" size={size}/>Icon {size}</Label>
+ *     ))}
+ *   </Box>
+ * )
+ *
+ * @example <caption>Big rounded icon with background</caption>
+ * return (
+ *   <Box variant="grey">
+ *     <Icon icon="Plus" color="white" bg="primary100" rounded size={32} p="default"/>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const Icon = props => {
+  const {
+    icon,
+    size = 16,
+    color = 'inherit',
+    ...other
+  } = props;
+  if (!icon) return null;
+  const FeatherIcon = FeatherIcons[icon] || FeatherIcons.Slash;
+  if (FeatherIcon) {
+    return /*#__PURE__*/React.createElement(Wrapper, _extends({
+      icon: icon,
+      className: cssClass('Icon')
+    }, other, {
+      color: color
+    }), /*#__PURE__*/React.createElement(FeatherIcon, {
+      size: size,
+      color: color
+    }));
+  }
+  return null;
+};
+export { Icon };
+export default Icon;

package/build/atoms/icon/icon.stories.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import * as FeatherIcons from 'react-feather';
+import { Box, Label } from "../index.js";
+import { Icon } from "./icon.js";
+const icons = Object.keys(FeatherIcons).filter(name => name !== 'default');
+export const Default = {};
+export const Icons = () => /*#__PURE__*/React.createElement(Box, {
+  display: "grid",
+  style: {
+    gridTemplateColumns: 'repeat(10, 1fr)',
+    gap: 16
+  }
+}, icons.map(key => /*#__PURE__*/React.createElement(Box, {
+  key: key,
+  flex: true,
+  alignItems: "center",
+  flexDirection: "column"
+}, /*#__PURE__*/React.createElement(Label, null, key), /*#__PURE__*/React.createElement(Icon, {
+  icon: key,
+  size: 24
+}))));
+const meta = {
+  title: 'DesignSystem/Atoms/Icon',
+  component: Icon,
+  args: {
+    icon: icons[0],
+    size: 48,
+    rounded: false,
+    spin: false
+  },
+  argTypes: {
+    icon: {
+      description: 'CamelCased name of an icon from https://www.npmjs.com/package/react-feather',
+      control: {
+        type: 'select'
+      },
+      options: icons
+    },
+    size: {
+      control: {
+        type: 'number',
+        min: 16,
+        max: 48,
+        step: 4
+      }
+    },
+    color: {
+      control: {
+        type: 'color'
+      }
+    },
+    bg: {
+      control: {
+        type: 'color'
+      }
+    },
+    rounded: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    spin: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/icon/index.js

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

package/build/atoms/illustration/illustration.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/index.js";
+import * as Illustrations from "../illustrations/index.js";
+
+/**
+ * @memberof Illustration
+ * @alias IllustrationProps
+ */
+
+const Wrapper = styled.div.attrs(props => ({
+  className: cssClass('Illustration', props.className)
+}))`
+  [fill='#3040D6'] {
+    fill: ${({
+  theme
+}) => theme.colors.primary100};
+  }
+
+  [stroke='#3B3552'] {
+    stroke: ${({
+  theme
+}) => theme.colors.accent};
+  }
+`;
+const RawIllustration = props => {
+  const {
+    variant,
+    ...other
+  } = props;
+  const IllustrationComponent = Illustrations[variant];
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(IllustrationComponent, other));
+};
+
+/**
+ * @classdesc
+ *
+ * <img src="components/illustration.png" />
+ *
+ * Awesome database with all the illustrations provided with AdminJS.
+ *
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Illustration, IllustrationProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see IllustrationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-illustration--default Storybook}
+ * @hideconstructor
+ *
+ * @example <caption>Folders</caption>
+ * return (
+ *   <Illustration variant="Folders" />
+ * )
+ * @example <caption>DocumentSearch</caption>
+ * return (
+ *   <Illustration variant="DocumentSearch" />
+ * )
+ * @example <caption>Rocket</caption>
+ * return (
+ *   <Box bg="grey100" p="xxl"><Illustration variant="Rocket" /></Box>
+ * )
+ * @section design-system
+ */
+export const Illustration = RawIllustration;
+Illustration.displayName = 'Illustration';
+export default Illustration;

package/build/atoms/illustration/illustration.stories.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import * as illustrations from "../illustrations/index.js";
+import { Box, Label } from "../index.js";
+import { Illustration } from "./index.js";
+const illustrationVariants = Object.keys(illustrations);
+export const Default = {
+  render: ({
+    variant
+  }) => /*#__PURE__*/React.createElement(Illustration, {
+    variant: variant
+  })
+};
+export const Illustrations = () => /*#__PURE__*/React.createElement(Box, {
+  display: "grid",
+  style: {
+    gridTemplateColumns: 'repeat(4, 1fr)',
+    gap: 16
+  }
+}, illustrationVariants.map(key => /*#__PURE__*/React.createElement(Box, {
+  key: key,
+  flex: true,
+  alignItems: "center",
+  flexDirection: "column"
+}, /*#__PURE__*/React.createElement(Label, null, key), /*#__PURE__*/React.createElement(Illustration, {
+  variant: key,
+  width: 150,
+  height: 150
+}))));
+const meta = {
+  title: 'DesignSystem/Atoms/Illustration',
+  args: {
+    variant: illustrationVariants[0],
+    width: 150,
+    height: 150
+  },
+  argTypes: {
+    variant: {
+      options: illustrationVariants,
+      control: {
+        type: 'select'
+      }
+    },
+    width: {
+      control: {
+        type: 'number'
+      }
+    },
+    height: {
+      control: {
+        type: 'number'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/illustration/index.js

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

package/build/atoms/illustrations/accept.js

@@ -0,0 +1,48 @@
+import React from 'react';
+export const Accept = ({
+  width = 152,
+  height = 152
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 152 152",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("circle", {
+  cx: "76",
+  cy: "76",
+  r: "76",
+  fill: "white"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "106.552",
+  cy: "54.4483",
+  r: "17.4483",
+  fill: "#3040D6"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "75.4483",
+  cy: "76.4483",
+  r: "39.4483",
+  fill: "white",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M91.3957 102.098L90.7592 102.495L91.1558 103.131L91.7924 102.735L91.3957 102.098ZM98.8131 95.5823L99.3931 96.0578L99.8686 95.4778L99.2886 95.0023L98.8131 95.5823ZM90.6025 100.825L90.2059 100.188L89.5694 100.585L89.966 101.221L90.6025 100.825ZM97.6531 94.6313L98.1286 94.0513L97.5486 93.5758L97.0731 94.1558L97.6531 94.6313ZM104.196 85.7222L104.91 85.9523V85.9523L104.196 85.7222ZM105.647 76.4492H106.397V75.6992H105.647V76.4492ZM101.435 91.8411L101.052 92.486L101.697 92.8688L102.08 92.2239L101.435 91.8411ZM100.145 91.0755L99.5001 90.6926L99.1173 91.3376L99.7623 91.7204L100.145 91.0755ZM102.768 85.262L102.054 85.0319L102.768 85.262ZM104.147 76.4492V75.6992H103.397V76.4492H104.147ZM91.7924 102.735C94.6786 100.936 97.2465 98.6763 99.3931 96.0578L98.2331 95.1068C96.1899 97.5992 93.7457 99.7502 90.9991 101.461L91.7924 102.735ZM89.966 101.221L90.7592 102.495L92.0323 101.701L91.2391 100.428L89.966 101.221ZM97.0731 94.1558C95.1332 96.5221 92.8128 98.5641 90.2059 100.188L90.9991 101.461C93.7457 99.7502 96.1899 97.5992 98.2331 95.1068L97.0731 94.1558ZM99.2886 95.0023L98.1286 94.0513L97.1776 95.2113L98.3376 96.1623L99.2886 95.0023ZM104.91 85.9523C105.876 82.9561 106.397 79.7621 106.397 76.4492H104.897C104.897 79.604 104.401 82.6429 103.482 85.4921L104.91 85.9523ZM102.08 92.2239C103.244 90.263 104.198 88.162 104.91 85.9523L103.482 85.4921C102.805 87.5939 101.897 89.5925 100.79 91.4583L102.08 92.2239ZM99.7623 91.7204L101.052 92.486L101.818 91.1961L100.528 90.4305L99.7623 91.7204ZM102.054 85.0319C101.412 87.0257 100.551 88.922 99.5001 90.6926L100.79 91.4583C101.897 89.5925 102.805 87.5939 103.482 85.4921L102.054 85.0319ZM103.397 76.4492C103.397 79.4459 102.926 82.3296 102.054 85.0319L103.482 85.4921C104.401 82.6429 104.897 79.604 104.897 76.4492H103.397ZM105.647 75.6992H104.147V77.1992H105.647V75.6992Z",
+  fill: "#3B3552"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M58.3015 32.4619L59.0002 32.1893L58.7277 31.4906L58.029 31.7632L58.3015 32.4619ZM41.5051 43.6534L40.9658 43.1322L40.4446 43.6715L40.9839 44.1927L41.5051 43.6534ZM58.8467 33.8593L59.1192 34.5581L59.8179 34.2855L59.5454 33.5868L58.8467 33.8593ZM42.5837 44.6957L42.0625 45.2351L42.6018 45.7562L43.123 45.2169L42.5837 44.6957ZM36.8518 49.2761L37.2841 48.6632L36.6712 48.2309L36.2389 48.8438L36.8518 49.2761ZM31.3804 59.5114L30.6804 59.2422L30.4111 59.9422L31.1112 60.2114L31.3804 59.5114ZM38.0776 50.1406L38.6905 50.5729L39.1228 49.96L38.5099 49.5277L38.0776 50.1406ZM32.7804 60.0498L32.5112 60.7499L33.2112 61.0191L33.4804 60.3191L32.7804 60.0498ZM58.029 31.7632C51.5321 34.2976 45.7255 38.2069 40.9658 43.1322L42.0444 44.1746C46.6565 39.4021 52.2819 35.6152 58.5741 33.1606L58.029 31.7632ZM59.5454 33.5868L59.0002 32.1893L57.6028 32.7345L58.1479 34.1319L59.5454 33.5868ZM43.123 45.2169C47.5874 40.5973 53.0317 36.9328 59.1192 34.5581L58.5741 33.1606C52.2819 35.6152 46.6565 39.4021 42.0444 44.1746L43.123 45.2169ZM40.9839 44.1927L42.0625 45.2351L43.1049 44.1564L42.0263 43.114L40.9839 44.1927ZM36.2389 48.8438C33.9826 52.043 32.1076 55.5311 30.6804 59.2422L32.0804 59.7806C33.4626 56.1865 35.2788 52.8077 37.4647 49.7084L36.2389 48.8438ZM38.5099 49.5277L37.2841 48.6632L36.4196 49.889L37.6454 50.7535L38.5099 49.5277ZM33.4804 60.3191C34.8177 56.8419 36.575 53.5725 38.6905 50.5729L37.4647 49.7084C35.2788 52.8077 33.4626 56.1865 32.0804 59.7806L33.4804 60.3191ZM31.1112 60.2114L32.5112 60.7499L33.0496 59.3498L31.6496 58.8114L31.1112 60.2114Z",
+  fill: "#3B3552"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M94.4566 55.3952C93.9524 52.5885 97.1355 50.5591 99.2233 52.5014C101.189 54.33 103.108 56.332 104.211 58.0528C107.613 63.3618 109.586 69.675 109.586 76.449C109.586 95.3028 94.3022 110.587 75.4484 110.587C72.1858 110.587 67.9237 109.35 64.2042 107.98C61.4858 106.979 61.9438 103.2 64.7455 102.464C66.6153 101.972 68.4144 101.416 69.7243 100.833C84.7188 94.1575 95.1725 79.1275 95.1725 61.6559C95.1725 59.9413 94.8626 57.6549 94.4566 55.3952Z",
+  fill: "#3040D6",
+  fillOpacity: "0.05"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M56.3673 74.3156C58.1892 72.4984 61.1148 72.4529 62.9919 74.1793L63.1342 74.3156L70.7513 81.9134L89.2802 63.433C91.1021 61.6158 94.0277 61.5704 95.9048 63.2967L96.0471 63.433C97.869 65.2502 97.9146 68.1682 96.1838 70.0405L96.0471 70.1824L74.1353 92.0376C72.3134 93.8548 69.3878 93.9002 67.5107 92.1739L67.3684 92.0376L56.3673 81.065C54.4987 79.2012 54.4987 76.1794 56.3673 74.3156Z",
+  fill: "white",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}));
+export default Accept;

package/build/atoms/illustrations/adminjs-logo.js

@@ -0,0 +1,52 @@
+import React from 'react';
+export const AdminJSLogo = ({
+  width = 113,
+  height = 113
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 113 113",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+  x: "-18.8%",
+  y: "-13.4%",
+  width: "137.6%",
+  height: "137.6%",
+  filterUnits: "objectBoundingBox",
+  id: "a"
+}, /*#__PURE__*/React.createElement("feOffset", {
+  dy: "5",
+  in: "SourceAlpha",
+  result: "shadowOffsetOuter1"
+}), /*#__PURE__*/React.createElement("feGaussianBlur", {
+  stdDeviation: "5",
+  in: "shadowOffsetOuter1",
+  result: "shadowBlurOuter1"
+}), /*#__PURE__*/React.createElement("feColorMatrix", {
+  values: "0 0 0 0 0.301960784 0 0 0 0 0.439215686 0 0 0 0 0.921568627 0 0 0 0.402289117 0",
+  in: "shadowBlurOuter1"
+})), /*#__PURE__*/React.createElement("rect", {
+  id: "b",
+  x: "0",
+  y: "0",
+  width: "93",
+  height: "93",
+  rx: "20"
+})), /*#__PURE__*/React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", {
+  transform: "translate(10 5)"
+}, /*#__PURE__*/React.createElement("use", {
+  fill: "#000",
+  filter: "url(#a)",
+  xlinkHref: "#b"
+}), /*#__PURE__*/React.createElement("use", {
+  fill: "#4D70EB",
+  xlinkHref: "#b"
+})), /*#__PURE__*/React.createElement("path", {
+  d: "M56.5 28 83 74H68.932l-3.282-5.698a5.632 5.632 0 0 0-4.63-2.815l-.25-.006h-8.54a5.632 5.632 0 0 0-4.88 2.82L44.066 74H30l26.5-46zm0 20.444c-3.114 0-5.638 2.543-5.638 5.68 0 3.136 2.524 5.678 5.638 5.678s5.638-2.542 5.638-5.679c0-3.136-2.524-5.679-5.638-5.679z",
+  fill: "#FFF"
+})));
+export default AdminJSLogo;

package/build/atoms/illustrations/astronaut.js

@@ -0,0 +1,58 @@
+import React from 'react';
+export const Astronaut = ({
+  width = 152,
+  height = 169
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 152 169",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("g", {
+  id: "Symbols",
+  stroke: "none",
+  strokeWidth: "1",
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", {
+  id: "Group",
+  transform: "translate(2.000000, 2.000000)",
+  stroke: "#3B3552",
+  strokeWidth: "3"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M74,123.060611 L74,158.723567 C74,162.037275 71.3137085,164.723567 68,164.723567 C66.9452118,164.723567 65.9090627,164.445504 64.995996,163.917406 L6.67495026,130.185774 L6.67495026,130.185774 C2.54398439,127.796512 1.42108547e-14,123.386278 1.42108547e-14,118.614125 L1.42108547e-14,48.436129 C1.42108547e-14,43.6639756 2.54398439,39.2537412 6.67495026,36.8644799 L67.3072083,1.79609278 C71.4477337,-0.598697595 76.5522663,-0.598697595 80.6927917,1.79609278 L141.32505,36.8644799 C145.456016,39.2537412 148,43.6639756 148,48.436129 L148,118.614125 C148,123.386278 145.456016,127.796512 141.32505,130.185774 L92.2812226,158.551663",
+  id: "Path-Copy-2",
+  strokeLinecap: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M104.072464,59.4347826 L107.42029,59.4347826 C110.501879,59.4347826 113,61.9329039 113,65.0144928 L113,72.826087 C113,75.9076758 110.501879,78.4057971 107.42029,78.4057971 L104.072464,78.4057971",
+  id: "Path",
+  fill: "#3040D6",
+  fillOpacity: "0.2"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M36,59.4347826 L39.3478261,59.4347826 C42.4294149,59.4347826 44.9275362,61.9329039 44.9275362,65.0144928 L44.9275362,72.826087 C44.9275362,75.9076758 42.4294149,78.4057971 39.3478261,78.4057971 L36,78.4057971",
+  id: "Path-Copy-8",
+  fill: "#3040D6",
+  fillOpacity: "0.2",
+  transform: "translate(40.463768, 68.920290) scale(-1, 1) translate(-40.463768, -68.920290) "
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M73.942029,36 L75.057971,36 C91.6985507,36 105.188406,49.4898551 105.188406,66.1304348 L105.188406,74.2608696 C105.188406,86.4111341 95.3386703,96.2608696 83.1884058,96.2608696 L65.8115942,96.2608696 C53.6613297,96.2608696 43.8115942,86.4111341 43.8115942,74.2608696 L43.8115942,66.1304348 C43.8115942,49.4898551 57.3014493,36 73.942029,36 Z",
+  id: "Rectangle"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M61.6231884,54.9710145 L87.3768116,54.9710145 C92.8996591,54.9710145 97.3768116,59.448167 97.3768116,64.9710145 L97.3768116,71.1521739 C97.3768116,80.0887815 90.1322598,87.3333333 81.1956522,87.3333333 L67.8043478,87.3333333 C58.8677402,87.3333333 51.6231884,80.0887815 51.6231884,71.1521739 L51.6231884,64.9710145 C51.6231884,59.448167 56.1003409,54.9710145 61.6231884,54.9710145 Z",
+  id: "Rectangle",
+  fill: "#3040D6",
+  fillOpacity: "0.2"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M98.1625549,96.4072839 C104.039008,97.3212203 108.536232,102.403535 108.536232,108.536232 L108.536232,118.134734 C108.536232,119.211784 107.767028,120.135188 106.707715,120.329844 C106.055061,120.449774 105.513749,120.546295 105.083779,120.619408 C95.9922338,122.165353 85.5737028,123.043478 74.5,123.043478",
+  id: "Path",
+  strokeLinecap: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M63.9958478,122.775649 C56.839568,122.406752 50.0823079,121.667204 43.9319499,120.622082 C43.4981804,120.548372 42.951644,120.450947 42.2923407,120.329807 C41.2329855,120.135184 40.4637681,119.211754 40.4637681,118.134669 L40.4637681,108.536232 C40.4637681,102.446055 44.8988464,97.391746 50.715414,96.426894",
+  id: "Path",
+  strokeLinecap: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M100.724638,87.6057924 C100.724638,97.4668767 92.7306494,105.188406 82.8695652,105.188406 L66.1304348,105.188406 C56.2693506,105.188406 48.2753623,97.4668767 48.2753623,87.6057924",
+  id: "Path",
+  strokeLinecap: "round"
+}))));
+export default Astronaut;

package/build/atoms/illustrations/bag.js

@@ -0,0 +1,90 @@
+import React from 'react';
+export const Bag = ({
+  width = 152,
+  height = 152
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 152 152",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("circle", {
+  cx: "76",
+  cy: "76",
+  r: "76",
+  fill: "white"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M37.75 56.9629C37.75 56.5487 38.0858 56.2129 38.5 56.2129H113.5C113.914 56.2129 114.25 56.5487 114.25 56.9629V117.763C114.25 119.558 112.795 121.013 111 121.013H41C39.2051 121.013 37.75 119.558 37.75 117.763V56.9629Z",
+  fill: "white",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M56.0651 109.102C55.7245 108.868 55.2755 108.868 54.9349 109.102L53.4009 110.152C52.8355 110.54 52.0568 110.256 51.8726 109.596L51.3729 107.805C51.2619 107.408 50.918 107.119 50.5071 107.079L48.6567 106.898C47.9746 106.831 47.5603 106.113 47.8435 105.489L48.6118 103.796C48.7824 103.42 48.7045 102.978 48.4156 102.683L47.1145 101.355C46.6349 100.865 46.7788 100.049 47.3969 99.7532L49.0738 98.9501C49.4462 98.7717 49.6706 98.3829 49.6389 97.9713L49.496 96.1175C49.4433 95.4342 50.078 94.9015 50.7418 95.0721L52.5427 95.5348C52.9425 95.6375 53.3644 95.4839 53.6047 95.1482L54.6868 93.6362C55.0857 93.0789 55.9143 93.0789 56.3132 93.6362L57.3953 95.1482C57.6356 95.4839 58.0575 95.6375 58.4573 95.5348L60.2581 95.0721C60.9219 94.9015 61.5567 95.4342 61.504 96.1175L61.3611 97.9713C61.3293 98.3829 61.5538 98.7717 61.9262 98.9501L63.6031 99.7532C64.2212 100.049 64.3651 100.865 63.8855 101.355L62.5844 102.683C62.2955 102.978 62.2175 103.42 62.3881 103.796L63.1565 105.489C63.4397 106.113 63.0254 106.831 62.3433 106.898L60.4929 107.079C60.082 107.119 59.738 107.408 59.6271 107.805L59.1274 109.596C58.9431 110.256 58.1645 110.54 57.5991 110.152L56.0651 109.102Z",
+  fill: "#3040D6",
+  fillOpacity: "0.2"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M93.7812 61.3623C93.7812 60.2577 94.6767 59.3623 95.7812 59.3623H109.6C110.429 59.3623 111.1 60.0339 111.1 60.8623V116.204C111.1 117.308 110.205 118.204 109.1 118.204H95.7813C94.6767 118.204 93.7812 117.308 93.7812 116.204V61.3623Z",
+  fill: "#3040D6",
+  fillOpacity: "0.05"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M37.818 56.175L39.6376 35.25H112.362L114.182 56.175H37.818Z",
+  fill: "white",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M40.2845 35.25H111.715L105.584 45.3225L105.314 45.7659L105.634 46.1747L113.461 56.175H38.5393L46.3656 46.1747L46.6855 45.7659L46.4156 45.3225L40.2845 35.25Z",
+  fill: "white",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "64.3",
+  cy: "67.1623",
+  r: "2.925",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "87.6999",
+  cy: "67.1623",
+  r: "2.925",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M87.6998 70.0879V80.8129C87.6998 87.2746 82.4615 92.5129 75.9998 92.5129V92.5129C69.5381 92.5129 64.2998 87.2746 64.2998 80.8129V70.0879",
+  stroke: "#3B3552",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M45.6863 39.4191C45.2942 38.7525 45.7748 37.9121 46.5482 37.9121H105.451C106.225 37.9121 106.705 38.7525 106.313 39.4191L102.463 45.9649C102.372 46.1186 102.325 46.2936 102.325 46.4719V53.028C102.325 53.5803 101.877 54.028 101.325 54.028H50.6748C50.1225 54.028 49.6748 53.5803 49.6748 53.028V46.4719C49.6748 46.2936 49.6271 46.1186 49.5367 45.9649L45.6863 39.4191Z",
+  fill: "#3040D6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M76.0896 25V40.3495",
+  stroke: "#3B3552",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M55.5 129.5H72.5",
+  stroke: "#3B3552",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M77.1944 129.5H83.8056",
+  stroke: "#3B3552",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M96.1796 31.4453L88.5049 44.7384",
+  stroke: "#3B3552",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M56 31.4453L63.6748 44.7384",
+  stroke: "#3B3552",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}));
+export default Bag;