ekm-ui 0.3.74 → 0.3.78

package/src/table-header/table-header.tsx

@@ -1,138 +1,157 @@
 //@ts-nocheck
-import { useState, useEffect, useRef, useCallback } from 'react'
-import PropTypes from 'prop-types'
-import { Checkbox } from '../checkbox'
-import { ToolTip } from '../tooltip/tooltip'
-import _, { isEqual } from 'lodash'
-import { HiOutlineChevronUp, HiOutlineChevronDown, HiExclamationCircle } from 'react-icons/hi'
+import { isEqual } from "lodash";
+import PropTypes from "prop-types";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  HiExclamationCircle,
+  HiOutlineChevronDown,
+  HiOutlineChevronUp,
+} from "react-icons/hi";
+import { Checkbox } from "../checkbox";
+import { ToolTip } from "../tooltip/tooltip";
 
 function useDebounceEffect(effect, delay, deps) {
-  const renderRef = useRef(0)
-  const handlerRef = useRef(null)
-  const callback = useCallback(effect, deps)
+  const renderRef = useRef(0);
+  const handlerRef = useRef(null);
+  const callback = useCallback(effect, deps);
 
   useEffect(() => {
     if (renderRef.current !== 1) {
-      renderRef.current += 1 // Ignore running on first render
+      renderRef.current += 1; // Ignore running on first render
     } else {
       handlerRef.current = setTimeout(() => {
-        callback()
-      }, delay)
+        callback();
+      }, delay);
     }
     return () => {
-      clearTimeout(handlerRef.current)
-    }
-  }, [callback, delay])
+      clearTimeout(handlerRef.current);
+    };
+  }, [callback, delay]);
 }
 // This is used to perform deep object comparisson instead
 // of using the useEffect method.
 function useDeepEffect(effectFunc, deps) {
-  const isFirst = useRef(true)
-  const prevDeps = useRef(deps)
+  const isFirst = useRef(true);
+  const prevDeps = useRef(deps);
 
   useEffect(() => {
-    const isSame = prevDeps.current.every((obj, index) => isEqual(obj, deps[index]))
-    if (isFirst.current || !isSame) effectFunc()
-    isFirst.current = false
-    prevDeps.current = deps
-  }, deps)
+    const isSame = prevDeps.current.every((obj, index) =>
+      isEqual(obj, deps[index])
+    );
+    if (isFirst.current || !isSame) effectFunc();
+    isFirst.current = false;
+    prevDeps.current = deps;
+  }, deps);
 }
 
 // This is used to represent a single header and should be
 // used only with the Table header.
 function TableHeaderItem({ ...props }) {
-  const HeaderSortModes = { ASC: 'ASC', DSC: 'DSC', OFF: 'OFF' }
-  const [sort, setSort] = useState(HeaderSortModes.OFF)
-  const [hitCount, setHitCount] = useState(0) // required for debounce
+  const HeaderSortModes = { ASC: "ASC", DSC: "DSC", OFF: "OFF" };
+  const [sort, setSort] = useState(HeaderSortModes.OFF);
+  const [hitCount, setHitCount] = useState(0); // required for debounce
 
-  const { title, layout, sortable, override, callback, tooltip } = props
+  const { title, layout, sortable, override, callback, tooltip } = props;
 
   const cycleSortMode = () => {
-    if (!sortable) return
-    let newSort = sort
+    if (!sortable) return;
+    let newSort = sort;
     switch (sort) {
       case HeaderSortModes.OFF:
-        newSort = HeaderSortModes.DSC
-        break
+        newSort = HeaderSortModes.DSC;
+        break;
       case HeaderSortModes.ASC:
-        newSort = HeaderSortModes.OFF
-        break
+        newSort = HeaderSortModes.OFF;
+        break;
       case HeaderSortModes.DSC:
-        newSort = HeaderSortModes.ASC
-        break
+        newSort = HeaderSortModes.ASC;
+        break;
       default:
-        break
+        break;
     }
     // Only update if mode changes.
     if (newSort !== sort) {
-      setSort(newSort)
-      callback({ title, sort: newSort })
+      setSort(newSort);
+      callback({ title, sort: newSort });
     }
-  }
+  };
 
   useDebounceEffect(
     () => {
       // Prevents triggering on first render
-      if (hitCount > 0) cycleSortMode()
+      if (hitCount > 0) cycleSortMode();
     },
     500,
-    [hitCount],
-  )
+    [hitCount]
+  );
 
   // This is used to force a sort state on the header via props.
   useDeepEffect(() => {
-    if (override == null) return
+    if (override == null) return;
 
     if (title !== override.title) {
       if (sort !== HeaderSortModes.OFF) {
-        setSort(HeaderSortModes.OFF)
+        setSort(HeaderSortModes.OFF);
       }
-      return
+      return;
     }
     if (title === override.title && sort !== override.sort) {
-      if (Object.values(HeaderSortModes).indexOf(override.sort) === -1) return
-      let newSort = override.sort
+      if (Object.values(HeaderSortModes).indexOf(override.sort) === -1) return;
+      let newSort = override.sort;
       switch (override.sort) {
         case HeaderSortModes.OFF:
-          newSort = HeaderSortModes.OFF
-          break
+          newSort = HeaderSortModes.OFF;
+          break;
         case HeaderSortModes.ASC:
-          newSort = HeaderSortModes.ASC
-          break
+          newSort = HeaderSortModes.ASC;
+          break;
         case HeaderSortModes.DSC:
-          newSort = HeaderSortModes.DSC
-          break
+          newSort = HeaderSortModes.DSC;
+          break;
         default:
-          break
+          break;
       }
       // Only update if mode changes.
       if (newSort !== sort) {
-        setSort(newSort)
+        setSort(newSort);
       }
     }
-  }, [override])
+  }, [override]);
 
   const renderCheveron = () => {
     return sort === HeaderSortModes.ASC ? (
-      <HiOutlineChevronUp className="mt-1 ml-2 " fontSize="20px" />
+      <HiOutlineChevronUp className="ml-2 mt-1 " fontSize="20px" />
     ) : (
-      <HiOutlineChevronDown className="mt-1 ml-2 " fontSize="20px" />
-    )
-  }
+      <HiOutlineChevronDown className="ml-2 mt-1 " fontSize="20px" />
+    );
+  };
 
   return (
-    <div className={`${layout} ${sortable ? 'cursor-pointer' : ''} ${tooltip != null ? ' d-flex align-items-center float-left' : ''} `}>
-      <span className="float-left mr-2" onClick={() => setHitCount(hitCount + 1)}>{title?.toUpperCase()}</span>
+    <div
+      className={`${layout} ${sortable ? "cursor-pointer" : ""} ${
+        tooltip != null ? " d-flex align-items-center float-left" : ""
+      } `}
+    >
+      <span
+        className="float-left mr-2"
+        onClick={() => setHitCount(hitCount + 1)}
+      >
+        {title?.toUpperCase()}
+      </span>
       {sortable && sort !== HeaderSortModes.OFF && renderCheveron()}
       {tooltip != null && (
-        <div className="mt-1 ml-2">
-          <ToolTip key={`tooltipName-${title}`} placement="bottom" content={tooltip}>
+        <div className="ml-2 mt-1">
+          <ToolTip
+            key={`tooltipName-${title}`}
+            placement="bottom"
+            content={tooltip}
+          >
             <HiExclamationCircle fontSize="20px" color="#555555" />
           </ToolTip>
         </div>
       )}
     </div>
-  )
+  );
 }
 
 TableHeaderItem.propTypes = {
@@ -145,56 +164,61 @@ TableHeaderItem.propTypes = {
   }),
   callback: PropTypes.func,
   tooltip: PropTypes.string,
