@dktunited-techoff/techoff-suite-ui 0.11.0 → 1.2.0

package/esm/layouts/Header/HeaderSearch.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { HeaderSearchProps } from './Header.types';
-export declare const HeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, placeholder, onChange, }: HeaderSearchProps) => React.JSX.Element;

package/esm/layouts/Header/HeaderSearch.js

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { Input } from '../../components/Inputs/Input/Input';
-import { Loader } from '../../components/Loader/Loader';
-import { useClickOutside } from '../../hooks/use-click-outside';
-export const HeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, placeholder, onChange, }) => {
-    const [searchValue, setSearchValue] = useState('');
-    const [items, setItems] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [showItems, setShowItems] = useState(false);
-    const ref = useClickOutside(() => setShowItems(false));
-    // #######
-    // Helpers
-    const getBeforeMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        return label.substring(0, matchStartIndex);
-    };
-    const getMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        const matchEndIndex = matchStartIndex + searchValue.length;
-        return label.substring(matchStartIndex, matchEndIndex);
-    };
-    const getAfterMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        const matchEndIndex = matchStartIndex + searchValue.length;
-        return label.substring(matchEndIndex);
-    };
-    // ########
-    // Watchers
-    useEffect(() => {
-        if (searchValue === '') {
-            setShowItems(false);
-            setItems([]);
-            setIsLoading(false);
-        }
-        else {
-            setShowItems(true);
-            setIsLoading(true);
-            loadItems(searchValue)
-                .then(setItems)
-                .finally(() => setIsLoading(false));
-        }
-    }, [searchValue]);
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "header-search", ref: ref },
-        React.createElement(Input, { placeholder: placeholder, icon: "search", size: "lg", value: searchValue, variant: "shadow", resetable: true, rounded: true, onChange: setSearchValue, onFocus: () => setShowItems(true) }),
-        showItems && searchValue !== '' && (React.createElement("div", { className: "header-search-items-container" },
-            isLoading && (React.createElement("div", { className: "header-search-loading" },
-                React.createElement(Loader, { size: "sm" }))),
-            !isLoading && items.length === 0 && React.createElement("div", { className: "header-search-no-items" }, noDataLabel),
-            !isLoading && items.length > 0 && (React.createElement("div", { className: "header-search-items" }, items.map(item => (React.createElement("div", { className: "header-search-item", onClick: () => onChange(getItemValue(item)) },
-                getBeforeMatch(item),
-                React.createElement("span", { className: "header-search-item--match" }, getMatch(item)),
-                getAfterMatch(item))))))))));
-};
-//# sourceMappingURL=HeaderSearch.js.map

package/esm/layouts/Header/HeaderSearch.js.map

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

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Header } from '../Header';
-import { HeaderProfile, HeaderProfileItem } from '../HeaderProfile';
-import { HeaderSearch } from '../HeaderSearch';
-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.',
-  },
-};
-
-export const loadItems = () => {
-  return Promise.resolve([
-    { id: 1, label: 'Item 1' },
-    { id: 2, label: 'Item 2' },
-    { id: 3, label: 'Item 3' },
-    { id: 4, label: 'Item 4' },
-    { id: 5, label: 'Item 5' },
-    { id: 6, label: 'Item 6' },
-    { id: 7, label: 'Item 7' },
-    { id: 8, label: 'Item 8' },
-    { id: 9, label: 'Item 9' },
-  ]);
-};
-
-# 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.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      actions: (
-        <>
-          <Button icon="add" size="lg" variant="shadow" rounded />
-          <HeaderProfile firstname="John" lastname="Doe">
-            <HeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
-            <HeaderProfileItem icon="award" label="Trainings" link="" />
-          </HeaderProfile>
-        </>
-      ),
-      appName: 'repairability',
-      search: (
-        <HeaderSearch
-          getItemLabel={item => item.label}
-          getItemValue={item => item.id}
-          loadItems={loadItems}
-          noDataLabel="No item found."
-          placeholder="Search something in the application"
-          onChange={() => {}}
-        />
-      ),
-    }}
-    argTypes={headerArgTypes}
-  >
-    {args => <Header {...args} />}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={Header} />

package/esm/layouts/Navigation/Navigation.css

