@dktunited-techoff/techoff-suite-ui 1.8.1 → 1.8.2

package/esm/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.js

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

package/esm/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.js.map

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

package/esm/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.ts

@@ -0,0 +1,8 @@
+export type TsDropdownFilterProps<T> = {
+  label: string;
+  searchPlaceholder?: string;
+  loadOptions: (query?: string) => Promise<T[]>;
+  getOptionLabel: (item: T) => string;
+  getOptionValue: (item: T) => string;
+  onChange: (item: T) => void;
+};

package/esm/components/TsDropdowns/TsDropdownFilter/__stories__/TsDropdown.stories.mdx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsDropdownFilter } from '../TsDropdownFilter';
+import { fruits } from './fruits';
+
+<Meta title="Components/Dropdowns/Dropdown filter" />
+
+export const dropdownArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the dropdown.',
+  },
+  searchPlaceholder: {
+    control: 'text',
+    description: 'Placeholder of the option search (only for searchable dropdowns).',
+  },
+  getOptionLabel: {
+    control: 'function',
+    description: 'The handler called to get the option label',
+  },
+  getOptionValue: {
+    control: 'function',
+    description: 'The handler called to get the option value.',
+  },
+  loadOptions: {
+    control: 'function',
+    description: 'The handler called to fetch all options in async (not available on playground).',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the dropdown option.',
+  },
+};
+
+# Dropdown filter
+
+Dropdowns specific to filter a search on page contents.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      searchPlaceholder: '',
+      loadOptions: function ol(search) {
+        return Promise.resolve(
+          fruits.filter(function om(fruit) {
+            return fruit.name.includes(search);
+          }),
+        );
+      },
+      getOptionLabel: function ol(fruit) {
+        return fruit.name;
+      },
+      getOptionValue: function ov(fruit) {
+        return fruit.id;
+      },
+    }}
+    argTypes={dropdownArgTypes}
+  >
+    {args => <TsDropdownFilter {...args}>{args.children}</TsDropdownFilter>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsDropdownFilter} />

package/esm/components/TsDropdowns/TsDropdownFilter/__stories__/fruits.d.ts

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

package/esm/components/TsDropdowns/TsDropdownFilter/__stories__/fruits.js

@@ -0,0 +1,48 @@
+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/TsDropdowns/TsDropdownFilter/__stories__/fruits.js.map

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

package/esm/components/TsDropdowns/TsDropdownFilter/__stories__/fruits.ts

@@ -0,0 +1,47 @@
+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 },
+];

package/esm/components/TsIcon/TsIcon.css

@@ -0,0 +1,26 @@
+.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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

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

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

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

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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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>

package/esm/components/TsIcon/icons/arrow-left-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.0503 12.0498L21 16.9996L16.0503 21.9493L14.636 20.5351L17.172 17.9988L4 17.9996V15.9996L17.172 15.9988L14.636 13.464L16.0503 12.0498ZM7.94975 2.0498L9.36396 3.46402L6.828 5.9988L20 5.99955V7.99955L6.828 7.9988L9.36396 10.5351L7.94975 11.9493L3 6.99955L7.94975 2.0498Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9498 7.94975L10.5356 9.36396L8.00079 6.828L8.00004 20H6.00004L6.00079 6.828L3.46451 9.36396L2.05029 7.94975L7.00004 3L11.9498 7.94975ZM21.9498 16.0503L17 21L12.0503 16.0503L13.4645 14.636L16.0008 17.172L16 4H18L18.0008 17.172L20.5356 14.636L21.9498 16.0503Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 15.2454V22.1169C17 22.393 16.7761 22.617 16.5 22.617C16.4094 22.617 16.3205 22.5923 16.2428 22.5457L12 20L7.75725 22.5457C7.52046 22.6877 7.21333 22.6109 7.07125 22.3742C7.02463 22.2964 7 22.2075 7 22.1169V15.2454C5.17107 13.7793 4 11.5264 4 9C4 4.58172 7.58172 1 12 1C16.4183 1 20 4.58172 20 9C20 11.5264 18.8289 13.7793 17 15.2454ZM9 16.4185V19.4676L12 17.6676L15 19.4676V16.4185C14.0736 16.7935 13.0609 17 12 17C10.9391 17 9.92643 16.7935 9 16.4185ZM12 15C15.3137 15 18 12.3137 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 12.3137 8.68629 15 12 15Z"></path></svg>

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

@@ -0,0 +1 @@
+<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.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>

package/esm/components/TsIcon/icons/check-circle-timer.svg

