react-restyle-components 0.1.45 → 0.1.47

package/lib/cjs/library/assets/svg/index.ts

@@ -0,0 +1,38 @@
+import UnCheckbox from '../../../library/assets/svg/unCheckbox.svg';
+import CheckedBox from '../../../library/assets/svg/checkedBox.svg';
+import DatePickerSvg from '../../../library/assets/svg/datePicker.svg';
+import CheckedRadio from '../../../library/assets/svg/checkedRadio.svg';
+import UncheckRadio from '../../../library/assets/svg/uncheckRadio.svg';
+import TimerSVG from '../../../library/assets/svg/timer.svg';
+import UpArrow from '../../../library/assets/svg/UpArrow.svg';
+import DownArrow from '../../../library/assets/svg/DownArrow.svg';
+
+export {
+  UnCheckbox,
+  CheckedBox,
+  DatePickerSvg,
+  CheckedRadio,
+  UncheckRadio,
+  TimerSVG,
+  UpArrow,
+  DownArrow,
+};
+
+// import {ReactComponent as UnCheckbox} from '../../../library/assets/svg/unCheckbox.svg';
+// import {ReactComponent as CheckedBox} from '../../../library/assets/svg/checkedBox.svg';
+// import {ReactComponent as DatePickerSvg} from '../../../library/assets/svg/datePicker.svg';
+// import {ReactComponent as CheckedRadio} from '../../../library/assets/svg/checkedRadio.svg';
+// import {ReactComponent as UncheckRadio} from '../../../library/assets/svg/uncheckRadio.svg';
+// import {ReactComponent as TimerSVG} from '../../../library/assets/svg/timer.svg';
+// import {ReactComponent as UpArrow} from '../../../library/assets/svg/UpArrow.svg';
+// import {ReactComponent as DownArrow} from '../../../library/assets/svg/DownArrow.svg';
+// export {
+//   UnCheckbox,
+//   CheckedBox,
+//   DatePickerSvg,
+//   CheckedRadio,
+//   UncheckRadio,
+//   TimerSVG,
+//   UpArrow,
+//   DownArrow,
+// };

