@dktunited-techoff/techoff-suite-ui 1.7.10 → 1.8.0

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsButton } from '../TsButton';
-import { icons } from '../../TsIcon/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' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Define if the button is disabled',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  rounded: {
-    control: 'boolean',
-    description: 'Define if the button has its corner full rounded',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  onClick: {
-    control: 'function',
-    description: 'The handler called when clicking on the button (not available on playground).',
-  },
-};
-
-# 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,
-      disabled: false,
-      rounded: false,
-      onClick: () => {},
-    }}
-    argTypes={buttonArgTypes}
-  >
-    {args => <TsButton {...args}>{args.children}</TsButton>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsButton} />

package/esm/components/TsCheckbox/TsCheckbox.css

@@ -1,64 +0,0 @@
-.ts-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  margin-left: -3px;
-}
-/* ########## */
-/* DISABLED   */
-.ts-checkbox--disabled {
-  cursor: not-allowed;
-}
-.ts-checkbox--disabled .ts-checkbox-box {
-  color: #d7daf1;
-}
-.ts-checkbox--disabled:hover .ts-checkbox-box {
-  background: transparent;
-}
-/* ##### */
-/* BOX   */
-.ts-checkbox-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  min-height: 24px;
-  border-radius: 6px;
-  color: #949494;
-}
-.ts-checkbox-box--checked,
-.ts-checkbox:hover .ts-checkbox-box:not(.ts-checkbox-box--checked) {
-  color: #3643ba;
-}
-
-/* ################# */
-/* LABEL / CAPTION   */
-.ts-checkbox-container {
-  width: 100%;
-  padding: 4px 0 4px 8px;
-  border-radius: 6px;
-}
-.ts-checkbox-label {
-  white-space: nowrap;
-}
-.ts-checkbox-container--with-caption .ts-checkbox-label {
-  color: #3643ba;
-  font-weight: 700;
-}
-.ts-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/TsCheckbox/TsCheckbox.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { TsCheckboxProps } from './TsCheckbox.types';
-import './TsCheckbox.css';
-export declare const TsCheckbox: ({ caption, label, checked, disabled, onChange }: TsCheckboxProps) => React.JSX.Element;

package/esm/components/TsCheckbox/TsCheckbox.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { TsIcon } from '../TsIcon/TsIcon';
-import './TsCheckbox.css';
-export const TsCheckbox = ({ caption, label, checked, disabled, onChange }) => {
-    // ########
-    // Handlers
-    const handleChange = () => !disabled && onChange(!checked);
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: `ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`, onClick: handleChange },
-        React.createElement("div", { className: `ts-checkbox-box ${checked ? 'ts-checkbox-box--checked' : ''}` },
-            React.createElement(TsIcon, { name: checked ? 'check-square-filled' : 'square', size: "24" })),
-        React.createElement("div", { className: `ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}` },
-            React.createElement("div", { className: "ts-checkbox-label" }, label),
-            caption && React.createElement("div", { className: "ts-checkbox-caption" }, caption))));
-};
-//# sourceMappingURL=TsCheckbox.js.map

package/esm/components/TsCheckbox/TsCheckbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAE,mBAAmB,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5E,oBAAC,MAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,CAClE;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,7 +0,0 @@
-export type TsCheckboxProps = {
-    caption?: string;
-    label: string;
-    checked?: boolean;
-    disabled?: boolean;
-    onChange: (value: boolean) => void;
-};

package/esm/components/TsCheckbox/TsCheckbox.types.js

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

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

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

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsCheckbox } from '../TsCheckbox';
-
-<Meta title="Components/Checkbox" />
-
-export const checkboxArgTypes = {
-  caption: {
-    control: 'text',
-    description: 'Caption of the checkbox.',
-  },
-  label: {
-    control: 'text',
-    description: 'Label of the checkbox.',
-  },
-  checked: {
-    control: 'boolean',
-    description: 'State of the checkbox.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Enable state of the checkbox.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  onChange: {
-    control: 'function',
-    description: 'The handler called when clicking on the checkbox.',
-  },
-};
-
-# Checkbox
-
-Checkboxes are applied when users can select all, several, or none of the options from a given list.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      caption:
-        'Auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo viverra nisl, in posuere dui urna eget quam.',
-      checked: false,
-      disabled: false,
-    }}
-    argTypes={checkboxArgTypes}
-  >
-    {args => <TsCheckbox {...args}>{args.children}</TsCheckbox>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsCheckbox} />