@@ -0,0 +1,7 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve">
+<path d="M8.8,21.6c-4.9,0-8.8-3.9-8.8-8.8S3.9,4,8.8,4s8.8,3.9,8.8,8.8S13.6,21.6,8.8,21.6z M8.8,19.8c3.9,0,7-3.1,7-7s-3.1-7-7-7
+	s-7,3.1-7,7S4.9,19.8,8.8,19.8z M7.9,16.3l-3.7-3.7l1.3-1.3l2.4,2.4l5-4.9l1.3,1.3L7.9,16.3z"/>
+<path d="M15.8,11.4c-3.1,0-5.7-2.6-5.7-5.7S12.7,0,15.8,0s5.7,2.6,5.7,5.7S18.9,11.4,15.8,11.4z M16.4,5.7V2.8h-1.1v4h3.4V5.7H16.4z
+	"/>
+</svg>

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

@@ -0,0 +1 @@
+<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.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>

package/esm/components/TsIcon/icons/check-square-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>

package/esm/components/TsIcon/icons/check-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z"></path></svg>

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

@@ -0,0 +1 @@
+<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 20Z"></path></svg>

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

@@ -0,0 +1 @@
+<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 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>

package/esm/components/TsIcon/icons/currency-euro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-currency-euro" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17.2 7a6 7 0 1 0 0 10" /><path d="M13 10h-8m0 4h8" /></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"></path></svg>

package/esm/components/TsIcon/icons/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg>

package/esm/components/TsIcon/icons/filter-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.92893 0.514648L21.0711 14.6568L19.6569 16.071L15.834 12.2486L15 13.4999V21.9999H9V13.4999L4 5.99993H3V3.99993L7.585 3.99965L5.51472 1.92886L6.92893 0.514648ZM9.585 5.99965L6.4037 5.99993L11 12.8944V19.9999H13V12.8944L14.392 10.8066L9.585 5.99965ZM21 3.99993V5.99993H20L18.085 8.87193L16.643 7.42893L17.5963 5.99993H15.213L13.213 3.99993H21Z"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21 4V6H20L15 13.5V22H9V13.5L4 6H3V4H21ZM6.4037 6L11 12.8944V20H13V12.8944L17.5963 6H6.4037Z"></path></svg>

package/esm/components/TsIcon/icons/flashlight-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bolt-off" 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 3l18 18" /><path d="M15.212 15.21l-4.212 5.79v-7h-6l3.79 -5.21m1.685 -2.32l2.525 -3.47v6m1 1h5l-2.104 2.893" /></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bolt" 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="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" /></svg>

