@dktunited-techoff/techoff-suite-ui 0.8.0

package/README.md

@@ -0,0 +1 @@
+# Techoff Suite - UI

package/esm/components/Button/Button.css

@@ -0,0 +1,93 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.button > div {
+  margin-right: 8px;
+}
+.button > div:last-child {
+  margin-right: 0px;
+}
+/* ####### */
+/* BLOCK   */
+.button--block {
+  width: 100%;
+}
+/* ####### */
+/* SIZES   */
+.button--md {
+  height: 32px;
+  padding: 0 14px;
+}
+.button--md.button--icon-only {
+  width: 32px;
+  padding: 0;
+}
+.button--lg {
+  height: 40px;
+  padding: 0 16px;
+}
+.button--lg.button--icon-only {
+  width: 40px;
+  padding: 0;
+}
+/* ########## */
+/* VARIANTS   */
+.button--primary {
+  background: #007dbc;
+  color: #ffffff;
+}
+.button--primary:hover {
+  background: #00689d;
+}
+.button--secondary {
+  background: #e7f3f9;
+  color: #007dbc;
+}
+.button--secondary:hover {
+  background: #bedeef;
+}
+.button--success {
+  background: #02be8a;
+  color: #ffffff;
+}
+.button--success:hover {
+  background: #029e73;
+  color: #ffffff;
+}
+.button--ghost {
+  background: #ffffff;
+  color: #1d1d1b;
+  font-weight: 400;
+}
+.button--ghost:hover {
+  background: #e7f3f9;
+}
+.button--shadow {
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background: #ffffff;
+  color: #4e5d6b;
+}
+/* ######### */
+/* ROUNDED   */
+.button--rounded {
+  border-radius: 9999px;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from './Button.types';
+import './Button.css';
+export declare const Button: ({ children, icon, iconDirection, size, variant, block, rounded, onClick, }: PropsWithChildren<ButtonProps>) => React.JSX.Element;

package/esm/components/Button/Button.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Icon } from '../Icon/Icon';
+import './Button.css';
+export const Button = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("button", { className: `
+        button button--${size} button--${variant}
+        ${block ? 'button--block' : ''}
+        ${rounded ? 'button--rounded' : ''}
+        ${icon && !children ? 'button--icon-only' : ''}
+      `, onClick: onClick },
+        icon && iconDirection === 'left' && React.createElement(Icon, { name: icon, size: "16" }),
+        children && React.createElement("div", null, children),
+        icon && iconDirection === 'right' && React.createElement(Icon, { name: icon, size: "16" })));
+};
+//# sourceMappingURL=Button.js.map

package/esm/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;yBACQ,IAAI,YAAY,OAAO;UACtC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;UAC5B,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UAChC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;OAC/C,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QAClE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/Button/Button.types.d.ts

@@ -0,0 +1,9 @@
+export type ButtonProps = {
+    icon?: string;
+    iconDirection?: 'left' | 'right';
+    size?: 'md' | 'lg';
+    variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
+    block?: boolean;
+    rounded?: boolean;
+    onClick: () => void;
+};

package/esm/components/Button/Button.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.types.js.map

package/esm/components/Button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":""}

package/esm/components/Button/__stories__/Button.stories.mdx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Button } from '../Button';
+import { icons } from '../../Icon/icons';
+
+<Meta title="Components/Button" />
+
+export const buttonArgTypes = {
+  children: {
+    control: 'text',
+    description: 'Child of the button.',
+  },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  iconDirection: {
+    control: 'inline-radio',
+    options: ['left', 'right'],
+    description: 'Define the direction of the icon.',
+    table: { defaultValue: { summary: 'left' } },
+  },
+  size: {
+    control: 'inline-radio',
+    options: ['md', 'lg'],
+    description: 'Define the size of the button.',
+    table: { defaultValue: { summary: 'md' } },
+  },
+  variant: {
+    control: 'inline-radio',
+    options: ['primary', 'secondary', 'success', 'ghost', 'shadow'],
+    description: "Variant of the button defining it's color and outline.",
+    table: { defaultValue: { summary: 'primary' } },
+  },
+  block: {
+    control: 'boolean',
+    description: 'Define if the button is full width',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  rounded: {
+    control: 'boolean',
+    description: 'Define if the button has its corner full rounded',
+    table: { defaultValue: { summary: 'false' } },
+  },
+};
+
+# Button
+
+Buttons express what action will occur when the users clicks. Buttons are used to initialize an action, either in the background or foreground of an experience.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: 'Button',
+      iconDirection: 'left',
+      size: 'md',
+      variant: 'primary',
+      block: false,
+      rounded: false,
+      onClick: () => {},
+    }}
+    argTypes={buttonArgTypes}
+  >
+    {args => <Button {...args}>{args.children}</Button>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Button} />

package/esm/components/Checkbox/Checkbox.css