package/esm/components/TsDropdown/TsDropdown.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { TsDropdownProps } from './TsDropdown.types';
-import './TsDropdown.css';
-export declare const TsDropdown: <T extends unknown>({ containerRef, error, label, options, placeholder, reloadOptionsOn, searchPlaceholder, value, disabled, searchable, getOptionLabel, getOptionValue, loadOptions, onChange, }: TsDropdownProps<T>) => React.JSX.Element;

package/esm/components/TsDropdown/TsDropdown.js

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
-import { TsIcon } from '../TsIcon/TsIcon';
-import { TsInput } from '../TsInput/TsInput/TsInput';
-import { useClickOutside } from '../../hooks/use-click-outside';
-import { TsLoader } from '../TsLoader/TsLoader';
-import './TsDropdown.css';
-export const TsDropdown = ({ containerRef, error, label, options, placeholder, reloadOptionsOn = [], searchPlaceholder, value, disabled, searchable, getOptionLabel, getOptionValue, loadOptions, onChange, }) => {
-    const [showDropdownMenu, setShowDropdownMenu] = useState(false);
-    const [searchValue, setSearchValue] = useState('');
-    const [items, setItems] = useState(options ?? []);
-    const [loading, setLoading] = useState(false);
-    const [isFetchError, setIsFetchError] = useState(false);
-    const dropdownRef = useClickOutside(() => setShowDropdownMenu(false));
-    const dropdownMenuRef = useRef(null);
-    // ########
-    // Fetchers
-    const fetchOptions = () => {
-        if (!options && loadOptions) {
-            setLoading(true);
-            setIsFetchError(false);
-            loadOptions(searchValue)
-                .then(setItems)
-                .catch(() => setIsFetchError(true))
-                .finally(() => setLoading(false));
-        }
-    };
-    // ########
-    // Handlers
-    const handleSelectItem = (item) => {
-        setShowDropdownMenu(false);
-        onChange(item);
-    };
-    const handleShowDropdownMenu = () => !disabled && setShowDropdownMenu(true);
-    // ########
-    // Watchers
-    useEffect(() => {
-        if (!disabled)
-            fetchOptions();
-    }, [...reloadOptionsOn, disabled]);
-    useEffect(() => {
-        if (searchable && options) {
-            setItems(options.filter(option => getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())));
-        }
-        if (searchable && !options && loadOptions) {
-            setLoading(true);
-            setIsFetchError(false);
-            const timeOutId = setTimeout(fetchOptions, 500);
-            return () => clearTimeout(timeOutId);
-        }
-        return () => { };
-    }, [searchValue]);
-    useEffect(() => {
-        if (searchable && !showDropdownMenu)
-            setSearchValue('');
-        if (showDropdownMenu && containerRef?.current && dropdownMenuRef.current) {
-            const dropdownMenuRect = dropdownMenuRef.current.getBoundingClientRect();
-            const containerRect = containerRef.current.getBoundingClientRect();
-            if (dropdownMenuRect.bottom > containerRect.bottom) {
-                dropdownMenuRef.current.style.bottom = '40px';
-                dropdownMenuRef.current.style.top = 'auto';
-            }
-            else {
-                dropdownMenuRef.current.style.top = '60px';
-                dropdownMenuRef.current.style.bottom = 'auto';
-            }
-        }
-    }, [showDropdownMenu]);
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "ts-dropdown-container", ref: dropdownRef },
-        React.createElement("div", { className: "ts-dropdown-input-container" },
-            label && React.createElement("div", { className: "ts-dropdown-label" }, label),
-            React.createElement("div", { className: `
-            ts-dropdown-input
-            ${disabled ? 'ts-dropdown-input--disabled' : ''}
-            ${error && error !== '' ? 'ts-dropdown-container--error' : ''}
-          `, onClick: handleShowDropdownMenu },
-                !value && placeholder && React.createElement("div", { className: "ts-dropdown-input--placeholder" }, placeholder),
-                value && React.createElement("div", { className: "ts-dropdown-input--value" }, getOptionLabel(value)),
-                React.createElement("div", { className: "ts-dropdown-input--chevron" },
-                    React.createElement(TsIcon, { name: showDropdownMenu ? 'chevron-up' : 'chevron-down' })))),
-        error && error !== '' && (React.createElement("div", { className: "ts-dropdown-error" },
-            React.createElement("div", { className: "ts-dropdown-error--icon" },
-                React.createElement(TsIcon, { name: "alert-circle", size: "16" })),
-            React.createElement("div", { className: "ts-dropdown-error--label" }, error))),
-        !disabled && showDropdownMenu && (React.createElement("div", { className: "ts-dropdown-menu-container", ref: dropdownMenuRef },
-            searchable && (React.createElement("div", { className: "ts-dropdown-search" },
-                React.createElement(TsInput, { icon: "search", placeholder: searchPlaceholder, value: searchValue, autoFocus: true, onChange: setSearchValue }))),
-            React.createElement("div", { className: "ts-dropdown-menu" },
-                loading && (React.createElement("div", { className: "ts-dropdown-menu-loader" },
-                    React.createElement(TsLoader, { size: "sm" }))),
-                !loading && isFetchError && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, "An error occured, try again later.")),
-                !loading && !isFetchError && items.length === 0 && (React.createElement("div", { className: "ts-dropdown-menu-error-text" }, "No options found.")),
-                !loading &&
-                    !isFetchError &&
-                    items.length > 0 &&
-                    items.map(item => (React.createElement("div", { key: getOptionValue(item), className: "ts-dropdown-menu-item", onClick: () => handleSelectItem(item) }, getOptionLabel(item)))))))));
-};
-//# sourceMappingURL=TsDropdown.js.map

