@bitrise/bitkit 9.5.0-alpha.4 → 9.5.2

package/src/Icon/tsx/IconsWindow.tsx

@@ -2,16 +2,14 @@
 import * as React from 'react';
 
 const SvgIconsWindow = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <defs>
       <path
-          d="M6 8h10v2H6V8zm14-4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V7h16v11zM6 11h12v2H6v-2zm0 3h8v2H6v-2z"
-          id="icons-window_svg__a"/>
+        d="M6 8h10v2H6V8zm14-4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V7h16v11zM6 11h12v2H6v-2zm0 3h8v2H6v-2z"
+        id="icons-window_svg__a"
+      />
     </defs>
-    <use
-        fill="currentColor"
-        fillRule="evenodd"
-        xlinkHref="#icons-window_svg__a"/>
+    <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-window_svg__a" />
   </svg>
 );
 

package/src/Icon/tsx/IconsWorkflow.tsx

@@ -2,16 +2,14 @@
 import * as React from 'react';
 
 const SvgIconsWorkflow = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <defs>
       <path
-          d="M18.5 8V3h-5V2h-3v1h-5v5h5v1h-5v5h5v1h-5v5h5v2h3v-2h5v-5h-5v-1h5V9h-5V8h5zm-2 9v1h-9v-1h9zm0-6v1h-9v-1h9zm-9-5V5h9v1h-9z"
-          id="icons-workflow_svg__a"/>
+        d="M18.5 8V3h-5V2h-3v1h-5v5h5v1h-5v5h5v1h-5v5h5v2h3v-2h5v-5h-5v-1h5V9h-5V8h5zm-2 9v1h-9v-1h9zm0-6v1h-9v-1h9zm-9-5V5h9v1h-9z"
+        id="icons-workflow_svg__a"
+      />
     </defs>
-    <use
-        fill="currentColor"
-        fillRule="evenodd"
-        xlinkHref="#icons-workflow_svg__a"/>
+    <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-workflow_svg__a" />
   </svg>
 );
 

package/src/Icon/tsx/IconsWorkflowFlow.tsx

@@ -2,16 +2,14 @@
 import * as React from 'react';
 
 const SvgIconsWorkflowFlow = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <defs>
       <path
-          d="M14.857 4.857H10C9.524 3.238 8.095 2 6.286 2a3.82 3.82 0 0 0-3.81 3.81 3.82 3.82 0 0 0 3.81 3.809c1.81 0 3.238-1.238 3.714-2.857h4.857c2.667 0 4.762 2.095 4.762 4.762 0 1.714-.857 3.238-2.286 4.095-.571-1.333-1.904-2.19-3.428-2.19-1.81 0-3.238 1.238-3.715 2.857h-.476c-2.666 0-4.762 2.19-4.762 4.762h1.905c0-1.62 1.333-2.858 2.857-2.858h.476c.381 1.62 1.905 2.858 3.715 2.858 2 0 3.619-1.524 3.81-3.524 2.285-1.048 3.809-3.429 3.809-6a6.626 6.626 0 0 0-6.667-6.667zM6.286 7.714A1.91 1.91 0 0 1 4.38 5.81a1.91 1.91 0 0 1 1.905-1.905A1.91 1.91 0 0 1 8.19 5.81a1.91 1.91 0 0 1-1.904 1.904zm7.619 11.429A1.91 1.91 0 0 1 12 17.238a1.91 1.91 0 0 1 1.905-1.905 1.91 1.91 0 0 1 1.905 1.905 1.91 1.91 0 0 1-1.905 1.905z"
-          id="icons-workflow-flow_svg__a"/>
+        d="M14.857 4.857H10C9.524 3.238 8.095 2 6.286 2a3.82 3.82 0 0 0-3.81 3.81 3.82 3.82 0 0 0 3.81 3.809c1.81 0 3.238-1.238 3.714-2.857h4.857c2.667 0 4.762 2.095 4.762 4.762 0 1.714-.857 3.238-2.286 4.095-.571-1.333-1.904-2.19-3.428-2.19-1.81 0-3.238 1.238-3.715 2.857h-.476c-2.666 0-4.762 2.19-4.762 4.762h1.905c0-1.62 1.333-2.858 2.857-2.858h.476c.381 1.62 1.905 2.858 3.715 2.858 2 0 3.619-1.524 3.81-3.524 2.285-1.048 3.809-3.429 3.809-6a6.626 6.626 0 0 0-6.667-6.667zM6.286 7.714A1.91 1.91 0 0 1 4.38 5.81a1.91 1.91 0 0 1 1.905-1.905A1.91 1.91 0 0 1 8.19 5.81a1.91 1.91 0 0 1-1.904 1.904zm7.619 11.429A1.91 1.91 0 0 1 12 17.238a1.91 1.91 0 0 1 1.905-1.905 1.91 1.91 0 0 1 1.905 1.905 1.91 1.91 0 0 1-1.905 1.905z"
+        id="icons-workflow-flow_svg__a"
+      />
     </defs>