-}
+};
 
 TableHeaderItem.defaultProps = {
-  layout: 'col-2 font-weight-bold',
+  layout: "col-2 font-weight-bold",
   sortable: false,
   override: null,
   tooltip: null,
-}
+};
 
 export function TableHeader({
   config,
   callback,
   forceCheckedState = false,
   checkboxCallback,
-  layout = 'form-row tableHeader--custom align-items-center d-none d-lg-flex',
+  layout = "form-row tableHeader--custom align-items-center d-none d-lg-flex",
   forceSort,
 }) {
-  const HeaderSortModes = { ASC: 'ASC', DSC: 'DSC', OFF: 'OFF' }
-  const [changeSortTo, setChangeSortTo] = useState(null)
-  const [checked, setChecked] = useState(forceCheckedState)
+  const HeaderSortModes = { ASC: "ASC", DSC: "DSC", OFF: "OFF" };
+  const [changeSortTo, setChangeSortTo] = useState(null);
+  const [checked, setChecked] = useState(forceCheckedState);
 
   const handleHeaderSort = (sortBy) => {
-    setChangeSortTo(sortBy)
-    callback(sortBy)
-  }
+    setChangeSortTo(sortBy);
+    callback(sortBy);
+  };
 
   const handleHeaderCheckbox = () => {
-    let status = !checked
-    setChecked(status)
-    checkboxCallback(status)
-  }
+    let status = !checked;
+    setChecked(status);
+    checkboxCallback(status);
+  };
 
   useDeepEffect(() => {
-    if (forceSort == null) return
-    if (forceSort.title == null || forceSort.sort == null) return
+    if (forceSort == null) return;
+    if (forceSort.title == null || forceSort.sort == null) return;
 
     if (Object.values(HeaderSortModes).indexOf(forceSort.sort) !== -1) {
-      setChangeSortTo({ title: forceSort.title, sort: forceSort.sort })
+      setChangeSortTo({ title: forceSort.title, sort: forceSort.sort });
     }
-  }, [forceSort])
+  }, [forceSort]);
 
   useEffect(() => {
-    setChecked(forceCheckedState)
-  }, [forceCheckedState])
+    setChecked(forceCheckedState);
+  }, [forceCheckedState]);
 
   return (
     <div className={layout}>
       {config.checkbox && (
         <div className={`col-1 font-weight-bold ${config.checkboxLayout}`}>
-          <Checkbox id="checkAll" className="custom-control-input mt-1" checked={checked} onChange={handleHeaderCheckbox} />
+          <Checkbox
+            id="checkAll"
+            className="custom-control-input mt-1"
+            checked={checked}
+            onChange={handleHeaderCheckbox}
+          />
         </div>
       )}
 
@@ -209,10 +233,10 @@ export function TableHeader({
             callback={handleHeaderSort}
             tooltip={val.tooltip}
           />
-        )
+        );
       })}
     </div>
