@dktunited-techoff/techoff-suite-ui 0.8.4 → 0.8.6

package/src/components/Icon/icons/lightning-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/src/components/Icon/icons/waiting-validation.svg

@@ -0,0 +1,19 @@
+<?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 21.5 21.6" style="enable-background:new 0 0 21.5 21.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#4D6F56;stroke-width:2;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#88CABA;stroke-width:2;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#88CABA;stroke-width:1.8;stroke-miterlimit:10;}
+	.st3{fill:#88CABA;}
+	.st4{fill:none;stroke:#FFFFFF;stroke-width:1.1;stroke-miterlimit:10;}
+</style>
+<g id="XMLID_00000036946766399946185720000000839440717394961049_">
+	<circle class="st0" cx="9" cy="12.6" r="8"/>
+	<circle class="st1" cx="9" cy="12.6" r="8"/>
+</g>
+<polyline class="st2" points="13.8,9.3 8.2,15 8.2,15 5,11.9 "/>
+<circle class="st3" cx="15.8" cy="5.7" r="5.7"/>
+<polyline class="st4" points="18.7,6.2 15.8,6.2 15.8,2.9 "/>
+</svg>

package/src/layouts/Header/Header.css

@@ -1,7 +1,11 @@
 @font-face {
-  font-family: 'Montserrat';
+  font-family: 'Montserrat-Medium';
   src: url('../../assets/fonts/Montserrat-Medium.ttf');
 }
+@font-face {
+  font-family: 'Roboto-Light';
+  src: url('../../assets/fonts/Roboto-Light.ttf');
+}
 
 /* ######## */
 /* HEADER   */
@@ -13,6 +17,12 @@ header {
   height: 64px;
   padding: 0 24px;
 }
+.ts-header-left-side {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  height: 100%;
+}
 .header-actions {
   display: flex;
 }
@@ -20,30 +30,12 @@ header {
   margin-left: 12px;
 }
 
-/* ############## */
-/* HEADER TITLE   */
-.header-title-container {
+/* ################ */
+/* HEADER TECHOFF   */
+.ts-header-techoff {
   display: flex;
-  align-items: flex-end;
-  height: 30px;
-}
-.header-title {
-  font-family: 'Montserrat';
-  font-size: 25px;
-  line-height: 19px;
-  text-transform: uppercase;
-}
-.header-by {
-  margin-left: 15px;
-  font-family: 'Montserrat';
-  font-size: 12px;
-  line-height: 10px;
-  text-transform: uppercase;
-}
-.header-techoff {
-  width: 64px;
+  height: 18px;
   margin-left: 4px;
-  margin-bottom: -2px;
 }
 
 /* ################ */

package/src/layouts/Header/Header.tsx

@@ -1,17 +1,22 @@
 import * as React from 'react';
 import { Children, PropsWithChildren } from 'react';
+import { icons } from '../../components/Icon/icons';
 import { isSuiteElement } from '../../utils/validator.utils';
+import { HeaderProps } from './Header.types';
 import './Header.css';
 
-export const Header = ({ children }: PropsWithChildren) => {
-  const titleElement = Children.toArray(children).find(c => isSuiteElement(c, 'HeaderTitle'));
-  const actionsElement = Children.toArray(children).find(c => isSuiteElement(c, 'HeaderActions'));
+export const Header = (props: HeaderProps & PropsWithChildren) => {
+  const actionsElement = Children.toArray(props.children).find(c => isSuiteElement(c, 'HeaderActions'));
+
+  console.log(props);
 
   // #########
   // Rendering
   return (
     <header>
-      <div>{titleElement}</div>
+      <div className="ts-header-left-side">
+        <div className="ts-header-techoff" dangerouslySetInnerHTML={{ __html: icons[`header-${props.appName}`] }} />
+      </div>
       <div>{actionsElement}</div>
     </header>
   );

package/src/layouts/Header/Header.types.ts

@@ -1 +1,2 @@
+export type HeaderProps = { appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability' };
 export type HeaderProfileProps = { firstname: string; lastname: string };

package/src/layouts/Header/__stories__/Header.stories.mdx

@@ -2,12 +2,19 @@ import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
 import { Header } from '../Header';
 import { HeaderActions } from '../HeaderActions';
-import { HeaderTitle } from '../HeaderTitle';
 import { HeaderProfile } from '../HeaderProfile';
 import { Button } from '../../../components/Button/Button';
 
 <Meta title="Layouts/Header" />
 
+export const headerArgTypes = {
+  appName: {
+    control: 'select',
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
+    description: 'Icon of the button.',
+  },
+};
+
 # Header
 
 The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
@@ -18,16 +25,17 @@ The header will allow users to quickly find the information they need at a glanc
   <Story
     name="Overview"
     args={{
+      appName: 'repairability',
       children: [
-        <HeaderTitle>Techoff Suite UI</HeaderTitle>,
         <HeaderActions>
           <Button icon="plus" size="lg" variant="shadow" rounded onClick={() => {}} />
           <HeaderProfile firstname="John" lastname="Doe" />
         </HeaderActions>,
       ],
     }}
+    argTypes={headerArgTypes}
   >
-    {args => <Header>{args.children}</Header>}
+    {args => <Header {...args}>{args.children}</Header>}
   </Story>
 </Canvas>
 

package/esm/components/Button/Button.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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