-    <use
-        fill="currentColor"
-        fillRule="evenodd"
-        xlinkHref="#icons-workflow-flow_svg__a"/>
+    <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-workflow-flow_svg__a" />
   </svg>
 );
 

package/src/Icon/tsx/IconsWow.tsx

@@ -2,11 +2,12 @@
 import * as React from 'react';
 
 const SvgIconsWow = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <defs>
       <path
-          d="M6 12.5H4v-2H2v8h2v1h2v-2h2v-9H6v4zm14-8v4h-2v-2h-2v8h2v1h2v-2h2v-9h-2zm-6 6H9v7h1v1h5v-7h-1v-1zm-1 6h-2v-4h2v4z"
-          id="icons-wow_svg__a"/>
+        d="M6 12.5H4v-2H2v8h2v1h2v-2h2v-9H6v4zm14-8v4h-2v-2h-2v8h2v1h2v-2h2v-9h-2zm-6 6H9v7h1v1h5v-7h-1v-1zm-1 6h-2v-4h2v4z"
+        id="icons-wow_svg__a"
+      />
     </defs>
     <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-wow_svg__a" />
   </svg>

package/src/Icon/tsx/index.ts

@@ -518,6 +518,7 @@ export const IconList: TypeIconName[] = [
 ];
 
 export const IconMap: {
+  // eslint-disable-next-line @bitrise/ban-react-fc
   [key in TypeIconName]: React.FC<React.SVGProps<SVGSVGElement>>;
 } = {
   AddOnsColorTuorqouise,

package/src/Placement/PlacementPopper.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/default-props-match-prop-types */
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { Placement as TypePlacement } from '@popperjs/core';
+import { Placement as TypePlacement, VirtualElement } from '@popperjs/core';
 import { Popper, PopperProps } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
@@ -61,6 +61,8 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
   const ref = useRef<HTMLElement | null>();
   const [render, setRender] = useState(visible);
 
+  const [reference, setReference] = useState<Element | VirtualElement | undefined>(undefined);
+
   useEffect(() => {
     if (visible) {
       setRender(true);
@@ -71,11 +73,14 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
     closeElement || document,
     'click',
     (event) => {
-      if (onClose && ref.current && !ref.current.contains(event.target as Node) && visible) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      /* @ts-ignore */
+      const isReferenceInPath = [...event.composedPath()].includes(reference);
+      if (onClose && ref.current && !ref.current.contains(event.target as Node) && !isReferenceInPath) {
         onClose(event as MouseEvent);
       }
     },
-    [onClose],
+    [onClose, reference],
   );
 
   useEventListener(
@@ -131,7 +136,14 @@ const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
 
   return createPortal(
     // eslint-disable-next-line no-return-assign
-    <Popper {...popperProps} innerRef={(el) => (ref.current = el || null)}>
+    <Popper
+      {...popperProps}
+      // eslint-disable-next-line no-return-assign
+      innerRef={(el) => (ref.current = el || null)}
+      onFirstUpdate={(state) => {
+        setReference(state.elements?.reference);
+      }}
+    >
       {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
       {({ arrowProps, placement, ref, update, style }) => {
         return (

package/src/Sidebar/Sidebar.css

@@ -91,20 +91,9 @@
     border-top-color: var(--color-grape--4);
   }
 
-  & .Sidebar__sub-menu-item,
-  & .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
-  & .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
-    background-color: rgba(var(--rgb-white), 0.1);
-  }
-
   & .Sidebar__sub-menu-item {
     border-top-color: var(--color-grape--5);
   }
-
-  & .Sidebar__sub-menu-item--active,
-  & .Sidebar__sub-menu-item:hover {
-    background-color: rgba(var(--rgb-white), 0.2);
-  }
 }
 
 .Sidebar--theme-light {

package/src/index.ts

@@ -1,108 +1,193 @@
-import 'normalize.css/normalize.css';
 import './variables.css';
-import './root.css';
 
 import * as variables from './variables';
 import * as hooks from './hooks';
 
 export { variables };
 export { hooks };
+export { default as Provider } from './Components/Provider/Provider';
+export { default as theme } from './theme';
 
-export { default as AddonBeam, Props as AddonBeamProps } from './AddonBeam/AddonBeam';
-export { default as AddonBeamLink, Props as AddonBeamLinkProps } from './AddonBeam/AddonBeamLink';
-export { default as AddonFooter, Props as AddonFooterProps } from './AddonFooter/AddonFooter';
-export { default as Appear, Props as AppearProps, TypeAppearAnimationName } from './Appear/Appear';
-export { default as AppLayout, Props as AppLayoutProps } from './AppLayout/AppLayout';
-export { default as AppLayoutBody, Props as AppLayoutBodyProps } from './AppLayout/AppLayoutBody';
-export { default as AppLayoutHeader, Props as AppLayoutHeaderProps } from './AppLayout/AppLayoutHeader';
-export { default as AppLayoutMain, Props as AppLayoutMainProps } from './AppLayout/AppLayoutMain';
-export { default as AppLayoutSidebar, Props as AppLayoutSidebarProps } from './AppLayout/AppLayoutSidebar';
-export { default as Avatar, Props as AvatarProps } from './Avatar/Avatar';
-export { default as Badge, Props as BadgeProps } from './Badge/Badge';
-export { default as Base, Props as BaseProps, TypeColors, TypeSizes } from './Base/Base';
-export { default as Bounds, Props as BoundsProps } from './Bounds/Bounds';
-export { default as Button, Props as ButtonProps } from './Button/Button';
-export { default as Buttons, Props as ButtonsProps } from './Button/Buttons';
-export {
-  default as ButtonWithDropdown,
-  Props as ButtonWithDropdownProps,
-} from './ButtonWithDropdown/ButtonWithDropdown';
-export { default as Card, Props as CardProps } from './Card/Card';
-export { default as CardButton, Props as CardButtonProps } from './Card/CardButton';
-export { default as CardContent, Props as CardContentProps } from './Card/CardContent';
-export { default as CardDivider, Props as CardDividerProps } from './Card/CardDivider';
-export { default as Checkbox, Props as CheckboxProps } from './Checkbox/Checkbox';
-export { default as ColorButton, Props as ColorButtonProps } from './Button/ColorButton';
-export { default as DatePicker, Props as DatePickerProps } from './DatePicker/DatePicker';
-export { default as Dot, Props as DotProps } from './Dot/Dot';
-export { default as Divider, Props as DividerProps } from './Divider/Divider';
-export { default as Dropdown, Props as DropdownProps } from './Dropdown/Dropdown';
-export { default as DropdownButton, Props as DropdownButtonProps } from './Dropdown/DropdownButton';
-export { default as DropdownMenus, Props as DropdownMenusProps } from './Dropdown/DropdownMenus';
-export { default as DropdownMenu, Props as DropdownMenuProps } from './Dropdown/DropdownMenu';
-export { default as DropdownMenuItem, Props as DropdownMenuItemProps } from './Dropdown/DropdownMenuItem';
-export {
-  default as DropdownMenuItemGroup,
-  Props as DropdownMenuItemGroupProps,
-} from './Dropdown/DropdownMenuItemGroup';
-export { default as Expand, Props as ExpandProps } from './Expand/Expand';
-export { default as ExternalLink, Props as ExternalLinkProps } from './ExternalLink/ExternalLink';
-export { default as Flex, Props as FlexProps } from './Flex/Flex';
-export { default as Grid, Props as GridProps } from './Grid/Grid';
-export { default as Hamburger, Props as HamburgerProps } from './Hamburger/Hamburger';
-export { default as Icon, Props as IconProps, TypeIconName } from './Icon/Icon';
-export { default as Image, Props as ImageProps } from './Image/Image';
-export { default as Input, Props as InputProps } from './Input/Input';
-export { default as InputContainer, Props as InputContainerProps } from './Input/InputContainer';
-export { default as InputContent, Props as InputContentProps } from './Input/InputContent';
-export { default as InputInlineHelp, Props as InputInlineHelpProps } from './Input/InputInlineHelp';
-export { default as InputLabel, Props as InputLabelProps } from './Input/InputLabel';
-export { default as Link, Props as LinkProps } from './Link/Link';
-export { default as List, Props as ListProps } from './List/List';
-export { default as ListItem, Props as ListItemProps } from './List/ListItem';
-export { default as Logo, Props as LogoProps } from './Logo/Logo';
-export { default as Modal, Props as ModalProps } from './Modal/Modal';
-export { default as ModalBody, Props as ModalBodyProps } from './Modal/ModalBody';
-// eslint-disable-next-line import/no-cycle
-export { default as ModalHeader, Props as ModalHeaderProps } from './Modal/ModalHeader';
-export { default as ModalHeaderProgress, Props as ModalHeaderProgressProps } from './Modal/ModalHeaderProgress';
-export { default as ModalTitle, Props as ModalTitleProps } from './Modal/ModalTitle';
-export { default as Notification, Props as NotificationProps } from './Notification/Notification';
-export { default as Placement, Props as PlacementProps } from './Placement/Placement';
-export { default as PlacementArea, Props as PlacementAreaProps } from './Placement/PlacementArea';
-export { default as PlacementArrow, Props as PlacementArrowProps } from './Placement/PlacementArrow';
-export { default as PlacementManager, Props as PlacementManagerProps } from './Placement/PlacementManager';
-export { default as PlacementReference, Props as PlacementReferenceProps } from './Placement/PlacementReference';
-export { default as Portal, Props as PortalProps } from './Portal/Portal';
-export { default as ProgressBar, Props as ProgressBarProps } from './Progress/ProgressBar';
-export { default as ProgressButton, Props as ProgressButtonProps } from './Progress/ProgressButton';
-export { default as ProgressBitbot, Props as ProgressBitbotProps } from './Progress/ProgressBitbot';
-export { default as ProgressColorButton, Props as ProgressColorButtonProps } from './Progress/ProgressColorButton';
-export { default as ProgressSpinner, Props as ProgressSpinnerProps } from './Progress/ProgressSpinner';
-export { default as RadioButton, Props as RadioButtonProps } from './RadioButton/RadioButton';
-export { default as Ribbon, Props as RibbonProps } from './Ribbon/Ribbon';
-export { default as Sidebar, Props as SidebarProps } from './Sidebar/Sidebar';
-export { default as SidebarHeader, Props as SidebarHeaderProps } from './Sidebar/SidebarHeader';
-export { default as SidebarMenu, Props as SidebarMenuProps } from './Sidebar/SidebarMenu';
-export { default as SidebarMenuItem, Props as SidebarMenuItemProps } from './Sidebar/SidebarMenuItem';
-export { default as SidebarSubMenu, Props as SidebarSubMenuProps } from './Sidebar/SidebarSubMenu';
-export { default as SidebarSubMenuItem, Props as SidebarSubMenuItemProps } from './Sidebar/SidebarSubMenuItem';
-export { default as Skeleton, Props as SkeletonProps } from './Skeleton/Skeleton';
-export { default as SkeletonBox, Props as SkeletonBoxProps } from './Skeleton/SkeletonBox';
-export { default as Status404, Props as Status404Props } from './Status/Status404';
-export { default as Status500, Props as Status500Props } from './Status/Status500';
-export { default as Table, Props as TableProps } from './Table/Table';
-export { default as TableBody, Props as TableBodyProps } from './Table/TableBody';
-export { default as TableCell, Props as TableCellProps } from './Table/TableCell';
-export { default as TableHeader, Props as TableHeaderProps } from './Table/TableHeader';
-export { default as TableHeaderCell, Props as TableHeaderCellProps, TypeTableSort } from './Table/TableHeaderCell';
-export { default as TableHeaderRow, Props as TableHeaderRowProps } from './Table/TableHeaderRow';
-export { default as TableRow, Props as TableRowProps } from './Table/TableRow';
-export { default as Tab, Props as TabProps } from './Tabs/Tab';
-export { default as Tabs, Props as TabsProps } from './Tabs/Tabs';
-export { default as Text, Props as TextProps, TypeTextLetterSpacing, TypeTextSize, TypeTextWeight } from './Text/Text';
-export { default as Textarea, Props as TextareaProps } from './Textarea/Textarea';
-export { default as Toggle, Props as ToggleProps } from './Toggle/Toggle';
-export { default as Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
-export { default as Visibility, Props as VisibilityProps } from './Visibility/Visibility';
-export { default as VisibilityContainer, Props as VisibilityContainerProps } from './Visibility/VisibilityContainer';
+export type { TypeBorderRadius, TypeSizes, TypeColors } from './Base/Base';
+export type { TypeIconName } from './Icon/Icon';
+
+export type { Props as AddonBeamProps } from './AddonBeam/AddonBeam';
+export { default as AddonBeam } from './AddonBeam/AddonBeam';
+export type { Props as AddonBeamLinkProps } from './AddonBeam/AddonBeamLink';
+export { default as AddonBeamLink } from './AddonBeam/AddonBeamLink';
+export type { Props as AddonFooterProps } from './AddonFooter/AddonFooter';
+export { default as AddonFooter } from './AddonFooter/AddonFooter';
+export type { Props as AppearProps } from './Appear/Appear';
+export { default as Appear } from './Appear/Appear';
+export type { Props as AppLayoutProps } from './AppLayout/AppLayout';
+export { default as AppLayout } from './AppLayout/AppLayout';
+export type { Props as AppLayoutBodyProps } from './AppLayout/AppLayoutBody';
+export { default as AppLayoutBody } from './AppLayout/AppLayoutBody';
+export type { Props as AppLayoutHeaderProps } from './AppLayout/AppLayoutHeader';
+export { default as AppLayoutHeader } from './AppLayout/AppLayoutHeader';
+export type { Props as AppLayoutMainProps } from './AppLayout/AppLayoutMain';
+export { default as AppLayoutMain } from './AppLayout/AppLayoutMain';
+export type { Props as AppLayoutSidebarProps } from './AppLayout/AppLayoutSidebar';
+export { default as AppLayoutSidebar } from './AppLayout/AppLayoutSidebar';
+export type { Props as AvatarProps } from './Avatar/Avatar';
+export { default as Avatar } from './Avatar/Avatar';
+export type { Props as BadgeProps } from './Badge/Badge';
+export { default as Badge } from './Badge/Badge';
+export type { Props as BaseProps } from './Base/Base';
+export { default as Base } from './Base/Base';
+export type { Props as BoundsProps } from './Bounds/Bounds';
+export { default as Bounds } from './Bounds/Bounds';
+export type { Props as ButtonProps } from './Button/Button';
+export { default as Button } from './Button/Button';
+export type { Props as ButtonsProps } from './Button/Buttons';
+export { default as Buttons } from './Button/Buttons';
+export type { Props as CardProps } from './Card/Card';
+export { default as Card } from './Card/Card';
+export type { Props as CardButtonProps } from './Card/CardButton';
+export { default as CardButton } from './Card/CardButton';
+export type { Props as CardContentProps } from './Card/CardContent';
+export { default as CardContent } from './Card/CardContent';
+export type { Props as CardDividerProps } from './Card/CardDivider';
+export { default as CardDivider } from './Card/CardDivider';
+export type { Props as CheckboxProps } from './Checkbox/Checkbox';
+export { default as Checkbox } from './Checkbox/Checkbox';
+export type { Props as ColorButtonProps } from './Button/ColorButton';
+export { default as ColorButton } from './Button/ColorButton';
+export type { Props as DatePickerProps } from './DatePicker/DatePicker';
+export { default as DatePicker } from './DatePicker/DatePicker';
+export type { Props as DotProps } from './Dot/Dot';
+export { default as Dot } from './Dot/Dot';
+export type { Props as DividerProps } from './Divider/Divider';
+export { default as Divider } from './Divider/Divider';
+export type { Props as DropdownProps } from './Dropdown/Dropdown';
+export { default as Dropdown } from './Dropdown/Dropdown';
+export type { Props as DropdownButtonProps } from './Dropdown/DropdownButton';
+export { default as DropdownButton } from './Dropdown/DropdownButton';
+export type { Props as DropdownMenusProps } from './Dropdown/DropdownMenus';
+export { default as DropdownMenus } from './Dropdown/DropdownMenus';
+export type { Props as DropdownMenuProps } from './Dropdown/DropdownMenu';
+export { default as DropdownMenu } from './Dropdown/DropdownMenu';
+export type { Props as DropdownMenuItemProps } from './Dropdown/DropdownMenuItem';
+export { default as DropdownMenuItem } from './Dropdown/DropdownMenuItem';
+export type { Props as DropdownMenuItemGroupProps } from './Dropdown/DropdownMenuItemGroup';
+export { default as DropdownMenuItemGroup } from './Dropdown/DropdownMenuItemGroup';
+export type { Props as ExpandProps } from './Expand/Expand';
+export { default as Expand } from './Expand/Expand';
+export type { Props as ExternalLinkProps } from './ExternalLink/ExternalLink';
+export { default as ExternalLink } from './ExternalLink/ExternalLink';
+export type { Props as FlexProps } from './Flex/Flex';
+export { default as Flex } from './Flex/Flex';
+export type { Props as GridProps } from './Grid/Grid';
+export { default as Grid } from './Grid/Grid';
+export type { Props as HamburgerProps } from './Hamburger/Hamburger';
+export { default as Hamburger } from './Hamburger/Hamburger';
+export type { Props as IconProps } from './Icon/Icon';
+export { default as Icon } from './Icon/Icon';
+export type { Props as ImageProps } from './Image/Image';
+export { default as Image } from './Image/Image';
+export type { Props as InputProps } from './Input/Input';
+export { default as Input } from './Input/Input';
+export type { Props as InputContainerProps } from './Input/InputContainer';
+export { default as InputContainer } from './Input/InputContainer';
+export type { Props as InputContentProps } from './Input/InputContent';
+export { default as InputContent } from './Input/InputContent';
+export type { Props as InputInlineHelpProps } from './Input/InputInlineHelp';
+export { default as InputInlineHelp } from './Input/InputInlineHelp';
+export type { Props as InputLabelProps } from './Input/InputLabel';
+export { default as InputLabel } from './Input/InputLabel';
+export type { Props as LinkProps } from './Link/Link';
+export { default as Link } from './Link/Link';
+export type { Props as ListProps } from './List/List';
+export { default as List } from './List/List';
+export type { Props as ListItemProps } from './List/ListItem';
+export { default as ListItem } from './List/ListItem';
+export type { Props as LogoProps } from './Logo/Logo';
+export { default as Logo } from './Logo/Logo';
+export type { Props as ModalProps } from './Modal/Modal';
+export { default as Modal } from './Modal/Modal';
+export type { Props as ModalBodyProps } from './Modal/ModalBody';
+export { default as ModalBody } from './Modal/ModalBody';
+export type { Props as ModalHeaderProps } from './Modal/ModalHeader';
+export { default as ModalHeader } from './Modal/ModalHeader';
+export type { Props as ModalHeaderProgressProps } from './Modal/ModalHeaderProgress';
+export { default as ModalHeaderProgress } from './Modal/ModalHeaderProgress';
+export type { Props as ModalTitleProps } from './Modal/ModalTitle';
+export { default as ModalTitle } from './Modal/ModalTitle';
+export type { Props as NotificationProps } from './Notification/Notification';
+export { default as Notification } from './Notification/Notification';
+export type { Props as PlacementProps } from './Placement/Placement';
+export { default as Placement } from './Placement/Placement';
+export type { Props as PlacementAreaProps } from './Placement/PlacementArea';
+export { default as PlacementArea } from './Placement/PlacementArea';
+export type { Props as PlacementArrowProps } from './Placement/PlacementArrow';
+export { default as PlacementArrow } from './Placement/PlacementArrow';
+export type { Props as PlacementManagerProps } from './Placement/PlacementManager';
+export { default as PlacementManager } from './Placement/PlacementManager';
+export type { Props as PlacementReferenceProps } from './Placement/PlacementReference';
+export { default as PlacementReference } from './Placement/PlacementReference';
+export type { Props as PortalProps } from './Portal/Portal';
+export { default as Portal } from './Portal/Portal';
+export type { Props as ProgressBarProps } from './Progress/ProgressBar';
+export { default as ProgressBar } from './Progress/ProgressBar';
+export type { Props as ProgressButtonProps } from './Progress/ProgressButton';
+export { default as ProgressButton } from './Progress/ProgressButton';
+export type { Props as ProgressBitbotProps } from './Progress/ProgressBitbot';
+export { default as ProgressBitbot } from './Progress/ProgressBitbot';
+export type { Props as ProgressColorButtonProps } from './Progress/ProgressColorButton';
+export { default as ProgressColorButton } from './Progress/ProgressColorButton';
+export type { Props as ProgressSpinnerProps } from './Progress/ProgressSpinner';
+export { default as ProgressSpinner } from './Progress/ProgressSpinner';
+export type { Props as RadioButtonProps } from './RadioButton/RadioButton';
+export { default as RadioButton } from './RadioButton/RadioButton';
+export type { Props as RibbonProps } from './Ribbon/Ribbon';
+export { default as Ribbon } from './Ribbon/Ribbon';
+export type { Props as SidebarProps } from './Sidebar/Sidebar';
+export { default as Sidebar } from './Sidebar/Sidebar';
+export type { Props as SidebarHeaderProps } from './Sidebar/SidebarHeader';
+export { default as SidebarHeader } from './Sidebar/SidebarHeader';
+export type { Props as SidebarMenuProps } from './Sidebar/SidebarMenu';
+export { default as SidebarMenu } from './Sidebar/SidebarMenu';
+export type { Props as SidebarMenuItemProps } from './Sidebar/SidebarMenuItem';
+export { default as SidebarMenuItem } from './Sidebar/SidebarMenuItem';
+export type { Props as SidebarSubMenuProps } from './Sidebar/SidebarSubMenu';
+export { default as SidebarSubMenu } from './Sidebar/SidebarSubMenu';
+export type { Props as SidebarSubMenuItemProps } from './Sidebar/SidebarSubMenuItem';
+export { default as SidebarSubMenuItem } from './Sidebar/SidebarSubMenuItem';
+export type { Props as SkeletonProps } from './Skeleton/Skeleton';
+export { default as Skeleton } from './Skeleton/Skeleton';
+export type { Props as SkeletonBoxProps } from './Skeleton/SkeletonBox';
+export { default as SkeletonBox } from './Skeleton/SkeletonBox';
+export type { Props as Status404Props } from './Status/Status404';
+export { default as Status404 } from './Status/Status404';
+export type { Props as Status500Props } from './Status/Status500';
+export { default as Status500 } from './Status/Status500';
+export type { Props as TableProps } from './Table/Table';
+export { default as Table } from './Table/Table';
+export type { Props as TableBodyProps } from './Table/TableBody';
+export { default as TableBody } from './Table/TableBody';
+export type { Props as TableCellProps } from './Table/TableCell';
+export { default as TableCell } from './Table/TableCell';
+export type { Props as TableHeaderProps } from './Table/TableHeader';
+export { default as TableHeader } from './Table/TableHeader';
+export type { Props as TableHeaderCellProps } from './Table/TableHeaderCell';
+export { default as TableHeaderCell } from './Table/TableHeaderCell';
+export type { Props as TableHeaderRowProps } from './Table/TableHeaderRow';
+export { default as TableHeaderRow } from './Table/TableHeaderRow';
+export type { Props as TableRowProps } from './Table/TableRow';
+export { default as TableRow } from './Table/TableRow';
+export type { Props as TabProps } from './Tabs/Tab';
+export { default as Tab } from './Tabs/Tab';
+export type { Props as TabsProps } from './Tabs/Tabs';
+export { default as Tabs } from './Tabs/Tabs';
+export type { Props as TextProps } from './Text/Text';
+export { default as Text } from './Text/Text';
+export type { Props as TextareaProps } from './Textarea/Textarea';
+export { default as Textarea } from './Textarea/Textarea';
+export type { Props as ToggleProps } from './Toggle/Toggle';
+export { default as Toggle } from './Toggle/Toggle';
+export type { Props as TooltipProps } from './Tooltip/Tooltip';
+export { default as Tooltip } from './Tooltip/Tooltip';
+export type { Props as VisibilityProps } from './Visibility/Visibility';
+export { default as Visibility } from './Visibility/Visibility';
+export type { Props as VisibilityContainerProps } from './Visibility/VisibilityContainer';
+export { default as VisibilityContainer } from './Visibility/VisibilityContainer';

package/src/theme.ts

@@ -0,0 +1,37 @@
+import colors from './Foundations/Colors/Colors';
+import radii from './Foundations/Radii/Radii.theme';
+import shadows from './Foundations/Shadows/Shadows';
+import sizes from './Foundations/Sizes/Sizes';
+import typography from './Foundations/Typography/Typography';
+
+import Text from './Components/Text/Text.theme';
+
+const theme = {
+  config: {
+    cssVarPrefix: '',
+  },
+  colors,
+  ...typography,
+  radii,
+  shadows,
+  sizes,
+  space: sizes,
+  styles: {
+    global: {
+      body: {
+        color: 'text.body',
+        fontFamily: 'body',
+        fontSize: '3',
+        lineHeight: '3',
+      },
+      'pre, code, kbd, samp': {
+        fontFamily: 'mono',
+      },
+    },
+  },
+  components: {
+    Text,
+  },
+};
+
+export default theme;

package/src/variables.css

@@ -148,6 +148,89 @@
 
   --color-overlay--black: rgba(34, 34, 34, 0.8);
   --color-overlay--grape: rgba(53, 29, 72, 0.8);
+/*
+  --color-white: var(--colors-neutral-100);
+  --color-black: var(--colors-neutral-10);
+
+  --color-gray--1: var(--colors-neutral-95);
+  --color-gray--2: var(--colors-neutral-93);
+  --color-gray--3: var(--colors-neutral-90);
+  --color-gray--4: var(--colors-neutral-80);
+  --color-gray--5: var(--colors-neutral-70);
+  --color-gray--6: var(--colors-neutral-50);
+  --color-gray--7: var(--colors-neutral-40);
+  --color-gray--8: var(--colors-neutral-30);
+
+  --color-aqua--1: var(--colors-turquoise-95);
+  --color-aqua--2: var(--colors-turquoise-80);
+  --color-aqua--3: var(--colors-turquoise-70);
+  --color-aqua--4: var(--colors-turquoise-60);
+  --color-aqua--5: var(--colors-turquoise-50);
+
+  --color-grape--1: var(--colors-purple-95);
+  --color-grape--2: var(--colors-purple-70);
+  --color-grape--3: var(--colors-purple-50);
+  --color-grape--4: var(--colors-purple-30);
+  --color-grape--5: var(--colors-purple-10);
+
+  --color-eggplant: var(--colors-purple-40);
+
+  --color-red--1: var(--colors-red-93);
+  --color-red--2: var(--colors-red-70);
+  --color-red--3: var(--colors-red-50);
+  --color-red--4: var(--colors-red-40);
+  --color-red--5: var(--colors-red-30);
+
+  --color-orange--1: #FFECE5;
+  --color-orange--2: #FFA17F;
+  --color-orange--3: #FF4400;
+  --color-orange--4: #E73E00;
+  --color-orange--5: #D33D07;
+
+  --color-yellow--1: var(--colors-yellow-95);
+  --color-yellow--2: var(--colors-yellow-90);
+  --color-yellow--3: var(--colors-yellow-80);
+  --color-yellow--4: var(--colors-yellow-70);
+  --color-yellow--5: var(--colors-yellow-40);
+
+  --color-green--1: var(--colors-green-95);
+  --color-green--2: var(--colors-green-80);
+  --color-green--3: var(--colors-green-60);
+  --color-green--4: var(--colors-green-50);
+  --color-green--5: var(--colors-green-40);
+
+  --color-blue--1: var(--colors-blue-93);
+  --color-blue--2: var(--colors-blue-70);
+  --color-blue--3: var(--colors-blue-50);
+  --color-blue--4: var(--colors-blue-40);
+  --color-blue--5: var(--colors-blue-30);
+
+  --color-darkblue--1: var(--colors-blue-93);
+  --color-darkblue--2: var(--colors-blue-60);
+  --color-darkblue--3: var(--colors-blue-30);
+  --color-darkblue--4: var(--colors-blue-20);
+  --color-darkblue--5: var(--colors-blue-10);
+
+  --color-violet--1: var(--colors-purple-95);
+  --color-violet--2: var(--colors-purple-70);
+  --color-violet--3: var(--colors-purple-40);
+  --color-violet--4: var(--colors-purple-30);
+  --color-violet--5: var(--colors-purple-20);
+
+  --rgb-white: 255, 255, 255;
+
+  --rgb-grape--2: 184, 138, 219;
+  
+  --rgb-red--2: 255, 143, 171;
+
+  --rgb-yellow--2: 255, 226, 127;
+  
+  --rgb-green--2: 135, 225, 195;
+  
+  --rgb-blue--2: 134, 193, 230;
+  
+  --color-overlay--black: rgba(34, 34, 34, 0.8);
+  */
 
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;