-  )
+  );
 }
 
 TableHeader.propTypes = {
@@ -225,7 +249,7 @@ TableHeader.propTypes = {
         layout: PropTypes.string,
         sortable: PropTypes.bool,
         tooltip: PropTypes.string,
-      }),
+      })
     ).isRequired,
   }).isRequired,
   /** Optional setting the checkbox*/
@@ -245,6 +269,6 @@ TableHeader.propTypes = {
   callback: PropTypes.func.isRequired,
   /** Optional return call triggered when the optional header checkbox is clicked */
   checkboxCallback: PropTypes.func,
-}
+};
 
-TableHeader.displayName = 'TableHeader'
+TableHeader.displayName = "TableHeader";

package/src/table-result-block.tsx

@@ -1,15 +1,17 @@
 //@ts-nocheck
-import { Spinner, NoResultsBlock } from '.';
-import {PropTypes} from "prop-types";
-
-
+import { PropTypes } from "prop-types";
+import { NoResultsBlock, Spinner } from ".";
 
 export function TableResultBlock({ title, message, icon, children }) {
   return (
-    <NoResultsBlock icon={icon ? icon :<Spinner /> } title={title} text={message}>
+    <NoResultsBlock
+      icon={icon ? icon : <Spinner />}
+      title={title}
+      text={message}
+    >
       {children}
-      </NoResultsBlock>
-  )
+    </NoResultsBlock>
+  );
 }
 
 TableResultBlock.propTypes = {
@@ -19,8 +21,8 @@ TableResultBlock.propTypes = {
   message: PropTypes.string,
   /** true and the spinner will be shown use spinner or search icon */
   useSpinner: PropTypes.bool,
-  icon:PropTypes.node,
+  icon: PropTypes.node,
   children: PropTypes.node,
-}
+};
 
