welcome-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/types/theme/index.d.ts

@@ -5,6 +5,31 @@ import { ThemeAvatars } from '../components/Avatar/theme';
 import { ThemeBadges } from '../components/Badge/theme';
 import { ThemeBreadcrumbs } from '../components/Breadcrumb/theme';
 import { ThemeCards } from '../components/Card/theme';
+import { ThemeDateTimePickerCommon } from '../components/DateTimePickerCommon/theme';
+import { ThemeCheckboxes } from '../components/Checkbox/theme';
+import { ThemeDrawers } from '../components/Drawer/theme';
+import { ThemeDropdownMenu } from '../components/DropdownMenu/theme';
+import { ThemeFileDrops } from '../components/FileDrop/theme';
+import { ThemeHints } from '../components/Hint/theme';
+import { ThemeLabels } from '../components/Label/theme';
+import { ThemeLinks } from '../components/Link/theme';
+import { ThemeLoaders } from '../components/Loader/theme';
+import { ThemeIcons } from '../components/Icon/theme';
+import { ThemeModals } from '../components/Modal/theme';
+import { ThemePagination } from '../components/Pagination/theme';
+import { ThemePopovers } from '../components/Popover/theme';
+import { ThemeRadios } from '../components/Radio/theme';
+import { ThemeRadioTabs } from '../components/RadioTab/theme';
+import { ThemeSliders } from '../components/Slider/theme';
+import { ThemeSwipers } from '../components/Swiper/theme';
+import { ThemeTables } from '../components/Table/theme';
+import { ThemeTabs } from '../components/Tabs/theme';
+import { ThemeTags } from '../components/Tag/theme';
+import { ThemeTextareas } from '../components/Textarea/theme';
+import { ThemeToasts } from '../components/Toast/theme';
+import { ThemeToggles } from '../components/Toggle/theme';
+import { ThemeTooltips } from '../components/Tooltip/theme';
+import { ThemeVariantIcon } from '../components/VariantIcon/theme';
 import { darkTheme } from './dark';
 import { ThemeColors } from './colors';
 import { ThemeFontFaces } from './fonts';
