@eleventheye/asui 1.11.2 → 2.0.0

package/README.md

@@ -1,2 +1,302 @@
 # asui
 AS React UI Library (another one!)
+
+## Existing Components
+
+### Icons
+
+A small collection of `svg` icons that I tend to reuse in many of my projects.
+
+#### Icon names
+
+AddItemIcon,
+AddUserIcon,
+CheckIcon,
+CloseIcon,
+DeleteIcon,
+EleventheyeIcon,
+EmailIcon,
+EyeIcon,
+EyeSlashIcon,
+FootballIcon,
+GamesIcon,
+GearUserIcon,
+HexagonIcon,
+HomeIcon,
+IconProps,
+LockIcon,
+PenIcon,
+RulerIcon,
+SaveIcon,
+SearchIcon,
+TimeLapseIcon,
+UnlockIcon,
+UserSettingsIcon,
+
+#### Icon definition
+
+Each icon support a round border around itself.
+
+When enabling the surrounding bubble, `withCircle` is set to `true`, the actual icon will automatically shrink in order to nicely fit inside of the bubble. This was done so the icon size does not change from the user defined (or default) value set via `size` prop.
+
+```typescript
+interface IconProps {
+  /** Additional styles for the icon
+   * @default ''
+   */
+  className?: string;
+
+  /** Icon size
+   * @default 24 px
+   */
+  size?: number;
+
+  /** Icon stroke color
+   * @default #000000
+   */
+  color?: string;
+
+  /** Icon fill color
+   * @default #000000
+   */
+  fillColor?: string;
+
+  /** Icon fill color opacity, supported values are between 0 and 1
+   * @default 1
+   */
+  fillOpacity?: number;
+
+  /** Width of the stroke path of the icon
+   * @default 0.1
+   */
+  strokeWidth?: number;
+
+  /** Color of the circle border around the icon
+   * @default 'transparent'
+   */
+  circleStrokeColor?: string;
+
+  /** Width of the circle border line
+   * @default 1.5 pixels
+   */
+  circleStrokeWidth?: number;
+
+  /** Color of the circle fill
+   * @default 'transparent'
+   */
+  circleFillColor?: string;
+
+  /** Opacity of the circle fill color supported values are between 0 and 1
+   * @default 1
+   */
+  circleFillOpacity?: number;
+
+  /** Boolean flag controlling the visibility of the circle/bubble around the icon
+   * @default false
+   */
+  withCircle?: boolean;
+
+  /** Additional inline-styles for the icon
+   * @default undefined
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Random props that can be passed in, but really you SHOULD NOT do that
+   */
+  [key: string]: any; // Allow additional props if needed
+}
+```
+
+### Loaders
+
+There are three visual non-deterministic types of loaders, `loaderType`, that you can use to communicate that something is currently loading.
+
+#### Loader definition
+
+```typescript
+interface ASLoaderProps {
+  className?: string;
+
+  /** Controls visibility of the `Loader` component, true - visible, false - hidden
+   *
+   * @default false
+   *
+   * @optional
+   */
+  showLoader?: boolean;
+
+  /** Size of the button to render.
+   *
+   * @default ASComponentSize.Medium
+   * @supports `ASComponentSize.Small, ASComponentSize.Medium, ASComponentSize.Large`
+   *
+   * @optional
+   */
+  size?: ASComponentSize;
+
+  /** Loader currently supports three visually distinct components
+   *
+   * @default LoaderType.Grow
+   * @supports `LoaderType.Grow, LoaderType.Spin, LoaderType.Dots`
+   *
+   * @optional
+   */
+  loaderType?: LoaderType;
+
+  /** When true loader blocks any interaction with the screen by rendering a click-screen.
+   *
+   * @default false
+   *
+   * @optional
+   */
+  isModal?: boolean;
+
+  /** Custom styles to be applied inline
+   *
+   * @default undefined
+   * @optional
+   */
+  style?: CSSProperties;
+
+  /** Styles for the Loader applied as class styles
+   *
+   * @default ASDefaultTheme.loader
+   *
+   * @optional
+   */
+  theme?: ASLoaderTheme;
+}
+```
+
+### Button
+
+Gotta have a button component, amirite? :)
+
+#### Button definition
+
+```typescript
+type ASButtonOwnProps = {
+  /** Custom style classes can be passed in through this prop
+   *
+   * @optional
+   */
+  className?: string;
+
+  /** Text that appears on the button as label, could be also passed in as `children` property
+   *
+   * @optional
+   */
+  text?: string;
+
+  /** Connected component controls, when set to true, the button renders in a `selected` state.
+   * When selected is `false` the button renders `unselected`, aka `default` state.
+   *
+   * @description Note `selected` prop takes precedence over `toggle` prop interactions.
+   * Meaning if `selected` prop is `true` and `toggle = true`, only a change to `selected`
+   * prop state will cause the button to render unselected.
+   *
+   * @optional
+   */
+  selected?: boolean;
+
+  /** Enables `toggle` mode which causes button to behave as a two-state component with on and off functionality.
+   *
+   * @description Behavior resembles the checkbox component, clicking the button once will persist `selected` state
+   * until it is clicked again at which point it will be `unselected`
+   *
+   * @optional
+   */
+  toggle?: boolean;
+
+  /** Size of the button to render.
+   *
+   * @default ASComponentSize.Medium
+   * @supports `ASComponentSize.Small, ASComponentSize.Medium, ASComponentSize.Large`
+   *
+   * @optional
+   */
+  size?: ASComponentSize;
+
+  /** Styles for the button applied as class styles
+   *
+   * @optional
+   */
+  theme?: ASTheme;
+
+  /**
+   * Renders the button in the loading state, interactions are disabled while the loading state is true
+   *
+   * @optional
+   */
+  paddingSize?: ASPaddingSize;
+
+  /**
+   * Renders the button in the loading state, interactions are disabled while the loading state is true
+   *
+   * @optional
+   */
+  isLoading?: boolean;
+} & Pick<React.HTMLProps<HTMLDivElement>, 'style' | 'onClick' | 'id' | 'disabled'>;
+
+export type ASButtonProps = React.PropsWithChildren<ASButtonOwnProps>;
+```
+
+### TextField Component
+
+Another one of those components that is needed everywhere...
+
+#### TextField definition
+
+```typescript
+export type ASTextFieldProps = {
+  /** Custom style classes can be passed in through this prop
+   *
+   * @optional
+   */
+  className?: string;
+
+  /** Styles for the button applied as class styles
+   *
+   * @optional
+   */
+  theme?: typeof ASThemeDefault;
+
+  /** Value of the `textfield`
+   *
+   * @optional
+   */
+  value?: string;
+
+  /** Handler that is called whenever the value of the `textfield` changes
+   *
+   * @optional
+   */
+  onChange?: (value: string) => void;
+
+  /** Size of the textfield to render.
+   *
+   * @default ASComponentSize.Medium
+   * @supports `ASComponentSize.Small, ASComponentSize.Medium, ASComponentSize.Large`
+   *
+   * @optional
+   */
+  size?: ASComponentSize;
+
+  /** Flag to display or hide the clear _value_ button. Appears on the right of the text input
+   *
+   * @default false
+   * @optional
+   */
+  showClearButton?: boolean;
+
+  /** Flag to display a search icon when textfield type is `search` or whenever you want to display it.
+   * This icon appears automatically when type of the textfield is `search`.
+   *
+   * @default false
+   * @optional
+   */
+  showSearchIcon?: boolean;
+} & Pick<React.HTMLProps<HTMLInputElement>, 'style' | 'type' | 'placeholder' | 'id' | 'onBlur' | 'onFocus'>;
+```
+