package/esm/components/TsDropdown/TsDropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsDropdown.js","sourceRoot":"","sources":["../../../src/components/TsDropdown/TsDropdown.tsx"],"names":[],"mappings":"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"}

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

@@ -1,17 +0,0 @@
-import { RefObject } from 'react';
-export type TsDropdownProps<T> = {
-    containerRef?: RefObject<HTMLElement>;
-    error?: string;
-    label?: string;
-    options?: T[];
-    placeholder?: string;
-    reloadOptionsOn?: any[];
-    searchPlaceholder?: string;
-    value?: T;
-    disabled?: boolean;
-    searchable?: boolean;
-    getOptionLabel: (option: T) => string;
-    getOptionValue: (option: T) => string;
-    loadOptions?: (search?: string) => Promise<T[]>;
-    onChange: (value?: T) => void;
-};

package/esm/components/TsDropdown/TsDropdown.types.js

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

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

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

package/esm/components/TsDropdown/__stories__/fruits.d.ts

@@ -1,4 +0,0 @@
-export declare const fruits: {
-    name: string;
-    id: number;
-}[];

package/esm/components/TsDropdown/__stories__/fruits.js

@@ -1,48 +0,0 @@
-export const fruits = [
-    { name: 'Persimmon', id: 52 },
-    { name: 'Strawberry', id: 3 },
-    { name: 'Banana', id: 1 },
-    { name: 'Tomato', id: 5 },
-    { name: 'Pear', id: 4 },
-    { name: 'Durian', id: 60 },
-    { name: 'Blackberry', id: 64 },
-    { name: 'Lingonberry', id: 65 },
-    { name: 'Kiwi', id: 66 },
-    { name: 'Lychee', id: 67 },
-    { name: 'Pineapple', id: 10 },
-    { name: 'Fig', id: 68 },
-    { name: 'Gooseberry', id: 69 },
-    { name: 'Passionfruit', id: 70 },
-    { name: 'Plum', id: 71 },
-    { name: 'Orange', id: 2 },
-    { name: 'GreenApple', id: 72 },
-    { name: 'Raspberry', id: 23 },
-    { name: 'Watermelon', id: 25 },
-    { name: 'Lemon', id: 26 },
-    { name: 'Mango', id: 27 },
-    { name: 'Blueberry', id: 33 },
-    { name: 'Apple', id: 6 },
-    { name: 'Guava', id: 37 },
-    { name: 'Apricot', id: 35 },
-    { name: 'Papaya', id: 42 },
-    { name: 'Melon', id: 41 },
-    { name: 'Tangerine', id: 77 },
-    { name: 'Pitahaya', id: 78 },
-    { name: 'Lime', id: 44 },
-    { name: 'Pomegranate', id: 79 },
-    { name: 'Dragonfruit', id: 80 },
-    { name: 'Grape', id: 81 },
-    { name: 'Morus', id: 82 },
-    { name: 'Feijoa', id: 76 },
-    { name: 'Avocado', id: 84 },
-    { name: 'Kiwifruit', id: 85 },
-    { name: 'Cranberry', id: 87 },
-    { name: 'Cherry', id: 9 },
-    { name: 'Peach', id: 86 },
-    { name: 'Jackfruit', id: 94 },
-    { name: 'Horned Melon', id: 95 },
-    { name: 'Hazelnut', id: 96 },
-    { name: 'Pomelo', id: 98 },
-    { name: 'Mangosteen', id: 99 },
-];
-//# sourceMappingURL=fruits.js.map