@@ -29,23 +54,44 @@ export interface ThemeValues extends XStyledTheme, StyledComponentsTheme {
     borderWidths: ThemeBorderWidths;
     breadcrumbs: ThemeBreadcrumbs;
     cards: ThemeCards;
+    checkboxes: ThemeCheckboxes;
     colors: ThemeColors;
+    dateTimePickerCommon: ThemeDateTimePickerCommon;
     defaultLetterSpacing: string;
     defaultLineHeight: number;
+    drawers: ThemeDrawers;
+    dropdownMenu: ThemeDropdownMenu;
+    fileDrops: ThemeFileDrops;
     focus: ThemeFocus;
     fontFaces: ThemeFontFaces;
     fontSizes: ThemeFontSizes;
     fontWeights: ThemeFontWeights;
     fonts: ThemeFonts;
     fontsUrl: ThemeFontsUrl;
+    hints: ThemeHints;
+    icons: ThemeIcons;
     inset: ThemeSpace;
+    labels: ThemeLabels;
     letterSpacings: ThemeLetterSpacings;
     lineHeights: ThemeLineHeights;
+    links: ThemeLinks;
+    loaders: ThemeLoaders;
+    modal: ThemeModals;
+    pagination: ThemePagination;
+    popovers: ThemePopovers;
     radii: ThemeRadii;
+    radios: ThemeRadios;
+    radiosTab: ThemeRadioTabs;
     screens: ThemeScreens;
     selection: ThemeSelection;
     shadows: ThemeShadows;
+    sliders: ThemeSliders;
     space: ThemeSpace;
+    swipers: ThemeSwipers;
+    tables: ThemeTables;
+    tabs: ThemeTabs;
+    tags: ThemeTags;
+    textareas: ThemeTextareas;
     texts: ThemeTexts;
     textsFontFamily: ThemeTextsFontFamily;
     textsFontWeights: ThemeTextsFontWeights;
@@ -54,15 +100,19 @@ export interface ThemeValues extends XStyledTheme, StyledComponentsTheme {
     toEm: (int: number) => string;
     toPx: (int: number) => string;
     toRem: (int: number) => string;
+    toasts: ThemeToasts;
+    toggles: ThemeToggles;
+    tooltips: ThemeTooltips;
     transformers: {
         border: (value: CSSScalar) => CSSScalar;
         px: (value: CSSScalar) => CSSScalar;
     };
     transitions: ThemeTransitions;
     underline: ThemeUnderline;
+    variantIcon: ThemeVariantIcon;
 }
 export type ThemeFontsUrl = 'https://cdn.welcome-ui.com/fonts' | 'https://cdn.welcometothejungle.com/fonts' | string;
-export type Options = {
+export type ThemeProps = {
     [param: string]: unknown;
     defaultFontFamily?: string;
     defaultFontSize?: number;
@@ -72,5 +122,5 @@ export type Options = {
     headingFontFamily?: string;
     iconFontFamily?: string;
 };
-export declare const createTheme: (options?: Options) => ThemeValues;
+export declare const createTheme: (options?: ThemeProps) => ThemeValues;
 export { darkTheme };

package/dist/types/theme/typography.d.ts

@@ -1,5 +1,5 @@
 import { CSSObject } from '@xstyled/styled-components';
-import { Options, ThemeValues } from '.';
+import { ThemeProps, ThemeValues } from '.';
 export type ThemeFontSizes = {
     [key: number]: string;
     h0: string;
@@ -130,4 +130,4 @@ export type ThemeFonts = {
     icons: string;
     texts: string;
 };
-export declare const getFonts: (defaultFontFamily: Options["defaultFontFamily"], headingFontFamily: Options["headingFontFamily"], iconFontFamily: Options["iconFontFamily"]) => ThemeFonts;
+export declare const getFonts: (defaultFontFamily: ThemeProps["defaultFontFamily"], headingFontFamily: ThemeProps["headingFontFamily"], iconFontFamily: ThemeProps["iconFontFamily"]) => ThemeFonts;

package/dist/types/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/types/utils/create-event.d.ts

@@ -0,0 +1,8 @@
+export interface CreateEvent {
+    preventDefault: () => void;
+    target: Record<string, unknown>;
+}
+export declare const createEvent: (props: Record<string, unknown>) => {
+    preventDefault: CreateEvent["preventDefault"];
+    target: CreateEvent["target"];
+};

package/dist/types/utils/field-styles.d.ts

@@ -0,0 +1,21 @@
+import { css } from '@xstyled/styled-components';
+type FieldIconSizes = {
+    lg: 'sm';
+    md: 'sm';
+    sm: 'sm';
+    xs: 'xs';
+};
+export declare const FIELD_ICON_SIZE: FieldIconSizes;
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type FieldIconSize = 'xs' | 'sm';
+export type DefaultFieldStylesProps = Partial<{
+    hasIcon?: boolean;
+    iconPlacement?: 'right' | 'left' | 'both';
+    isClearable?: boolean;
+    size: Size;
+    transparent?: boolean;
+    variant: 'danger' | 'success' | 'warning';
+}>;
+type DefaultFieldStyles = (args: DefaultFieldStylesProps) => ReturnType<typeof css>;
+export declare const defaultFieldStyles: DefaultFieldStyles;
+export {};

package/dist/types/utils/format-bytes.d.ts

@@ -0,0 +1 @@
+export declare const formatBytes: (bytes: number, decimals?: number) => string;

package/dist/types/utils/get-max-width-height.d.ts

@@ -0,0 +1 @@
+export declare const getMax: (width: string, height?: string) => string;

package/dist/types/utils/hex-to-rgb.d.ts

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

package/dist/types/utils/hex-to-rgba.d.ts

@@ -0,0 +1 @@
+export declare const hexToRGBA: (hex: string, transparency?: number) => string;

package/dist/types/utils/hide-focus-rings-root.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const hideFocusRingsDataAttribute = "data-wui-hidefocusrings";
+interface HideFocusRingsRootProps {
+    children?: React.ReactNode;
+    reactRootId: string;
+}
+export declare const HideFocusRingsRoot: React.FC<HideFocusRingsRootProps>;
+export {};

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './use-copy-text';

package/dist/types/utils/overflow-ellipsis.d.ts

@@ -0,0 +1 @@
+export declare const overflowEllipsis: import('styled-components').FlattenSimpleInterpolation;

package/dist/types/utils/throttle.d.ts

@@ -0,0 +1,5 @@
+interface ThrottledFunc<T extends (...args: unknown[]) => unknown> {
+    (...args: Parameters<T>): void;
+}
+export declare const throttle: <T extends (...args: unknown[]) => unknown>(callback: T, wait?: number, leading?: boolean) => ThrottledFunc<T>;
+export {};

package/dist/types/utils/use-copy-text.d.ts

@@ -0,0 +1,5 @@
+type Content = React.RefObject<HTMLElement | HTMLInputElement> | number | string;
+type Timeout = number;
+type useCopyTextReturn = [() => void, boolean];
+export declare function useCopyText(content: Content, timeout: Timeout): useCopyTextReturn;
+export {};

package/dist/types/utils/use-create-portal.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hook that mimic the React createPortal function in order to make it SSR friendly
+ */
+export declare function useCreatePortal(disable?: boolean): ((children: React.ReactNode) => any) | ((children: React.ReactNode, container?: Element | DocumentFragment, key?: string | null) => import('react').ReactPortal);

package/dist/types/utils/use-fork-ref.d.ts

@@ -0,0 +1,3 @@
+import { ForwardedRef } from 'react';
+export declare function setRef(ref: ForwardedRef<unknown>, value: unknown): void;
+export declare function useForkRef(refA: ForwardedRef<unknown>, refB: ForwardedRef<unknown>): (instance: unknown) => void;

package/dist/types/utils/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/types/utils/use-viewport.d.ts

@@ -0,0 +1,6 @@
+type Size = {
+    height: number;
+    width: number;
+};
+export declare function useViewportSize(): Size;
+export {};

package/dist/types/utils/wrap-children.d.ts

@@ -0,0 +1 @@
+export declare const wrapChildren: (children?: string | JSX.Element) => unknown;

package/dist/use-isomorphic-layout-effect-C1_Gy5Nu.js

@@ -0,0 +1 @@
+"use client";"use strict";const e=require("react"),t=typeof window>"u"?e.useEffect:e.useLayoutEffect;exports.useIsomorphicLayoutEffect=t;

package/dist/use-isomorphic-layout-effect-Izr-e2pi.mjs

@@ -0,0 +1,6 @@
+"use client";
+import { useEffect as e, useLayoutEffect as o } from "react";
+const f = typeof window > "u" ? e : o;
+export {
+  f as u
+};

package/dist/use-viewport-BDDjd1nl.js

@@ -0,0 +1 @@
+"use client";"use strict";const n=require("react"),r=require("./use-isomorphic-layout-effect-C1_Gy5Nu.js");function o(){const[t,e]=n.useState({height:void 0,width:void 0});return r.useIsomorphicLayoutEffect(()=>{e({width:window.innerWidth,height:window.innerHeight});function i(){e({width:window.innerWidth,height:window.innerHeight})}return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),t}exports.useViewportSize=o;

package/dist/use-viewport-m3glsbna.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useState as t } from "react";
+import { u as r } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+function w() {
+  const [n, e] = t({ height: void 0, width: void 0 });
+  return r(() => {
+    e({ width: window.innerWidth, height: window.innerHeight });
+    function i() {
+      e({ width: window.innerWidth, height: window.innerHeight });
+    }
+    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, []), n;
+}
+export {
+  w as u
+};

package/dist/usePopover-CZsYHcTW.js

@@ -0,0 +1,31 @@
+"use client";"use strict";const n=require("react"),l=require("./System.js"),o=require("@xstyled/styled-components"),u=require("./QYJ6MIDR-CRK3satR.js"),a=require("./BYC7LY2E-BkAEL2VD.js"),f=require("./index-Cs1IZBks.js"),g=require("./Box.js"),h=require("./Button.js"),P=o(u.PopoverArrow)`
+  color: ${o.th("popovers.default.backgroundColor")};
+`,w=o.svgBox(({$transform:t})=>o.css`
+    transform: ${t};
+  `),v=o.div`
+  ${o.th("popovers.content")};
+`,p=o.h6`
+  margin: 0;
+  ${o.th("popovers.title")};
+`,m=o(a.Popover)(({$withCloseButton:t})=>o.css`
+    ${o.th("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${o.system};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t&&o.css`
+      ${p} {
+        padding-right: 50;
+      }
+    `}
+  `);o(u.PopoverDisclosure)`
+  ${o.system};
+`;const C=o(a.HovercardAnchor)`
+  ${o.system};
+`,$=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(u.PopoverDisclosure,{ref:s,render:t?c=>n.createElement(t,{...c}):void 0,store:r,...e})),E=l.forwardRef(({as:t,store:r,...e},s)=>n.createElement(C,{store:r,...e,forwardedAs:t,ref:s})),H={top:"rotateZ(180deg)",right:"rotateZ(-90deg)",bottom:"rotateZ(360deg)",left:"rotateZ(90deg)"},B=({store:t})=>{const r=t.useState("currentPlacement"),[e]=r.split("-"),s=H[e];return n.createElement(P,{store:t},n.createElement(w,{$transform:s,h:30,w:30,xmlns:"http://www.w3.org/2000/svg"},n.createElement("path",{d:"M7 30L15 22L23 30H7Z",fill:"currentColor",fillRule:"nonzero",id:"stroke"}),n.createElement("path",{d:"M8 30L15 23L22 30H8Z",fill:"currentColor",fillRule:"nonzero"})))},d=({children:t,onClose:r,store:e})=>{const s=()=>{r&&r(),e==null||e.hide()},{withCloseButton:c}=e;return n.createElement(g.Box,{position:"relative"},n.createElement(B,{store:e}),t,c&&n.createElement(h.Button,{flex:"0 0 auto",ml:"md",onClick:s,position:"absolute",right:1,shape:"square",size:"xs",top:1,variant:"secondary"},n.createElement(f.CrossIcon,null)))},q=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{$withCloseButton:i,ref:c,store:e,...s},n.createElement(d,{onClose:r,store:e},t))}),y=Object.assign(q,{Content:v,Title:p,Trigger:$}),R=l.forwardRef(({children:t,onClose:r,store:e,...s},c)=>{const{withCloseButton:i}=e;return n.createElement(m,{as:a.Hovercard,store:e,...s,$withCloseButton:i,ref:c},n.createElement(d,{onClose:r,store:e},t))}),T=Object.assign(R,{Content:v,Title:p,Trigger:E}),x=({animated:t=150,withCloseButton:r=!1,...e}={})=>({...a.usePopoverStore({animated:t,...e}),withCloseButton:r}),Z=({animated:t=150,hideTimeout:r=300,showTimeout:e=500,withCloseButton:s=!1,...c}={})=>({...a.useHovercardStore({animated:t,hideTimeout:r,showTimeout:e,...c}),withCloseButton:s});exports.Popover=y;exports.PopoverHover=T;exports.usePopover=x;exports.usePopoverHover=Z;

package/dist/usePopover-CcsC9Y-s.mjs

@@ -0,0 +1,143 @@
+"use client";
+import r from "react";
+import { forwardRef as l } from "./System.mjs";
+import s, { th as i, css as p, system as m } from "@xstyled/styled-components";
+import { P, a as v } from "./QYJ6MIDR-Cy39pEs2.mjs";
+import { P as h, H as $, a as C, u as w, b as E } from "./BYC7LY2E-BAjGN7k_.mjs";
+import { C as H } from "./index-ColyClKR.mjs";
+import { Box as B } from "./Box.mjs";
+import { Button as T } from "./Button.mjs";
+const b = s(P)`
+  color: ${i("popovers.default.backgroundColor")};
+`, x = s.svgBox(
+  ({ $transform: t }) => p`
+    transform: ${t};
+  `
+), d = s.div`
+  ${i("popovers.content")};
+`, u = s.h6`
+  margin: 0;
+  ${i("popovers.title")};
+`, f = s(h)(
+  ({ $withCloseButton: t }) => p`
+    ${i("popovers.default")};
+    outline: none;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${m};
+
+    /* on open popover for animation */
+    &[data-enter] {
+      opacity: 1;
+    }
+
+    ${t && p`
+      ${u} {
+        padding-right: 50;
+      }
+    `}
+  `
+);
+s(v)`
+  ${m};
+`;
+const y = s($)`
+  ${m};
+`, Z = l(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(
+    v,
+    {
+      ref: n,
+      render: t ? (a) => /* @__PURE__ */ r.createElement(t, { ...a }) : void 0,
+      store: o,
+      ...e
+    }
+  )
+), A = l(
+  ({ as: t, store: o, ...e }, n) => /* @__PURE__ */ r.createElement(y, { store: o, ...e, forwardedAs: t, ref: n })
+), L = {
+  top: "rotateZ(180deg)",
+  right: "rotateZ(-90deg)",
+  bottom: "rotateZ(360deg)",
+  left: "rotateZ(90deg)"
+}, R = ({ store: t }) => {
+  const o = t.useState("currentPlacement"), [e] = o.split("-"), n = L[e];
+  return /* @__PURE__ */ r.createElement(b, { store: t }, /* @__PURE__ */ r.createElement(x, { $transform: n, h: 30, w: 30, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ r.createElement("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }), /* @__PURE__ */ r.createElement("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })));
+}, g = ({ children: t, onClose: o, store: e }) => {
+  const n = () => {
+    o && o(), e == null || e.hide();
+  }, { withCloseButton: a } = e;
+  return /* @__PURE__ */ r.createElement(B, { position: "relative" }, /* @__PURE__ */ r.createElement(R, { store: e }), t, a && /* @__PURE__ */ r.createElement(
+    T,
+    {
+      flex: "0 0 auto",
+      ml: "md",
+      onClick: n,
+      position: "absolute",
+      right: 1,
+      shape: "square",
+      size: "xs",
+      top: 1,
+      variant: "secondary"
+    },
+    /* @__PURE__ */ r.createElement(H, null)
+  ));
+}, _ = l(
+  ({ children: t, onClose: o, store: e, ...n }, a) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(f, { $withCloseButton: c, ref: a, store: e, ...n }, /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t));
+  }
+), F = Object.assign(_, {
+  Content: d,
+  Title: u,
+  Trigger: Z
+}), k = l(
+  ({ children: t, onClose: o, store: e, ...n }, a) => {
+    const { withCloseButton: c } = e;
+    return /* @__PURE__ */ r.createElement(
+      f,
+      {
+        as: C,
+        store: e,
+        ...n,
+        $withCloseButton: c,
+        ref: a
+      },
+      /* @__PURE__ */ r.createElement(g, { onClose: o, store: e }, t)
+    );
+  }
+), G = Object.assign(k, {
+  Content: d,
+  Title: u,
+  Trigger: A
+}), J = ({
+  animated: t = 150,
+  withCloseButton: o = !1,
+  ...e
+} = {}) => ({
+  ...w({
+    animated: t,
+    ...e
+  }),
+  withCloseButton: o
+}), K = ({
+  animated: t = 150,
+  hideTimeout: o = 300,
+  showTimeout: e = 500,
+  withCloseButton: n = !1,
+  ...a
+} = {}) => ({
+  ...E({
+    animated: t,
+    hideTimeout: o,
+    showTimeout: e,
+    ...a
+  }),
+  withCloseButton: n
+});
+export {
+  F as P,
+  G as a,
+  K as b,
+  J as u
+};

