@epilot360/icons 1.7.0 → 1.7.1

package/src/react/Workflow/story.stories.tsx

@@ -0,0 +1,13 @@
+import { generateStory } from '../../stories/util';
+
+import { Workflow } from '.';
+
+const story = generateStory(Workflow);
+
+export default {
+  title: 'Icons/Workflow',
+  tags: ['autodocs'],
+  ...story.meta,
+};
+
+export const Icon = story.story;

package/src/react/common.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from '../types';
+
+export const defaultIconProps: IconProps = {
+  width: 20,
+  height: 20,
+  fill: 'currentColor',
+  variant: 'filled',
+};

package/src/react/index.ts

@@ -0,0 +1,66 @@
+export * from './Epilot';
+export * from './Edit';
+export * from './OpenInNew';
+export * from './Share';
+export * from './Delete';
+export * from './Add';
+export * from './AddCircle';
+export * from './Check';
+export * from './CheckCircle';
+export * from './Warning';
+export * from './Error';
+export * from './Info';
+export * from './Help';
+export * from './ContentCopy';
+export * from './DataObject';
+export * from './Notifications';
+export * from './Visibility';
+export * from './VisibilityOff';
+export * from './Close';
+export * from './ExpandMore';
+export * from './ExpandLess';
+export * from './Search';
+export * from './Settings';
+export * from './Calendar';
+export * from './Explore';
+export * from './DragIndicator';
+export * from './Download';
+export * from './Refresh';
+export * from './Menu';
+export * from './Link';
+export * from './Login';
+export * from './Logout';
+export * from './Lock';
+export * from './LockOpen';
+export * from './Table';
+export * from './Attributes';
+export * from './ArrowRight';
+export * from './ArrowLeft';
+export * from './Dashboard';
+export * from './Opportunity';
+export * from './Order';
+export * from './Contact';
+export * from './Account';
+export * from './Contract';
+export * from './Message';
+export * from './File';
+export * from './Note';
+export * from './Document';
+export * from './Templates';
+export * from './Product';
+export * from './Price';
+export * from './Tax';
+export * from './Submission';
+export * from './Partner';
+export * from './Meter';
+export * from './Entity';
+export * from './Webhook';
+export * from './Design';
+export * from './Workflow';
+export * from './Journey';
+export * from './Relations';
+export * from './Availability';
+export * from './Filter';
+export * from './Sort';
+
+export * from './EpilotIcon';

package/src/react/types.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+
+import { IconProps } from '../types';
+
+export interface IconPropsReact extends IconProps, SVGProps<SVGElement> {}