package/lib/cjs/library/assets/svg/timer copy.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 8.50005C16.0001 9.73343 15.6959 10.9478 15.1145 12.0355C14.533 13.1233 13.6923 14.0508 12.6668 14.736C11.6413 15.4213 10.4626 15.843 9.23515 15.9639C8.0077 16.0848 6.76939 15.9011 5.62989 15.4291C4.49039 14.9571 3.48489 14.2114 2.70244 13.2579C1.91999 12.3045 1.38474 11.1728 1.14412 9.96316C0.903492 8.75348 0.964912 7.50312 1.32294 6.32285C1.68096 5.14257 2.32454 4.06881 3.19667 3.19667C3.25817 3.13727 3.34054 3.1044 3.42604 3.10514C3.51154 3.10588 3.59332 3.14018 3.65378 3.20064C3.71424 3.2611 3.74854 3.34289 3.74928 3.42838C3.75002 3.51388 3.71716 3.59625 3.65776 3.65776C2.54364 4.76703 1.84472 6.22559 1.67816 7.78893C1.51161 9.35226 1.88754 10.9253 2.74293 12.2444C3.59833 13.5635 4.8812 14.5485 6.37648 15.0342C7.87176 15.5199 9.48855 15.4768 10.9558 14.9121C12.4231 14.3474 13.6517 13.2955 14.4356 11.9327C15.2195 10.5699 15.511 8.97903 15.2614 7.42679C15.0118 5.87456 14.2362 4.45531 13.0645 3.40697C11.8929 2.35863 10.3965 1.74493 8.82614 1.66874V4.58698C8.82614 4.67346 8.79178 4.75641 8.73063 4.81756C8.66947 4.87871 8.58653 4.91307 8.50005 4.91307C8.41356 4.91307 8.33062 4.87871 8.26947 4.81756C8.20831 4.75641 8.17396 4.67346 8.17396 4.58698V1.32609C8.17396 1.23961 8.20831 1.15666 8.26947 1.09551C8.33062 1.03436 8.41356 1 8.50005 1C10.4885 1.00226 12.3948 1.79317 13.8009 3.19921C15.2069 4.60525 15.9978 6.5116 16.0001 8.50005ZM8.26944 8.80977C8.29966 8.84027 8.33562 8.8645 8.37524 8.88107C8.41485 8.89764 8.45735 8.90622 8.5003 8.90632C8.54324 8.90642 8.58578 8.89804 8.62547 8.88165C8.66517 8.86527 8.70123 8.8412 8.7316 8.81084C8.76197 8.78048 8.78605 8.74442 8.80244 8.70473C8.81884 8.66504 8.82723 8.62251 8.82714 8.57956C8.82706 8.53662 8.81849 8.49412 8.80193 8.4545C8.78537 8.41487 8.76115 8.37891 8.73066 8.34868L5.39059 5.00861C5.32919 4.94873 5.24666 4.91546 5.16089 4.916C5.07513 4.91653 4.99303 4.95084 4.93237 5.01148C4.87172 5.07213 4.8374 5.15422 4.83685 5.23999C4.8363 5.32576 4.86957 5.40829 4.92944 5.4697L8.26944 8.80977ZM1.65218 2.30436C1.78117 2.30436 1.90726 2.26611 2.01451 2.19444C2.12176 2.12278 2.20535 2.02093 2.25471 1.90176C2.30407 1.78259 2.31699 1.65145 2.29182 1.52494C2.26666 1.39843 2.20455 1.28223 2.11334 1.19102C2.02213 1.09981 1.90592 1.0377 1.77941 1.01253C1.6529 0.987367 1.52177 1.00028 1.4026 1.04964C1.28343 1.09901 1.18157 1.1826 1.10991 1.28985C1.03825 1.3971 1 1.52319 1 1.65218C1 1.82515 1.06871 1.99103 1.19102 2.11334C1.31333 2.23564 1.47921 2.30436 1.65218 2.30436Z" fill="#212721" stroke="#E7503D"/>
+</svg>