package/dist/asbutton/ASButton.d.ts

@@ -1,16 +1,5 @@
 import React from 'react';
-import { ASComponentSize, ASPaddingSize, ASTheme } from '../apptypes/ASUI.types';
-type ASButtonOwnProps = {
-    className?: string;
-    text?: string;
-    selected?: boolean;
-    toggle?: boolean;
-    size?: ASComponentSize;
-    theme?: ASTheme;
-    paddingSize?: ASPaddingSize;
-    isLoading?: boolean;
-} & Pick<React.HTMLProps<HTMLDivElement>, 'style' | 'onClick' | 'id' | 'disabled'>;
-export type ASButtonProps = React.PropsWithChildren<ASButtonOwnProps>;
+import { ASButtonProps } from './ASButton.types';
 declare const ASButton: React.FC<ASButtonProps>;
 export default ASButton;
 //# sourceMappingURL=ASButton.d.ts.map

package/dist/asbutton/ASButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASButton.d.ts","sourceRoot":"","sources":["../../src/asbutton/ASButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAc,MAAM,wBAAwB,CAAC;AAK7F,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,QAAQ,CAAC,EAAE,OAAO,CAAC;IASnB,MAAM,CAAC,EAAE,OAAO,CAAC;IASjB,IAAI,CAAC,EAAE,eAAe,CAAC;IAMvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,WAAW,CAAC,EAAE,aAAa,CAAC;IAO5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;AAEnF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AAOtE,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8DrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ASButton.d.ts","sourceRoot":"","sources":["../../src/asbutton/ASButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8DrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/asbutton/ASButton.types.d.ts