package/src/stories/Readme.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Readme" />
+
+# @epilot360/icons
+
+[![License](http://img.shields.io/:license-mit-blue.svg)](#)
+[![npm version](https://img.shields.io/npm/v/@epilot360/icons.svg)](https://www.npmjs.com/package/@epilot360/icons)
+
+Curated set of epilot icons based on [material-symbols](https://www.npmjs.com/package/material-symbols)
+
+```
+yarn add @epilot360/icons
+```
+
+## Usage
+
+The `@epilot360/icons` package is shipped as an external system module in the 360 portal.
+
+You can import any icon as a React component by name:
+
+```tsx
+import { Edit as EditIcon, EpilotIcon } from '@epilot360/icons'
+
+<EditIcon />
+// or
+<EpilotIcon name="edit" />
+```
+
+## Usage outside 360 portal
+
+To avoid bundling the entire `@epilot360/icons` library, you can import the module directly:
+
+```tsx
+import EditIcon from '@epilot360/icons/react/Edit'
+
+<EditIcon />
+```
+
+## Using SVG
+
+To directly use svg files shipped as part of this package, e.g. with `file-loader` you can import from:
+
+```tsx
+import EditIconSVG from '@epilot360/icons/svg/Edit/icon.svg'
+import EditIconSVGFill from '@epilot360/icons/svg/Edit/icon-fill.svg'
+
+<img src={EditIconSVG} />
+```
+
+## Using svgIcon()
+
+The `svgIcon()` function returns the raw SVG as a string.
+
+```tsx
+import { svgIcon } from '@epilot360/icons';
+
+<div dangerouslySetInnerHTML={{ __html: svgIcon({ name: 'epilot' }) }} />
+
+<pre>
+  {svgIcon({ name: 'epilot', variant: 'filled', width: 48, height: 48, fill: 'white' })}
+</pre>
+```
+
+# All Icons
+
+import { SearchComponent } from './SearchComponent';
+
+<SearchComponent />

package/src/stories/SVGExample.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryContext, StoryObj } from '@storybook/react';
+import { codeBlock } from 'common-tags';
+
+import { SVGExample } from './SVGExample';
+
+const meta: Meta<typeof SVGExample> = {
+  title: 'SVG',
+  component: SVGExample,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'The `svgIcon()` function returns the raw SVG as a string.',
+      },
+      source: {
+        transform: (_code: string, ctx: StoryContext) => {
+          /* eslint-disable prettier/prettier */
+          const { name, variant, fill, size, width, height, xclass } = ctx.args;
+          const iconOpts = `{ name: '${name}', variant: '${variant}', fill: '${fill}'${size || width || height ? size ? `, size: '${size}'` : `, width: '${width}', height: '${height}'` : ''}${xclass ? `, xclass: '${xclass}'` : ''} }`
+
+          return codeBlock`
+          <div dangerouslySetInnerHTML={{ __html: svgIcon(${iconOpts}) }} />
+          
+          <pre>
+            {svgIcon(${iconOpts})}
+          </pre>
+          `;
+          /* eslint-enable prettier/prettier */
+        },
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    fill: { control: 'color' },
+    size: { control: 'number' },
+    width: { control: 'number' },
+    height: { control: 'number' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SVGExample>;
+
+export const Story: Story = {
+  args: {
+    name: 'edit',
+    variant: 'filled',
+    fill: '#000',
+  },
+};

package/src/stories/SVGExample.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { svgIcon } from '../svg/svgIcon';
+
+export const SVGExample = (props: Parameters<typeof svgIcon>[0]) => (
+  <>
+    <div dangerouslySetInnerHTML={{ __html: svgIcon(props) }} />
+    <pre style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{svgIcon(props)}</pre>
+  </>
+);

package/src/stories/Search.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+import { SearchComponent } from './SearchComponent';
+
+<Meta title="Search All Icons" order={20} />
+
+# Search All Icons
+
+<SearchComponent />

package/src/stories/SearchComponent.css

@@ -0,0 +1,48 @@
+.search-component .search-component__input {
+  margin-top: 2rem;
+  margin-bottom: .2rem;
+  position: relative;
+  display: flex;
+}
+
+.search-component__search_icon {
+  position: absolute;
+  top: .5rem;
+  left: .5rem;
+}
+
+.search-component .search-component__count {
+  margin-bottom: 2rem;
+}
+
+.search-component .search-component__input input {
+  font-size: 1.2rem;
+  padding: .4rem .5rem .4rem 2rem;
+  width: 100%;
+  border-radius: 1rem;
+  border: 1px solid #ccc;
+}
+
+
+.search-component .search-component__icons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  width: 100%;
+}
+
+.search-component .search-component__icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 151px;
+  height: 150px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  border-radius: 1rem;
+}
+
+.search-component .search-component__icon:hover {
+  background-color: #ccc;
+}

package/src/stories/SearchComponent.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable import/no-unresolved */
+import YAML from 'js-yaml';
+import uniqBy from 'lodash/uniqBy';
+import { SnackbarProvider, enqueueSnackbar } from 'notistack';
+import React, { FC, useMemo } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import iconConfigYaml from '../../icons.config.yaml?raw';
+import * as reactIcons from '../react';
+import { IconProps } from '../types';
+import './SearchComponent.css';
+
+// eslint-disable-next-line prettier/prettier
+const iconLib = reactIcons as unknown as { [key: string]: FC<IconProps> & { iconName: string } };
+
+interface IconConfig {
+  [Icon: string]: {
+    name: string;
+    tags: string[];
+    aliases: string[];
+  };
+}
+const iconConfig = YAML.load(iconConfigYaml) as IconConfig;
+
+export const SearchComponent = () => {
+  const [searchTerm, setSearchTerm] = React.useState('');
+
+  const icons = useMemo(() => {
+    const iconComponents = Object.keys(iconConfig)
+      .filter((iconName) => {
+        if (searchTerm) {
+          return iconConfig[iconName].aliases.some((alias) => alias.toLowerCase().includes(searchTerm.toLowerCase()));
+        }
+
+        return true;
+      })
+      .filter((iconName) => iconLib[iconName] !== undefined)
+      .map((iconName) => ({ Component: iconLib[iconName], ...iconConfig[iconName] }));
+
+    // exact match
+    const exactMatch = iconComponents.find(({ name }) => name.toLowerCase() === searchTerm.toLowerCase());
+    if (searchTerm && exactMatch) {
+      iconComponents.unshift(exactMatch);
+    }
+
+    return uniqBy(iconComponents, 'name');
+  }, [searchTerm]);
+
+  const copyNameToClipboard = (name: string) => {
+    navigator.clipboard.writeText(name);
+    enqueueSnackbar(`Copied "${name}" to clipboard`, {
+      variant: 'success',
+      anchorOrigin: { vertical: 'top', horizontal: 'center' },
+    });
+  };
+
+  return (
+    <div className="search-component">
+      <SnackbarProvider />
+
+      <div className="search-component__input">
+        <input
+          type="text"
+          placeholder="Search by name..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <span className="search-component__search_icon">
+          <reactIcons.Search fill="#888" />
+        </span>
+      </div>
+
+      <div className="search-component__count">{icons.length} icons</div>
+
+      <div className="search-component__icons">
+        {icons.map(({ Component: IconComponent, name }) => (
+          <div className="search-component__icon" title={name} key={name} onClick={() => copyNameToClipboard(name)}>
+            <div className="search-component__icon_icon">
+              <IconComponent width={24} height={24} />
+            </div>
+
+            <div className="search-component__icon_title">{name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/stories/util.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FC } from 'react';
+
+import { IconProps } from '../types';
+
+type IconComponent = FC<IconProps>;
+
+export const generateStory = (component: FC<IconProps>) => {
+  const meta: Meta<IconComponent> = {
+    title: `Icons/${component.displayName}`,
+    component: component,
+    parameters: {
+      layout: 'centered',
+      docs: {
+        canvas: {
+          sourceState: 'shown',
+        },
+      },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+      fill: { control: 'color' },
+      width: { control: 'number' },
+      height: { control: 'number' },
+      size: { control: 'number' },
+      variant: { control: 'radio', options: ['filled', 'outlined'] },
+    },
+  };
+
+  const story: StoryObj<IconComponent> = {
+    args: {
+      variant: 'filled',
+    },
+  };
+
+  return { meta, story };
+};

package/src/svg/Account/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M67-180v-586.999q0-32.664 23.277-55.941 23.277-23.278 55.941-23.278h257.564q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941v85.781h330.781q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941V-180q0 33.257-23.278 56.238-23.277 22.98-55.941 22.98H146.218q-32.664 0-55.941-22.98Q66.999-146.743 66.999-180Zm73 6.218h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm165 495h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm165 495h350v-435H470v105h80v60h-80v105h80v60h-80v105Zm185-270v-60h60v60h-60Zm0 165v-60h60v60h-60Z"/></svg>

package/src/svg/Account/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M67-180v-586.999q0-32.664 23.277-55.941 23.277-23.278 55.941-23.278h257.564q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941v85.781h330.781q32.664 0 55.941 23.278 23.278 23.277 23.278 55.941V-180q0 33.257-23.278 56.238-23.277 22.98-55.941 22.98H146.218q-32.664 0-55.941-22.98Q66.999-146.743 66.999-180Zm73 6.218h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm0-165h105v-105H140v105Zm165 495h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm0-165h105v-105H305v105Zm165 495h350v-435H470v105h80v60h-80v105h80v60h-80v105Zm185-270v-60h60v60h-60Zm0 165v-60h60v60h-60Z"/></svg>

package/src/svg/Account/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const AccountSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default AccountSVG;

package/src/svg/Add/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M440.391-440.391H225.478q-16.707 0-28.158-11.501-11.451-11.502-11.451-28.283 0-16.782 11.451-28.108t28.158-11.326h214.913v-214.913q0-16.636 11.501-28.405 11.502-11.769 28.283-11.769 16.782 0 28.108 11.769t11.326 28.405v214.913h214.913q16.636 0 28.405 11.501 11.769 11.502 11.769 28.283 0 16.782-11.769 28.108t-28.405 11.326H519.609v214.913q0 16.707-11.501 28.158-11.502 11.451-28.283 11.451-16.782 0-28.108-11.451t-11.326-28.158v-214.913Z"/></svg>

package/src/svg/Add/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M440.391-440.391H225.478q-16.707 0-28.158-11.501-11.451-11.502-11.451-28.283 0-16.782 11.451-28.108t28.158-11.326h214.913v-214.913q0-16.636 11.501-28.405 11.502-11.769 28.283-11.769 16.782 0 28.108 11.769t11.326 28.405v214.913h214.913q16.636 0 28.405 11.501 11.769 11.502 11.769 28.283 0 16.782-11.769 28.108t-28.405 11.326H519.609v214.913q0 16.707-11.501 28.158-11.502 11.451-28.283 11.451-16.782 0-28.108-11.451t-11.326-28.158v-214.913Z"/></svg>

package/src/svg/Add/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const AddSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default AddSVG;

package/src/svg/AddCircle/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M449.609-442.609V-310q0 14.191 9.41 23.791t24.156 9.6q14.747 0 23.982-9.359 9.234-9.36 9.234-24.172v-132.469H650q14.191 0 23.791-9.41t9.6-24.156q0-14.747-9.359-23.982-9.36-9.234-24.172-9.234H516.391V-650q0-14.191-9.41-23.791t-24.156-9.6q-14.747 0-23.982 9.359-9.234 9.36-9.234 24.172v140.469H310q-14.191 0-23.791 9.41t-9.6 24.156q0 14.747 9.359 23.982 9.36 9.234 24.172 9.234h139.469Zm30.735 376.74q-86.203 0-161.506-32.395-75.302-32.395-131.741-88.833-56.438-56.439-88.833-131.738-32.395-75.299-32.395-161.587 0-86.288 32.395-161.665t88.745-131.345q56.349-55.968 131.69-88.616 75.34-32.648 161.676-32.648 86.335 0 161.779 32.604t131.37 88.497q55.926 55.893 88.549 131.452 32.623 75.559 32.623 161.877 0 86.281-32.648 161.575-32.648 75.293-88.616 131.478-55.968 56.186-131.426 88.765-75.459 32.58-161.662 32.58Z"/></svg>

package/src/svg/AddCircle/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M449.609-442.609V-310q0 14.191 9.41 23.791t24.156 9.6q14.747 0 23.982-9.359 9.234-9.36 9.234-24.172v-132.469H650q14.191 0 23.791-9.41t9.6-24.156q0-14.747-9.359-23.982-9.36-9.234-24.172-9.234H516.391V-650q0-14.191-9.41-23.791t-24.156-9.6q-14.747 0-23.982 9.359-9.234 9.36-9.234 24.172v140.469H310q-14.191 0-23.791 9.41t-9.6 24.156q0 14.747 9.359 23.982 9.36 9.234 24.172 9.234h139.469Zm30.735 376.74q-86.203 0-161.506-32.395-75.302-32.395-131.741-88.833-56.438-56.439-88.833-131.738-32.395-75.299-32.395-161.587 0-86.288 32.395-161.665t88.745-131.345q56.349-55.968 131.69-88.616 75.34-32.648 161.676-32.648 86.335 0 161.779 32.604t131.37 88.497q55.926 55.893 88.549 131.452 32.623 75.559 32.623 161.877 0 86.281-32.648 161.575-32.648 75.293-88.616 131.478-55.968 56.186-131.426 88.765-75.459 32.58-161.662 32.58Zm.156-79.218q139.239 0 236.826-97.732 97.587-97.732 97.587-237.681 0-139.239-97.4-236.826-97.399-97.587-237.796-97.587-139.021 0-236.826 97.4-97.804 97.399-97.804 237.796 0 139.021 97.732 236.826 97.732 97.804 237.681 97.804ZM480-480Z"/></svg>

package/src/svg/AddCircle/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const AddCircleSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default AddCircleSVG;

package/src/svg/ArrowLeft/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m299.871-440.391 131.173 131.173q11.261 11.827 11.044 28.066-.218 16.239-12.044 27.5-11.826 11.826-27.783 11.544-15.957-.283-27.218-11.544l-198.565-198Q164.652-463.478 164.652-480t11.826-28.348l199.565-199q11.261-11.261 27.218-11.544 15.957-.282 27.783 10.979 11.826 11.826 11.544 28.565-.283 16.739-11.544 28L299.871-519.609h473.39q16.957 0 28.283 11.326T812.87-480q0 16.957-11.326 28.283t-28.283 11.326h-473.39Z"/></svg>

package/src/svg/ArrowLeft/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m299.871-440.391 131.173 131.173q11.261 11.827 11.044 28.066-.218 16.239-12.044 27.5-11.826 11.826-27.783 11.544-15.957-.283-27.218-11.544l-198.565-198Q164.652-463.478 164.652-480t11.826-28.348l199.565-199q11.261-11.261 27.218-11.544 15.957-.282 27.783 10.979 11.826 11.826 11.544 28.565-.283 16.739-11.544 28L299.871-519.609h473.39q16.957 0 28.283 11.326T812.87-480q0 16.957-11.326 28.283t-28.283 11.326h-473.39Z"/></svg>

package/src/svg/ArrowLeft/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const ArrowLeftSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default ArrowLeftSVG;

package/src/svg/ArrowRight/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M662.955-442.391H185.478q-16.957 0-28.283-11.326T145.869-482q0-16.957 11.326-28.283t28.283-11.326h477.477L530.782-654.348q-11.826-11.261-11.326-27.5t12.326-28.065q11.261-11.261 27.218-10.979 15.957.283 27.783 11.544l199.565 199q6.131 6.13 9.261 13.391 3.131 7.261 3.131 14.957 0 7.696-3.131 14.957-3.13 7.261-9.261 13.391l-198.565 198Q575.957-244.391 560-244.108q-15.957.282-27.218-11.544-11.826-11.261-11.826-28t11.826-28.566l130.173-130.173Z"/></svg>

package/src/svg/ArrowRight/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M662.955-442.391H185.478q-16.957 0-28.283-11.326T145.869-482q0-16.957 11.326-28.283t28.283-11.326h477.477L530.782-654.348q-11.826-11.261-11.326-27.5t12.326-28.065q11.261-11.261 27.218-10.979 15.957.283 27.783 11.544l199.565 199q6.131 6.13 9.261 13.391 3.131 7.261 3.131 14.957 0 7.696-3.131 14.957-3.13 7.261-9.261 13.391l-198.565 198Q575.957-244.391 560-244.108q-15.957.282-27.218-11.544-11.826-11.261-11.826-28t11.826-28.566l130.173-130.173Z"/></svg>

package/src/svg/ArrowRight/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const ArrowRightSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default ArrowRightSVG;

package/src/svg/Attributes/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M185.087-506.609q-32.507 0-55.862-23.521-23.356-23.522-23.356-56.262v-196.999q0-32.741 23.356-56.262 23.355-23.522 55.862-23.522h589.826q32.74 0 56.262 23.522 23.521 23.521 23.521 56.262v196.999q0 32.74-23.521 56.262-23.522 23.521-56.262 23.521H185.087Zm0 409.219q-32.507 0-55.862-23.356-23.356-23.356-23.356-55.863v-197.564q0-31.914 23.356-55.566 23.355-23.652 55.862-23.652h589.826q32.74 0 56.262 23.652 23.521 23.652 23.521 55.566v197.564q0 32.507-23.521 55.863-23.522 23.356-56.262 23.356H185.087Z"/></svg>

package/src/svg/Attributes/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M185.087-506.609q-32.507 0-55.862-23.521-23.356-23.522-23.356-56.262v-196.999q0-32.741 23.356-56.262 23.355-23.522 55.862-23.522h589.826q32.74 0 56.262 23.522 23.521 23.521 23.521 56.262v196.999q0 32.74-23.521 56.262-23.522 23.521-56.262 23.521H185.087Zm0-79.783h589.826v-196.999H185.087v196.999Zm0 489.002q-32.507 0-55.862-23.356-23.356-23.356-23.356-55.863v-197.564q0-31.914 23.356-55.566 23.355-23.652 55.862-23.652h589.826q32.74 0 56.262 23.652 23.521 23.652 23.521 55.566v197.564q0 32.507-23.521 55.863-23.522 23.356-56.262 23.356H185.087Zm0-79.219h589.826v-197.564H185.087v197.564Zm0-606.782v196.999-196.999Zm0 409.218v197.564-197.564Z"/></svg>

package/src/svg/Attributes/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const AttributesSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default AttributesSVG;

package/src/svg/Availability/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M572.001-74q-18.522 3.696-32.196-7.912-13.675-11.61-13.675-32.262 0-13.261 8.979-23.804 8.978-10.544 22.804-14.24 27.478-6.434 53.739-17.239 26.261-10.804 50.304-26.978 12.392-7.695 26.783-5.848 14.391 1.848 23.087 11.544 13.957 14.391 12.957 32.761-1 18.37-16.522 28.066-31.739 21.304-65.695 34.891-33.957 13.587-70.565 21.022Zm200.39-177.739q-10.261-8.696-11.826-23.37-1.565-14.674 5.565-27.631 15.74-23.043 26.261-48.521 10.522-25.478 17.391-54.391 3.131-13.826 15.24-23.087Q837.13-438 851.522-438q18.522 0 30.348 13.391 11.826 13.392 7.696 31.349-7.435 38.173-22.304 72.63-14.87 34.456-34.609 64.76-9.696 15.522-27.783 16.805-18.087 1.283-32.479-12.674ZM850.957-522q-13.827 0-25.935-9.261-12.109-9.261-15.805-23.652-6.869-27.913-17.108-53.109-10.239-25.195-25.979-49.238-6.565-12.957-4.5-27.631 2.066-14.674 12.327-24.935 14.391-13.392 31.413-11.609 17.022 1.783 26.718 16.739 20.739 33.305 34.608 66.261 13.87 32.956 22.305 71.13 4.695 17.957-6.913 31.631Q870.479-522 850.957-522ZM395.26-73.434Q254.13-102.565 161.999-215.74 69.869-328.913 69.869-480q0-148.826 92.13-261.435Q254.13-854.044 395.26-884.87q18.522-4.696 32.196 7.13 13.674 11.827 13.674 31.479 0 13.261-9.26 24.587-9.261 11.326-23.088 15.022Q295.87-779.956 222.761-688.5q-73.109 91.457-73.109 208.5t73.109 208.5q73.109 91.456 186.021 118.152 13.261 3.696 22.805 15.304 9.543 11.609 9.543 24.87 0 19.653-13.956 32.044-13.957 12.392-31.914 7.696Zm267.131-689.131q-24.478-14.609-49.956-25.413t-51.391-17.674q-13.826-3.696-23.087-15.522t-9.261-26.217q0-19.088 12.891-30.697 12.892-11.608 30.848-6.913 35.174 7.435 69.913 20.805 34.739 13.369 66.478 34.673 14.957 9.696 16.74 27.783 1.782 18.088-12.175 32.479-9.261 10.261-23.652 11.826-14.391 1.565-27.348-5.13ZM484.13-270.999q-8.565 0-16.63-3t-14.065-8.566q-73.392-66.261-109.587-124.087-36.196-57.826-36.196-108.087 0-77.391 50.543-128.935 50.544-51.544 125.935-51.544 74.827 0 125.088 51.544 50.261 51.544 50.261 128.935 0 50.826-35.913 108.37-35.914 57.543-109.305 123.804-6.565 5.566-14.065 8.566-7.5 3-16.066 3Zm0-205.175q19.566 0 33.414-14.348Q531.391-504.87 531.391-525q0-20.13-13.847-33.978-13.848-13.848-33.414-13.848-20.695 0-34.543 13.848Q435.739-545.13 435.739-525q0 20.13 13.848 34.478 13.848 14.348 34.543 14.348Z"/></svg>

package/src/svg/Availability/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M572.001-74q-18.522 3.696-32.196-7.912-13.675-11.61-13.675-32.262 0-13.261 8.979-23.804 8.978-10.544 22.804-14.24 27.478-6.434 53.739-17.239 26.261-10.804 50.304-26.978 12.392-7.695 26.783-5.848 14.391 1.848 23.087 11.544 13.957 14.391 12.957 32.761-1 18.37-16.522 28.066-31.739 21.304-65.695 34.891-33.957 13.587-70.565 21.022Zm200.39-177.739q-10.261-8.696-11.826-23.37-1.565-14.674 5.565-27.631 15.74-23.043 26.261-48.521 10.522-25.478 17.391-54.391 3.131-13.826 15.24-23.087Q837.13-438 851.522-438q18.522 0 30.348 13.391 11.826 13.392 7.696 31.349-7.435 38.173-22.304 72.63-14.87 34.456-34.609 64.76-9.696 15.522-27.783 16.805-18.087 1.283-32.479-12.674ZM850.957-522q-13.827 0-25.935-9.261-12.109-9.261-15.805-23.652-6.869-27.913-17.108-53.109-10.239-25.195-25.979-49.238-6.565-12.957-4.5-27.631 2.066-14.674 12.327-24.935 14.391-13.392 31.413-11.609 17.022 1.783 26.718 16.739 20.739 33.305 34.608 66.261 13.87 32.956 22.305 71.13 4.695 17.957-6.913 31.631Q870.479-522 850.957-522ZM395.26-73.434Q254.13-102.565 161.999-215.74 69.869-328.913 69.869-480q0-148.826 92.13-261.435Q254.13-854.044 395.26-884.87q18.522-4.696 32.196 7.13 13.674 11.827 13.674 31.479 0 13.261-9.26 24.587-9.261 11.326-23.088 15.022Q295.87-779.956 222.761-688.5q-73.109 91.457-73.109 208.5t73.109 208.5q73.109 91.456 186.021 118.152 13.261 3.696 22.805 15.304 9.543 11.609 9.543 24.87 0 19.653-13.956 32.044-13.957 12.392-31.914 7.696Zm267.131-689.131q-24.478-14.609-49.956-25.413t-51.391-17.674q-13.826-3.696-23.087-15.522t-9.261-26.217q0-19.088 12.891-30.697 12.892-11.608 30.848-6.913 35.174 7.435 69.913 20.805 34.739 13.369 66.478 34.673 14.957 9.696 16.74 27.783 1.782 18.088-12.175 32.479-9.261 10.261-23.652 11.826-14.391 1.565-27.348-5.13ZM484.13-270.999q-8.565 0-16.63-3t-14.065-8.566q-73.392-66.261-109.587-124.087-36.196-57.826-36.196-108.087 0-77.391 50.543-128.935 50.544-51.544 125.935-51.544 74.827 0 125.088 51.544 50.261 51.544 50.261 128.935 0 50.826-35.913 108.37-35.914 57.543-109.305 123.804-6.565 5.566-14.065 8.566-7.5 3-16.066 3Zm0-205.175q19.566 0 33.414-14.348Q531.391-504.87 531.391-525q0-20.13-13.847-33.978-13.848-13.848-33.414-13.848-20.695 0-34.543 13.848Q435.739-545.13 435.739-525q0 20.13 13.848 34.478 13.848 14.348 34.543 14.348Z"/></svg>

package/src/svg/Availability/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const AvailabilitySVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default AvailabilitySVG;

package/src/svg/Calendar/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M596.817-220Q556-220 528-248.183q-28-28.183-28-69T528.183-386q28.183-28 69-28T666-385.817q28 28.183 28 69T665.817-248q-28.183 28-69 28ZM185.087-65.869q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-609.826q0-32.74 23.356-56.262 23.355-23.521 55.862-23.521H245v-22.913q0-15.381 11.005-26.234 11.005-10.853 26.191-10.853 15.612 0 26.513 10.853 10.9 10.853 10.9 26.234v22.913h320.782v-22.913q0-15.381 11.005-26.234 11.004-10.853 26.191-10.853 15.612 0 26.512 10.853Q715-872.99 715-857.609v22.913h59.913q32.74 0 56.262 23.521 23.521 23.522 23.521 56.262v609.826q0 32.507-23.521 55.862-23.522 23.356-56.262 23.356H185.087Zm0-79.218h589.826V-570H185.087v424.913Z"/></svg>

package/src/svg/Calendar/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M596.817-220Q556-220 528-248.183q-28-28.183-28-69T528.183-386q28.183-28 69-28T666-385.817q28 28.183 28 69T665.817-248q-28.183 28-69 28ZM185.087-65.869q-32.507 0-55.862-23.356-23.356-23.355-23.356-55.862v-609.826q0-32.74 23.356-56.262 23.355-23.521 55.862-23.521H245v-22.913q0-15.381 11.005-26.234 11.005-10.853 26.191-10.853 15.612 0 26.513 10.853 10.9 10.853 10.9 26.234v22.913h320.782v-22.913q0-15.381 11.005-26.234 11.004-10.853 26.191-10.853 15.612 0 26.512 10.853Q715-872.99 715-857.609v22.913h59.913q32.74 0 56.262 23.521 23.521 23.522 23.521 56.262v609.826q0 32.507-23.521 55.862-23.522 23.356-56.262 23.356H185.087Zm0-79.218h589.826V-570H185.087v424.913Zm0-484.913h589.826v-124.913H185.087V-630Zm0 0v-124.913V-630Z"/></svg>

package/src/svg/Calendar/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const CalendarSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default CalendarSVG;

package/src/svg/Check/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m378-346.696 355.652-355.087q11.968-11.826 28.354-11.826 16.385 0 28.212 11.879 11.826 11.879 11.826 28.452 0 16.574-11.826 28.626l-383.87 383.87q-12.032 11.826-28.451 11.826t-28.245-11.826l-180.87-180.87q-11.826-12.119-11.609-28.712.218-16.593 12.097-28.419t28.452-11.826q16.574 0 28.626 11.826L378-346.696Z"/></svg>

package/src/svg/Check/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m378-346.696 355.652-355.087q11.968-11.826 28.354-11.826 16.385 0 28.212 11.879 11.826 11.879 11.826 28.452 0 16.574-11.826 28.626l-383.87 383.87q-12.032 11.826-28.451 11.826t-28.245-11.826l-180.87-180.87q-11.826-12.119-11.609-28.712.218-16.593 12.097-28.419t28.452-11.826q16.574 0 28.626 11.826L378-346.696Z"/></svg>

package/src/svg/Check/index.ts

@@ -0,0 +1,12 @@
+import type { IconProps } from '../../types';
+
+import FilledSVG from './icon-fill.svg';
+import OutlinedSVG from './icon.svg';
+
+export const CheckSVG = (opts?: IconProps): string => {
+  const variant = opts?.variant ?? 'filled';
+
+  return variant === 'outlined' ? OutlinedSVG : FilledSVG;
+};
+
+export default CheckSVG;

package/src/svg/CheckCircle/icon-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m419.87-403.696-87.261-87.261q-11.261-11.261-27.715-11.261t-29.155 12.261q-11.261 11.827-11.261 28.218t11.826 27.652L391.521-317.87q12.083 11.827 28.194 11.827 16.111 0 28.503-11.827l232.217-232.782q12.826-12.261 12.826-28.432 0-16.172-12.826-28.873-12.261-11.261-29.216-10.761-16.954.5-28.654 11.761L419.87-403.696Zm60.208 337.827q-85.469 0-161.006-32.395-75.536-32.395-131.975-88.833-56.438-56.439-88.833-131.897-32.395-75.459-32.395-160.928 0-86.469 32.395-162.006 32.395-75.536 88.745-131.504 56.349-55.968 131.849-88.616 75.5-32.648 161.017-32.648 86.516 0 162.12 32.604 75.603 32.604 131.529 88.497t88.549 131.452Q894.696-566.584 894.696-480q0 85.547-32.648 161.075-32.648 75.527-88.616 131.896-55.968 56.37-131.426 88.765-75.459 32.395-161.928 32.395Z"/></svg>

package/src/svg/CheckCircle/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m419.87-403.696-87.261-87.261q-11.261-11.261-27.715-11.261t-29.155 12.261q-11.261 11.827-11.261 28.218t11.826 27.652L391.521-317.87q12.083 11.827 28.194 11.827 16.111 0 28.503-11.827l232.217-232.782q12.826-12.261 12.826-28.432 0-16.172-12.826-28.873-12.261-11.261-29.216-10.761-16.954.5-28.654 11.761L419.87-403.696Zm60.208 337.827q-85.469 0-161.006-32.395-75.536-32.395-131.975-88.833-56.438-56.439-88.833-131.897-32.395-75.459-32.395-160.928 0-86.469 32.395-162.006 32.395-75.536 88.745-131.504 56.349-55.968 131.849-88.616 75.5-32.648 161.017-32.648 86.516 0 162.12 32.604 75.603 32.604 131.529 88.497t88.549 131.452Q894.696-566.584 894.696-480q0 85.547-32.648 161.075-32.648 75.527-88.616 131.896-55.968 56.37-131.426 88.765-75.459 32.395-161.928 32.395ZM480-145.087q139.739 0 237.326-97.732Q814.913-340.551 814.913-480q0-139.739-97.587-237.326-97.587-97.587-237.609-97.587-139.021 0-236.826 97.587-97.804 97.587-97.804 237.609 0 139.021 97.732 236.826Q340.551-145.087 480-145.087ZM480-480Z"/></svg>