package/esm/components/TsDropdown/__stories__/fruits.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fruits.js","sourceRoot":"","sources":["../../../../src/components/TsDropdown/__stories__/fruits.ts"],"names":[],"mappings":"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"}

package/esm/components/TsIcon/TsIcon.css

@@ -1,26 +0,0 @@
-.ts-icon--16 {
-  width: 16px;
-  height: 16px;
-}
-.ts-icon--20 {
-  width: 20px;
-  height: 20px;
-}
-.ts-icon--24 {
-  width: 24px;
-  height: 24px;
-}
-.ts-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/TsIcon/TsIcon.d.ts

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

package/esm/components/TsIcon/TsIcon.js

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

package/esm/components/TsIcon/TsIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsIcon.js","sourceRoot":"","sources":["../../../src/components/TsIcon/TsIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAe,EAAE,EAAE;IAC3D,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,oBAAoB,IAAI,EAAE,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC;AACnG,CAAC,CAAC"}

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

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

package/esm/components/TsIcon/TsIcon.types.js

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

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

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

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

@@ -1,89 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsIcon } from '../TsIcon';
-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;
-      text-align: center;
-      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 => <TsIcon {...args} />}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsIcon} />
-
-## Icons
-
-<div className="icons">
-  {Object.keys(icons)
-    .filter(icon => !icon.startsWith('header-'))
-    .map(icon => (
-      <div className="icon-container" key={icon}>
-        <div className="icon">
-          <TsIcon name={icon} />
-        </div>
-        <div className="icon-label">{icon}</div>
-      </div>
-    ))}
-</div>

package/esm/components/TsIcon/icons/add-circle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V7H13V11H17V13H13V17H11V13H7V11H11ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"></path></svg>

package/esm/components/TsIcon/icons/add.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>

package/esm/components/TsIcon/icons/alert-circle-filled.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z"></path></svg>

package/esm/components/TsIcon/icons/alert-circle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>

package/esm/components/TsIcon/icons/alert-triangle-filled.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z"></path></svg>

package/esm/components/TsIcon/icons/alert-triangle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM4.20568 19.0002H19.7941L11.9999 5.50017L4.20568 19.0002ZM10.9999 16.0002H12.9999V18.0002H10.9999V16.0002ZM10.9999 9.00017H12.9999V14.0002H10.9999V9.00017Z"></path></svg>

package/esm/components/TsIcon/icons/arrow-diagonal-collapse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 4.00008H13V11.0001H20V9.00008H16.4142L20.7071 4.70718L19.2929 3.29297L15 7.58586V4.00008ZM4.00008 15H7.58586L3.29297 19.2929L4.70718 20.7071L9.00008 16.4142V20H11.0001V13H4.00008V15Z"></path></svg>

package/esm/components/TsIcon/icons/arrow-diagonal-expand.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5858 5H14V3H21V10H19V6.41421L14.7071 10.7071L13.2929 9.29289L17.5858 5ZM3 14H5V17.5858L9.29289 13.2929L10.7071 14.7071L6.41421 19H10V21H3V14Z"></path></svg>

package/esm/components/TsIcon/icons/arrow-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"></path></svg>

package/esm/components/TsIcon/icons/arrow-go-back.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.82843 6.99955L8.36396 9.53509L6.94975 10.9493L2 5.99955L6.94975 1.0498L8.36396 2.46402L5.82843 4.99955H13C17.4183 4.99955 21 8.58127 21 12.9996C21 17.4178 17.4183 20.9996 13 20.9996H4V18.9996H13C16.3137 18.9996 19 16.3133 19 12.9996C19 9.68584 16.3137 6.99955 13 6.99955H5.82843Z"></path></svg>