@@ -0,0 +1,14 @@
+import { ASComponentSize, ASPaddingSize, ASTheme } from '../apptypes/ASUI.types';
+type ASButtonOwnProps = {
+    className?: string;
+    text?: string;
+    selected?: boolean;
+    toggle?: boolean;
+    size?: ASComponentSize;
+    theme?: ASTheme;
+    paddingSize?: ASPaddingSize;
+    isLoading?: boolean;
+} & Pick<React.HTMLProps<HTMLDivElement>, 'style' | 'onClick' | 'id' | 'disabled'>;
+export type ASButtonProps = React.PropsWithChildren<ASButtonOwnProps>;
+export {};
+//# sourceMappingURL=ASButton.types.d.ts.map

package/dist/asbutton/ASButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASButton.types.d.ts","sourceRoot":"","sources":["../../src/asbutton/ASButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,QAAQ,CAAC,EAAE,OAAO,CAAC;IASnB,MAAM,CAAC,EAAE,OAAO,CAAC;IASjB,IAAI,CAAC,EAAE,eAAe,CAAC;IAMvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,WAAW,CAAC,EAAE,aAAa,CAAC;IAO5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;AAEnF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/asbutton/ASButton.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/asbutton/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './ASButton';
-export type { ASButtonProps } from './ASButton';
+export type { ASButtonProps } from './ASButton.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/asbutton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/asbutton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/asbutton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/asloader/ASLoader.types.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { ASComponentSize, ASLoaderTheme, LoaderType } from '../apptypes/ASUI.types';
+export interface ASLoaderProps {
+    className?: string;
+    showLoader?: boolean;
+    size?: ASComponentSize;
+    loaderType?: LoaderType;
+    isModal?: boolean;
+    style?: CSSProperties;
+    theme?: ASLoaderTheme;
+}
+//# sourceMappingURL=ASLoader.types.d.ts.map

package/dist/asloader/ASLoader.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASLoader.types.d.ts","sourceRoot":"","sources":["../../src/asloader/ASLoader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpF,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAQnB,UAAU,CAAC,EAAE,OAAO,CAAC;IASrB,IAAI,CAAC,EAAE,eAAe,CAAC;IASvB,UAAU,CAAC,EAAE,UAAU,CAAC;IAQxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,KAAK,CAAC,EAAE,aAAa,CAAC;IAQtB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}

package/dist/asloader/ASLoader.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/astextfield/ASTextField.d.ts

@@ -1,15 +1,5 @@
 import React from 'react';
-import { ASComponentSize } from '../apptypes/ASUI.types';
-import ASThemeDefault from '../astheme/ASThemeDefault';
-export type ASTextFieldProps = {
-    className?: string;
-    theme?: typeof ASThemeDefault;
-    value: string;
-    onChange?: (value: string) => void;
-    size?: ASComponentSize;
-    showClearButton?: boolean;
-    showSearchIcon?: boolean;
-} & Pick<React.HTMLProps<HTMLInputElement>, 'style' | 'type' | 'placeholder' | 'id' | 'onBlur' | 'onFocus'>;
+import { ASTextFieldProps } from './ASTextField.types';
 declare const ASTextField: React.FC<ASTextFieldProps>;
 export default ASTextField;
 //# sourceMappingURL=ASTextField.d.ts.map