package/lib/cjs/library/assets/svg/timer.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 8.50005C16.0001 9.73343 15.6959 10.9478 15.1145 12.0355C14.533 13.1233 13.6923 14.0508 12.6668 14.736C11.6413 15.4213 10.4626 15.843 9.23515 15.9639C8.0077 16.0848 6.76939 15.9011 5.62989 15.4291C4.49039 14.9571 3.48489 14.2114 2.70244 13.2579C1.91999 12.3045 1.38474 11.1728 1.14412 9.96316C0.903492 8.75348 0.964912 7.50312 1.32294 6.32285C1.68096 5.14257 2.32454 4.06881 3.19667 3.19667C3.25817 3.13727 3.34054 3.1044 3.42604 3.10514C3.51154 3.10588 3.59332 3.14018 3.65378 3.20064C3.71424 3.2611 3.74854 3.34289 3.74928 3.42838C3.75002 3.51388 3.71716 3.59625 3.65776 3.65776C2.54364 4.76703 1.84472 6.22559 1.67816 7.78893C1.51161 9.35226 1.88754 10.9253 2.74293 12.2444C3.59833 13.5635 4.8812 14.5485 6.37648 15.0342C7.87176 15.5199 9.48855 15.4768 10.9558 14.9121C12.4231 14.3474 13.6517 13.2955 14.4356 11.9327C15.2195 10.5699 15.511 8.97903 15.2614 7.42679C15.0118 5.87456 14.2362 4.45531 13.0645 3.40697C11.8929 2.35863 10.3965 1.74493 8.82614 1.66874V4.58698C8.82614 4.67346 8.79178 4.75641 8.73063 4.81756C8.66947 4.87871 8.58653 4.91307 8.50005 4.91307C8.41356 4.91307 8.33062 4.87871 8.26947 4.81756C8.20831 4.75641 8.17396 4.67346 8.17396 4.58698V1.32609C8.17396 1.23961 8.20831 1.15666 8.26947 1.09551C8.33062 1.03436 8.41356 1 8.50005 1C10.4885 1.00226 12.3948 1.79317 13.8009 3.19921C15.2069 4.60525 15.9978 6.5116 16.0001 8.50005ZM8.26944 8.80977C8.29966 8.84027 8.33562 8.8645 8.37524 8.88107C8.41485 8.89764 8.45735 8.90622 8.5003 8.90632C8.54324 8.90642 8.58578 8.89804 8.62547 8.88165C8.66517 8.86527 8.70123 8.8412 8.7316 8.81084C8.76197 8.78048 8.78605 8.74442 8.80244 8.70473C8.81884 8.66504 8.82723 8.62251 8.82714 8.57956C8.82706 8.53662 8.81849 8.49412 8.80193 8.4545C8.78537 8.41487 8.76115 8.37891 8.73066 8.34868L5.39059 5.00861C5.32919 4.94873 5.24666 4.91546 5.16089 4.916C5.07513 4.91653 4.99303 4.95084 4.93237 5.01148C4.87172 5.07213 4.8374 5.15422 4.83685 5.23999C4.8363 5.32576 4.86957 5.40829 4.92944 5.4697L8.26944 8.80977ZM1.65218 2.30436C1.78117 2.30436 1.90726 2.26611 2.01451 2.19444C2.12176 2.12278 2.20535 2.02093 2.25471 1.90176C2.30407 1.78259 2.31699 1.65145 2.29182 1.52494C2.26666 1.39843 2.20455 1.28223 2.11334 1.19102C2.02213 1.09981 1.90592 1.0377 1.77941 1.01253C1.6529 0.987367 1.52177 1.00028 1.4026 1.04964C1.28343 1.09901 1.18157 1.1826 1.10991 1.28985C1.03825 1.3971 1 1.52319 1 1.65218C1 1.82515 1.06871 1.99103 1.19102 2.11334C1.31333 2.23564 1.47921 2.30436 1.65218 2.30436Z" fill="#212721" stroke="#E7503D"/>
+</svg>

package/lib/cjs/library/assets/svg/unCheckbox.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="14" height="14" rx="1.5" fill="white" stroke="#E7503D"/>
+</svg>

package/lib/cjs/library/assets/svg/uncheckRadio.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.5" stroke="#212721"/>
+</svg>

package/lib/cjs/reportWebVitals.js

@@ -1,4 +1,4 @@
 "use strict";
 // import {ReportHandler} from 'web-vitals';
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=reportWebVitals.js.map
+//# sourceMappingURL=reportWebVitals.js.map

package/lib/cjs/setupTests.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 require("@testing-library/jest-dom");
-//# sourceMappingURL=setupTests.js.map
+//# sourceMappingURL=setupTests.js.map

package/lib/esm/App.js