@@ -0,0 +1,61 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+/* ##### */
+/* BOX   */
+.checkbox:hover .checkbox-box {
+  background: #e7f3f9;
+}
+.checkbox-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  color: #007dbc;
+  transition: all ease 0.3s;
+}
+.checkbox-box::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 6px;
+  background: #ffffff;
+  z-index: 10;
+}
+.checkbox-box .icon {
+  z-index: 20;
+}
+
+/* ################# */
+/* LABEL / CAPTION   */
+.checkbox-container {
+  width: 100%;
+  margin-left: 4px;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.checkbox-container--with-caption .checkbox-label {
+  color: #007dbc;
+  font-weight: 700;
+}
+.checkbox-caption {
+  color: #404040;
+  font-size: 12px;
+  font-style: italic;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { CheckboxProps } from './Checkbox.types';
+import './Checkbox.css';
+export declare const CheckboxLabel: ({ children }: PropsWithChildren) => React.JSX.Element;
+export declare const CheckboxCaption: ({ children }: PropsWithChildren) => React.JSX.Element;
+export declare const Checkbox: ({ children, checked, onChange }: PropsWithChildren<CheckboxProps>) => React.JSX.Element;

package/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Children } from 'react';
+import { isSuiteElement } from '../../utils/validator.utils';
+import { Icon } from '../Icon/Icon';
+import './Checkbox.css';
+export const CheckboxLabel = ({ children }) => React.createElement("div", { className: "checkbox-label" }, children);
+export const CheckboxCaption = ({ children }) => React.createElement("div", { className: "checkbox-caption" }, children);
+export const Checkbox = ({ children, checked, onChange }) => {
+    const labelElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxLabel'));
+    const captionElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxCaption'));
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "checkbox", onClick: () => onChange(!checked) },
+        React.createElement("div", { className: "checkbox-box" },
+            checked && React.createElement(Icon, { name: "square-check-filled" }),
+            !checked && React.createElement(Icon, { name: "square" })),
+        React.createElement("div", { className: `checkbox-container ${captionElement ? 'checkbox-container--with-caption' : ''}` },
+            labelElement,
+            captionElement)));
+};
+//# sourceMappingURL=Checkbox.js.map

package/esm/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAAC;AACnH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO,CAAC;AAEvH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAoC,EAAE,EAAE;IAC5F,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IAC9F,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;QACzD,6BAAK,SAAS,EAAC,cAAc;YAC1B,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YAC9C,CAAC,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B;QAEN,6BAAK,SAAS,EAAE,sBAAsB,cAAc,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,YAAY;YACZ,cAAc,CACX,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,4 @@
+export type CheckboxProps = {
+    checked?: boolean;
+    onChange: (value: boolean) => void;
+};

package/esm/components/Checkbox/Checkbox.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Checkbox.types.js.map

package/esm/components/Checkbox/Checkbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}

package/esm/components/Checkbox/__stories__/Checkbox.stories.mdx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Checkbox, CheckboxLabel, CheckboxCaption } from '../Checkbox';
+
+<Meta title="Components/Checkbox" />
+
+export const checkboxArgTypes = {
+  checked: {
+    control: 'boolean',
+    description: 'State of the checkbox.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+};
+
+# Checkbox
+
+The checkboxes are applied when users can select all, several, or none of the options from a given list.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: [
+        <CheckboxLabel>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</CheckboxLabel>,
+        <CheckboxCaption>
+          auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo
+          viverra nisl, in posuere dui urna eget quam.
+        </CheckboxCaption>,
+      ],
+      checked: false,
+      onChange: () => {},
+    }}
+    argTypes={checkboxArgTypes}
+  >
+    {args => <Checkbox {...args}>{args.children}</Checkbox>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Checkbox} />

package/esm/components/Icon/Icon.css

@@ -0,0 +1,26 @@
+.icon--16 {
+  width: 16px;
+  height: 16px;
+}
+.icon--20 {
+  width: 20px;
+  height: 20px;
+}
+.icon--24 {
+  width: 24px;
+  height: 24px;
+}
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconProps } from './Icon.types';
+import './Icon.css';
+export declare const Icon: ({ name, size }: IconProps) => React.JSX.Element;

package/esm/components/Icon/Icon.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { icons } from './icons';
+import './Icon.css';
+export const Icon = ({ name, size = '20' }) => {
+    const icon = icons[name];
+    // #########
+    // Rendering
+    if (!icon)
+        return React.createElement(React.Fragment, null);
+    return React.createElement("div", { className: `icon icon--${size}`, dangerouslySetInnerHTML: { __html: icon } });
+};
+//# sourceMappingURL=Icon.js.map

package/esm/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAa,EAAE,EAAE;IACvD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAEzB,YAAY;IACZ,YAAY;IACZ,IAAI,CAAC,IAAI;QAAE,OAAO,yCAAK,CAAC;IACxB,OAAO,6BAAK,SAAS,EAAE,cAAc,IAAI,EAAE,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC;AAC7F,CAAC,CAAC"}