package/dist/astextfield/ASTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASTextField.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAUvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,cAAc,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;AAE5G,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4G3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ASTextField.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4G3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/astextfield/ASTextField.types.d.ts

@@ -0,0 +1,12 @@
+import { ASComponentSize } from '../apptypes/ASUI.types';
+import ASThemeDefault from '../astheme';
+export type ASTextFieldProps = {
+    className?: string;
+    theme?: typeof ASThemeDefault;
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: ASComponentSize;
+    showClearButton?: boolean;
+    showSearchIcon?: boolean;
+} & Pick<React.HTMLProps<HTMLInputElement>, 'style' | 'type' | 'placeholder' | 'id' | 'onBlur' | 'onFocus'>;
+//# sourceMappingURL=ASTextField.types.d.ts.map

package/dist/astextfield/ASTextField.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASTextField.types.d.ts","sourceRoot":"","sources":["../../src/astextfield/ASTextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,cAAc,MAAM,YAAY,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAK7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,cAAc,CAAC;IAM9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAMf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IASnC,IAAI,CAAC,EAAE,eAAe,CAAC;IAOvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAQ1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC"}

package/dist/astextfield/ASTextField.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/astextfield/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './ASTextField';
-export type { ASTextFieldProps } from './ASTextField';
+export type { ASTextFieldProps } from './ASTextField.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/astextfield/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/astextfield/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/astextfield/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/icons/ASIcon.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from 'react';
+import { IconProps } from './Icons.types';
+declare const ASIcon: React.FC<PropsWithChildren<IconProps>>;
+export default ASIcon;
+//# sourceMappingURL=ASIcon.d.ts.map

package/dist/icons/ASIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ASIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAwB1C,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAqBlD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/icons/ASIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const styles_1 = require("./styles");
+const CircleSvg = ({ size = 24, circleStrokeWidth = 1.5, circleFillColor = 'transparent', circleStrokeColor = '#fffff0', circleFillOpacity = 1, withCircle = false, }) => ((0, jsx_runtime_1.jsx)(styles_1.IconCircle, { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("circle", { fill: withCircle ? circleFillColor : 'none', fillOpacity: circleFillOpacity, cx: "12", cy: "12", r: "10.5", stroke: withCircle ? circleStrokeColor : 'transparent', strokeWidth: `${circleStrokeWidth}px` }) }));
+const ASIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', withCircle = false, children, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(CircleSvg, { size: size, circleStrokeColor, withCircle, ...props }), react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child)
+                ? react_1.default.cloneElement(child, { size, color, fillColor, withCircle, fillOpacity, ...props })
+                : child)] }));
+};
+exports.default = ASIcon;

package/dist/icons/AddItemIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddItemIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AddItemIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6BpC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AddItemIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AddItemIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAsB1C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMpC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/icons/AddItemIcon.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const AddItemIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { className: className, children: (0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.74 15.8V14.42H9.36V13.03h1.38V11.65h1.39v1.39h1.39v1.39H12.13v1.39H10.74ZM7.98 4.73c-1.15 0-2.08.93-2.08 2.08V16.5c0 1.15.93 2.08 2.08 2.08h8.31c1.15 0 2.08-.93 2.08-2.08V9.58c0-2.68-2.17-4.85-4.85-4.85H7.98Zm0 1.39h4.84V9.58h4.16V16.5c0 .39-.31.69-.69.69H7.98c-.39 0-.69-.31-.69-.69V6.8c0-.39.31-.69.69-.69Zm6.23.06c1.12.23 2.04.99 2.48 2.02H14.21V6.17Z", fill: color })] }) }));
+const AddItemSvg = ({ size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.8 18.7V16.5H7.7V14.3h2.2V12.1h2.2v2.2h2.2v2.2H12.1v2.2H9.8ZM5.5 1.1c-1.8 0-3.3 1.5-3.3 3.3V19.8c0 1.8 1.5 3.3 3.3 3.3h13.2c1.8 0 3.3-1.5 3.3-3.3V8.8c0-4.3-3.4-7.7-7.7-7.7H5.5Zm0 2.2h7.7V8.8h6.6v11c0 .6-.5 1.1-1.1 1.1H5.5c-.6 0-1.1-.5-1.1-1.1V4.4c0-.6.5-1.1 1.1-1.1Zm9.9.1c1.8.4 3.2 1.6 3.9 3.2H15.4V3.4Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity }) }));
+const AddItemIcon = ({ ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(AddItemSvg, {}) }));
 };
 exports.default = AddItemIcon;