@@ -1,74 +0,0 @@
-.navigation {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  padding: 0 24px;
-}
-
-/* ############ */
-/* BREADCRUMB   */
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  padding-right: 20px;
-}
-.breadcrumb-container {
-  display: flex;
-  align-items: center;
-}
-.breadcrumb-chevron {
-  padding: 0 8px;
-  color: #00689d;
-}
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  border-radius: 9999px;
-  color: #00689d;
-}
-.breadcrumb-item--highlight {
-  padding: 0 20px;
-  box-shadow: 0px 6px 6px 0px #00537d1a;
-  background: linear-gradient(270.22deg, #007dbc 43.94%, #7ebee0 114.83%);
-  color: #ffffff;
-}
-.breadcrumb-item--link {
-  cursor: pointer;
-}
-.breadcrumb-item--link:hover {
-  text-decoration: underline;
-}
-.breadcrumb-item--icon {
-  padding-right: 8px;
-}
-
-/* ######### */
-/* DIVIDER   */
-.navigation-divider {
-  flex: 1;
-  height: 1px;
-  margin: 4px 0;
-  background: #bedeef;
-}
-
-/* ######### */
-/* ACTIONS   */
-.navigation-actions {
-  /* flex items-center [&>*]:ml-4 */
-  display: flex;
-  align-items: center;
-}
-.navigation-actions > * {
-  margin-left: 16px;
-}
-
-/* ######### */
-/* 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/layouts/Navigation/Navigation.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
-import './Navigation.css';
-export declare const NavigationBreadcrumbDivider: () => React.JSX.Element;
-export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
-export declare const Navigation: ({ actions, breadcrumbs }: NavigationProps) => React.JSX.Element;

package/esm/layouts/Navigation/Navigation.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Icon } from '../../components/Icon/Icon';
-import './Navigation.css';
-export const NavigationBreadcrumbDivider = () => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "breadcrumb-chevron" },
-        React.createElement(Icon, { name: "chevron-right" })));
-};
-export const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: `
-        breadcrumb-item
-        ${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
-      `, onClick: onClick },
-        icon && (React.createElement("div", { className: "breadcrumb-item--icon" },
-            React.createElement(Icon, { name: icon, size: "16" }))),
-        children));
-};
-export const Navigation = ({ actions, breadcrumbs }) => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "navigation" },
-        React.createElement("div", { className: "breadcrumb" }, breadcrumbs),
-        React.createElement("div", { className: "navigation-divider" }),
-        React.createElement("div", { className: "navigation-actions" }, actions)));
-};
-//# sourceMappingURL=Navigation.js.map

package/esm/layouts/Navigation/Navigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IAAE,WAAW,CAAO;QAC/C,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Navigation/Navigation.types.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-export type NavigationProps = {
-    actions?: ReactElement;
-    breadcrumbs: ReactElement;
-};
-export type NavigationBreadcrumbItemProps = {
-    icon?: string;
-    highlight?: boolean;
-    onClick?: () => void;
-};

package/esm/layouts/Navigation/Navigation.types.js

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

package/esm/layouts/Navigation/Navigation.types.js.map

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

package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
-import { Button } from '../../../components/Button/Button';
-import { icons } from '../../../components/Icon/icons';
-
-<Meta title="Layouts/Navigation" />
-
-# Navigation
-
-Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      actions: (
-        <>
-          <Button icon="check" onClick={() => {}}>
-            Action 1
-          </Button>
-          <Button icon="add" onClick={() => {}}>
-            Action 2
-          </Button>
-        </>
-      ),
-      breadcrumbs: (
-        <>
-        <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
-          Home
-        </NavigationBreadcrumbItem>
-        <NavigationBreadcrumbDivider />
-        <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
-        <NavigationBreadcrumbDivider />
-        <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
-        </>
-      )
-    }}
-
->
-
-    {args => <Navigation {...args} />}
-
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={Navigation} />

package/esm/utils/string.utils.d.ts

@@ -1 +0,0 @@
-export declare const capitalize: (str: string) => string;

package/esm/utils/string.utils.js

@@ -1,2 +0,0 @@
-export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-//# sourceMappingURL=string.utils.js.map

package/esm/utils/string.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC"}

package/lib/components/Button/Button.css

@@ -1,92 +0,0 @@
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  line-height: 16px;
-  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/lib/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/lib/components/Button/Button.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const React = require("react");
-const Icon_1 = require("../Icon/Icon");
-require("./Button.css");
-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_1.Icon, { name: icon, size: "16" }),
-        children && React.createElement("div", null, children),
-        icon && iconDirection === 'right' && React.createElement(Icon_1.Icon, { name: icon, size: "16" })));
-};
-exports.Button = Button;
-//# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,uCAAoC;AAEpC,wBAAsB;AAEf,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,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QAClE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,MAAM,UA2BjB"}

package/lib/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/lib/components/Button/Button.types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=Button.types.js.map

package/lib/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/lib/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/lib/components/Checkbox/Checkbox.css

@@ -1,72 +0,0 @@
-.checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-/* ########## */
-/* DISABLED   */
-.checkbox--disabled {
-  cursor: not-allowed;
-}
-.checkbox--disabled .checkbox-box {
-  color: #999999;
-}
-.checkbox--disabled:hover .checkbox-box {
-  background: transparent;
-}
-/* ##### */
-/* 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/lib/components/Checkbox/Checkbox.d.ts

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