package/esm/components/Icon/Icon.types.d.ts

@@ -0,0 +1,4 @@
+export type IconProps = {
+    name: string;
+    size?: '16' | '20' | '24';
+};

package/esm/components/Icon/Icon.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Icon.types.js.map

package/esm/components/Icon/Icon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":""}

package/esm/components/Icon/__stories__/Icon.stories.mdx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Icon } from '../Icon';
+import { icons } from '../icons';
+
+<Meta title="Guidelines/Iconography" />
+
+<style>
+  {`
+    .icons {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 20px;
+    }
+    .icon-container {
+      display: flex;
+      flex-direction: column;
+      width: 140px;
+      height: 110px;
+      margin: 0 10px 10px 0;
+      box-shadow: rgba(0, 0, 0, 0.10) 0 1px 3px 0;
+      border: 1px solid hsla(203, 50%, 30%, 0.15);
+      border-radius: 5px;
+      color: #27272a;
+      overflow: hidden;
+    }
+    .icon {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 30px;
+      border-top: 1px solid hsla(203, 50%, 30%, 0.15);
+      background: #fafafa;
+      font-size: 13px;
+    }
+  `}
+</style>
+
+export const iconArgTypes = {
+  name: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Name of an icon.',
+  },
+  size: {
+    control: 'inline-radio',
+    options: ['16', '20', '24'],
+    description: 'Define the size of an icon.',
+    table: { defaultValue: { summary: '20' } },
+  },
+};
+
+# Iconography
+
+Icons are visual symbols used to represent ideas, objects or actions. They communicate messages at a glance, allow interactivity and draw attention to important information.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ name: 'heart', size: '20' }} argTypes={iconArgTypes}>
+    {args => <Icon {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Icon} />
+
+## Icons
+
+<div className="icons">
+  {Object.keys(icons).map(icon => (
+    <div className="icon-container" key={icon}>
+      <div className="icon">
+        <Icon name={icon} />
+      </div>
+      <div className="icon-label">{icon}</div>
+    </div>
+  ))}
+</div>

package/esm/components/Icon/icons/check.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M5 12l5 5l10 -10"></path>
+</svg>

package/esm/components/Icon/icons/chevron-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M6 9l6 6l6 -6"></path>
+</svg>

package/esm/components/Icon/icons/chevron-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M15 6l-6 6l6 6"></path>
+</svg>

package/esm/components/Icon/icons/chevron-right.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M9 6l6 6l-6 6"></path>
+</svg>

package/esm/components/Icon/icons/chevron-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M6 15l6 -6l6 6"></path>
+</svg>

package/esm/components/Icon/icons/heart-filled.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+</svg>

package/esm/components/Icon/icons/heart.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+</svg>

package/esm/components/Icon/icons/home.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
+   <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
+   <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
+</svg>

package/esm/components/Icon/icons/index.d.ts

@@ -0,0 +1,3 @@
+export declare const icons: {
+    [k: string]: string;
+};

package/esm/components/Icon/icons/index.js

@@ -0,0 +1,16 @@
+export const icons = {
+    'check': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M5 12l5 5l10 -10"></path></svg>',
+    'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M6 9l6 6l6 -6"></path></svg>',
+    'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M15 6l-6 6l6 6"></path></svg>',
+    'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M9 6l6 6l-6 6"></path></svg>',
+    'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M6 15l6 -6l6 6"></path></svg>',
+    'heart-filled': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path></svg>',
+    'heart': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>',
+    'home': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>   <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>   <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>',
+    'plus': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M12 5l0 14"></path>   <path d="M5 12l14 0"></path></svg>',
+    'search': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>   <path d="M21 21l-6 -6"></path></svg>',
+    'square-check-filled': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-2.626 7.293a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" /></svg>',
+    'square': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg>',
+    'user': '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>   <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>   <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg>',
+};
+//# sourceMappingURL=index.js.map

package/esm/components/Icon/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAA4B;IAC5C,OAAO,EAAE,yUAAyU;IAClV,cAAc,EAAE,6UAA6U;IAC7V,cAAc,EAAE,8UAA8U;IAC9V,eAAe,EAAE,8UAA8U;IAC/V,YAAY,EAAE,4UAA4U;IAC1V,cAAc,EAAE,4jBAA4jB;IAC5kB,OAAO,EAAE,qYAAqY;IAC9Y,MAAM,EAAE,6cAA6c;IACrd,MAAM,EAAE,iWAAiW;IACzW,QAAQ,EAAE,qYAAqY;IAC/Y,qBAAqB,EAAE,qtBAAqtB;IAC5uB,QAAQ,EAAE,wXAAwX;IAClY,MAAM,EAAE,uZAAuZ;CACha,CAAC"}