package/dist/icons/AddUserIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddUserIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AddUserIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6BpC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AddUserIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AddUserIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAuB1C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMpC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/icons/AddUserIcon.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const AddUserIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { className: className, children: (0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.15 11.18c1.49 0 2.7-1.21 2.7-2.7s-1.21-2.7-2.7-2.7-2.7 1.21-2.7 2.7 1.21 2.7 2.7 2.7Zm0-1.35c.75 0 1.35-.6 1.35-1.35s-.6-1.35-1.35-1.35-1.35.6-1.35 1.35.6 1.35 1.35 1.35Zm2.02 3.38c.37 0 .68.31.68.68v4.05h1.35v-4.05c0-1.12-.91-2.02-2.02-2.02H7.13c-1.12-.02-2.03.89-2.03 2.01v4.05H6.45v-4.05c0-.37.31-.68.68-.68h4.05ZM15.9 8.48h1.35v1.35h1.35v1.35H17.25v1.35H15.9v-1.35H14.55V9.83h1.35V8.48Z", fill: color })] }) }));
+const AddUseSvg = ({ size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.8 10.9c2.4 0 4.3-1.9 4.3-4.3s-1.9-4.3-4.3-4.3-4.3 1.9-4.3 4.3 1.9 4.3 4.3 4.3Zm0-2.2c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2-2.2 1-2.2 2.2 1 2.2 2.2 2.2Zm3.2 5.4c.6 0 1.1.5 1.1 1.1v6.5h2.2v-6.5c0-1.8-1.5-3.2-3.2-3.2H4.6c-1.8 0-3.2 1.4-3.2 3.2v6.5H3.5v-6.5c0-.6.5-1.1 1.1-1.1h6.5Zm7.6-7.5h2.2v2.2H23V11H20.8v2.2H18.6V11H16.5V8.7h2.2V6.6Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity, fillRule: "evenodd" }) }));
+const AddUserIcon = ({ ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(AddUseSvg, {}) }));
 };
 exports.default = AddUserIcon;

package/dist/icons/CheckIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckIcon.d.ts","sourceRoot":"","sources":["../../src/icons/CheckIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8BlC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CheckIcon.d.ts","sourceRoot":"","sources":["../../src/icons/CheckIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAsB1C,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMlC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/icons/CheckIcon.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const CheckIcon = ({ className = '', style, size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { className: className, style: style, children: (0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), (0, jsx_runtime_1.jsx)("path", { fillRule: "nonzero", d: "M10.24 16.31 6 12.07l1.41-1.41 2.83 2.83L15.9 7.83l1.41 1.41-7.07 7.07Z", fill: color })] }) }));
+const CheckIconSvg = ({ size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.3 20.6 1.5 12.9a1.9 1.8 0 012.6-2.6l5.2 5.2L19.9 5a1.9 1.8 0 012.6 2.6L9.3 20.6Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity }) }));
+const CheckIcon = ({ ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(CheckIconSvg, {}) }));
 };
 exports.default = CheckIcon;