-TableResultBlock.displayName = "TableResultBlock"
+TableResultBlock.displayName = "TableResultBlock";

package/src/text-row.tsx

@@ -23,4 +23,4 @@ export function TextRow({ children, title, text, border, className }: Props) {
   );
 }
 
-TextRow.displayName = "TextRow"
+TextRow.displayName = "TextRow";

package/src/textarea.tsx

@@ -1,27 +1,30 @@
 //@ts-nocheck
-import { forwardRef } from 'react'
-import { variantProps } from 'classname-variants/react'
-import PropTypes from 'prop-types'
+import { variantProps } from "classname-variants/react";
+import PropTypes from "prop-types";
+import { forwardRef } from "react";
 
 const fieldProps = variantProps({
-  base: 'block p-2.5 w-full text-sm rounded-lg border ',
+  base: "block p-2.5 w-full text-sm rounded-lg border ",
   variants: {
     color: {
       failure:
-        'text-red-700 bg-red-50 border-red-500 focus:ring-red-500 focus:border-red-500 dark:bg-red-700 dark:border-red-600 dark:placeholder-red-700 dark:text-red-900 dark:focus:ring-red-500 dark:focus:border-red-500',
-      gray: 'text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
+        "text-red-700 bg-red-50 border-red-500 focus:ring-red-500 focus:border-red-500 dark:bg-red-700 dark:border-red-600 dark:placeholder-red-700 dark:text-red-900 dark:focus:ring-red-500 dark:focus:border-red-500",
+      gray: "text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
     },
   },
   defaultVariants: {
-    color: 'gray',
+    color: "gray",
   },
-})
+});
 
 export const TextArea = forwardRef(function TextArea(props, ref) {
   return (
     <>
       {props.label && (
-        <label htmlFor={props.id} className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+        <label
+          htmlFor={props.id}
+          className="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+        >
           {props.label}
         </label>
       )}
@@ -30,24 +33,24 @@ export const TextArea = forwardRef(function TextArea(props, ref) {
         id={props.id}
         rows={props.rows || 3}
         {...fieldProps(props)}
-        placeholder={props.placeholder || 'Enter your text here...'}
+        placeholder={props.placeholder || "Enter your text here..."}
         {...props}
       ></textarea>
     </>
-  )
-})
+  );
+});
 
 TextArea.propTypes = {
-    /** Unique id for the TextArea Component */
-    id: PropTypes.string.isRequired,
-    /** Optional Label to acompany TextArea Component */
-    label: PropTypes.string,
-    /** Optional placeholder text for TextArea Component */
-    placeholder: PropTypes.string,
-    /** Optional number of rows for the TextArea, this defaults to 3 rows if none provided */
-    rows: PropTypes.number,
-    /** Optional color defaults to gray and shpuld be set to failure if it fails validation*/
-    color: PropTypes.oneOf(['gray', 'failure']),
-}
+  /** Unique id for the TextArea Component */
+  id: PropTypes.string.isRequired,
+  /** Optional Label to acompany TextArea Component */
+  label: PropTypes.string,
+  /** Optional placeholder text for TextArea Component */
+  placeholder: PropTypes.string,
+  /** Optional number of rows for the TextArea, this defaults to 3 rows if none provided */
+  rows: PropTypes.number,
+  /** Optional color defaults to gray and shpuld be set to failure if it fails validation*/
+  color: PropTypes.oneOf(["gray", "failure"]),
+};
 
-TextArea.displayName = "TextArea";
+TextArea.displayName = "TextArea";