@@ -1,37 +1,15 @@
-import React from "react";
-import logo from "./logo.svg";
-import "./App.css";
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
 function App() {
-  return React.createElement(
-    "div",
-    { className: "App" },
-    React.createElement(
-      "header",
-      { className: "App-header" },
-      React.createElement("img", {
-        src: logo,
-        className: "App-logo",
-        alt: "logo",
-      }),
-      React.createElement(
-        "p",
-        null,
-        "Edit ",
-        React.createElement("code", null, "src/App.tsx"),
-        " and save to reload.",
-      ),
-      React.createElement(
-        "a",
-        {
-          className: "App-link",
-          href: "https://reactjs.org",
-          target: "_blank",
-          rel: "noopener noreferrer",
-        },
-        "Learn React",
-      ),
-    ),
-  );
+    return (React.createElement("div", { className: "App" },
+        React.createElement("header", { className: "App-header" },
+            React.createElement("img", { src: logo, className: "App-logo", alt: "logo" }),
+            React.createElement("p", null,
+                "Edit ",
+                React.createElement("code", null, "src/App.tsx"),
+                " and save to reload."),
+            React.createElement("a", { className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, "Learn React"))));
 }
 export default App;
-//# sourceMappingURL=App.js.map
+//# sourceMappingURL=App.js.map

package/lib/esm/App.test.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import App from "./App";
-test("renders learn react link", () => {
-  render(React.createElement(App, null));
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+test('renders learn react link', () => {
+    render(React.createElement(App, null));
+    const linkElement = screen.getByText(/learn react/i);
+    expect(linkElement).toBeInTheDocument();
 });
-//# sourceMappingURL=App.test.js.map
+//# sourceMappingURL=App.test.js.map

package/lib/esm/core-components/atoms/buttons/button.stories.js

@@ -1,31 +1,31 @@
-import React from "react";
-import { Button } from "./buttons.component";
+import React from 'react';
+import { Button } from './buttons.component';
 // import {Title, Component, Source, Canvas, ArgTypes} from '@storybook/blocks';
-import { fn } from "@storybook/test";
+import { fn } from '@storybook/test';
 const meta = {
-  title: "Design System/Atoms/Button",
-  component: Button,
-  tags: ["autodocs"],
-  args: {
-    className: "w-40",
-  },
-  parameters: {
-    componentSubtitle: `import { Button } from 'react-restyle-components'`,
-  },
+    title: 'Design System/Atoms/Button',
+    component: Button,
+    tags: ['autodocs'],
+    args: {
+        className: 'w-40',
+    },
+    parameters: {
+        componentSubtitle: `import { Button } from 'react-restyle-components'`,
+    },
 };
 export default meta;
 export const Primary = {
-  // parameters: {
-  //   backgrounds: {
-  //     default: 'dark',
-  //   },
-  // },
-  args: {
-    disable: false,
-    type: "solid" || "outline",
-    children: React.createElement("span", null, "Primary"),
-    onClick: fn(),
-  },
+    // parameters: {
+    //   backgrounds: {
+    //     default: 'dark',
+    //   },
+    // },
+    args: {
+        disable: false,
+        type: 'solid' || 'outline',
+        children: React.createElement("span", null, "Primary"),
+        onClick: fn(),
+    },
 };
 // export const Disable: Story = {
 //   args: {
@@ -34,4 +34,4 @@ export const Primary = {
 //     disable: true,
 //   },
 // };
-//# sourceMappingURL=button.stories.js.map
+//# sourceMappingURL=button.stories.js.map

package/lib/esm/core-components/atoms/buttons/buttons.component.js

@@ -1,24 +1,8 @@
-import React from "react";
-export const Button = ({
-  type = "solid",
-  className = "w-40",
-  disable = false,
-  onClick,
-  children,
-}) => {
-  const buttonColorClass =
-    type === "solid"
-      ? "text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white"
-      : "dark:text-white  text-black border border-gray-400 hover:shadow-lg";
-  return React.createElement(
-    "button",
-    {
-      "data-testid": "buttonElement",
-      disabled: disable,
-      className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disable ? "opacity-50" : "opacity-100"}`,
-      onClick: () => onClick(),
-    },
-    children,
-  );
+import React from 'react';
+export const Button = ({ type = 'solid', className = 'w-40', disable = false, onClick, children, }) => {
+    const buttonColorClass = type === 'solid'
+        ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
+        : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
+    return (React.createElement("button", { "data-testid": "buttonElement", disabled: disable, className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disable ? 'opacity-50' : 'opacity-100'}`, onClick: () => onClick() }, children));
 };
-//# sourceMappingURL=buttons.component.js.map
+//# sourceMappingURL=buttons.component.js.map

package/lib/esm/core-components/atoms/buttons/buttons.test.js

@@ -1,15 +1,9 @@
 /* eslint-disable testing-library/render-result-naming-convention */
-import React from "react";
-import { render } from "@core-utils";
-import { Button } from "./buttons.component";
-it("render Button correctly", () => {
-  const button = render(
-    React.createElement(
-      Button,
-      { className: "bg-gray-light w-40", onClick: () => jest.fn() },
-      "Permanent Address",
-    ),
-  );
-  expect(button).toMatchSnapshot();
+import React from 'react';
+import { render } from '@core-utils';
+import { Button } from './buttons.component';
+it('render Button correctly', () => {
+    const button = render(React.createElement(Button, { className: "bg-gray-light w-40", onClick: () => jest.fn() }, "Permanent Address"));
+    expect(button).toMatchSnapshot();
 });
-//# sourceMappingURL=buttons.test.js.map
+//# sourceMappingURL=buttons.test.js.map

package/lib/esm/core-components/atoms/check-box/checkBox.component.js

@@ -1,66 +1,20 @@
-import React, { useState } from "react";
-import { UnCheckbox, CheckedBox } from "../../../library/assets/svg";
-import { InputWrapper } from "../form/form.component";
-export const CheckBox = ({
-  title = "Banks",
-  data = [{ title: "SBI Bank", checked: false }],
-  className,
-  onChange,
-}) => {
-  const [list, setList] = useState(data);
-  const width = 20;
-  return React.createElement(
-    InputWrapper,
-    { label: title },
-    list === null || list === void 0
-      ? void 0
-      : list.map((item, index) =>
-          React.createElement(
-            "div",
-            {
-              className: `${className} flex flex-row  items-center `,
-              onClick: () => {
-                const result =
-                  list === null || list === void 0
-                    ? void 0
-                    : list.map((e, i) => {
-                        if (i == index)
-                          return Object.assign(Object.assign({}, e), {
-                            checked: !item.checked,
-                          });
-                        else return Object.assign({}, e);
-                      });
-                setList(result);
-                onChange(
-                  result === null || result === void 0
-                    ? void 0
-                    : result.filter((item) => item.checked),
-                );
-              },
-              key: index,
-            },
-            React.createElement(
-              "div",
-              { className: "flex mt-1" },
-              item.checked
-                ? React.createElement(CheckedBox, {
-                    width: width,
-                    height: width,
-                    fill: "#E7503D",
-                    stroke: "E7503D",
-                  })
-                : React.createElement(UnCheckbox, {
-                    width: width,
-                    height: width,
-                  }),
-            ),
-            React.createElement(
-              "span",
-              null,
-              item === null || item === void 0 ? void 0 : item.title,
-            ),
-          ),
-        ),
-  );
+import React, { useState } from 'react';
+import { UnCheckbox, CheckedBox } from '../../../library/assets/svg';
+import { InputWrapper } from '../form/form.component';
+export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked: false }], className, onChange, }) => {
+    const [list, setList] = useState(data);
+    const width = 20;
+    return (React.createElement(InputWrapper, { label: title }, list === null || list === void 0 ? void 0 : list.map((item, index) => (React.createElement("div", { className: `${className} flex flex-row  items-center `, onClick: () => {
+            const result = list === null || list === void 0 ? void 0 : list.map((e, i) => {
+                if (i == index)
+                    return Object.assign(Object.assign({}, e), { checked: !item.checked });
+                else
+                    return Object.assign({}, e);
+            });
+            setList(result);
+            onChange(result === null || result === void 0 ? void 0 : result.filter((item) => item.checked));
+        }, key: index },
+        React.createElement("div", { className: "flex mt-1" }, item.checked ? (React.createElement(CheckedBox, { width: width, height: width, fill: "#E7503D", stroke: "E7503D" })) : (React.createElement(UnCheckbox, { width: width, height: width }))),
+        React.createElement("span", null, item === null || item === void 0 ? void 0 : item.title))))));
 };
-//# sourceMappingURL=checkBox.component.js.map
+//# sourceMappingURL=checkBox.component.js.map

package/lib/esm/core-components/atoms/check-box/checkBox.stories.js

@@ -1,24 +1,24 @@
-import { CheckBox } from "./checkBox.component";
+import { CheckBox } from './checkBox.component';
 const meta = {
-  title: "Design System/Atoms/CheckBox",
-  component: CheckBox,
-  tags: ["autodocs"],
-  parameters: {
-    componentSubtitle: `import { CheckBox } from 'react-restyle-components'`,
-  },
+    title: 'Design System/Atoms/CheckBox',
+    component: CheckBox,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { CheckBox } from 'react-restyle-components'`,
+    },
 };
 export default meta;
 export const Primary1 = {
-  args: {
-    title: "Banks",
-    data: [
-      { title: "SBI Bank", checked: false },
-      { title: "ICICI Bank", checked: false },
-    ],
-    disable: false,
-    onChange: (item) => {
-      console.log({ item });
+    args: {
+        title: 'Banks',
+        data: [
+            { title: 'SBI Bank', checked: false },
+            { title: 'ICICI Bank', checked: false },
+        ],
+        disable: false,
+        onChange: (item) => {
+            console.log({ item });
+        },
     },
-  },
 };
-//# sourceMappingURL=checkBox.stories.js.map
+//# sourceMappingURL=checkBox.stories.js.map

package/lib/esm/core-components/atoms/check-box/checkBox.test.js

@@ -1,15 +1,9 @@
 /* eslint-disable testing-library/render-result-naming-convention */
-import React from "react";
-import { render } from "@core-utils";
-import { CheckBox } from "./checkBox.component";
-it("render CheckBox correctly", () => {
-  const checkbox = render(
-    React.createElement(CheckBox, {
-      title: "Title",
-      data: [],
-      onChange: () => jest.fn(),
-    }),
-  );
-  expect(checkbox).toMatchSnapshot();
+import React from 'react';
+import { render } from '@core-utils';
+import { CheckBox } from './checkBox.component';
+it('render CheckBox correctly', () => {
+    const checkbox = render(React.createElement(CheckBox, { title: "Title", data: [], onChange: () => jest.fn() }));
+    expect(checkbox).toMatchSnapshot();
 });
-//# sourceMappingURL=checkBox.test.js.map
+//# sourceMappingURL=checkBox.test.js.map

package/lib/esm/core-components/atoms/date-picker/date-picker.component.js

@@ -1,55 +1,22 @@
-import React, { useState, forwardRef } from "react";
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import { DatePickerSvg } from "../../../library/assets/svg";
-import dayjs from "dayjs";
-import { InputWrapper } from "../form/form.component";
-export const DatePickerComp = ({
-  title = "Title",
-  className,
-  disable,
-  value,
-  showFormat = "yyyy-MM-dd",
-  placeholder = "Select Date",
-}) => {
-  const [pickedDate, setPickedDate] = useState(value && dayjs(value).toDate());
-  const CustomInput = forwardRef((props, ref) => {
-    return React.createElement(
-      "div",
-      {
-        onClick: !disable && props.onClick,
-        ref: ref,
-        className:
-          " border-gray-light place-items-center  border rounded-md px-2 flex ",
-      },
-      React.createElement(
-        "label",
-        {
-          className: "mr-3 font-nunitoSansRegular text-primaryCharcoal text-lg",
-        },
-        props.value || props.placeholder,
-      ),
-      React.createElement(DatePickerSvg, { width: 15, height: 15 }),
-    );
-  });
-  CustomInput.displayName = "CustomInput";
-  const handleChanges = (date) => {
-    setPickedDate(date);
-  };
-  return React.createElement(
-    InputWrapper,
-    { label: title },
-    React.createElement(
-      "div",
-      { className: `${className} flex zIndex-999` },
-      React.createElement(DatePicker, {
-        selected: pickedDate || new Date(),
-        dateFormat: showFormat,
-        placeholder: placeholder,
-        onChange: handleChanges,
-        customInput: React.createElement(CustomInput, null),
-      }),
-    ),
-  );
+import React, { useState, forwardRef } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { DatePickerSvg } from '../../../library/assets/svg';
+import dayjs from 'dayjs';
+import { InputWrapper } from '../form/form.component';
+export const DatePickerComp = ({ title = 'Title', className, disable, value, showFormat = 'yyyy-MM-dd', placeholder = 'Select Date', }) => {
+    const [pickedDate, setPickedDate] = useState(value && dayjs(value).toDate());
+    const CustomInput = forwardRef((props, ref) => {
+        return (React.createElement("div", { onClick: !disable && props.onClick, ref: ref, className: " border-gray-light place-items-center  border rounded-md px-2 flex " },
+            React.createElement("label", { className: "mr-3 font-nunitoSansRegular text-primaryCharcoal text-lg" }, props.value || props.placeholder),
+            React.createElement(DatePickerSvg, { width: 15, height: 15 })));
+    });
+    CustomInput.displayName = 'CustomInput';
+    const handleChanges = (date) => {
+        setPickedDate(date);
+    };
+    return (React.createElement(InputWrapper, { label: title },
+        React.createElement("div", { className: `${className} flex zIndex-999` },
+            React.createElement(DatePicker, { selected: pickedDate || new Date(), dateFormat: showFormat, placeholder: placeholder, onChange: handleChanges, customInput: React.createElement(CustomInput, null) }))));
 };
-//# sourceMappingURL=date-picker.component.js.map
+//# sourceMappingURL=date-picker.component.js.map

package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js

@@ -1,19 +1,19 @@
-import dayjs from "dayjs";
-import { DatePickerComp } from "./date-picker.component";
+import dayjs from 'dayjs';
+import { DatePickerComp } from './date-picker.component';
 const meta = {
-  title: "Design System/Atoms/DatePicker",
-  component: DatePickerComp,
-  tags: ["autodocs"],
-  parameters: {
-    componentSubtitle: `import { DatePickerComp } from 'react-restyle-components'`,
-  },
+    title: 'Design System/Atoms/DatePicker',
+    component: DatePickerComp,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { DatePickerComp } from 'react-restyle-components'`,
+    },
 };
 export default meta;
 export const Primary = {
-  args: {
-    title: "Date",
-    value: dayjs().format("YYYY-MM-DD"),
-    showFormat: "dd-MM-yyyy",
-  },
+    args: {
+        title: 'Date',
+        value: dayjs().format('YYYY-MM-DD'),
+        showFormat: 'dd-MM-yyyy',
+    },
 };
