@ssa-ui-kit/core 0.0.1-alpha → 0.0.2-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.1-alpha",
+  "version": "0.0.2-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -41,8 +41,8 @@
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/AccordionGroup/AccordionTitle.tsx

@@ -1,8 +1,8 @@
 import { Fragment } from 'react';
-import CardHeaderBase from '@components/CardHeader/CardHeaderBase';
-import { AccordionProps } from './types';
 import { useTheme } from '@emotion/react';
+import CardHeaderBase from '@components/CardHeader/CardHeaderBase';
 import Icon from '@components/Icon';
+import { AccordionProps } from './types';
 import { createTitleStyles } from './styles';
 
 const CardHeaderBaseButton = CardHeaderBase.withComponent('button');
@@ -13,6 +13,7 @@ export const AccordionTitle: AccordionProps['renderTitle'] = ({
   id,
   isOpened,
   ariaControls,
+  className,
   onClick,
 }) => {
   const theme = useTheme();
@@ -22,6 +23,7 @@ export const AccordionTitle: AccordionProps['renderTitle'] = ({
       type="button"
       data-testid="accordion-title"
       css={styles[size]}
+      className={className}
       id={`${id}`}
       aria-expanded={isOpened}
       aria-controls={ariaControls}

package/src/components/AccordionGroup/index.ts

@@ -6,3 +6,4 @@ export {
 } from './AccordionContext';
 export { AccordionTitle } from './AccordionTitle';
 export { Accordion } from './Accordion';
+export * from './types';

package/src/components/AccordionGroup/types.ts

@@ -7,11 +7,16 @@ export type SizeStyles = {
   [K in AccordionSize]: SerializedStyles;
 };
 
+type AccordionGroupChildren = React.ReactElement<
+  React.PropsWithChildren<AccordionViewProps>
+>;
+
 export interface AccordionGroupProps {
   id?: string;
-  children: React.ReactElement<React.PropsWithChildren<AccordionViewProps>>[];
+  children: AccordionGroupChildren | AccordionGroupChildren[];
   size?: AccordionSize;
   accordionsStayOpen?: boolean;
+  className?: string;
 }
 
 export interface AccordionProps {

package/src/components/Checkbox/Checkbox.tsx

@@ -16,6 +16,7 @@ const Checkbox = ({
   name = '',
   isRequired = false,
   ref,
+  register,
   ...rest
 }: ICheckboxProps) => {
   const [isChecked, setIsChecked] = useState(Boolean(initialState));
@@ -61,6 +62,7 @@ const Checkbox = ({
         }}
         name={name}
         required={isRequired}
+        {...register}
       />
       <div>
         {isIndeterminate ? (

package/src/components/Checkbox/types.ts

@@ -1,7 +1,13 @@
-import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import {
+  Control,
+  FieldPath,
+  FieldValues,
+  UseFormReturn,
+} from 'react-hook-form';
 import { MutableRefObject } from 'react';
 
-export interface ICheckboxProps {
+export interface ICheckboxProps
+  extends Partial<Pick<UseFormReturn, 'register'>> {
   text?: string;
   id?: string;
   onChange?: (newState: boolean) => void;

package/src/components/Icon/icons/Chart.tsx

@@ -0,0 +1,37 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Chart = ({ fill = '#000', size = 15 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 22 22"
+    fill="none">
+    <title>Chart</title>
+    <g clipPath="url(#clip0_2353_10249)">
+      <path
+        d="M15.9118 19.3153L15.9119 19.3152C16.1279 19.1374 16.1629 18.8202 15.9915 18.5992L15.9914 18.5991L10.2667 11.2396V2.24969C10.2667 1.96446 10.0352 1.73301 9.75 1.73301C4.8614 1.73301 0.9 6.08572 0.9 11.4163C0.9 16.7557 5.24395 21.0997 10.5833 21.0997C11.771 21.0997 12.6938 20.9922 13.526 20.7137C14.359 20.4349 15.0948 19.987 15.9118 19.3153ZM10.5833 20.0664C5.81355 20.0664 1.93332 16.1861 1.93332 11.4164C1.93332 6.83058 5.17123 3.0801 9.23332 2.78478V11.4164C9.23332 11.531 9.27152 11.6427 9.34279 11.7337C9.34284 11.7338 9.3429 11.7338 9.34295 11.7339L14.8604 18.8277C14.2411 19.2904 13.6698 19.5955 13.0225 19.7874C12.346 19.9879 11.5811 20.0664 10.5833 20.0664Z"
+        fill={fill}
+        stroke={fill}
+        strokeWidth="0.2"
+      />
+      <path
+        d="M11.4167 11.1H20.5834C20.8686 11.1 21.1 10.8685 21.1 10.5833C21.1 5.24395 16.756 0.9 11.4167 0.9C11.1315 0.9 10.9 1.13145 10.9 1.41668V10.5834C10.9 10.8686 11.1315 11.1 11.4167 11.1ZM11.9333 10.0666V1.94877C16.2925 2.20673 19.7933 5.70751 20.0512 10.0666H11.9333Z"
+        fill={fill}
+        stroke={fill}
+        strokeWidth="0.2"
+      />
+      <path
+        d="M18.0192 19.3336L18.0189 19.3339C17.9231 19.4225 17.7972 19.4721 17.6668 19.4721L18.0192 19.3336ZM18.0192 19.3336C19.9769 17.5072 21.1001 14.9258 21.1001 12.2497C21.1001 11.9645 20.8687 11.733 20.5835 11.733H12.2501M18.0192 19.3336L12.2501 11.733M12.2501 11.733C12.0517 11.733 11.8691 11.8475 11.7832 12.0274M12.2501 11.733L11.7832 12.0274M11.7832 12.0274C11.6974 12.2073 11.7232 12.4202 11.8482 12.5743M11.7832 12.0274L11.8482 12.5743M11.8482 12.5743C11.8483 12.5743 11.8483 12.5743 11.8483 12.5744M11.8482 12.5743L11.8483 12.5744M11.8483 12.5744L17.2645 19.2795C17.2645 19.2796 17.2646 19.2797 17.2647 19.2797C17.3549 19.3926 17.4872 19.4606 17.63 19.471C17.6298 19.471 17.6296 19.471 17.6295 19.471L11.8483 12.5744ZM20.0512 12.7664C19.9288 14.7847 19.0958 16.7118 17.7089 18.185L13.332 12.7664H20.0512Z"
+        fill={fill}
+        stroke={fill}
+        strokeWidth="0.2"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2353_10249">
+        <rect width="22" height="22" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/Icon/icons/Clock.tsx

@@ -0,0 +1,31 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Clock = ({ fill = '#000', size = 15 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 24 24"
+    fill="none">
+    <title>Clock</title>
+    <circle
+      cx="12.1001"
+      cy="12.1001"
+      r="11.1001"
+      stroke={fill}
+      strokeWidth="1.4"
+    />
+    <path
+      d="M11.4824 6.18066L11.4835 13.1411"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+    />
+    <path
+      d="M18.8843 11.4834L11.4842 13.3334"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+    />
+  </svg>
+);

package/src/components/Icon/icons/Email.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Email = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 18 14"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Email</title>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.718587 2.52762C0.823606 2.04828 1.08177 1.62029 1.4508 1.31376C1.81982 1.00722 2.27784 0.840299 2.74984 0.840332H15.2498C15.7218 0.840299 16.1799 1.00722 16.5489 1.31376C16.9179 1.62029 17.1761 2.04828 17.2811 2.52762L8.99984 7.79997L0.718587 2.52762ZM0.666504 3.76676V11.4751L6.7113 7.61442L0.666504 3.76676ZM7.70921 8.25136L0.865462 12.6209C1.03455 12.9923 1.30143 13.3061 1.63503 13.5256C1.96863 13.7452 2.35523 13.8616 2.74984 13.8612H15.2498C15.6444 13.8613 16.0308 13.7446 16.3642 13.5249C16.6977 13.3051 16.9643 12.9913 17.1332 12.6198L10.2894 8.25027L8.99984 9.07167L7.70921 8.25027V8.25136ZM11.2884 7.61551L17.3332 11.4751V3.76676L11.2884 7.61442V7.61551Z"
+      fill={fill}
+    />
+  </svg>
+);

package/src/components/Icon/icons/Lock.tsx

@@ -0,0 +1,17 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Lock = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 16 21"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Lock</title>
+    <path
+      d="M13.625 8.41602H13V5.91602C13 3.15852 10.7575 0.916016 8 0.916016C5.2425 0.916016 3 3.15852 3 5.91602V8.41602H2.375C1.34167 8.41602 0.5 9.25685 0.5 10.291V19.041C0.5 20.0752 1.34167 20.916 2.375 20.916H13.625C14.6583 20.916 15.5 20.0752 15.5 19.041V10.291C15.5 9.25685 14.6583 8.41602 13.625 8.41602ZM4.66667 5.91602C4.66667 4.07768 6.16167 2.58268 8 2.58268C9.83833 2.58268 11.3333 4.07768 11.3333 5.91602V8.41602H4.66667V5.91602ZM8.83333 14.851V16.7493C8.83333 17.2093 8.46083 17.5827 8 17.5827C7.53917 17.5827 7.16667 17.2093 7.16667 16.7493V14.851C6.67083 14.5618 6.33333 14.0302 6.33333 13.416C6.33333 12.4968 7.08083 11.7493 8 11.7493C8.91917 11.7493 9.66667 12.4968 9.66667 13.416C9.66667 14.0302 9.32917 14.5618 8.83333 14.851Z"
+      fill={fill}
+    />
+  </svg>
+);

package/src/components/Icon/icons/LogIn.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const LogIn = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 15 20"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Log in</title>
+    <path
+      d="M7.39504 9.17067C8.58623 9.17067 9.61771 8.74344 10.4605 7.90051C11.3033 7.05773 11.7305 6.02652 11.7305 4.8352C11.7305 3.64428 11.3033 2.61294 10.4604 1.76988C9.61743 0.92723 8.58609 0.5 7.39504 0.5C6.20371 0.5 5.17251 0.92723 4.32972 1.77002C3.48694 2.6128 3.05957 3.64414 3.05957 4.8352C3.05957 6.02652 3.48694 7.05786 4.32986 7.90065C5.17279 8.7433 6.20413 9.17067 7.39504 9.17067Z"
+      fill={fill}
+    />
+    <path
+      d="M14.9811 14.341C14.9568 13.9902 14.9076 13.6076 14.8352 13.2036C14.7622 12.7966 14.6681 12.4118 14.5555 12.0601C14.4392 11.6966 14.281 11.3376 14.0854 10.9936C13.8824 10.6365 13.644 10.3256 13.3765 10.0698C13.0968 9.80212 12.7543 9.58693 12.3582 9.42996C11.9635 9.27382 11.5261 9.19472 11.0583 9.19472C10.8745 9.19472 10.6968 9.27011 10.3536 9.49354C10.1424 9.63129 9.89537 9.79059 9.61961 9.96678C9.38382 10.117 9.06439 10.2578 8.66985 10.3852C8.28491 10.5098 7.89407 10.5729 7.50832 10.5729C7.12256 10.5729 6.73186 10.5098 6.34652 10.3852C5.95238 10.2579 5.63296 10.1172 5.39744 9.96692C5.12429 9.79237 4.8771 9.63307 4.66273 9.49341C4.31995 9.26997 4.14211 9.19458 3.95837 9.19458C3.49035 9.19458 3.0531 9.27382 2.65855 9.4301C2.26277 9.58679 1.92013 9.80199 1.64012 10.0699C1.37274 10.3259 1.1342 10.6367 0.931502 10.9936C0.736083 11.3376 0.57788 11.6964 0.461425 12.0602C0.348953 12.4119 0.254882 12.7966 0.181823 13.2036C0.109451 13.6071 0.0602874 13.9898 0.0359802 14.3414C0.0120849 14.6858 0 15.0433 0 15.4043C0 16.3439 0.29869 17.1046 0.887694 17.6656C1.46942 18.2191 2.23915 18.5 3.17518 18.5H11.8423C12.7783 18.5 13.5478 18.2193 14.1296 17.6656C14.7188 17.105 15.0175 16.3442 15.0175 15.4042C15.0173 15.0415 15.0051 14.6838 14.9811 14.341Z"
+      fill={fill}
+    />
+  </svg>
+);

package/src/components/Icon/icons/Robot.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Robot = ({ fill = '#000', size = 15 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 24 24"
+    fill="none">
+    <title>Robot</title>
+    <path
+      d="M17.0001 4.4H17H12.6V3C12.6 2.84087 12.5368 2.68826 12.4243 2.57574C12.3117 2.46321 12.1591 2.4 12 2.4C11.8409 2.4 11.6883 2.46321 11.5757 2.57574C11.4632 2.68826 11.4 2.84087 11.4 3V4.4H7L6.99991 4.4C6.31056 4.40064 5.64964 4.67476 5.1622 5.1622C4.67476 5.64964 4.40064 6.31056 4.4 6.99991V7L4.4 16L4.4 16.0001C4.40064 16.6894 4.67476 17.3504 5.1622 17.8378C5.64964 18.3252 6.31056 18.5994 6.99991 18.6H7H9.6789L11.5008 21.3328L11.584 21.2773L11.5008 21.3328C11.5556 21.415 11.6298 21.4824 11.7169 21.529C11.804 21.5756 11.9012 21.6 12 21.6C12.0988 21.6 12.196 21.5756 12.2831 21.529C12.3702 21.4824 12.4444 21.415 12.4992 21.3328L12.416 21.2773L12.4992 21.3328L14.3211 18.6H17H17.0001C17.6894 18.5994 18.3504 18.3252 18.8378 17.8378C19.3252 17.3504 19.5994 16.6894 19.6 16.0001V16V7V6.99991C19.5994 6.31056 19.3252 5.64964 18.8378 5.1622C18.3504 4.67476 17.6894 4.40064 17.0001 4.4ZM17.9895 16.9895C17.727 17.252 17.3711 17.3996 16.9999 17.4L10.4992 17.6672L10.4991 17.667C10.4443 17.585 10.37 17.5177 10.283 17.4712C10.196 17.4246 10.0988 17.4001 10.0001 17.4H10H7.00011C6.6289 17.3996 6.27301 17.252 6.01053 16.9895C5.74805 16.727 5.6004 16.3711 5.6 15.9999V14.6H18.4V15.9999C18.3996 16.3711 18.252 16.727 17.9895 16.9895ZM5.6 13.4V7.00011C5.6004 6.6289 5.74805 6.27301 6.01053 6.01053C6.27301 5.74805 6.6289 5.60041 7.00011 5.6H16.9999C17.3711 5.60041 17.727 5.74805 17.9895 6.01053C18.252 6.27301 18.3996 6.6289 18.4 7.00011V13.4H5.6ZM9.91462 10.6111C10.0355 10.4302 10.1 10.2176 10.1 10C10.1 9.70826 9.98411 9.42847 9.77782 9.22218C9.57153 9.01589 9.29174 8.9 9 8.9C8.78244 8.9 8.56977 8.96451 8.38887 9.08538C8.20798 9.20625 8.06699 9.37805 7.98373 9.57905C7.90048 9.78005 7.87869 10.0012 7.92114 10.2146C7.96358 10.428 8.06835 10.624 8.22218 10.7778C8.37602 10.9317 8.57202 11.0364 8.7854 11.0789C8.99878 11.1213 9.21995 11.0995 9.42095 11.0163C9.62195 10.933 9.79375 10.792 9.91462 10.6111ZM15.9146 10.6111C16.0355 10.4302 16.1 10.2176 16.1 10C16.1 9.70826 15.9841 9.42847 15.7778 9.22218C15.5715 9.01589 15.2917 8.9 15 8.9C14.7824 8.9 14.5698 8.96451 14.3889 9.08538C14.208 9.20625 14.067 9.37805 13.9837 9.57905C13.9005 9.78005 13.8787 10.0012 13.9211 10.2146C13.9636 10.428 14.0683 10.624 14.2222 10.7778C14.376 10.9317 14.572 11.0364 14.7854 11.0789C14.9988 11.1213 15.22 11.0995 15.421 11.0163C15.622 10.933 15.7937 10.792 15.9146 10.6111ZM2.6 12V8C2.6 7.84087 2.53679 7.68826 2.42426 7.57574C2.31174 7.46321 2.15913 7.4 2 7.4C1.84087 7.4 1.68826 7.46321 1.57574 7.57574C1.46321 7.68826 1.4 7.84087 1.4 8V12C1.4 12.1591 1.46321 12.3117 1.57574 12.4243C1.68826 12.5368 1.84087 12.6 2 12.6C2.15913 12.6 2.31174 12.5368 2.42426 12.4243C2.53679 12.3117 2.6 12.1591 2.6 12ZM22.6 12V8C22.6 7.84087 22.5368 7.68826 22.4243 7.57574C22.3117 7.46321 22.1591 7.4 22 7.4C21.8409 7.4 21.6883 7.46321 21.5757 7.57574C21.4632 7.68826 21.4 7.84087 21.4 8V12C21.4 12.1591 21.4632 12.3117 21.5757 12.4243C21.6883 12.5368 21.8409 12.6 22 12.6C22.1591 12.6 22.3117 12.5368 22.4243 12.4243C22.5368 12.3117 22.6 12.1591 22.6 12Z"
+      fill={fill}
+      stroke={fill}
+      strokeWidth="0.2"
+    />
+  </svg>
+);

package/src/components/Icon/icons/iconsList.tsx

@@ -32,6 +32,9 @@ export const iconsList = [
   'visible',
   'invisible',
   'log-out',
+  'log-in',
+  'email',
+  'lock',
   'carrot-down',
   'carrot-up',
   'carrot-left',
@@ -46,4 +49,7 @@ export const iconsList = [
   'bin',
   'change',
   'copy',
+  'robot',
+  'chart',
+  'clock',
 ] as const;

package/src/components/Icon/icons/index.tsx

@@ -21,7 +21,10 @@ import { User } from './User';
 import { Union } from './Union';
 import { Visible } from './Visible';
 import { Invisible } from './Invisible';
+import { LogIn } from './LogIn';
 import { LogOut } from './LogOut';
+import { Email } from './Email';
+import { Lock } from './Lock';
 import { Information } from './Information';
 import { Warning } from './Warning';
 import { Attention } from './Attention';
@@ -44,6 +47,9 @@ import { Archive } from './Archive';
 import { Bin } from './Bin';
 import { Change } from './Change';
 import { Copy } from './Copy';
+import { Robot } from './Robot';
+import { Chart } from './Chart';
+import { Clock } from './Clock';
 
 const componentsList = [
   Diet,
@@ -70,6 +76,9 @@ const componentsList = [
   Visible,
   Invisible,
   LogOut,
+  LogIn,
+  Email,
+  Lock,
   CarrotDown,
   CarrotUp,
   CarrotLeft,
@@ -84,6 +93,9 @@ const componentsList = [
   Bin,
   Change,
   Copy,
+  Robot,
+  Chart,
+  Clock,
 ];
 
 const iconsMap: IMapIcons = iconsList.reduce((res, name, index) => {

package/src/components/Popover/hooks/usePopover.tsx

@@ -9,6 +9,8 @@ import {
   useDismiss,
   useRole,
   useInteractions,
+  useHover,
+  safePolygon,
 } from '@floating-ui/react';
 import { PopoverOptions, UsePopover } from '../types';
 
@@ -19,6 +21,7 @@ export const usePopover: UsePopover = ({
   open: controlledOpen,
   onOpenChange: setControlledOpen,
   floatingOptions = {},
+  interactionsEnabled = 'click',
 }: PopoverOptions = {}) => {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
   const [labelId, setLabelId] = React.useState<string | undefined>();
@@ -52,8 +55,28 @@ export const usePopover: UsePopover = ({
   });
   const dismiss = useDismiss(context);
   const role = useRole(context);
+  const hover = useHover(context, {
+    enabled: controlledOpen == null,
+    handleClose: safePolygon(),
+  });
+
+  const interactionsHooks = [dismiss, role];
+
+  switch (interactionsEnabled) {
+    case 'click': {
+      interactionsHooks.push(click);
+      break;
+    }
+    case 'hover': {
+      interactionsHooks.push(hover);
+      break;
+    }
+    default: {
+      interactionsHooks.push(click, hover);
+    }
+  }
 
-  const interactions = useInteractions([click, dismiss, role]);
+  const interactions = useInteractions(interactionsHooks);
 
   const result = React.useMemo(
     () => ({

package/src/components/Popover/types.ts

@@ -5,12 +5,15 @@ import {
   UseFloatingOptions,
 } from '@floating-ui/react';
 
+export type InteractionsEnabled = 'click' | 'hover' | 'both';
+
 export interface PopoverOptions {
   initialOpen?: boolean;
   placement?: Placement;
   modal?: boolean;
   open?: boolean;
   floatingOptions?: Partial<UseFloatingOptions>;
+  interactionsEnabled?: InteractionsEnabled;
   onOpenChange?: (open: boolean) => void;
 }
 

package/src/components/TextField/types.ts

@@ -1,20 +1,14 @@
 import type { UseFormReturn, FieldError } from 'react-hook-form';
+import { InputProps } from '@components/Input/types';
 
 export interface TextFieldProps
-  extends Partial<Pick<UseFormReturn, 'register'>> {
-  name: string;
-  type?: string;
+  extends InputProps,
+    Partial<Pick<UseFormReturn, 'register'>> {
   label?: string;
-  placeholder?: string;
-  validationSchema?: Record<string, unknown>;
   errors?: FieldError;
   success?: boolean;
   helperText?: string;
-  disabled?: boolean;
   rows?: number;
-  endElement?: React.ReactElement;
   multirow?: boolean;
   maxLength?: number;
-  className?: string;
-  as?: React.ElementType;
 }

package/src/index.ts

@@ -24,7 +24,11 @@ export * from './components/Checkbox';
 export { default as FormCheckbox } from './components/FormCheckbox';
 export * from './components/FormCheckbox';
 export { default as Dropdown } from './components/Dropdown';
+export { default as DropdownArrow } from './components/DropdownArrow';
+export { default as DropdownBase } from './components/DropdownBase';
 export { default as DropdownOption } from './components/DropdownOption';
+export { default as DropdownOptions } from './components/DropdownOptions';
+export { default as DropdownToggle } from './components/DropdownToggle';
 export type { IDropdownOption } from './components/DropdownOptions';
 export { default as Icon } from './components/Icon';
 export * from './components/Icon';
@@ -35,11 +39,13 @@ export { default as Modal } from './components/Modal';
 export { default as ModalDismissButton } from './components/ModalDismissButton';
 export { default as ModalContent } from './components/ModalContent';
 export { default as ModalOpenButton } from './components/ModalOpenButton';
+export { default as ModalDialog } from './components/ModalDialog';
 export * from './components/Modal';
 export * from './components/Popover';
 export { default as MultipleDropdown } from './components/MultipleDropdown';
 export { default as MultipleDropdownNotification } from './components/MultipleDropdownNotification';
 export { default as MultipleDropdownOptions } from './components/MultipleDropdownOptions';
+export { default as Progress } from './components/Progress';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as ProgressCircle } from './components/ProgressCircle';
 export { default as ProgressLegend } from './components/ProgressLegend';
@@ -47,6 +53,7 @@ export { default as ProgressLegendItem } from './components/ProgressLegendItem';
 export { default as ProgressVertical } from './components/ProgressVertical';
 export { default as Stepper } from './components/Stepper';
 export { default as Step } from './components/Step';
+export { default as StepConnector } from './components/StepConnector';
 export { default as StepLabel } from './components/StepLabel';
 export { default as Switch } from './components/Switch';
 export * from './components/Switch';
@@ -81,5 +88,7 @@ export * from './components/ResponsiveImage';
 export { default as Form } from './components/Form';
 export { default as FormGroup } from './components/FormGroup';
 export { default as FormAction } from './components/FormAction';
+export { default as FormHelperText } from './components/FormHelperText';
 export { default as Indicator } from './components/Indicator';
 export * from './components/ButtonGroup';
+export { default as Link } from './components/Link';

package/src/themes/main.ts

@@ -105,7 +105,7 @@ const main: Theme = {
     blueRoyal: 'rgba(72, 125, 225, 1)', //#487de1
   },
   mediaQueries: {
-    xs: '@media screen and (max-width: 390px)',
+    xs: '@media screen and (max-width: 389px)',
     sm: '@media screen and (min-width: 390px)',
     md: '@media screen and (min-width: 900px)',
     lg: '@media screen and (min-width: 1440px)',