package/src/textinput.tsx

@@ -1,7 +1,7 @@
 //@ts-nocheck
-import { forwardRef } from "react";
 import { variantProps } from "classname-variants/react";
 import PropTypes from "prop-types";
+import { forwardRef } from "react";
 
 const textInputProps = variantProps({
   base: "block p-2.5 w-full text-sm border text-sm rounded-lg",
@@ -52,12 +52,13 @@ const addonProps = variantProps({
   },
   defaultVariants: {
     color: "gray",
-    position: "left"
+    position: "left",
   },
 });
 
 export const TextInput = forwardRef(function TextInput(props, ref) {
-  const { color, disabled, type, placeholder, id, icon, addon, position } = props;
+  const { color, disabled, type, placeholder, id, icon, addon, position } =
+    props;
   if (icon) {
     return (
       <div className={props.className && props.className}>
@@ -65,29 +66,31 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
           <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3.5">
             {icon}
           </div>
-            <input
-              {...iconProps({ color })}
-              type={type ? type : "text"}
-              id={id}
-              ref={ref}
-              placeholder={placeholder || "Enter your text here..."}
-              name={props.name}
-              disabled={disabled}
-              onChange={props.onChange}
-              value={props.value}
-              />
+          <input
+            {...iconProps({ color })}
+            type={type ? type : "text"}
+            id={id}
+            ref={ref}
+            placeholder={placeholder || "Enter your text here..."}
+            name={props.name}
+            disabled={disabled}
+            onChange={props.onChange}
+            value={props.value}
+          />
         </div>
       </div>
     );
   } else if (addon) {
     return (
       <div className={props.className && props.className}>
-        <div className={disabled ? "flex cursor-not-allowed opacity-50" : "flex"}>
-        {position == "left" &&
-          (<span className="rounded-e-0 inline-flex items-center rounded-l-lg border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
-            {addon}
-          </span>)
-        }
+        <div
+          className={disabled ? "flex cursor-not-allowed opacity-50" : "flex"}
+        >
+          {position == "left" && (
+            <span className="rounded-e-0 inline-flex items-center rounded-l-lg border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
+              {addon}
+            </span>
+          )}
           <input
             {...addonProps({ color, position })}
             type={type ? type : "text"}
@@ -97,12 +100,12 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
             name={props.name}
             onChange={props.onChange}
             value={props.value}
-            />
-          {position == "right" && 
-          (<span className="rounded-e-0 inline-flex items-center rounded-r-lg border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
-            {addon}
-          </span>)
-        }
+          />
+          {position == "right" && (
+            <span className="rounded-e-0 inline-flex items-center rounded-r-lg border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
+              {addon}
+            </span>
+          )}
         </div>
       </div>
     );
@@ -113,7 +116,7 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
           className={
             disabled ? "relative cursor-not-allowed opacity-50" : "relative"
           }
-          >
+        >
           <input
             type={type ? type : "text"}
             id={id}
@@ -123,7 +126,7 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
             onChange={props.onChange}
             value={props.value}
             {...textInputProps({ color })}
-            />
+          />
         </div>
       </div>
     );

package/src/toast/index.tsx

@@ -1,3 +1,5 @@
+import { Transition } from "@headlessui/react";
+import clsx from "clsx";
 import {
   Fragment,
   createContext,
@@ -6,13 +8,11 @@ import {
   useEffect,
   useState,
 } from "react";
-import { Transition } from "@headlessui/react";
-import clsx from "clsx";
 import {
   HiCheck,
-  HiXCircle,
-  HiInformationCircle,
   HiExclamationTriangle,
+  HiInformationCircle,
+  HiXCircle,
 } from "react-icons/hi2";
 
 export const ToastContext = createContext<

package/src/toggleswitch.tsx

@@ -1,6 +1,6 @@
 //@ts-nocheck
-import { forwardRef } from "react";
 import PropTypes from "prop-types";
+import { forwardRef } from "react";
 
 export const ToggleSwitch = forwardRef(function ToggleSwitch(props, ref) {
   return (
@@ -17,6 +17,8 @@ export const ToggleSwitch = forwardRef(function ToggleSwitch(props, ref) {
             className={`peer sr-only`}
             onChange={props.onChange}
             name={props.name}
+            checked={props.checked}
+            disabled={props.disabled}
             />
           <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700" />
           {props.label && (

package/src/tooltip/tooltip.tsx

@@ -1,6 +1,6 @@
 //@ts-nocheck
-import { useState, useEffect, useRef } from "react";
 import clsx from "clsx";
+import { useEffect, useRef } from "react";
 
 export function ToolTip({ children, content, tooltopPos, width }) {
   const tooltipRef = useRef();

package/src/video-dashboard-notification.tsx

@@ -1,5 +1,3 @@
-import clsx from "clsx";
-import { Card } from "flowbite-react";
 import { HiPlayCircle, HiXMark } from "react-icons/hi2";
 
 type Props = {

package/src/video-modal.tsx

@@ -1,9 +1,6 @@
-import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import {
-  ExclamationTriangleIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { Fragment } from "react";
 
 type Props = {
   onClose: () => void;

package/dist/chunk-25FJ277C.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/video-dashboard-notification.tsx"],"names":["HiPlayCircle","HiXMark","jsx","jsxs","VideoDashboardNotification","title","text","onClose","children","imgURL"],"mappings":"AAEA,OAAS,gBAAAA,EAAc,WAAAC,MAAe,kBAuB9B,cAAAC,EAEF,QAAAC,MAFE,oBAbD,SAASC,EAA2B,CACzC,MAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAC,EACA,OAAAC,CACF,EAAU,CACR,OACEN,EAAC,OAAI,UAAU,sJACb,UAAAD,EAAC,OACC,QAASK,EACT,UAAU,yGAEV,SAAAL,EAACD,EAAA,CAAQ,UAAU,2CAA2C,EAChE,EACAE,EAAC,OAAI,UAAU,yBACb,UAAAD,EAAC,OACC,IAAKO,EACL,IAAI,GACJ,UAAU,6FACZ,EACAP,EAACF,EAAA,CAAa,UAAU,6FAA6F,GACvH,EACAE,EAAC,OAAI,UAAU,+BACb,SAAAC,EAAC,OAAI,UAAU,MACb,UAAAD,EAAC,KAAE,UAAU,6CAA8C,SAAAG,EAAM,EACjEH,EAAC,KAAE,UAAU,wCAAyC,SAAAI,EAAK,EAC1DE,GACH,EACF,GACF,CAEJ","sourcesContent":["import clsx from \"clsx\";\nimport { Card } from \"flowbite-react\";\nimport { HiPlayCircle, HiXMark } from \"react-icons/hi2\";\n\ntype Props = {\n  onClose: () => void;\n  title: string;\n  text: string;\n  children: JSX.Element;\n  imgURL: string;\n};\n\nexport function VideoDashboardNotification({\n  title,\n  text,\n  onClose,\n  children,\n  imgURL,\n}: Props) {\n  return (\n    <div className=\"relative flex flex-col gap-4 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:flex-row\">\n      <div\n        onClick={onClose}\n        className=\"absolute right-2 top-2 cursor-pointer rounded p-1 transition hover:bg-gray-200 hover:dark:bg-gray-600 \"\n      >\n        <HiXMark className=\"h-6 w-6 text-gray-400 dark:text-gray-300\" />\n      </div>\n      <div className=\"relative flex-shrink-0\">\n        <img\n          src={imgURL}\n          alt=\"\"\n          className=\"h-60 w-full border border-gray-200 object-cover object-center transition sm:h-full sm:w-80\"\n        />\n        <HiPlayCircle className=\"absolute left-1/2 top-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2 transform text-white\" />\n      </div>\n      <div className=\"flex flex-col justify-center\">\n        <div className=\"p-4\">\n          <p className=\"mb-1 text-lg font-semibold dark:text-white\">{title}</p>\n          <p className=\"mb-4 text-gray-500 dark:text-gray-400\">{text}</p>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-2IL2LP47.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/textarea.tsx"],"names":["import_prop_types","forwardRef","variantProps","Fragment","jsx","jsxs","fieldProps","TextArea","props","ref","__spreadValues","__spreadProps","PropTypes"],"mappings":"2FAGA,IAAAA,EAAsB,OAFtB,OAAS,cAAAC,MAAkB,QAC3B,OAAS,gBAAAC,MAAoB,2BAmBzB,mBAAAC,EAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAhBJ,IAAMC,EAAaJ,EAAa,CAC9B,KAAM,gDACN,SAAU,CACR,MAAO,CACL,QACE,iNACF,KAAM,wNACR,CACF,EACA,gBAAiB,CACf,MAAO,MACT,CACF,CAAC,EAEYK,EAAWN,EAAW,SAAkBO,EAAOC,EAAK,CAC/D,OACEJ,EAAAF,EAAA,CACG,UAAAK,EAAM,OACLJ,EAAC,SAAM,QAASI,EAAM,GAAI,UAAU,+DACjC,SAAAA,EAAM,MACT,EAEFJ,EAAC,WAAAM,EAAAC,EAAAD,EAAA,CACC,IAAKD,EACL,GAAID,EAAM,GACV,KAAMA,EAAM,MAAQ,GAChBF,EAAWE,CAAK,GAJrB,CAKC,YAAaA,EAAM,aAAe,4BAC9BA,EACL,GACH,CAEJ,CAAC,EAEDD,EAAS,UAAY,CAEjB,GAAI,EAAAK,QAAU,OAAO,WAErB,MAAO,EAAAA,QAAU,OAEjB,YAAa,EAAAA,QAAU,OAEvB,KAAM,EAAAA,QAAU,OAEhB,MAAO,EAAAA,QAAU,MAAM,CAAC,OAAQ,SAAS,CAAC,CAC9C,EAEAL,EAAS,YAAc","sourcesContent":["//@ts-nocheck\nimport { forwardRef } from 'react'\nimport { variantProps } from 'classname-variants/react'\nimport PropTypes from 'prop-types'\n\nconst fieldProps = variantProps({\n  base: 'block p-2.5 w-full text-sm rounded-lg border ',\n  variants: {\n    color: {\n      failure:\n        'text-red-700 bg-red-50 border-red-500 focus:ring-red-500 focus:border-red-500 dark:bg-red-700 dark:border-red-600 dark:placeholder-red-700 dark:text-red-900 dark:focus:ring-red-500 dark:focus:border-red-500',\n      gray: 'text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',\n    },\n  },\n  defaultVariants: {\n    color: 'gray',\n  },\n})\n\nexport const TextArea = forwardRef(function TextArea(props, ref) {\n  return (\n    <>\n      {props.label && (\n        <label htmlFor={props.id} className=\"block mb-2 text-sm font-medium text-gray-900 dark:text-white\">\n          {props.label}\n        </label>\n      )}\n      <textarea\n        ref={ref}\n        id={props.id}\n        rows={props.rows || 3}\n        {...fieldProps(props)}\n        placeholder={props.placeholder || 'Enter your text here...'}\n        {...props}\n      ></textarea>\n    </>\n  )\n})\n\nTextArea.propTypes = {\n    /** Unique id for the TextArea Component */\n    id: PropTypes.string.isRequired,\n    /** Optional Label to acompany TextArea Component */\n    label: PropTypes.string,\n    /** Optional placeholder text for TextArea Component */\n    placeholder: PropTypes.string,\n    /** Optional number of rows for the TextArea, this defaults to 3 rows if none provided */\n    rows: PropTypes.number,\n    /** Optional color defaults to gray and shpuld be set to failure if it fails validation*/\n    color: PropTypes.oneOf(['gray', 'failure']),\n}\n\nTextArea.displayName = \"TextArea\";"]}