package/dist/wrap-children-BLDjJiiy.js

@@ -0,0 +1 @@
+"use client";"use strict";const r=require("react"),t=n=>r.Children.toArray(n).map(e=>["number","string"].includes(typeof e)?r.createElement("span",{key:e},e):e);exports.wrapChildren=t;

package/dist/wrap-children-aq69jtFP.mjs

@@ -0,0 +1,12 @@
+"use client";
+import r from "react";
+const a = (t) => r.Children.toArray(t).map(
+  (e) => (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    /* @ts-ignore */
+    ["number", "string"].includes(typeof e) ? /* @__PURE__ */ r.createElement("span", { key: e }, e) : e
+  )
+);
+export {
+  a as w
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
@@ -52,22 +52,74 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/lodash.capitalize": "^4.2.9",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/react-datepicker": "^4.15.0",
     "@types/react": "^18.3.12",
     "@xstyled/styled-components": "^3.7.3",
-    "react": "^18.0.0",
+    "copy-to-clipboard": "^3.3.3",
+    "date-fns": "^4.1.0",
+    "downshift": "^7.4.1",
+    "lodash.capitalize": "^4.2.1",
+    "lodash.debounce": "^4.0.8",
+    "lottie-light-react": "^2.4.0",
+    "match-sorter": "^8.0.0",
+    "react-datepicker": "^4.16.0",
     "react-docgen-typescript": "^2.2.2",
+    "react-dropzone": "^14.3.5",
+    "react-flatten-children": "^1.0.0",
+    "react-hot-toast": "^2.4.1",
+    "react": "^18.0.0",
     "rollup-preserve-directives": "^1.1.3",
     "styled-components": "^5.3.9",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0",
+    "vite": "^5.4.10",
     "wttj-config": "^3.0.1"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",
-    "react": "^18.0.0",
+    "copy-to-clipboard": "^3.3.3",
+    "date-fns": "^4.1.0",
+    "downshift": "^7.4.1",
+    "lottie-light-react": "^2.4.0",
+    "match-sorter": "^8.0.0",
+    "react-datepicker": "^4.16.0",
+    "react-dropzone": "^14.3.5",
+    "react-flatten-children": "^1.0.0",
+    "react-hot-toast": "^2.4.1",
+    "react": "^18^.0.0",
     "styled-components": "^5.3.9"
   },
+  "peerDependenciesMeta": {
+    "copy-to-clipboard": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "downshift": {
+      "optional": true
+    },
+    "lottie-light-react": {
+      "optional": true
+    },
+    "match-sorter": {
+      "optional": true
+    },
+    "react-datepicker": {
+      "optional": true
+    },
+    "react-dropzone": {
+      "optional": true
+    },
+    "react-flatten-children": {
+      "optional": true
+    },
+    "react-hot-toast": {
+      "optional": true
+    }
+  },
   "resolutions": {
     "loader-utils": "2.0.3"
   },