package/dist/icons/CloseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloseIcon.d.ts","sourceRoot":"","sources":["../../src/icons/CloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2BlC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CloseIcon.d.ts","sourceRoot":"","sources":["../../src/icons/CloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAsB1C,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMlC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/icons/CloseIcon.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const CloseIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { className: className, children: (0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), (0, jsx_runtime_1.jsx)("path", { d: "M16.3394 9.32245C16.7434 8.94589 16.7657 8.31312 16.3891 7.90911C16.0126 7.50509 15.3798 7.48283 14.9758 7.85938L12.0497 10.5866L9.32245 7.66048C8.94589 7.25647 8.31312 7.23421 7.90911 7.61076C7.50509 7.98731 7.48283 8.62008 7.85938 9.0241L10.5866 11.9502L7.66048 14.6775C7.25647 15.054 7.23421 15.6868 7.61076 16.0908C7.98731 16.4948 8.62008 16.5171 9.0241 16.1405L11.9502 13.4133L14.6775 16.3394C15.054 16.7434 15.6868 16.7657 16.0908 16.3891C16.4948 16.0126 16.5171 15.3798 16.1405 14.9758L13.4133 12.0497L16.3394 9.32245Z", fill: color })] }) }));
+const CloseIconSvg = ({ size = 24, color = '#000000', strokeWidth = 0.01, fillColor = '#000000', fillOpacity = 1, withCircle = false, }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M21.9 5.7c.9-.9.9-2.4 0-3.3-.9-.9-2.4-.9-3.3 0L12.1 8.9 5.6 2.4c-.9-.9-2.4-.9-3.3 0-.9.9-.9 2.4 0 3.3l6.5 6.5-6.5 6.5c-.9.9-.9 2.4 0 3.3.9.9 2.4.9 3.3 0l6.5-6.5L18.6 22c.9.9 2.4.9 3.3 0 .9-.9.9-2.3 0-3.3l-6.5-6.5 6.5-6.5Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity }) }));
+const CloseIcon = ({ ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(CloseIconSvg, {}) }));
 };
 exports.default = CloseIcon;

package/dist/icons/DeleteIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteIcon.d.ts","sourceRoot":"","sources":["../../src/icons/DeleteIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6BnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DeleteIcon.d.ts","sourceRoot":"","sources":["../../src/icons/DeleteIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAyB1C,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/icons/DeleteIcon.js

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const DeleteIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { className: className, children: (0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), (0, jsx_runtime_1.jsx)("path", { d: "M15.5 7.5V6.8c0-.8-.6-1.4-1.4-1.4H9.9c-.8 0-1.4.6-1.4 1.4v.7H6.4c-.4 0-.7.3-.7.7s.3.7.7.7h.7v7.7c0 1.2.9 2.1 2.1 2.1h5.6c1.2 0 2.1-.9 2.1-2.1V8.9h.7c.4 0 .7-.3.7-.7s-.3-.7-.7-.7H15.5Zm-1.4-.7H9.9v.7h4.2V6.8Zm1.4 2.1h-7v7.7c0 .4.3.7.7.7h5.6c.4 0 .7-.3.7-.7V8.9ZM9.9 10.3h1.4v5.6H9.9V10.3Zm2.8 0h1.4v5.6H12.7V10.3Z", fillRule: "evenodd", clipRule: "evenodd", fill: color })] }) }));
+const DeleteIconSvg = ({ size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.8 4.6V3.5c0-1.3-1-2.3-2.3-2.3H8.6c-1.3 0-2.3 1-2.3 2.3v1.1H2.8c-.7 0-1.2.5-1.2 1.1s.5 1.1 1.2 1.1H4v12.6c0 2 1.5 3.4 3.5 3.4h9.2c2 0 3.5-1.5 3.5-3.4V6.9h1.2c.7 0 1.2-.5 1.2-1.1s-.5-1.1-1.2-1.1H17.8Zm-2.3-1.1H8.6v1.1h6.9V3.5Zm2.3 3.4H6.3v12.6c0 .7.5 1.1 1.2 1.1h9.2c.7 0 1.2-.5 1.2-1.1V6.9ZM8.6 9.2h2.3v9.2H8.6V9.2Zm4.6 0h2.3v9.2H13.2V9.2Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity, fillRule: "evenodd" }) }));
+};
+const DeleteIcon = ({ ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(DeleteIconSvg, {}) }));
 };
 exports.default = DeleteIcon;