package/esm/components/TsIcon/icons/header-bikestudio.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 238.9 17.2" style="enable-background:new 0 0 238.9 17.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47;}
+	.st1{font-family:'Montserrat-Medium';}
+	.st2{font-size:24px;}
+	.st3{font-family:'Roboto-Light';}
+	.st4{font-size:11px;}
+	.st5{fill:#020203;}
+	.st6{fill:#0D84C5;}
+	.st7{fill:#FFFFFF;}
+</style>
+<text transform="matrix(1 0 0 1 -2.52 16.9922)" class="st0 st1 st2">BIKESTUDIO</text>
+<text transform="matrix(1 0 0 1 165.1359 17.0155)" class="st3 st4">BY</text>
+<path class="st5" d="M202.2,10.3c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L202.2,10.3z"/>
+<polygon class="st5" points="188.2,7.7 194.1,7.7 194.1,9.5 190.2,9.5 190.2,11.4 193.6,11.4 193.6,13.2 190.2,13.2 190.2,15.2 
+	194.1,15.2 194.1,17 188.2,17 "/>
+<polygon class="st5" points="226.7,7.5 232.2,7.5 232.2,9.4 228.6,9.4 228.6,11.7 231.7,11.7 231.7,13.5 228.6,13.5 228.6,16.9 
+	226.7,16.9 "/>
+<polygon class="st5" points="233.3,7.5 238.9,7.5 238.9,9.4 235.3,9.4 235.3,11.7 238.4,11.7 238.4,13.5 235.3,13.5 235.3,16.9 
+	233.3,16.9 "/>
+<polygon class="st5" points="210.7,13 206.7,13 206.7,16.9 204.8,16.9 204.8,7.5 206.7,7.5 206.7,11.1 210.7,11.1 210.7,7.5 
+	212.7,7.5 212.7,16.9 210.7,16.9 "/>
+<polygon class="st5" points="180,7.7 187.1,7.7 187.1,9.6 184.6,9.6 184.6,17 182.6,17 182.6,9.6 180,9.6 "/>
+<polyline class="st5" points="213.1,8.8 214.9,6 216.9,6 215.1,8.8 213.1,8.8 "/>
+<path class="st5" d="M220.7,7.4c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S223.5,7.4,220.7,7.4z"/>
+<polygon class="st6" points="216.6,12.4 222.7,8.8 222.7,15.9 "/>
+<polygon class="st7" points="220.6,17 220.5,13.6 217.7,15.4 "/>
+</svg>

package/esm/components/TsIcon/icons/header-nsc-helmet.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 247.3 17" style="enable-background:new 0 0 247.3 17;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47;}
+	.st1{font-family:'Montserrat-Medium';}
+	.st2{font-size:24px;}
+	.st3{font-family:'Roboto-Light';}
+	.st4{font-size:11px;}
+	.st5{fill:#020203;}
+	.st6{fill:#0D84C5;}
+	.st7{fill:#FFFFFF;}
+</style>
+<text transform="matrix(1 0 0 1 -2.52 16.8017)" class="st0 st1 st2">NSC HELMET</text>
+<text transform="matrix(1 0 0 1 173.496 16.8009)" class="st3 st4">BY</text>
+<path class="st5" d="M210.6,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1L212,15
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L210.6,10.1z"/>
+<polygon class="st5" points="196.6,7.5 202.5,7.5 202.5,9.3 198.6,9.3 198.6,11.2 202,11.2 202,13 198.6,13 198.6,15 202.5,15 
+	202.5,16.8 196.6,16.8 "/>
+<polygon class="st5" points="235.1,7.3 240.6,7.3 240.6,9.2 237,9.2 237,11.5 240.1,11.5 240.1,13.3 237,13.3 237,16.7 235.1,16.7 
+	"/>
+<polygon class="st5" points="241.7,7.3 247.3,7.3 247.3,9.2 243.7,9.2 243.7,11.5 246.8,11.5 246.8,13.3 243.7,13.3 243.7,16.7 
+	241.7,16.7 "/>
+<polygon class="st5" points="219.1,12.8 215.1,12.8 215.1,16.7 213.2,16.7 213.2,7.3 215.1,7.3 215.1,10.9 219.1,10.9 219.1,7.3 
+	221.1,7.3 221.1,16.7 219.1,16.7 "/>
+<polygon class="st5" points="188.4,7.5 195.5,7.5 195.5,9.4 193,9.4 193,16.8 191,16.8 191,9.4 188.4,9.4 "/>
+<polyline class="st5" points="221.5,8.6 223.3,5.8 225.3,5.8 223.5,8.6 221.5,8.6 "/>
+<path class="st5" d="M229.1,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S231.9,7.2,229.1,7.2z"/>
+<polygon class="st6" points="225,12.2 231.1,8.6 231.1,15.7 "/>
+<polygon class="st7" points="229,16.8 228.9,13.4 226.1,15.2 "/>
+</svg>

package/esm/components/TsIcon/icons/header-opticost.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 211.7 17.2" style="enable-background:new 0 0 211.7 17.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47;}
+	.st1{font-family:'Montserrat-Medium';}
+	.st2{font-size:24px;}
+	.st3{font-family:'Roboto-Light';}
+	.st4{font-size:11px;}
+	.st5{fill:#020203;}
+	.st6{fill:#0D84C5;}
+	.st7{fill:#FFFFFF;}
+</style>
+<text transform="matrix(1 0 0 1 -1.1519 16.9922)" class="st0 st1 st2">OPTICOST</text>
+<text transform="matrix(1 0 0 1 137.907 16.9861)" class="st3 st4">BY</text>
+<path class="st5" d="M175,10.3c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L175,10.3z"/>
+<polygon class="st5" points="161,7.7 166.9,7.7 166.9,9.5 163,9.5 163,11.4 166.4,11.4 166.4,13.2 163,13.2 163,15.2 166.9,15.2 
+	166.9,17 161,17 "/>
+<polygon class="st5" points="199.5,7.5 205,7.5 205,9.4 201.4,9.4 201.4,11.7 204.5,11.7 204.5,13.5 201.4,13.5 201.4,16.9 
+	199.5,16.9 "/>
+<polygon class="st5" points="206.1,7.5 211.7,7.5 211.7,9.4 208.1,9.4 208.1,11.7 211.2,11.7 211.2,13.5 208.1,13.5 208.1,16.9 
+	206.1,16.9 "/>
+<polygon class="st5" points="183.5,13 179.5,13 179.5,16.9 177.6,16.9 177.6,7.5 179.5,7.5 179.5,11.1 183.5,11.1 183.5,7.5 
+	185.5,7.5 185.5,16.9 183.5,16.9 "/>
+<polygon class="st5" points="152.8,7.7 159.9,7.7 159.9,9.6 157.4,9.6 157.4,17 155.4,17 155.4,9.6 152.8,9.6 "/>
+<polyline class="st5" points="185.9,8.8 187.7,6 189.7,6 187.9,8.8 185.9,8.8 "/>
+<path class="st5" d="M193.5,7.4c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S196.3,7.4,193.5,7.4z"/>
+<polygon class="st6" points="189.4,12.4 195.5,8.8 195.5,15.9 "/>
+<polygon class="st7" points="193.4,17 193.3,13.6 190.5,15.4 "/>
+</svg>