-//# sourceMappingURL=date-picker.stories.js.map
+//# sourceMappingURL=date-picker.stories.js.map

package/lib/esm/core-components/atoms/date-picker/date-picker.test.js

@@ -1,17 +1,10 @@
 /* eslint-disable testing-library/render-result-naming-convention */
-import React from "react";
-import { render } from "@core-utils";
-import { DatePickerComp } from "./date-picker.component";
-import dayjs from "dayjs";
-it("render DatePicker correctly", () => {
-  const datepicker = render(
-    React.createElement(DatePickerComp, {
-      title: "Date",
-      className: "mt-6",
-      value: dayjs().format("YYYY-MM-DD"),
-      showFormat: "dd-MM-yyyy",
-    }),
-  );
-  expect(datepicker).toMatchSnapshot();
+import React from 'react';
+import { render } from '@core-utils';
+import { DatePickerComp } from './date-picker.component';
+import dayjs from 'dayjs';
+it('render DatePicker correctly', () => {
+    const datepicker = render(React.createElement(DatePickerComp, { title: "Date", className: "mt-6", value: dayjs().format('YYYY-MM-DD'), showFormat: 'dd-MM-yyyy' }));
+    expect(datepicker).toMatchSnapshot();
 });
-//# sourceMappingURL=date-picker.test.js.map
+//# sourceMappingURL=date-picker.test.js.map