package/dist/icons/EleventheyeIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EleventheyeIcon.d.ts","sourceRoot":"","sources":["../../src/icons/EleventheyeIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAWxC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"EleventheyeIcon.d.ts","sourceRoot":"","sources":["../../src/icons/EleventheyeIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAwB1C,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMxC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/icons/EleventheyeIcon.js

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const EleventheyeIcon = ({ className = '', size = 24, color = '#0E82C9' }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { className: className, children: (0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M13.04 23.03c-.16-.05-1.58-.95-3.17-1.98-1.58-1.03-2.94-1.9-3.02-1.93-.08-.03-.55.21-1.11.58-2.23 1.46-3.72 1.33-4.5-.38-.61-1.33-.09-2.33 1.87-3.61l1.24-.81.03-4.1s-.02-3.72.1-4.09c.12-.38.13-.32.31-.59.19-.27.44-.76 4.22-2.94 5.07-2.92 4.13-2.92 9.35.03 4.49 2.53 4.62 2.65 4.62 4.01 0 1.47.8.86-10.89 8.38-1.05.68-1.23.41 1.34 2.06l.49.32 2.13-1.23 2.13-1.23.06-1.16c.12-2.42 1.52-3.54 3.41-2.9 1.12.38 1.36 1.04 1.34 5.39l-.01 1.42-4.07 2.35c-4.67 2.69-4.86 2.77-5.88 2.41zm1.41-.4c.19-.07 2.1-1.14 4.25-2.38l3.9-2.26v-2.38c0-2.92-.4-3.58-1.47-3.82-1.27-.28-2.51.7-2.51 2.91v1.02l-2.31 1.33c-1.27.73-2.36 1.33-2.42 1.33-.28 0-3.42-2.17-3.3-2.28.07-.06.63-.43 1.24-.82C22.48 8.51 22.61 8.42 22.6 7.26c-.01-1.18-.11-1.26-4.22-3.58C13.1.71 14.2.79 9.21 3.57 7.54 4.51 6.55 5.1 5.9 5.6c-1.3.99-1.11 1.79-1.14 5.42l-.03 4.12-1.33.87c-1.95 1.29-2.37 2.05-1.75 3.25.71 1.38 1.83 1.41 3.86.1.66-.43 1.25-.76 1.31-.74.06.02 1.43.9 3.06 1.96 3.53 2.29 3.69 2.36 4.57 2.05zm-2.1-1.16c-.53-.34-2.01-1.29-3.28-2.12L6.76 17.83l-1.35.87c-2.06 1.33-2.62 1.68-3.33.4-.64-1.18-.01-1.6 1.75-2.74l1.45-.93.05-4.29s-.03-4.03.05-4.28c.07-.25.29-.4.29-.4.4-.57 7.09-4.45 7.8-4.53.6-.07.62-.06 4.4 2.06 4.32 2.42 4.15 2.3 4.15 3.21 0 .85-.66 1.33-10.4 7.52-2.63 1.67-2.63 1.22.03 2.93l2.23 1.43 2.66-1.53 2.66-1.53.04-1.36c.05-1.85.37-2.38 1.43-2.38 1.2 0 1.39.45 1.35 3.2l-.03 2.18-3.83 2.21c-4.61 2.66-4.26 2.56-5.78 1.59zm-.84-10.05c1.8-1.16 3.95-2.55 4.77-3.08 1.82-1.17 1.88-.93-.57-2.31L13.66 4.88 11.51 6.12c-1.19.69-2.43 1.4-2.76 1.59l-.61.35V10.8c0 1.51.02 2.74.04 2.74s1.52-.95 3.32-2.12zm-2.79-.91V8.43L11.19 7l2.48-1.42 1.48.83c.82.46 1.52.87 1.56.91s-1.68 1.2-3.83 2.58-3.96 2.55-4.03 2.6c-.1.07-.12-.34-.12-1.99zm2.56-.07c1.15-.74 2.69-1.73 3.41-2.19 1.17-.75 1.3-.86 1.15-.96-.46-.31-2.18-1.23-2.25-1.2-.05.01-1.07.59-2.28 1.29l-2.2 1.26v1.58c0 .87.02 1.58.04 1.58s.98-.61 2.13-1.35z", fill: color }) }) }));
+const EleventheyeIconSvg = ({ size = 24, color = '#FFFFFF', strokeWidth = 0.1, fillColor = '#0E82C9', fillOpacity = 1, withCircle = false, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.91 22.8c-.16-.05-1.56-.94-3.14-1.96-1.56-1.02-2.91-1.88-2.99-1.91s-.54.21-1.1.57c-2.21 1.45-3.68 1.32-4.46-.38-.6-1.32-.09-2.31 1.85-3.57l1.23-.8.03-4.06s-.02-3.68.1-4.05c.12-.38.13-.32.31-.58.19-.27.44-.75 4.18-2.91 5.02-2.89 4.09-2.89 9.26.03 4.45 2.5 4.57 2.62 4.57 3.97 0 1.46.79.85-10.78 8.3-1.04.67-1.22.41 1.33 2.04l.49.32 2.11-1.22 2.11-1.22.06-1.15c.12-2.4 1.5-3.5 3.38-2.87 1.11.38 1.35 1.03 1.33 5.34l-.01 1.41-4.03 2.33c-4.62 2.66-4.81 2.74-5.82 2.39zm1.4-.4c.19-.07 2.08-1.13 4.21-2.36l3.86-2.24v-2.36c0-2.89-.4-3.54-1.46-3.78-1.26-.28-2.48.69-2.48 2.88v1.01l-2.29 1.32c-1.26.72-2.34 1.32-2.4 1.32-.28 0-3.39-2.15-3.27-2.26.07-.06.62-.43 1.23-.81 10.55-6.7 10.67-6.78 10.66-7.93-.01-1.17-.11-1.25-4.18-3.54C12.97.7 14.06.78 9.12 3.53c-1.66.93-2.64 1.52-3.28 2.01-1.54 1.05-1.02 1.38-1.13 5.37l-.03 4.08-1.32.86c-1.93 1.28-2.35 2.03-1.73 3.22.7 1.37 1.81 1.4 3.82.1.65-.43 1.24-.75 1.3-.73s1.42.89 3.03 1.94c3.49 2.27 3.65 2.34 4.52 2.03zm-2.08-1.15c-.52-.34-1.99-1.28-3.25-2.1l-2.29-1.5-1.34.86c-2.04 1.32-2.59 1.66-3.3.4-.63-1.17-.01-1.58 1.73-2.71l1.44-.92.05-4.25s-.03-3.99.05-4.24c.07-.25.29-.4.29-.4.4-.56 7.02-4.41 7.72-4.48.59-.07.61-.06 4.36 2.04 4.28 2.4 4.11 2.28 4.11 3.18 0 .84-.65 1.32-10.3 7.44-2.6 1.65-2.6 1.21.03 2.9l2.21 1.42 2.63-1.51 2.63-1.51.04-1.35c.05-1.83.37-2.36 1.42-2.36 1.19 0 1.38.45 1.34 3.17l-.03 2.16-3.79 2.19c-4.56 2.63-4.22 2.53-5.72 1.57zm-.83-9.95c1.78-1.15 3.91-2.52 4.72-3.05 1.8-1.16 1.86-.92-.56-2.29L13.52 4.83 11.39 6.06c-1.18.68-2.41 1.39-2.73 1.57l-.6.35v2.71c0 1.49.02 2.71.04 2.71s1.5-.94 3.29-2.1zm-2.76-.9V8.35l2.44-1.42 2.46-1.41 1.47.82c.81.46 1.5.86 1.54.9s-1.66 1.19-3.79 2.55-3.92 2.52-3.99 2.57c-.1.07-.12-.34-.12-1.97zm2.53-.07c1.14-.73 2.66-1.71 3.38-2.17 1.16-.74 1.29-.85 1.14-.95-.46-.31-2.16-1.22-2.23-1.19-.05.01-1.06.58-2.26 1.28L9.02 8.55v1.56c0 .86.02 1.56.04 1.56s.97-.6 2.11-1.34z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity }) }));
+};
+const EleventheyeIcon = ({ ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(EleventheyeIconSvg, {}) }));
 };
 exports.default = EleventheyeIcon;