@feminab/box-ui 0.1.0 → 0.1.2

package/dist/box-ui.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"box-ui.cjs.production.min.js","sources":["../src/Badge.tsx","../src/Button.tsx","../src/Typography.tsx","../src/TextInput.tsx","../src/hooks/useIconClassName.tsx","../src/Nav/SubNavItem.tsx","../src/Nav/NavItem.tsx","../src/hooks/useIconProps.tsx","../src/data/images/index.tsx","../src/Nav/SideNav.tsx","../src/data/countries.tsx","../src/data/navItems.tsx","../src/data/options.tsx","../src/ButtonGroup.tsx","../src/ColorBox.tsx","../src/Nav/MobileNav.tsx","../src/Paginate.tsx","../src/Select.tsx","../src/data/colors.tsx","../src/data/prices.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { BadgeProps, BadgeSize, BadgeVariant } from \"./@interfaces\";\nimport classNames from \"classnames\";\n\nconst BadgeSizeClasses: Record<BadgeSize, string> = {\n  sm: \"badge-sm\",\n  md: \"badge-md\",\n  lg: \"badge-lg\",\n};\n\nconst BadgeVariantClasses: Record<BadgeVariant, string> = {\n  gray: \"badge-gray\",\n  primary: \"badge-primary\",\n  warning: \"badge-warning\",\n  error: \"badge-error\",\n  success: \"badge-success\",\n};\n\nexport const Badge: FC<BadgeProps> = ({\n  className,\n  children,\n  LeadingIcon,\n  TrailingIcon,\n  variant,\n  size,\n}) => {\n  const badgeVariantClassName = BadgeVariantClasses[variant];\n  const badgeSizeClassName = BadgeSizeClasses[size];\n\n  return (\n    <div\n      className={classNames(\n        \"badge-base\",\n        badgeSizeClassName,\n        badgeVariantClassName,\n        className\n      )}\n    >\n      {LeadingIcon && <span className=\"mr-1.5\">{LeadingIcon}</span>}\n      {children}\n      {TrailingIcon && <span className=\"mr-1.5\">{TrailingIcon}</span>}\n    </div>\n  );\n};\n","import React, { ReactElement, cloneElement, isValidElement } from \"react\";\nimport {\n  ButtonProps,\n  ButtonVariant,\n  ButtonSize,\n  ButtonState,\n} from \"./@interfaces\";\nimport classNames from \"classnames\";\n\nconst buttonVariantClasses: Record<\n  ButtonVariant,\n  Record<ButtonState, string>\n> = {\n  primary: {\n    default: \"btn-primary\",\n    hover: \"btn-primary-hover\",\n    focus: \"btn-primary-focus shadow-grayDark\",\n    disabled: \"btn-primary-disabled\",\n  },\n  secondary: {\n    default: \"btn-secondary\",\n    hover: \"btn-secondary-hover\",\n    focus: \"btn-secondary-focus shadow-grayDark\",\n    disabled: \"btn-secondary-disabled\",\n  },\n  secondaryGray: {\n    default: \"btn-secondaryGray\",\n    hover: \"btn-secondaryGray-hover\",\n    focus: \"btn-secondaryGray-focus shadow-grayDark\",\n    disabled: \"btn-secondaryGray-disabled\",\n  },\n  tertiary: {\n    default: \"btn-tertiary\",\n    hover: \"btn-tertiary-hover\",\n    focus: \"btn-tertiary-focus shadow-grayDark\",\n    disabled: \"btn-tertiary-disabled\",\n  },\n  tertiaryGray: {\n    default: \"btn-tertiaryGray\",\n    hover: \"btn-tertiaryGray-hover\",\n    focus: \"btn-tertiaryGray-focus shadow-grayDark\",\n    disabled: \"btn-tertiaryGray-disabled\",\n  },\n};\n\nconst buttonSizeClasses: Record<ButtonSize, string> = {\n  sm: \"btn-sm\",\n  md: \"btn-md\",\n  lg: \"btn-lg\",\n  xl: \"btn-xl\",\n  \"2xl\": \"btn-2xl\",\n};\n\nconst buttonIconSizeClasses: Record<ButtonSize, string> = {\n  sm: \"btn-icon-sm\",\n  md: \"btn-icon-md\",\n  lg: \"btn-icon-lg\",\n  xl: \"btn-icon-xl\",\n  \"2xl\": \"btn-icon-2xl\",\n};\n\nexport const Button = ({\n  children,\n  className,\n  variant = \"primary\",\n  size = \"md\",\n  disabled,\n  LeadingIcon,\n  TrailingIcon,\n  IconOnly,\n  ...buttonProps\n}: ButtonProps) => {\n  const buttonVariantClassName = buttonVariantClasses[variant];\n  const buttonIconSizeClassName = buttonIconSizeClasses[size];\n\n  const setIconSize = (icon: ReactElement, iconSize: number) => {\n    if (isValidElement<{ size?: number }>(icon) && \"size\" in icon.props) {\n      return cloneElement(icon, { size: 20 });\n    }\n    return icon;\n  };\n\n  const setClassName = (icon: ReactElement, additionalClass: string) => {\n    return isValidElement<{ className?: string }>(icon)\n      ? cloneElement(icon, {\n          className: classNames(icon.props.className, additionalClass),\n        })\n      : icon;\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={classNames(\"btn-base\", className, {\n        [buttonSizeClasses[size]]: !IconOnly,\n        [classNames(buttonIconSizeClassName, \"justify-center\")]: IconOnly,\n        [classNames(buttonVariantClassName.default,\n        buttonVariantClassName.hover,\n        buttonVariantClassName.focus)]: !disabled,\n        [classNames(buttonVariantClassName.disabled, \"cursor-not-allowed\")]: disabled,\n      })}\n      {...buttonProps}\n    >\n      {LeadingIcon && (\n        <span>\n          {setClassName(\n            LeadingIcon,\n            classNames({\n              \"mr-2\": size !== \"2xl\",\n              \"mr-3\": size === \"2xl\",\n            })\n          )}\n        </span>\n      )}\n      {children}\n      {IconOnly && (\n        <span>{setIconSize(IconOnly, size === \"2xl\" ? 24 : 20)}</span>\n      )}\n      {TrailingIcon && (\n        <span>\n          {setClassName(\n            TrailingIcon,\n            classNames({\n              \"ml-2\": size !== \"2xl\",\n              \"ml-3\": size === \"2xl\",\n            })\n          )}\n        </span>\n      )}\n    </button>\n  );\n};\n","import React, { FC, JSX } from \"react\";\nimport classNames from \"classnames\";\n\ntype TypographyVariant =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"h6\"\n  | \"h5\"\n  | \"h4\"\n  | \"h3\"\n  | \"h2\"\n  | \"h1\";\n\ntype TypographyWeightOption = \"regular\" | \"medium\" | \"semibold\" | \"bold\";\n\ntype TypographyWeightValue = \"font-normal\" | \"font-medium\" | \"font-semibold\" | \"font-bold\";\n\nexport interface TypographyProps {\n  variant?: TypographyVariant;\n  customWeight?: TypographyWeightOption;\n  customColor?: string;\n  customClass?: string;\n  className?: string;\n  children: string | React.ReactNode;\n}\n\nconst TypographyVariantClasses: Record<TypographyVariant, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n  md: \"text-md\",\n  lg: \"text-lg\",\n  xl: \"text-xl\",\n  h6: \"text-h6\",\n  h5: \"text-h5\",\n  h4: \"text-h4\",\n  h3: \"text-h3\",\n  h2: \"text-h2\",\n  h1: \"text-h1\",\n};\n\nconst TypographyWeightClasses: Record<TypographyWeightOption, TypographyWeightValue> = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nexport const Typography: FC<TypographyProps> = ({\n  variant = \"md\",\n  customWeight = \"regular\",\n  customColor,\n  className,\n  children,\n}) => {\n    const TypographyVariantClassName = TypographyVariantClasses[variant];\n    const TypographyWeightClassName = TypographyWeightClasses[customWeight];\n\n\n  const Component: React.ElementType =\n    [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"].includes(variant ?? \"p\") ? (variant as keyof JSX.IntrinsicElements) : \"p\";\n\n  return (\n    <Component\n      className={classNames(\n        TypographyVariantClassName,\n        TypographyWeightClassName,\n        className,\n        {\n            \"tracking-tight\": [\"h1\", \"h2\", \"h3\"].includes(variant),\n            \"text-black dark:text-white\": !customColor,\n        },\n        customColor         \n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n","import React, { FC } from \"react\";\nimport { TextInputProps } from \"./@interfaces\";\nimport { Typography } from \"./Typography\";\nimport classNames from \"classnames\";\nimport { useIconClassName } from \"./hooks/useIconClassName\";\n\nexport const TextInput: FC<TextInputProps> = ({\n  type,\n  value,\n  label,\n  placeholder,\n  error,\n  helperText,\n  disabled,\n  LeadingIcon,\n  TrailingIcon,\n  leadingText,\n  handleChange,\n}) => {\n  const { setClassName } = useIconClassName();\n\n  return (\n    <div>\n      {label && (\n        <Typography\n          variant=\"sm\"\n          customWeight=\"medium\"\n          customColor=\"text-gray-700 dark:text-white\"\n          className=\"mb-1.5\"\n        >\n          {label}\n        </Typography>\n      )}\n      <div\n        className={classNames(\"relative\", { \"flex items-center\": leadingText })}\n      >\n        <div className=\"h-11 absolute shadow-sm rounded-lg w-full flex justify-between items-center px-3.5 pointer-events-none\">\n          {LeadingIcon ? setClassName(LeadingIcon, \"text-gray-500\") : <div />}\n          {TrailingIcon &&\n            setClassName(\n              TrailingIcon,\n              classNames({ \"text-error-500\": error, \"text-gray-400\": !error })\n            )}\n        </div>\n        {leadingText && (\n          <Typography\n            variant=\"sm\"\n            customWeight=\"regular\"\n            className={classNames(\n                \"flex items-center h-11 text-lg text-gray-500 pl-3.5 pr-3 border border-r-0 rounded-l-lg border-gray-300 dark:border-gray-500\",\n                {\n                  \"bg-gray-50 dark:bg-gray-700\": disabled,\n                  \"dark:bg-gray-800\": !disabled,\n                },\n              )}\n          >\n            {leadingText}\n          </Typography>\n        )}\n        <input\n          type={type}\n          value={value}\n          placeholder={placeholder}\n          onChange={handleChange}\n          disabled={disabled}\n          className={classNames(\n            \"w-full select-none text-gray-900 dark:text-white text-md border h-11 px-2\",\n            {\n              \"pl-9\": LeadingIcon,\n              \"pr-9\": TrailingIcon,\n              \"rounded-l-0 rounded-r-lg\": leadingText,\n              \"rounded-lg\": !leadingText,\n              \"border-gray-300 dark:border-gray-500 focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20\":\n                !error,\n              \"border-error-300 focus:ring-4 focus:border-error-300 focus:ring-error-100\":\n                error,\n              \"bg-white dark:bg-gray-800\": !disabled,\n              \"bg-gray-50 dark:bg-gray-700\": disabled,\n            },\n          )}\n        />\n      </div>\n      {error && (\n        <Typography\n          variant=\"sm\"\n          customWeight=\"regular\"\n          className=\"mt-1.5 text-error-500\"\n        >\n          {error}\n        </Typography>\n      )}\n      {helperText && (\n        <Typography\n          variant=\"sm\"\n          customWeight=\"regular\"\n          className=\"mt-1.5 text-gray-500\"\n        >\n          {helperText}\n        </Typography>\n      )}\n    </div>\n  );\n};\n","import { ReactElement, cloneElement, isValidElement } from \"react\";\nimport classNames from \"classnames\";\n\nexport const useIconClassName = () => {\n  const setClassName = (icon: ReactElement, additionalClass: string) => {\n    return isValidElement<{ className?: string }>(icon)\n      ? cloneElement(icon, {\n          className: classNames(icon.props.className, additionalClass),\n        })\n      : icon;\n  };\n\n  return { setClassName };\n};\n","import React, { FC } from \"react\";\nimport { Typography } from \"../Typography\";\nimport classNames from \"classnames\";\nimport { SubNavItemProps } from \"../@interfaces\";\n\nexport const SubNavItem: FC<SubNavItemProps> = ({\n  inDropdown,\n  isActive,\n  subItem,\n  onClick,\n}) => {\n  return (\n    <li\n      key={subItem.label}\n      className={classNames(\"navItem group\", {\n        \"bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10\": isActive,\n      })}\n      onClick={onClick}\n    >\n      <Typography\n        variant=\"md\"\n        customWeight=\"medium\"\n        customColor={classNames(\n          \"group-hover:text-primary-600 dark:group-hover:text-white\",\n          {\n            \"text-gray-800 dark:text-white\": !isActive,\n            \"text-primary-600 dark:text-white\": isActive,\n          }\n        )}\n        className={classNames(\"flex-grow\", {\n          \"pl-13\": !inDropdown,\n          \"pl-4\": inDropdown,\n        })}\n      >\n        {subItem.label}\n      </Typography>\n    </li>\n  );\n};\n","import React, {FC} from \"react\";\nimport { NavItemProps } from \"../@interfaces\";\nimport { Popover, PopoverButton, PopoverPanel } from \"@headlessui/react\";\nimport { FiChevronDown } from \"react-icons/fi\";\nimport { Typography } from \"../Typography\";\nimport { SubNavItem } from \"./SubNavItem\";\nimport classNames from \"classnames\";\nimport { useIconProps } from \"../hooks/useIconProps\";\n\nexport const NavItem:FC<NavItemProps> = ({\n    item,\n    isActive,\n    activeSubNavItem,\n    open,\n    openDropdown,\n    onClick,\n}) => {\n    const { setProps } = useIconProps();\n\n    const ArrowDown = FiChevronDown as React.FC<any>;\n\n    return (\n    <Popover key={item.label} className=\"relative\">\n    <PopoverButton as={React.Fragment}>\n      <li\n        className={classNames(\"navItem group\", {\n          \"px-4\": open,\n          \"ml-2 px-2 w-10\": !open,\n          \"bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10\": isActive,\n        })}\n        onClick={() => onClick(item)}\n      >\n        {setProps(item.icon, 24, classNames(\"group-hover:text-primary-600 dark:group-hover:text-white dark:text-white transform duration-100 ease-out\",\n            {\n              \"-rotate-180\": item.toggleSidebar && !open,\n              \"text-gray-900\": !isActive,\n              \"text-primary-600 dark:text-white\": isActive,\n            },))}\n        <>\n          <Typography\n            variant=\"md\"\n            customWeight=\"medium\"\n            className={classNames(\"flex-grow ml-3\", {\n              \"opacity-0 hidden\": !open,\n            })}\n            customColor={classNames(\n              \"group-hover:text-primary-600 dark:group-hover:text-white\",\n              {\n                \"text-gray-800 dark:text-white\": !isActive,\n                \"text-primary-600 dark:text-white\": isActive,\n              },\n            )}\n          >\n            {item.label}\n          </Typography>\n          {item.subItems && item.subItems.length > 0 ? (\n            <ArrowDown\n              size={20}\n              className={classNames(\n                \"group-hover:text-primary-600 dark:group-hover:text-white transform duration-100 ease-out\",\n                {\n                  \"opacity-0 hidden\": !open,\n                  \"text-gray-400\": !isActive,\n                  \"text-primary-600 dark:text-white\": isActive,\n                  \"-rotate-180\": openDropdown,\n                },\n              )}\n            />\n          ) : null}\n        </>\n      </li>\n    </PopoverButton>\n\n    {openDropdown && open && item.subItems && item.subItems.length > 0 ? (\n      <div className=\"my-2 space-y-1\">\n        {item.subItems.map((subItem) => (\n          <SubNavItem\n            key={subItem.label}\n            isActive={activeSubNavItem === subItem.label}\n            subItem={subItem}\n            onClick={() => onClick(item, subItem.label)}\n          />\n        ))}\n      </div>\n    ) : null}\n\n    {!open && item.subItems && item.subItems.length > 0 ? (\n      <PopoverPanel className=\"absolute z-50 px-4 py-3 ml-5 space-y-1 bg-white rounded-lg shadow-md -top-3 left-19 w-58 dark:bg-gray-900\">\n        {item.subItems.map((subItem) => (\n          <SubNavItem\n            key={subItem.label}\n            inDropdown\n            isActive={activeSubNavItem === subItem.label}\n            subItem={subItem}\n            onClick={() => onClick(item, subItem.label)}\n          />\n        ))}\n      </PopoverPanel>\n    ) : null}\n  </Popover>\n)};","import { ReactElement, cloneElement, isValidElement } from \"react\";\nimport classNames from \"classnames\";\n\nexport const useIconProps = () => {\n  const setProps = (\n    icon: ReactElement,\n    iconSize: number,\n    additionalClass: string\n  ) => {\n    return isValidElement<{ size?: number; className?: string }>(icon)\n      ? cloneElement(icon, {\n          size: iconSize,\n          className: classNames(icon.props.className, additionalClass),\n        })\n      : icon;\n  };\n\n  return { setProps };\n};\n","export type CountryISO = \"IN\" | \"BE\" | \"DE\" | \"FR\" | \"IT\" | \"NL\" | \"RU\" | \"US\";\n\ntype image =  CountryISO | \"logo\";\n\n// Development images\n// const devImages: Record<image, string> = {\n// logo: require(\"./logo.png\"),\n//   IN: require(\"./in.svg\"),\n//   BE: require(\"./be.svg\"),\n//   DE: require(\"./de.svg\"),\n//   FR: require(\"./fr.svg\"),\n//   IT: require(\"./it.svg\"),\n//   NL: require(\"./nl.svg\"),\n//   RU: require(\"./ru.svg\"),\n//   US: require(\"./us.svg\"),\n\n// };\n\n// Production images (CDN)\nconst prodImages: Record<image, string> = {\n  logo: \"https://media-hosting.imagekit.io/0ec1ca8b900e4e8b/logo.svg?Expires=1838348369&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=pCHsmoIdugCAGgRQuivkSFGORbcd0DMZjw-l9LQlxqEs77-19RpmN8TrGsMdYdKwLic46nDsKt44NPaRyu~mxJDKX7I0acu5x53nLqrjh-fs6s8VATv5eHASNeV83rLF3LXgXwMkXubchLy79xPaEHKlRlvJgcqrjZd3cE4C8QXC0KIG4dSjtkd0rECwtweKFuh1BrJIwcKIxiu5cEJUKgDvi4TUS22KVFh4c52c9CjBGa0ulrxxyZHMj2eXff-uQBkecyW-QYillwmsuz2i5PFf6Ud~9JZ2xYOBWwrq4VRSY-8p~c6Czqagg-w6gqyk-3xEM-f-cDfor~11~xwtTg__\",\n  IN: \"https://kapowaz.github.io/circle-flags/flags/in.svg\",\n  BE: \"https://kapowaz.github.io/circle-flags/flags/be.svg\",\n  DE: \"https://kapowaz.github.io/circle-flags/flags/de.svg\",\n  FR: \"https://kapowaz.github.io/circle-flags/flags/fr.svg\",\n  IT: \"https://kapowaz.github.io/circle-flags/flags/it.svg\",\n  NL: \"https://kapowaz.github.io/circle-flags/flags/nl.svg\",\n  RU: \"https://kapowaz.github.io/circle-flags/flags/ru.svg\",\n  US: \"https://kapowaz.github.io/circle-flags/flags/us.svg\",\n};\n\nexport const images = prodImages;\n// export const images = process.env.NODE_ENV === \"production\" ? prodImages : devImages;\n","import React from \"react\";\nimport { SideNavProps, INavItem } from \"../@interfaces\";\nimport classNames from \"classnames\";\nimport { Typography } from \"../Typography\";\nimport { NavItem } from \"./NavItem\";\nimport { FiLogOut, FiSearch } from \"react-icons/fi\";\nimport { TextInput } from \"../TextInput\";\nimport { images } from \"../data/images\";\n\nexport const renderLogo = () => (\n    <img src={images.logo} className=\"w-8 h-8 select-none\" alt=\"logo\" />\n);\n\nexport const SideNav = ({\n    className,\n    navItemsTop,\n    navItemsBottom,\n    username,\n    email,\n    open,\n    setOpen,\n}: SideNavProps) => {\n\n\n  const Logout = FiLogOut as React.FC<any>;\n  const Search = FiSearch as React.FC<any>;\n\n    const [searchString, setSearchString] = React.useState<string>(\"\");\n    const [activeNavItem, setActiveNavItem] = React.useState<string>(\"\");\n    const [activeSubNavItem, setActiveSubNavItem] = React.useState<string>(\"\");\n    const [openDropdowns, setOpenDropdowns] = React.useState<string[]>([]);\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setSearchString(e.target.value);\n    };\n\n    const onClickNavItem = (item: INavItem, subNavPath?: string) => {\n        if (subNavPath) {\n          setActiveSubNavItem(subNavPath);\n        }\n        if (!item.toggleSidebar) {\n          setActiveNavItem(item.label);\n        } else if (item.toggleSidebar) {\n          setOpen(!open);\n        }\n    \n        if (item.subItems && openDropdowns.includes(item.label) && !subNavPath) {\n          setOpenDropdowns(\n            openDropdowns.filter((dropdownItem) => dropdownItem !== item.label),\n          );\n        } else if (item.subItems && !openDropdowns.includes(item.label)) {\n          setOpenDropdowns([...openDropdowns, item.label]);\n        }\n    };\n    \n    return (\n        <div\n          className={classNames(\n            \"py-6 flex flex-col flex-grow bg-white dark:bg-gray-900 transform ease-out duration-100 overflow-y-auto xs:overflow-y-visible\",\n            {\n              \"w-80\": open,\n              \"w-24\": !open,\n              \"border-r border-gray-300 dark:border-opacity-20\": true,\n            },\n            className,\n          )}\n        >\n          <div className=\"flex items-center w-full mb-8 ml-9\">  \n            {renderLogo()}\n            <Typography\n              variant=\"xl\"\n              className={classNames(\"ml-2.5 whitespace-nowrap select-none\", {\n                \"opacity-0 hidden\": !open,\n              })}\n              customWeight=\"medium\"\n            >\n              Box UI\n            </Typography>\n          </div>\n    \n          <div className=\"mb-8 mx-9\">\n            {open ? (\n              <TextInput\n                type=\"text\"\n                value={searchString}\n                handleChange={handleSearch}\n                placeholder=\"Search\"\n                LeadingIcon={<Search />}\n              />\n            ) : (\n              <div className=\"h-11\" />\n            )}\n          </div>\n    \n          <div\n            className={classNames(\n              \"flex flex-col justify-between h-full ml-5 w-70\",\n              {\n                \"w-14\": !open,\n              },\n            )}\n          >\n            <ul className=\"flex flex-col space-y-1\">\n              {navItemsTop.map((item) => (\n                <NavItem\n                  key={item.label}\n                  item={item}\n                  isActive={activeNavItem === item.label}\n                  activeSubNavItem={activeSubNavItem}\n                  open={open}\n                  openDropdown={openDropdowns.includes(item.label)}\n                  onClick={onClickNavItem}\n                />\n              ))}\n            </ul>\n            <ul className=\"flex flex-col mb-6 space-y-1\">\n              {navItemsBottom.map((item) => (\n                <NavItem\n                  key={item.label}\n                  item={item}\n                  isActive={activeNavItem === item.label}\n                  activeSubNavItem={activeSubNavItem}\n                  open={open}\n                  openDropdown={openDropdowns.includes(item.label)}\n                  onClick={onClickNavItem}\n                />\n              ))}\n            </ul>\n          </div>\n    \n          <hr\n            className={classNames(\n              \"ml-5 border-t border-gray-300 dark:border-opacity-20\",\n              {\n                \"w-70\": open,\n                \"w-14\": !open,\n              },\n            )}\n          />\n    \n          <div className=\"flex mt-6 w-70 ml-7\">\n            {open ? (\n              <div className=\"flex justify-between ml-3\">\n                <div className=\"select-none\">\n                  <Typography\n                    variant=\"sm\"\n                    customWeight=\"medium\"\n                    customColor=\"text-gray-700 dark:text-white\"\n                  >\n                    {username}\n                  </Typography>\n    \n                  <Typography variant=\"sm\" customColor=\"text-gray-500\">\n                    {email}\n                  </Typography>\n                </div>\n    \n                <Logout size={24} className=\"ml-6 text-gray-400 cursor-pointer\" />\n              </div>\n            ) : null}\n          </div>\n        </div>\n      );\n    \n}","import React from \"react\";\nimport { IOption } from \"../@interfaces\";\nimport { CountryISO, images } from \"./images\";\n\ninterface ICountry {\n  city: string;\n  countryISO: CountryISO;\n}\n\nconst countriesData: ICountry[] = [\n  {\n    city: \"Ahmedabad\",\n    countryISO: \"IN\",\n  },\n  {\n    city: \"Amsterdam\",\n    countryISO: \"NL\",\n  },\n  {\n    city: \"Rome\",\n    countryISO: \"IT\",\n  },\n  {\n    city: \"Berlin\",\n    countryISO: \"DE\",\n  },\n  {\n    city: \"Paris\",\n    countryISO: \"FR\",\n  },\n  {\n    city: \"Washington\",\n    countryISO: \"US\",\n  },\n  {\n    city: \"Moscow\",\n    countryISO: \"RU\",\n  },\n  {\n    city: \"Brussels\",\n    countryISO: \"BE\",\n  },\n];\n\nexport const countries: IOption[] = countriesData.map((country) => ({\n  value: country.countryISO,\n  label: (\n    <>\n      <img\n        src={images[country.countryISO]}\n        alt={country.countryISO.toLowerCase()}\n        className=\"w-5 h-5 mr-2\"\n      />{\" \"}\n      {`${country.city}, ${country.countryISO}`}\n    </>\n  ),\n}));\n","import React from \"react\";\r\nimport { INavItem } from \"../@interfaces\";\r\nimport {\r\n  FiArrowLeft,\r\n  FiBarChart2,\r\n  FiCheckSquare,\r\n  FiHome,\r\n  FiLayers,\r\n  FiSettings,\r\n  FiFlag,\r\n  FiMapPin,\r\n} from \"react-icons/fi\";\r\n\r\nconst Home = FiHome as React.FC<any>;\r\nconst Layers = FiLayers as React.FC<any>;\r\nconst Settings = FiSettings as React.FC<any>;\r\nconst Flag = FiFlag as React.FC<any>;\r\nconst MapPin = FiMapPin as React.FC<any>;\r\nconst CheckSquare = FiCheckSquare as React.FC<any>;\r\nconst BarChart = FiBarChart2 as React.FC<any>;\r\nconst ArrowLeft = FiArrowLeft as React.FC<any>;\r\n\r\nexport const navItemsTop: INavItem[] = [\r\n  {\r\n    order: 0,\r\n    path: \"home\",\r\n    label: \"Home\",\r\n    icon: <Home />,\r\n  },\r\n  {\r\n    order: 1,\r\n    path: \"dashboard\",\r\n    label: \"Dashboard\",\r\n    icon: <BarChart />,\r\n    subItems: [\r\n      {\r\n        order: 0,\r\n        path: \"analytics\",\r\n        label: \"Analytics\",\r\n      },\r\n      {\r\n        order: 1,\r\n        path: \"apps\",\r\n        label: \"Apps\",\r\n      },\r\n      {\r\n        order: 2,\r\n        path: \"learn\",\r\n        label: \"Learn\",\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    order: 2,\r\n    path: \"projects\",\r\n    label: \"Projects\",\r\n    icon: <Layers />,\r\n  },\r\n  {\r\n    order: 3,\r\n    path: \"tasks\",\r\n    label: \"Tasks\",\r\n    icon: <CheckSquare />,\r\n  },\r\n  {\r\n    order: 4,\r\n    path: \"reporting\",\r\n    label: \"Reporting\",\r\n    icon: <Flag />,\r\n  },\r\n  {\r\n    order: 5,\r\n    path: \"rentals\",\r\n    label: \"Rentals\",\r\n    icon: <MapPin />,\r\n    subItems: [\r\n      {\r\n        order: 0,\r\n        path: \"all\",\r\n        label: \"All rentals\",\r\n      },\r\n      {\r\n        order: 1,\r\n        path: \"popular\",\r\n        label: \"Popular\",\r\n      },\r\n      {\r\n        order: 2,\r\n        path: \"recent\",\r\n        label: \"Recently added\",\r\n      },\r\n    ],\r\n  },\r\n];\r\n\r\nexport const navItemsBottom: INavItem[] = [\r\n  {\r\n    order: 0,\r\n    path: \"settings\",\r\n    label: \"Settings\",\r\n    icon: <Settings />,\r\n  },\r\n  {\r\n    order: 1,\r\n    label: \"Close Navbar\",\r\n    icon: <ArrowLeft />,\r\n    toggleSidebar: true,\r\n  },\r\n];\r\n","import React from 'react'\nimport { IButtonItem } from \"../@interfaces\";\nimport { FiCircle, FiList, FiGrid } from \"react-icons/fi\";\n\n\nconst Circle = FiCircle as React.FC<any>;\n\nconst List = FiList as React.FC<any>;\n\nconst Grid = FiGrid as React.FC<any>;\n\nexport const options1: IButtonItem[] = [\n  { value: \"Leading\", content: \"Leading\" },\n  { value: \"Middle\", content: \"Middle\" },\n  { value: \"Trailing\", content: \"Trailing\" },\n];\n\nexport const options2: IButtonItem[] = [\n  {\n    value: \"first\",\n    content:  (\n      <>\n        <span><Circle size={20} className='mr-2'/></span>\n        First\n      </>\n    ),\n  },\n  {\n    value: \"second\",\n    content: (\n      <>\n        <span><Circle size={20} className='mr-2'/></span>\n        Second\n      </>\n    ),\n  },\n  {\n    value: \"third\",\n    content: (\n      <>\n        <span><Circle size={20} className='mr-2'/></span>\n        Third\n      </>\n    ),\n  },\n];\n\nexport const options3: IButtonItem[] = [\n  {value:'list', content:<List size={20}/>},\n  {value:'grid', content:<Grid size={20}/>},\n]\n","import React from \"react\";\nimport { IButtonItem } from \"./@interfaces\";\nimport classNames from \"classnames\";\n\nexport interface ButtonGroupProps {\n  options: IButtonItem[];\n  activeOption: string;\n  setActiveOption: (activeOption: string) => void;\n}\n\nexport const ButtonGroup = ({\n  options,\n  activeOption,\n  setActiveOption,\n}: ButtonGroupProps) => {\n  return (\n    <div>\n      {options.map((option, index) => (\n        <button\n          key={option.value}\n          className={classNames(\n            \"inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500\",\n            {\n                \"rounded-l-lg\": index === 0,\n                \"rounded-r-lg\": index === options.length - 1,\n                \"bg-gray-50 dark:bg-gray-700\": activeOption === option.value,\n                \"border-r-0\": index !== 0 && index !== options.length - 1\n            }\n          )}\n          onClick={() => setActiveOption(option.value)}\n        >\n          {option.content}\n        </button>\n      ))}\n    </div>\n  );\n};\n","import React from \"react\";\nimport { IColor } from \"./@interfaces\";\n\nexport const ColorBox = ({ code, hex, bgClass }: IColor) => (\n<div\n    key={bgClass}\n    className=\"flex flex-col rounded-lg shadow-lg w-26 h-39 dark:bg-white\">\n      <div className={`h-20 ${bgClass} rounded-t-lg`} />\n      <div className=\"mx-3 my-3\">\n          {code}\n          <br/>\n          {hex}\n      </div>\n    </div>\n);","import classNames from \"classnames\";\nimport React, { FC } from \"react\";\nimport { Typography } from \"../Typography\";\nimport { renderLogo } from \"./SideNav\";\nimport {MobileNavProps} from '../@interfaces';\n\n\nexport const MobileNavbar: FC<MobileNavProps> = ({ open, toggleOpen }) => (\n  <div className=\"z-40 flex items-center justify-between h-20 py-6 bg-white shadow-md dark:bg-gray-900 px-9\">\n    {renderLogo()}\n    <Typography variant=\"h6\" customWeight=\"medium\" className=\"select-none\">\n       Box UI\n    </Typography>\n    <svg\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(\n        \"text-gray-500 transition-all duration-100 ease-out cursor-pointer stroke-current hover:text-gray-900 dark:text-white dark:hover:text-gray-200\",\n        {\n          \"opacity-0\": open,\n        },\n      )}\n      onClick={toggleOpen}\n    >\n      <path\n        d=\"M4 16H22.6667M4 8H28M4 24H28\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  </div>\n);\n","import React from \"react\";\nimport { PaginationProps } from \"./@interfaces\";\nimport classNames from \"classnames\";\nimport { Pagination } from \"react-headless-pagination\";\nimport { FiArrowLeft, FiArrowRight } from \"react-icons/fi\";\n\nexport const Paginate = ({\n  totalPages,\n  page,\n  isMobile,\n  className,\n  setPage,\n}: PaginationProps) => {\n  const handlePageChange = (page: number) => {\n    setPage(page);\n  };\n\n  const ArrowLeft = FiArrowLeft as React.FC<any>;\n  const ArrowRight = FiArrowRight as React.FC<any>;\n\n  if (isMobile) {\n    return (\n      <div className={classNames(\"flex w-full h-10 items-center\", className)}>\n        <ArrowLeft\n          size={20}\n          className={classNames(\"mr-3 text-gray-500 dark:text-white\", {\n            \"cursor-pointer\": page !== 0,\n            \"opacity-50\": page === 0,\n          })}\n          onClick={() => {\n            if (page > 0) {\n              handlePageChange(page - 1);\n            }\n          }}\n        />\n        <div className=\"flex justify-center flex-grow text-sm text-gray-700 select-none dark:text-white\">\n          {`Page ${page} of ${totalPages}`}\n        </div>\n        <ArrowRight\n          size={20}\n          className={classNames(\"ml-3 text-gray-500 dark:text-white\", {\n            \"cursor-pointer\": page !== totalPages - 1,\n            \"opacity-50\": page === totalPages - 1,\n          })}\n          onClick={() => {\n            if (page < totalPages - 1) {\n              handlePageChange(page + 1);\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <Pagination\n      className={classNames(\n        \"flex w-full items-center h-10 text-sm select-none\",\n        className\n      )}\n      currentPage={page}\n      totalPages={totalPages}\n      edgePageCount={2}\n      setCurrentPage={handlePageChange}\n      truncableText=\"...\"\n      middlePagesSiblingCount={2}\n      truncableClassName=\"w-10 px-0.5 text-center dark:text-gray-500\"\n    >\n      <Pagination.PrevButton\n        className={classNames(\n          \"h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none\",\n          {\n            \"cursor-pointer\": page !== 0,\n            \"opacity-50\": page === 0,\n          }\n        )}\n      >\n        <ArrowLeft size={20} className={classNames(\"mr-3\")} />\n        Previous\n      </Pagination.PrevButton>\n      <div className=\"flex items-center justify-center flex-grow list-none\">\n        <Pagination.PageButton\n          activeClassName=\"bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white\"\n          inactiveClassName=\"text-gray-500\"\n          className=\"flex items-center justify-center h-10 w-10 rounded-full cursor-pointer font-medium\"\n        />\n      </div>\n      <Pagination.NextButton\n        className={classNames(\n          \"h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none\",\n          {\n            \"cursor-pointer\": page !== totalPages - 1,\n            \"opacity-50\": page === totalPages - 1,\n          }\n        )}\n      >\n        Next\n        <ArrowRight size={20} className={classNames(\"ml-3\")} />\n      </Pagination.NextButton>\n    </Pagination>\n  );\n};\n","import React, {\n  FC,\n  ReactElement,\n  isValidElement,\n  cloneElement,\n} from \"react\";\nimport { SelectProps } from \"./@interfaces\";\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxOption,\n  ListboxOptions,\n} from \"@headlessui/react\";\nimport classNames from \"classnames\";\nimport {FiCheck, FiChevronDown} from 'react-icons/fi'\n\nexport const Select: FC<SelectProps> = ({\n  options,\n  selectedOption,\n  setSelectedOption,\n  placeholder,\n  LeadingIcon,\n  width,\n}) => {\n\n  const ArrowDown = FiChevronDown as React.FC<any>;\n  const Check = FiCheck as React.FC<any>;\n\n  const setProps = (\n    icon: ReactElement,\n    iconSize: number,\n    additionalClass: string\n  ) => {\n    if (\n      isValidElement<{ size?: number; className?: string }>(icon) &&\n      \"size\" in icon.props\n    ) {\n      return cloneElement(icon, {\n        size: iconSize,\n        className: classNames(icon.props.className, additionalClass),\n      });\n    }\n    return icon;\n  };\n\n  return (\n    <div className={classNames(\"relative inline-block\", width)}>\n      <Listbox value={selectedOption && selectedOption.value} onChange={setSelectedOption}>\n        {({ open }) => (\n          <>\n            <ListboxButton className={classNames(\"shadow-sm flex items-center text-md border border-gray-300 dark:border-gray-500 h-11 px-3.5 rounded-lg bg-white dark:bg-gray-800\",\n                \"focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20 whitespace-nowrap\",\n                {\n                  \"text-gray-900 dark:text-white\": selectedOption,\n                  \"text-gray-500 dark:text-gray-300\": !selectedOption,\n                },\n                width,)}>\n              {LeadingIcon && (\n                <div className=\"w-5 h-5 mr-2 overflow-hidden\">\n                  {setProps(LeadingIcon, 20, classNames(\"text-gray-400\"))}\n                </div>\n              )}\n              {selectedOption ? selectedOption.label : placeholder}\n              <ArrowDown\n                size={20}\n                className={classNames(\n                  \"text-gray-500 dark:text-gray-300 transform duration-100 ease-out\",\n                  {\n                    \"-rotate-180\": open,\n                    \"ml-auto\": width,\n                    \"ml-3.5\": !width,\n                  },\n                )}\n              />\n            </ListboxButton>\n            <ListboxOptions className=\"absolute z-10 inline-flex flex-col w-full bg-white border border-gray-300 rounded-lg shadow-lg top-13 dark:border-gray-500 dark:bg-gray-800\">\n              {options?.map((option, index) => (\n                <ListboxOption as={React.Fragment} key={option.value} value={option.value}>\n                    {({focus, selected}) => (\n                        <li className={classNames(classNames(\n                        \"flex items-center pl-3.5 pr-3 justify-between h-11 text-gray-900 dark:text-white text-md cursor-pointer hover:bg-primary-25 dark:hover:bg-gray-100 dark:hover:bg-opacity-10 whitespace-nowrap\",\n                        {\n                          \"bg-primary-25 dark:bg-gray-100 dark:bg-opacity-10\":\n                            focus,\n                          \"rounded-t-lg\": index === 0,\n                          \"rounded-b-lg\": index === options.length - 1,\n                        },\n                      ))}>\n                        <div className=\"flex items-center\">{option.label}</div>\n                        {selected && <Check className=\"ml-5 text-primary-600 dark:text-white\" />}\n                    </li>\n                    )}\n                    \n                </ListboxOption>\n              ))}\n            </ListboxOptions>\n          </>\n        )}\n      </Listbox>\n    </div>\n  );\n};\n","import { IColor } from \"../@interfaces\";\n\nexport const colors: IColor[] = [\n  {\n    bgClass: \"bg-gray-2\",\n    code: 25,\n    hex: \"#FCFCF\",\n  },\n  {\n    bgClass: \"bg-gray-50\",\n    code: 50,\n    hex: \"#F9FAFB\",\n  },\n  {\n    bgClass: \"bg-gray-100\",\n    code: 100,\n    hex: \"#F2F4F7\",\n  },\n  {\n    bgClass: \"bg-gray-200\",\n    code: 200,\n    hex: \"#E4E7EC\",\n  },\n  {\n    bgClass: \"bg-gray-300\",\n    code: 300,\n    hex: \"#D0D5DD\",\n  },\n  {\n    bgClass: \"bg-gray-400\",\n    code: 400,\n    hex: \"#98A2B3\",\n  },\n  {\n    bgClass: \"bg-gray-500\",\n    code: 500,\n    hex: \"#667085\",\n  },\n  {\n    bgClass: \"bg-gray-600\",\n    code: 600,\n    hex: \"#475467\",\n  },\n  {\n    bgClass: \"bg-gray-700\",\n    code: 700,\n    hex: \"#344054\",\n  },\n  {\n    bgClass: \"bg-gray-800\",\n    code: 800,\n    hex: \"#1D2939\",\n  },\n  {\n    bgClass: \"bg-gray-900\",\n    code: 900,\n    hex: \"#101828\",\n  },\n  {\n    bgClass: \"bg-primary-25\",\n    code: 25,\n    hex: \"#F5FAFF\",\n  },\n  {\n    bgClass: \"bg-primary-50\",\n    code: 50,\n    hex: \"#EFF8FF\",\n  },\n  {\n    bgClass: \"bg-primary-100\",\n    code: 100,\n    hex: \"#D1E9FF\",\n  },\n  {\n    bgClass: \"bg-primary-200\",\n    code: 200,\n    hex: \"#B2DDFF\",\n  },\n  {\n    bgClass: \"bg-primary-300\",\n    code: 300,\n    hex: \"#84CAFF\",\n  },\n  {\n    bgClass: \"bg-primary-400\",\n    code: 400,\n    hex: \"#53B1FD\",\n  },\n  {\n    bgClass: \"bg-primary-500\",\n    code: 500,\n    hex: \"#2E90FA\",\n  },\n  {\n    bgClass: \"bg-primary-600\",\n    code: 600,\n    hex: \"#1570EF\",\n  },\n  {\n    bgClass: \"bg-primary-700\",\n    code: 700,\n    hex: \"#175CD3\",\n  },\n  {\n    bgClass: \"bg-primary-800\",\n    code: 800,\n    hex: \"#1849A9\",\n  },\n  {\n    bgClass: \"bg-primary-900\",\n    code: 900,\n    hex: \"#194185\",\n  },\n  {\n    bgClass: \"bg-error-25\",\n    code: 25,\n    hex: \"#FFFBFA\",\n  },\n  {\n    bgClass: \"bg-error-50\",\n    code: 50,\n    hex: \"#FEF3F2\",\n  },\n  {\n    bgClass: \"bg-error-100\",\n    code: 100,\n    hex: \"#FEE4E2\",\n  },\n  {\n    bgClass: \"bg-error-200\",\n    code: 200,\n    hex: \"#FECDCA\",\n  },\n  {\n    bgClass: \"bg-error-300\",\n    code: 300,\n    hex: \"#FDA29B\",\n  },\n  {\n    bgClass: \"bg-error-400\",\n    code: 400,\n    hex: \"#F97066\",\n  },\n  {\n    bgClass: \"bg-error-500\",\n    code: 500,\n    hex: \"#F04438\",\n  },\n  {\n    bgClass: \"bg-error-600\",\n    code: 600,\n    hex: \"#D92D20\",\n  },\n  {\n    bgClass: \"bg-error-700\",\n    code: 700,\n    hex: \"#B42318\",\n  },\n  {\n    bgClass: \"bg-error-800\",\n    code: 800,\n    hex: \"#912018\",\n  },\n  {\n    bgClass: \"bg-error-900\",\n    code: 900,\n    hex: \"#7A271A\",\n  },\n  {\n    bgClass: \"bg-warning-25\",\n    code: 25,\n    hex: \"#FFFCF5\",\n  },\n  {\n    bgClass: \"bg-warning-50\",\n    code: 50,\n    hex: \"#FFFAEB\",\n  },\n  {\n    bgClass: \"bg-warning-100\",\n    code: 100,\n    hex: \"#FEF0C7\",\n  },\n  {\n    bgClass: \"bg-warning-200\",\n    code: 200,\n    hex: \"#FEDF89\",\n  },\n  {\n    bgClass: \"bg-warning-300\",\n    code: 300,\n    hex: \"#FEC84B\",\n  },\n  {\n    bgClass: \"bg-warning-400\",\n    code: 400,\n    hex: \"#FDB022\",\n  },\n  {\n    bgClass: \"bg-warning-500\",\n    code: 500,\n    hex: \"#F79009\",\n  },\n  {\n    bgClass: \"bg-warning-600\",\n    code: 600,\n    hex: \"#DC6803\",\n  },\n  {\n    bgClass: \"bg-warning-700\",\n    code: 700,\n    hex: \"#B54708\",\n  },\n  {\n    bgClass: \"bg-warning-800\",\n    code: 800,\n    hex: \"#93370D\",\n  },\n  {\n    bgClass: \"bg-warning-900\",\n    code: 900,\n    hex: \"#7A2E0E\",\n  },\n  {\n    bgClass: \"bg-success-25\",\n    code: 25,\n    hex: \"#F6FEF9\",\n  },\n  {\n    bgClass: \"bg-success-50\",\n    code: 50,\n    hex: \"#ECFDF3\",\n  },\n  {\n    bgClass: \"bg-success-100\",\n    code: 100,\n    hex: \"#D1FADF\",\n  },\n  {\n    bgClass: \"bg-success-200\",\n    code: 200,\n    hex: \"#A6F4C5\",\n  },\n  {\n    bgClass: \"bg-success-300\",\n    code: 300,\n    hex: \"#6CE9A6\",\n  },\n  {\n    bgClass: \"bg-success-400\",\n    code: 400,\n    hex: \"#32D583\",\n  },\n  {\n    bgClass: \"bg-success-500\",\n    code: 500,\n    hex: \"#12B76A\",\n  },\n  {\n    bgClass: \"bg-success-600\",\n    code: 600,\n    hex: \"#039855\",\n  },\n  {\n    bgClass: \"bg-success-700\",\n    code: 700,\n    hex: \"#027A48\",\n  },\n  {\n    bgClass: \"bg-success-800\",\n    code: 800,\n    hex: \"#05603A\",\n  },\n  {\n    bgClass: \"bg-success-900\",\n    code: 900,\n    hex: \"#054F31\",\n  },\n];\n","import { IOption } from \"../@interfaces\";\n\nexport const prices: IOption[] = [\n  {\n    label: \"Any price\",\n    value: \"-1\",\n  },\n  {\n    label: \"Below 50\",\n    value: \"0\",\n  },\n  {\n    label: \"50 - 100\",\n    value: \"50\",\n  },\n  {\n    label: \"100 - 200\",\n    value: \"100\",\n  },\n  {\n    label: \"200 - 300\",\n    value: \"200\",\n  },\n  {\n    label: \"300 - 400\",\n    value: \"300\",\n  },\n  {\n    label: \"400 - 500\",\n    value: \"400\",\n  },\n  {\n    label: \"500 - 600\",\n    value: \"500\",\n  },\n];\n"],"names":["BadgeSizeClasses","sm","md","lg","BadgeVariantClasses","gray","primary","warning","error","success","buttonVariantClasses","default","hover","focus","disabled","secondary","secondaryGray","tertiary","tertiaryGray","buttonSizeClasses","xl","2xl","buttonIconSizeClasses","TypographyVariantClasses","xs","h6","h5","h4","h3","h2","h1","TypographyWeightClasses","regular","medium","semibold","bold","Typography","_ref","variant","customWeight","customColor","className","children","TypographyVariantClassName","TypographyWeightClassName","Component","includes","React","classNames","tracking-tight","text-black dark:text-white","TextInput","type","value","label","placeholder","helperText","LeadingIcon","TrailingIcon","leadingText","handleChange","setClassName","icon","additionalClass","isValidElement","cloneElement","props","flex items-center","text-error-500","text-gray-400","bg-gray-50 dark:bg-gray-700","dark:bg-gray-800","onChange","pl-9","pr-9","rounded-l-0 rounded-r-lg","rounded-lg","border-gray-300 dark:border-gray-500 focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20","border-error-300 focus:ring-4 focus:border-error-300 focus:ring-error-100","bg-white dark:bg-gray-800","SubNavItem","inDropdown","isActive","subItem","onClick","key","bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10","text-gray-800 dark:text-white","text-primary-600 dark:text-white","pl-13","pl-4","NavItem","item","activeSubNavItem","open","openDropdown","setProps","iconSize","size","ArrowDown","FiChevronDown","Popover","PopoverButton","as","Fragment","px-4","ml-2 px-2 w-10","-rotate-180","toggleSidebar","text-gray-900","opacity-0 hidden","subItems","length","map","PopoverPanel","images","logo","IN","BE","DE","FR","IT","NL","RU","US","renderLogo","src","alt","countries","city","countryISO","country","toLowerCase","Layers","FiLayers","Settings","FiSettings","Flag","FiFlag","MapPin","FiMapPin","CheckSquare","FiCheckSquare","BarChart","FiBarChart2","ArrowLeft","FiArrowLeft","navItemsTop","order","path","FiHome","navItemsBottom","Circle","FiCircle","List","FiList","Grid","FiGrid","options2","content","options3","IconOnly","buttonProps","buttonVariantClassName","[object Object]","mr-2","mr-3","ml-2","ml-3","setIconSize","options","activeOption","setActiveOption","option","index","rounded-l-lg","rounded-r-lg","border-r-0","code","hex","bgClass","toggleOpen","width","height","viewBox","xmlns","opacity-0","d","strokeWidth","strokeLinecap","strokeLinejoin","totalPages","page","isMobile","setPage","handlePageChange","ArrowRight","FiArrowRight","cursor-pointer","opacity-50","Pagination","currentPage","edgePageCount","setCurrentPage","truncableText","middlePagesSiblingCount","truncableClassName","PrevButton","PageButton","activeClassName","inactiveClassName","NextButton","selectedOption","setSelectedOption","Check","FiCheck","Listbox","_ref2","ListboxButton","text-gray-900 dark:text-white","text-gray-500 dark:text-gray-300","ml-auto","ml-3.5","ListboxOptions","ListboxOption","_ref3","selected","bg-primary-25 dark:bg-gray-100 dark:bg-opacity-10","rounded-t-lg","rounded-b-lg","username","email","setOpen","Logout","FiLogOut","Search","FiSearch","searchString","setSearchString","useState","activeNavItem","setActiveNavItem","setActiveSubNavItem","openDropdowns","setOpenDropdowns","onClickNavItem","subNavPath","filter","dropdownItem","w-80","w-24","border-r border-gray-300 dark:border-opacity-20","e","target","w-14","w-70"],"mappings":"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"}
+{"version":3,"file":"box-ui.cjs.production.min.js","sources":["../src/Badge.tsx","../src/Button.tsx","../src/Typography.tsx","../src/TextInput.tsx","../src/hooks/useIconClassName.tsx","../src/Nav/SubNavItem.tsx","../src/Nav/NavItem.tsx","../src/hooks/useIconProps.tsx","../src/data/images/index.tsx","../src/Nav/SideNav.tsx","../src/data/countries.tsx","../src/data/navItems.tsx","../src/data/options.tsx","../src/ButtonGroup.tsx","../src/ColorBox.tsx","../src/Nav/MobileNav.tsx","../src/Paginate.tsx","../src/Select.tsx","../src/data/colors.tsx","../src/data/prices.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { BadgeProps, BadgeSize, BadgeVariant } from \"./@interfaces\";\nimport classNames from \"classnames\";\n\nconst BadgeSizeClasses: Record<BadgeSize, string> = {\n  sm: \"badge-sm\",\n  md: \"badge-md\",\n  lg: \"badge-lg\",\n};\n\nconst BadgeVariantClasses: Record<BadgeVariant, string> = {\n  gray: \"badge-gray\",\n  primary: \"badge-primary\",\n  warning: \"badge-warning\",\n  error: \"badge-error\",\n  success: \"badge-success\",\n};\n\nexport const Badge: FC<BadgeProps> = ({\n  className,\n  children,\n  LeadingIcon,\n  TrailingIcon,\n  variant,\n  size,\n}) => {\n  const badgeVariantClassName = BadgeVariantClasses[variant];\n  const badgeSizeClassName = BadgeSizeClasses[size];\n\n  return (\n    <div\n      className={classNames(\n        \"badge-base\",\n        badgeSizeClassName,\n        badgeVariantClassName,\n        className\n      )}\n    >\n      {LeadingIcon && <span className=\"mr-1.5\">{LeadingIcon}</span>}\n      {children}\n      {TrailingIcon && <span className=\"mr-1.5\">{TrailingIcon}</span>}\n    </div>\n  );\n};\n","import React, { ReactElement, cloneElement, isValidElement } from \"react\";\nimport {\n  ButtonProps,\n  ButtonVariant,\n  ButtonSize,\n  ButtonState,\n} from \"./@interfaces\";\nimport classNames from \"classnames\";\n\nconst buttonVariantClasses: Record<\n  ButtonVariant,\n  Record<ButtonState, string>\n> = {\n  primary: {\n    default: \"btn-primary\",\n    hover: \"btn-primary-hover\",\n    focus: \"btn-primary-focus shadow-grayDark\",\n    disabled: \"btn-primary-disabled\",\n  },\n  secondary: {\n    default: \"btn-secondary\",\n    hover: \"btn-secondary-hover\",\n    focus: \"btn-secondary-focus shadow-grayDark\",\n    disabled: \"btn-secondary-disabled\",\n  },\n  secondaryGray: {\n    default: \"btn-secondaryGray\",\n    hover: \"btn-secondaryGray-hover\",\n    focus: \"btn-secondaryGray-focus shadow-grayDark\",\n    disabled: \"btn-secondaryGray-disabled\",\n  },\n  tertiary: {\n    default: \"btn-tertiary\",\n    hover: \"btn-tertiary-hover\",\n    focus: \"btn-tertiary-focus shadow-grayDark\",\n    disabled: \"btn-tertiary-disabled\",\n  },\n  tertiaryGray: {\n    default: \"btn-tertiaryGray\",\n    hover: \"btn-tertiaryGray-hover\",\n    focus: \"btn-tertiaryGray-focus shadow-grayDark\",\n    disabled: \"btn-tertiaryGray-disabled\",\n  },\n};\n\nconst buttonSizeClasses: Record<ButtonSize, string> = {\n  sm: \"btn-sm\",\n  md: \"btn-md\",\n  lg: \"btn-lg\",\n  xl: \"btn-xl\",\n  \"2xl\": \"btn-2xl\",\n};\n\nconst buttonIconSizeClasses: Record<ButtonSize, string> = {\n  sm: \"btn-icon-sm\",\n  md: \"btn-icon-md\",\n  lg: \"btn-icon-lg\",\n  xl: \"btn-icon-xl\",\n  \"2xl\": \"btn-icon-2xl\",\n};\n\nexport const Button = ({\n  children,\n  className,\n  variant = \"primary\",\n  size = \"md\",\n  disabled,\n  LeadingIcon,\n  TrailingIcon,\n  IconOnly,\n  ...buttonProps\n}: ButtonProps) => {\n  const buttonVariantClassName = buttonVariantClasses[variant];\n  const buttonIconSizeClassName = buttonIconSizeClasses[size];\n\n  const setIconSize = (icon: ReactElement, iconSize: number) => {\n    if (isValidElement<{ size?: number }>(icon) && \"size\" in icon.props) {\n      return cloneElement(icon, { size: 20 });\n    }\n    return icon;\n  };\n\n  const setClassName = (icon: ReactElement, additionalClass: string) => {\n    return isValidElement<{ className?: string }>(icon)\n      ? cloneElement(icon, {\n          className: classNames(icon.props.className, additionalClass),\n        })\n      : icon;\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={classNames(\"btn-base\", className, {\n        [buttonSizeClasses[size]]: !IconOnly,\n        [classNames(buttonIconSizeClassName, \"justify-center\")]: IconOnly,\n        [classNames(buttonVariantClassName.default,\n        buttonVariantClassName.hover,\n        buttonVariantClassName.focus)]: !disabled,\n        [classNames(buttonVariantClassName.disabled, \"cursor-not-allowed\")]: disabled,\n      })}\n      {...buttonProps}\n    >\n      {LeadingIcon && (\n        <span>\n          {setClassName(\n            LeadingIcon,\n            classNames({\n              \"mr-2\": size !== \"2xl\",\n              \"mr-3\": size === \"2xl\",\n            })\n          )}\n        </span>\n      )}\n      {children}\n      {IconOnly && (\n        <span>{setIconSize(IconOnly, size === \"2xl\" ? 24 : 20)}</span>\n      )}\n      {TrailingIcon && (\n        <span>\n          {setClassName(\n            TrailingIcon,\n            classNames({\n              \"ml-2\": size !== \"2xl\",\n              \"ml-3\": size === \"2xl\",\n            })\n          )}\n        </span>\n      )}\n    </button>\n  );\n};\n","import React, { FC, JSX } from \"react\";\nimport classNames from \"classnames\";\n\ntype TypographyVariant =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"h6\"\n  | \"h5\"\n  | \"h4\"\n  | \"h3\"\n  | \"h2\"\n  | \"h1\";\n\ntype TypographyWeightOption = \"regular\" | \"medium\" | \"semibold\" | \"bold\";\n\ntype TypographyWeightValue = \"font-normal\" | \"font-medium\" | \"font-semibold\" | \"font-bold\";\n\nexport interface TypographyProps {\n  variant?: TypographyVariant;\n  customWeight?: TypographyWeightOption;\n  customColor?: string;\n  customClass?: string;\n  className?: string;\n  children: string | React.ReactNode;\n}\n\nconst TypographyVariantClasses: Record<TypographyVariant, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n  md: \"text-md\",\n  lg: \"text-lg\",\n  xl: \"text-xl\",\n  h6: \"text-h6\",\n  h5: \"text-h5\",\n  h4: \"text-h4\",\n  h3: \"text-h3\",\n  h2: \"text-h2\",\n  h1: \"text-h1\",\n};\n\nconst TypographyWeightClasses: Record<TypographyWeightOption, TypographyWeightValue> = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nexport const Typography: FC<TypographyProps> = ({\n  variant = \"md\",\n  customWeight = \"regular\",\n  customColor,\n  className,\n  children,\n}) => {\n    const TypographyVariantClassName = TypographyVariantClasses[variant];\n    const TypographyWeightClassName = TypographyWeightClasses[customWeight];\n\n\n  const Component: React.ElementType =\n    [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"].includes(variant ?? \"p\") ? (variant as keyof JSX.IntrinsicElements) : \"p\";\n\n  return (\n    <Component\n      className={classNames(\n        TypographyVariantClassName,\n        TypographyWeightClassName,\n        className,\n        {\n            \"tracking-tight\": [\"h1\", \"h2\", \"h3\"].includes(variant),\n            \"text-black dark:text-white\": !customColor,\n        },\n        customColor         \n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n","import React, { FC } from \"react\";\nimport { TextInputProps } from \"./@interfaces\";\nimport { Typography } from \"./Typography\";\nimport classNames from \"classnames\";\nimport { useIconClassName } from \"./hooks/useIconClassName\";\n\nexport const TextInput: FC<TextInputProps> = ({\n  type,\n  value,\n  label,\n  placeholder,\n  error,\n  helperText,\n  disabled,\n  LeadingIcon,\n  TrailingIcon,\n  leadingText,\n  handleChange,\n}) => {\n  const { setClassName } = useIconClassName();\n  const inputId = `textinput-${label?.toLowerCase().replace(/\\s+/g, '-') || 'input'}`;\n\n  return (\n    <div>\n      {label && (\n        <label htmlFor={inputId}>\n          <Typography\n            variant=\"sm\"\n            customWeight=\"medium\"\n            customColor=\"text-gray-700 dark:text-white\"\n            className=\"mb-1.5\"\n          >\n            {label}\n          </Typography>\n        </label>\n      )}\n      <div\n        className={classNames(\"relative\", { \"flex items-center\": leadingText })}\n      >\n        <div className=\"h-11 absolute shadow-sm rounded-lg w-full flex justify-between items-center px-3.5 pointer-events-none\">\n          {LeadingIcon ? setClassName(LeadingIcon, \"text-gray-500\") : <div />}\n          {TrailingIcon &&\n            setClassName(\n              TrailingIcon,\n              classNames({ \"text-error-500\": error, \"text-gray-400\": !error })\n            )}\n        </div>\n        {leadingText && (\n          <Typography\n            variant=\"sm\"\n            customWeight=\"regular\"\n            className={classNames(\n              \"flex items-center h-11 text-lg text-gray-500 pl-3.5 pr-3 border border-r-0 rounded-l-lg border-gray-300 dark:border-gray-500\",\n              {\n                \"bg-gray-50 dark:bg-gray-700\": disabled,\n                \"dark:bg-gray-800\": !disabled,\n              }\n            )}\n          >\n            {leadingText}\n          </Typography>\n        )}\n        <input\n          id={inputId}\n          type={type}\n          value={value}\n          placeholder={placeholder}\n          onChange={handleChange}\n          disabled={disabled}\n          className={classNames(\n            \"w-full select-none text-gray-900 dark:text-white text-md border h-11 px-2\",\n            {\n              \"pl-9\": LeadingIcon,\n              \"pr-9\": TrailingIcon,\n              \"rounded-l-0 rounded-r-lg\": leadingText,\n              \"rounded-lg\": !leadingText,\n              \"border-gray-300 dark:border-gray-500 focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20\":\n                !error,\n              \"border-error-300 focus:ring-4 focus:border-error-300 focus:ring-error-100\":\n                error,\n              \"bg-white dark:bg-gray-800\": !disabled,\n              \"bg-gray-50 dark:bg-gray-700\": disabled,\n            }\n          )}\n        />\n      </div>\n      {error && (\n        <label className=\"text-sm font-normal mt-1.5 text-error-500\">\n          {error}\n        </label>\n      )}\n      {helperText && (\n        <label className=\"text-sm font-normal mt-1.5 text-gray-500\">\n          {helperText}\n        </label>\n      )}\n    </div>\n  );\n};\n","import { ReactElement, cloneElement, isValidElement } from \"react\";\nimport classNames from \"classnames\";\n\nexport const useIconClassName = () => {\n  const setClassName = (icon: ReactElement, additionalClass: string) => {\n    return isValidElement<{ className?: string }>(icon)\n      ? cloneElement(icon, {\n          className: classNames(icon.props.className, additionalClass),\n        })\n      : icon;\n  };\n\n  return { setClassName };\n};\n","import React, { FC } from \"react\";\nimport { Typography } from \"../Typography\";\nimport classNames from \"classnames\";\nimport { SubNavItemProps } from \"../@interfaces\";\n\nexport const SubNavItem: FC<SubNavItemProps> = ({\n  inDropdown,\n  isActive,\n  subItem,\n  onClick,\n}) => {\n  return (\n    <li\n      key={subItem.label}\n      className={classNames(\"navItem group\", {\n        \"bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10\": isActive,\n      })}\n      onClick={onClick}\n    >\n      <Typography\n        variant=\"md\"\n        customWeight=\"medium\"\n        customColor={classNames(\n          \"group-hover:text-primary-600 dark:group-hover:text-white\",\n          {\n            \"text-gray-800 dark:text-white\": !isActive,\n            \"text-primary-600 dark:text-white\": isActive,\n          }\n        )}\n        className={classNames(\"flex-grow\", {\n          \"pl-13\": !inDropdown,\n          \"pl-4\": inDropdown,\n        })}\n      >\n        {subItem.label}\n      </Typography>\n    </li>\n  );\n};\n","import React, {FC} from \"react\";\nimport { NavItemProps } from \"../@interfaces\";\nimport { Popover, PopoverButton, PopoverPanel } from \"@headlessui/react\";\nimport { FiChevronDown } from \"react-icons/fi\";\nimport { Typography } from \"../Typography\";\nimport { SubNavItem } from \"./SubNavItem\";\nimport classNames from \"classnames\";\nimport { useIconProps } from \"../hooks/useIconProps\";\n\nexport const NavItem:FC<NavItemProps> = ({\n    item,\n    isActive,\n    activeSubNavItem,\n    open,\n    openDropdown,\n    onClick,\n}) => {\n    const { setProps } = useIconProps();\n\n    const ArrowDown = FiChevronDown as React.FC<any>;\n\n    return (\n    <Popover key={item.label} className=\"relative\">\n    <PopoverButton as={React.Fragment}>\n      <li\n        className={classNames(\"navItem group\", {\n          \"px-4\": open,\n          \"ml-2 px-2 w-10\": !open,\n          \"bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10\": isActive,\n        })}\n        onClick={() => onClick(item)}\n      >\n        {setProps(item.icon, 24, classNames(\"group-hover:text-primary-600 dark:group-hover:text-white dark:text-white transform duration-100 ease-out\",\n            {\n              \"-rotate-180\": item.toggleSidebar && !open,\n              \"text-gray-900\": !isActive,\n              \"text-primary-600 dark:text-white\": isActive,\n            },))}\n        <>\n          <Typography\n            variant=\"md\"\n            customWeight=\"medium\"\n            className={classNames(\"flex-grow ml-3\", {\n              \"opacity-0 hidden\": !open,\n            })}\n            customColor={classNames(\n              \"group-hover:text-primary-600 dark:group-hover:text-white\",\n              {\n                \"text-gray-800 dark:text-white\": !isActive,\n                \"text-primary-600 dark:text-white\": isActive,\n              },\n            )}\n          >\n            {item.label}\n          </Typography>\n          {item.subItems && item.subItems.length > 0 ? (\n            <ArrowDown\n              size={20}\n              className={classNames(\n                \"group-hover:text-primary-600 dark:group-hover:text-white transform duration-100 ease-out\",\n                {\n                  \"opacity-0 hidden\": !open,\n                  \"text-gray-400\": !isActive,\n                  \"text-primary-600 dark:text-white\": isActive,\n                  \"-rotate-180\": openDropdown,\n                },\n              )}\n            />\n          ) : null}\n        </>\n      </li>\n    </PopoverButton>\n\n    {openDropdown && open && item.subItems && item.subItems.length > 0 ? (\n      <div className=\"my-2 space-y-1\">\n        {item.subItems.map((subItem) => (\n          <SubNavItem\n            key={subItem.label}\n            isActive={activeSubNavItem === subItem.label}\n            subItem={subItem}\n            onClick={() => onClick(item, subItem.label)}\n          />\n        ))}\n      </div>\n    ) : null}\n\n    {!open && item.subItems && item.subItems.length > 0 ? (\n      <PopoverPanel className=\"absolute z-50 px-4 py-3 ml-5 space-y-1 bg-white rounded-lg shadow-md -top-3 left-19 w-58 dark:bg-gray-900\">\n        {item.subItems.map((subItem) => (\n          <SubNavItem\n            key={subItem.label}\n            inDropdown\n            isActive={activeSubNavItem === subItem.label}\n            subItem={subItem}\n            onClick={() => onClick(item, subItem.label)}\n          />\n        ))}\n      </PopoverPanel>\n    ) : null}\n  </Popover>\n)};","import { ReactElement, cloneElement, isValidElement } from \"react\";\nimport classNames from \"classnames\";\n\nexport const useIconProps = () => {\n  const setProps = (\n    icon: ReactElement,\n    iconSize: number,\n    additionalClass: string\n  ) => {\n    return isValidElement<{ size?: number; className?: string }>(icon)\n      ? cloneElement(icon, {\n          size: iconSize,\n          className: classNames(icon.props.className, additionalClass),\n        })\n      : icon;\n  };\n\n  return { setProps };\n};\n","export type CountryISO = \"IN\" | \"BE\" | \"DE\" | \"FR\" | \"IT\" | \"NL\" | \"RU\" | \"US\";\n\ntype image =  CountryISO | \"logo\";\n\n// Development images\n// const devImages: Record<image, string> = {\n// logo: require(\"./logo.png\"),\n//   IN: require(\"./in.svg\"),\n//   BE: require(\"./be.svg\"),\n//   DE: require(\"./de.svg\"),\n//   FR: require(\"./fr.svg\"),\n//   IT: require(\"./it.svg\"),\n//   NL: require(\"./nl.svg\"),\n//   RU: require(\"./ru.svg\"),\n//   US: require(\"./us.svg\"),\n\n// };\n\n// Production images (CDN)\nconst prodImages: Record<image, string> = {\n  logo: \"https://media-hosting.imagekit.io/0ec1ca8b900e4e8b/logo.svg?Expires=1838348369&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=pCHsmoIdugCAGgRQuivkSFGORbcd0DMZjw-l9LQlxqEs77-19RpmN8TrGsMdYdKwLic46nDsKt44NPaRyu~mxJDKX7I0acu5x53nLqrjh-fs6s8VATv5eHASNeV83rLF3LXgXwMkXubchLy79xPaEHKlRlvJgcqrjZd3cE4C8QXC0KIG4dSjtkd0rECwtweKFuh1BrJIwcKIxiu5cEJUKgDvi4TUS22KVFh4c52c9CjBGa0ulrxxyZHMj2eXff-uQBkecyW-QYillwmsuz2i5PFf6Ud~9JZ2xYOBWwrq4VRSY-8p~c6Czqagg-w6gqyk-3xEM-f-cDfor~11~xwtTg__\",\n  IN: \"https://kapowaz.github.io/circle-flags/flags/in.svg\",\n  BE: \"https://kapowaz.github.io/circle-flags/flags/be.svg\",\n  DE: \"https://kapowaz.github.io/circle-flags/flags/de.svg\",\n  FR: \"https://kapowaz.github.io/circle-flags/flags/fr.svg\",\n  IT: \"https://kapowaz.github.io/circle-flags/flags/it.svg\",\n  NL: \"https://kapowaz.github.io/circle-flags/flags/nl.svg\",\n  RU: \"https://kapowaz.github.io/circle-flags/flags/ru.svg\",\n  US: \"https://kapowaz.github.io/circle-flags/flags/us.svg\",\n};\n\nexport const images = prodImages;\n// export const images = process.env.NODE_ENV === \"production\" ? prodImages : devImages;\n","import React from \"react\";\nimport { SideNavProps, INavItem } from \"../@interfaces\";\nimport classNames from \"classnames\";\nimport { Typography } from \"../Typography\";\nimport { NavItem } from \"./NavItem\";\nimport { FiLogOut, FiSearch } from \"react-icons/fi\";\nimport { TextInput } from \"../TextInput\";\nimport { images } from \"../data/images\";\n\nexport const renderLogo = () => (\n    <img src={images.logo} className=\"w-8 h-8 select-none\" alt=\"logo\" />\n);\n\nexport const SideNav = ({\n    className,\n    navItemsTop,\n    navItemsBottom,\n    username,\n    email,\n    open,\n    setOpen,\n}: SideNavProps) => {\n\n\n  const Logout = FiLogOut as React.FC<any>;\n  const Search = FiSearch as React.FC<any>;\n\n    const [searchString, setSearchString] = React.useState<string>(\"\");\n    const [activeNavItem, setActiveNavItem] = React.useState<string>(\"\");\n    const [activeSubNavItem, setActiveSubNavItem] = React.useState<string>(\"\");\n    const [openDropdowns, setOpenDropdowns] = React.useState<string[]>([]);\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setSearchString(e.target.value);\n    };\n\n    const onClickNavItem = (item: INavItem, subNavPath?: string) => {\n        if (subNavPath) {\n          setActiveSubNavItem(subNavPath);\n        }\n        if (!item.toggleSidebar) {\n          setActiveNavItem(item.label);\n        } else if (item.toggleSidebar) {\n          setOpen(!open);\n        }\n    \n        if (item.subItems && openDropdowns.includes(item.label) && !subNavPath) {\n          setOpenDropdowns(\n            openDropdowns.filter((dropdownItem) => dropdownItem !== item.label),\n          );\n        } else if (item.subItems && !openDropdowns.includes(item.label)) {\n          setOpenDropdowns([...openDropdowns, item.label]);\n        }\n    };\n    \n    return (\n        <div\n        data-testid= \"side-nav\"\n          className={classNames(\n            \"py-6 flex flex-col flex-grow bg-white dark:bg-gray-900 transform ease-out duration-100 overflow-y-auto xs:overflow-y-visible\",\n            {\n              \"w-80\": open,\n              \"w-24\": !open,\n              \"border-r border-gray-300 dark:border-opacity-20\": true,\n            },\n            className,\n          )}\n        >\n          <div className=\"flex items-center w-full mb-8 ml-9\">  \n            {renderLogo()}\n            <Typography\n              variant=\"xl\"\n              className={classNames(\"ml-2.5 whitespace-nowrap select-none\", {\n                \"opacity-0 hidden\": !open,\n              })}\n              customWeight=\"medium\"\n            >\n              Box UI\n            </Typography>\n          </div>\n    \n          <div className=\"mb-8 mx-9\">\n            {open ? (\n              <TextInput\n                type=\"text\"\n                value={searchString}\n                handleChange={handleSearch}\n                placeholder=\"Search\"\n                LeadingIcon={<Search />}\n              />\n            ) : (\n              <div className=\"h-11\" />\n            )}\n          </div>\n    \n          <div\n            className={classNames(\n              \"flex flex-col justify-between h-full ml-5 w-70\",\n              {\n                \"w-14\": !open,\n              },\n            )}\n          >\n            <ul className=\"flex flex-col space-y-1\">\n              {navItemsTop.map((item) => (\n                <NavItem\n                  key={item.label}\n                  item={item}\n                  isActive={activeNavItem === item.label}\n                  activeSubNavItem={activeSubNavItem}\n                  open={open}\n                  openDropdown={openDropdowns.includes(item.label)}\n                  onClick={onClickNavItem}\n                />\n              ))}\n            </ul>\n            <ul className=\"flex flex-col mb-6 space-y-1\">\n              {navItemsBottom.map((item) => (\n                <NavItem\n                  key={item.label}\n                  item={item}\n                  isActive={activeNavItem === item.label}\n                  activeSubNavItem={activeSubNavItem}\n                  open={open}\n                  openDropdown={openDropdowns.includes(item.label)}\n                  onClick={onClickNavItem}\n                />\n              ))}\n            </ul>\n          </div>\n    \n          <hr\n            className={classNames(\n              \"ml-5 border-t border-gray-300 dark:border-opacity-20\",\n              {\n                \"w-70\": open,\n                \"w-14\": !open,\n              },\n            )}\n          />\n    \n          <div className=\"flex mt-6 w-70 ml-7\">\n            {open ? (\n              <div className=\"flex justify-between ml-3\">\n                <div className=\"select-none\">\n                  <Typography\n                    variant=\"sm\"\n                    customWeight=\"medium\"\n                    customColor=\"text-gray-700 dark:text-white\"\n                  >\n                    {username}\n                  </Typography>\n    \n                  <Typography variant=\"sm\" customColor=\"text-gray-500\">\n                    {email}\n                  </Typography>\n                </div>\n    \n                <Logout size={24} className=\"ml-6 text-gray-400 cursor-pointer\" />\n              </div>\n            ) : null}\n          </div>\n        </div>\n      );\n    \n}","import React from \"react\";\nimport { IOption } from \"../@interfaces\";\nimport { CountryISO, images } from \"./images\";\n\ninterface ICountry {\n  city: string;\n  countryISO: CountryISO;\n}\n\nconst countriesData: ICountry[] = [\n  {\n    city: \"Ahmedabad\",\n    countryISO: \"IN\",\n  },\n  {\n    city: \"Amsterdam\",\n    countryISO: \"NL\",\n  },\n  {\n    city: \"Rome\",\n    countryISO: \"IT\",\n  },\n  {\n    city: \"Berlin\",\n    countryISO: \"DE\",\n  },\n  {\n    city: \"Paris\",\n    countryISO: \"FR\",\n  },\n  {\n    city: \"Washington\",\n    countryISO: \"US\",\n  },\n  {\n    city: \"Moscow\",\n    countryISO: \"RU\",\n  },\n  {\n    city: \"Brussels\",\n    countryISO: \"BE\",\n  },\n];\n\nexport const countries: IOption[] = countriesData.map((country) => ({\n  value: country.countryISO,\n  label: (\n    <>\n      <img\n        src={images[country.countryISO]}\n        alt={country.countryISO.toLowerCase()}\n        className=\"w-5 h-5 mr-2\"\n      />{\" \"}\n      {`${country.city}, ${country.countryISO}`}\n    </>\n  ),\n}));\n","import React from \"react\";\r\nimport { INavItem } from \"../@interfaces\";\r\nimport {\r\n  FiArrowLeft,\r\n  FiBarChart2,\r\n  FiCheckSquare,\r\n  FiHome,\r\n  FiLayers,\r\n  FiSettings,\r\n  FiFlag,\r\n  FiMapPin,\r\n} from \"react-icons/fi\";\r\n\r\nconst Home = FiHome as React.FC<any>;\r\nconst Layers = FiLayers as React.FC<any>;\r\nconst Settings = FiSettings as React.FC<any>;\r\nconst Flag = FiFlag as React.FC<any>;\r\nconst MapPin = FiMapPin as React.FC<any>;\r\nconst CheckSquare = FiCheckSquare as React.FC<any>;\r\nconst BarChart = FiBarChart2 as React.FC<any>;\r\nconst ArrowLeft = FiArrowLeft as React.FC<any>;\r\n\r\nexport const navItemsTop: INavItem[] = [\r\n  {\r\n    order: 0,\r\n    path: \"home\",\r\n    label: \"Home\",\r\n    icon: <Home />,\r\n  },\r\n  {\r\n    order: 1,\r\n    path: \"dashboard\",\r\n    label: \"Dashboard\",\r\n    icon: <BarChart />,\r\n    subItems: [\r\n      {\r\n        order: 0,\r\n        path: \"analytics\",\r\n        label: \"Analytics\",\r\n      },\r\n      {\r\n        order: 1,\r\n        path: \"apps\",\r\n        label: \"Apps\",\r\n      },\r\n      {\r\n        order: 2,\r\n        path: \"learn\",\r\n        label: \"Learn\",\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    order: 2,\r\n    path: \"projects\",\r\n    label: \"Projects\",\r\n    icon: <Layers />,\r\n  },\r\n  {\r\n    order: 3,\r\n    path: \"tasks\",\r\n    label: \"Tasks\",\r\n    icon: <CheckSquare />,\r\n  },\r\n  {\r\n    order: 4,\r\n    path: \"reporting\",\r\n    label: \"Reporting\",\r\n    icon: <Flag />,\r\n  },\r\n  {\r\n    order: 5,\r\n    path: \"rentals\",\r\n    label: \"Rentals\",\r\n    icon: <MapPin />,\r\n    subItems: [\r\n      {\r\n        order: 0,\r\n        path: \"all\",\r\n        label: \"All rentals\",\r\n      },\r\n      {\r\n        order: 1,\r\n        path: \"popular\",\r\n        label: \"Popular\",\r\n      },\r\n      {\r\n        order: 2,\r\n        path: \"recent\",\r\n        label: \"Recently added\",\r\n      },\r\n    ],\r\n  },\r\n];\r\n\r\nexport const navItemsBottom: INavItem[] = [\r\n  {\r\n    order: 0,\r\n    path: \"settings\",\r\n    label: \"Settings\",\r\n    icon: <Settings />,\r\n  },\r\n  {\r\n    order: 1,\r\n    label: \"Close Navbar\",\r\n    icon: <ArrowLeft />,\r\n    toggleSidebar: true,\r\n  },\r\n];\r\n","import React from 'react'\nimport { IButtonItem } from \"../@interfaces\";\nimport { FiCircle, FiList, FiGrid } from \"react-icons/fi\";\n\n\nconst Circle = FiCircle as React.FC<any>;\n\nconst List = FiList as React.FC<any>;\n\nconst Grid = FiGrid as React.FC<any>;\n\nexport const options1: IButtonItem[] = [\n  { value: \"Leading\", content: \"Leading\" },\n  { value: \"Middle\", content: \"Middle\" },\n  { value: \"Trailing\", content: \"Trailing\" },\n];\n\nexport const options2: IButtonItem[] = [\n  {\n    value: \"first\",\n    content:  (\n      <>\n        <span><Circle size={20} className='mr-2'/></span>\n        First\n      </>\n    ),\n  },\n  {\n    value: \"second\",\n    content: (\n      <>\n        <span><Circle size={20} className='mr-2'/></span>\n        Second\n      </>\n    ),\n  },\n  {\n    value: \"third\",\n    content: (\n      <>\n        <span><Circle size={20} className='mr-2'/></span>\n        Third\n      </>\n    ),\n  },\n];\n\nexport const options3: IButtonItem[] = [\n  {value:'list', content:<List size={20}/>},\n  {value:'grid', content:<Grid size={20}/>},\n]\n","import React from \"react\";\nimport { IButtonItem } from \"./@interfaces\";\nimport classNames from \"classnames\";\n\nexport interface ButtonGroupProps {\n  options: IButtonItem[];\n  activeOption: string;\n  setActiveOption: (activeOption: string) => void;\n}\n\nexport const ButtonGroup = ({\n  options,\n  activeOption,\n  setActiveOption,\n}: ButtonGroupProps) => {\n  return (\n    <div>\n      {options.map((option, index) => (\n        <button\n          key={option.value}\n          className={classNames(\n            \"inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500\",\n            {\n                \"rounded-l-lg\": index === 0,\n                \"rounded-r-lg\": index === options.length - 1,\n                \"bg-gray-50 dark:bg-gray-700\": activeOption === option.value,\n                \"border-r-0\": index !== 0 && index !== options.length - 1\n            }\n          )}\n          onClick={() => setActiveOption(option.value)}\n        >\n          {option.content}\n        </button>\n      ))}\n    </div>\n  );\n};\n","import React from \"react\";\nimport { IColor } from \"./@interfaces\";\n\nexport const ColorBox = ({ code, hex, bgClass }: IColor) => (\n<div\n    key={bgClass}\n    className=\"flex flex-col rounded-lg shadow-lg w-26 h-39 dark:bg-white\">\n      <div className={`h-20 ${bgClass} rounded-t-lg`} />\n      <div className=\"mx-3 my-3\">\n          {code}\n          <br/>\n          {hex}\n      </div>\n    </div>\n);","import classNames from \"classnames\";\nimport React, { FC } from \"react\";\nimport { Typography } from \"../Typography\";\nimport { renderLogo } from \"./SideNav\";\nimport {MobileNavProps} from '../@interfaces';\n\n\nexport const MobileNavbar: FC<MobileNavProps> = ({ open, toggleOpen }) => (\n  <div className=\"z-40 flex items-center justify-between h-20 py-6 bg-white shadow-md dark:bg-gray-900 px-9\">\n    {renderLogo()}\n    <Typography variant=\"h6\" customWeight=\"medium\" className=\"select-none\">\n       Box UI\n    </Typography>\n    <svg\n      role=\"button\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(\n        \"text-gray-500 transition-all duration-100 ease-out cursor-pointer stroke-current hover:text-gray-900 dark:text-white dark:hover:text-gray-200\",\n        {\n          \"opacity-0\": open,\n        },\n      )}\n      data-testid= \"mobile-nav-toggle\"\n      onClick={toggleOpen}\n    >\n      <path\n        d=\"M4 16H22.6667M4 8H28M4 24H28\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  </div>\n);\n","import React from \"react\";\nimport { PaginationProps } from \"./@interfaces\";\nimport classNames from \"classnames\";\nimport { Pagination } from \"react-headless-pagination\";\nimport { FiArrowLeft, FiArrowRight } from \"react-icons/fi\";\n\nexport const Paginate = ({\n  totalPages,\n  page,\n  isMobile,\n  className,\n  setPage,\n}: PaginationProps) => {\n  const handlePageChange = (page: number) => {\n    setPage(page);\n  };\n\n  const ArrowLeft = FiArrowLeft as React.FC<any>;\n  const ArrowRight = FiArrowRight as React.FC<any>;\n\n  if (isMobile) {\n    return (\n      <div className={classNames(\"flex w-full h-10 items-center\", className)}>\n        <ArrowLeft\n          data-testid=\"prevBtn\"\n          size={20}\n          className={classNames(\"mr-3 text-gray-500 dark:text-white\", {\n            \"cursor-pointer\": page !== 0,\n            \"opacity-50\": page === 0,\n          })}\n          onClick={() => {\n            if (page > 0) {\n              handlePageChange(page - 1);\n            }\n          }}\n        />\n        <div className=\"flex justify-center flex-grow text-sm text-gray-700 select-none dark:text-white\">\n          {`Page ${page} of ${totalPages}`}\n        </div>\n        <ArrowRight\n          data-testid=\"nextBtn\"\n          size={20}\n          className={classNames(\"ml-3 text-gray-500 dark:text-white\", {\n            \"cursor-pointer\": page !== totalPages - 1,\n            \"opacity-50\": page === totalPages - 1,\n          })}\n          onClick={() => {\n            if (page < totalPages - 1) {\n              handlePageChange(page + 1);\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <Pagination\n      className={classNames(\n        \"flex w-full items-center h-10 text-sm select-none\",\n        className\n      )}\n      currentPage={page}\n      totalPages={totalPages}\n      edgePageCount={2}\n      setCurrentPage={handlePageChange}\n      truncableText=\"...\"\n      middlePagesSiblingCount={2}\n      truncableClassName=\"w-10 px-0.5 text-center dark:text-gray-500\"\n    >\n      <Pagination.PrevButton\n        className={classNames(\n          \"h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none\",\n          {\n            \"cursor-pointer\": page !== 0,\n            \"opacity-50\": page === 0,\n          }\n        )}\n      >\n        <ArrowLeft size={20} className={classNames(\"mr-3\")} />\n        Previous\n      </Pagination.PrevButton>\n      <div className=\"flex items-center justify-center flex-grow list-none\">\n        <Pagination.PageButton\n          activeClassName=\"bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white\"\n          inactiveClassName=\"text-gray-500\"\n          className=\"flex items-center justify-center h-10 w-10 rounded-full cursor-pointer font-medium\"\n        />\n      </div>\n      <Pagination.NextButton\n        className={classNames(\n          \"h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none\",\n          {\n            \"cursor-pointer\": page !== totalPages - 1,\n            \"opacity-50\": page === totalPages - 1,\n          }\n        )}\n      >\n        Next\n        <ArrowRight size={20} className={classNames(\"ml-3\")} />\n      </Pagination.NextButton>\n    </Pagination>\n  );\n};\n","import React, {\n  FC,\n  ReactElement,\n  isValidElement,\n  cloneElement,\n} from \"react\";\nimport { SelectProps } from \"./@interfaces\";\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxOption,\n  ListboxOptions,\n} from \"@headlessui/react\";\nimport classNames from \"classnames\";\nimport {FiCheck, FiChevronDown} from 'react-icons/fi'\n\nexport const Select: FC<SelectProps> = ({\n  options,\n  selectedOption,\n  setSelectedOption,\n  placeholder,\n  LeadingIcon,\n  width,\n}) => {\n\n  const ArrowDown = FiChevronDown as React.FC<any>;\n  const Check = FiCheck as React.FC<any>;\n\n  const setProps = (\n    icon: ReactElement,\n    iconSize: number,\n    additionalClass: string\n  ) => {\n    if (\n      isValidElement<{ size?: number; className?: string }>(icon) &&\n      \"size\" in icon.props\n    ) {\n      return cloneElement(icon, {\n        size: iconSize,\n        className: classNames(icon.props.className, additionalClass),\n      });\n    }\n    return icon;\n  };\n\n  return (\n    <div className={classNames(\"relative inline-block\", width)}>\n      <Listbox value={selectedOption && selectedOption.value} onChange={setSelectedOption}>\n        {({ open }) => (\n          <>\n            <ListboxButton className={classNames(\"shadow-sm flex items-center text-md border border-gray-300 dark:border-gray-500 h-11 px-3.5 rounded-lg bg-white dark:bg-gray-800\",\n                \"focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20 whitespace-nowrap\",\n                {\n                  \"text-gray-900 dark:text-white\": selectedOption,\n                  \"text-gray-500 dark:text-gray-300\": !selectedOption,\n                },\n                width,)}>\n              {LeadingIcon && (\n                <div className=\"w-5 h-5 mr-2 overflow-hidden\" data-testid=\"leading-icon\">\n                  {setProps(LeadingIcon, 20, classNames(\"text-gray-400\"))}\n                </div>\n              )}\n              {selectedOption ? selectedOption.label : placeholder}\n              <ArrowDown\n                size={20}\n                className={classNames(\n                  \"text-gray-500 dark:text-gray-300 transform duration-100 ease-out\",\n                  {\n                    \"-rotate-180\": open,\n                    \"ml-auto\": width,\n                    \"ml-3.5\": !width,\n                  },\n                )}\n              />\n            </ListboxButton>\n            <ListboxOptions className=\"absolute z-10 inline-flex flex-col w-full bg-white border border-gray-300 rounded-lg shadow-lg top-13 dark:border-gray-500 dark:bg-gray-800\">\n              {options?.map((option, index) => (\n                <ListboxOption as={React.Fragment} key={option.value} value={option.value}>\n                    {({focus, selected}) => (\n                        <li className={classNames(classNames(\n                        \"flex items-center pl-3.5 pr-3 justify-between h-11 text-gray-900 dark:text-white text-md cursor-pointer hover:bg-primary-25 dark:hover:bg-gray-100 dark:hover:bg-opacity-10 whitespace-nowrap\",\n                        {\n                          \"bg-primary-25 dark:bg-gray-100 dark:bg-opacity-10\":\n                            focus,\n                          \"rounded-t-lg\": index === 0,\n                          \"rounded-b-lg\": index === options.length - 1,\n                        },\n                      ))}>\n                        <div className=\"flex items-center\">{option.label}</div>\n                        {selected && <Check className=\"ml-5 text-primary-600 dark:text-white\" />}\n                    </li>\n                    )}\n                    \n                </ListboxOption>\n              ))}\n            </ListboxOptions>\n          </>\n        )}\n      </Listbox>\n    </div>\n  );\n};\n","import { IColor } from \"../@interfaces\";\n\nexport const colors: IColor[] = [\n  {\n    bgClass: \"bg-gray-2\",\n    code: 25,\n    hex: \"#FCFCF\",\n  },\n  {\n    bgClass: \"bg-gray-50\",\n    code: 50,\n    hex: \"#F9FAFB\",\n  },\n  {\n    bgClass: \"bg-gray-100\",\n    code: 100,\n    hex: \"#F2F4F7\",\n  },\n  {\n    bgClass: \"bg-gray-200\",\n    code: 200,\n    hex: \"#E4E7EC\",\n  },\n  {\n    bgClass: \"bg-gray-300\",\n    code: 300,\n    hex: \"#D0D5DD\",\n  },\n  {\n    bgClass: \"bg-gray-400\",\n    code: 400,\n    hex: \"#98A2B3\",\n  },\n  {\n    bgClass: \"bg-gray-500\",\n    code: 500,\n    hex: \"#667085\",\n  },\n  {\n    bgClass: \"bg-gray-600\",\n    code: 600,\n    hex: \"#475467\",\n  },\n  {\n    bgClass: \"bg-gray-700\",\n    code: 700,\n    hex: \"#344054\",\n  },\n  {\n    bgClass: \"bg-gray-800\",\n    code: 800,\n    hex: \"#1D2939\",\n  },\n  {\n    bgClass: \"bg-gray-900\",\n    code: 900,\n    hex: \"#101828\",\n  },\n  {\n    bgClass: \"bg-primary-25\",\n    code: 25,\n    hex: \"#F5FAFF\",\n  },\n  {\n    bgClass: \"bg-primary-50\",\n    code: 50,\n    hex: \"#EFF8FF\",\n  },\n  {\n    bgClass: \"bg-primary-100\",\n    code: 100,\n    hex: \"#D1E9FF\",\n  },\n  {\n    bgClass: \"bg-primary-200\",\n    code: 200,\n    hex: \"#B2DDFF\",\n  },\n  {\n    bgClass: \"bg-primary-300\",\n    code: 300,\n    hex: \"#84CAFF\",\n  },\n  {\n    bgClass: \"bg-primary-400\",\n    code: 400,\n    hex: \"#53B1FD\",\n  },\n  {\n    bgClass: \"bg-primary-500\",\n    code: 500,\n    hex: \"#2E90FA\",\n  },\n  {\n    bgClass: \"bg-primary-600\",\n    code: 600,\n    hex: \"#1570EF\",\n  },\n  {\n    bgClass: \"bg-primary-700\",\n    code: 700,\n    hex: \"#175CD3\",\n  },\n  {\n    bgClass: \"bg-primary-800\",\n    code: 800,\n    hex: \"#1849A9\",\n  },\n  {\n    bgClass: \"bg-primary-900\",\n    code: 900,\n    hex: \"#194185\",\n  },\n  {\n    bgClass: \"bg-error-25\",\n    code: 25,\n    hex: \"#FFFBFA\",\n  },\n  {\n    bgClass: \"bg-error-50\",\n    code: 50,\n    hex: \"#FEF3F2\",\n  },\n  {\n    bgClass: \"bg-error-100\",\n    code: 100,\n    hex: \"#FEE4E2\",\n  },\n  {\n    bgClass: \"bg-error-200\",\n    code: 200,\n    hex: \"#FECDCA\",\n  },\n  {\n    bgClass: \"bg-error-300\",\n    code: 300,\n    hex: \"#FDA29B\",\n  },\n  {\n    bgClass: \"bg-error-400\",\n    code: 400,\n    hex: \"#F97066\",\n  },\n  {\n    bgClass: \"bg-error-500\",\n    code: 500,\n    hex: \"#F04438\",\n  },\n  {\n    bgClass: \"bg-error-600\",\n    code: 600,\n    hex: \"#D92D20\",\n  },\n  {\n    bgClass: \"bg-error-700\",\n    code: 700,\n    hex: \"#B42318\",\n  },\n  {\n    bgClass: \"bg-error-800\",\n    code: 800,\n    hex: \"#912018\",\n  },\n  {\n    bgClass: \"bg-error-900\",\n    code: 900,\n    hex: \"#7A271A\",\n  },\n  {\n    bgClass: \"bg-warning-25\",\n    code: 25,\n    hex: \"#FFFCF5\",\n  },\n  {\n    bgClass: \"bg-warning-50\",\n    code: 50,\n    hex: \"#FFFAEB\",\n  },\n  {\n    bgClass: \"bg-warning-100\",\n    code: 100,\n    hex: \"#FEF0C7\",\n  },\n  {\n    bgClass: \"bg-warning-200\",\n    code: 200,\n    hex: \"#FEDF89\",\n  },\n  {\n    bgClass: \"bg-warning-300\",\n    code: 300,\n    hex: \"#FEC84B\",\n  },\n  {\n    bgClass: \"bg-warning-400\",\n    code: 400,\n    hex: \"#FDB022\",\n  },\n  {\n    bgClass: \"bg-warning-500\",\n    code: 500,\n    hex: \"#F79009\",\n  },\n  {\n    bgClass: \"bg-warning-600\",\n    code: 600,\n    hex: \"#DC6803\",\n  },\n  {\n    bgClass: \"bg-warning-700\",\n    code: 700,\n    hex: \"#B54708\",\n  },\n  {\n    bgClass: \"bg-warning-800\",\n    code: 800,\n    hex: \"#93370D\",\n  },\n  {\n    bgClass: \"bg-warning-900\",\n    code: 900,\n    hex: \"#7A2E0E\",\n  },\n  {\n    bgClass: \"bg-success-25\",\n    code: 25,\n    hex: \"#F6FEF9\",\n  },\n  {\n    bgClass: \"bg-success-50\",\n    code: 50,\n    hex: \"#ECFDF3\",\n  },\n  {\n    bgClass: \"bg-success-100\",\n    code: 100,\n    hex: \"#D1FADF\",\n  },\n  {\n    bgClass: \"bg-success-200\",\n    code: 200,\n    hex: \"#A6F4C5\",\n  },\n  {\n    bgClass: \"bg-success-300\",\n    code: 300,\n    hex: \"#6CE9A6\",\n  },\n  {\n    bgClass: \"bg-success-400\",\n    code: 400,\n    hex: \"#32D583\",\n  },\n  {\n    bgClass: \"bg-success-500\",\n    code: 500,\n    hex: \"#12B76A\",\n  },\n  {\n    bgClass: \"bg-success-600\",\n    code: 600,\n    hex: \"#039855\",\n  },\n  {\n    bgClass: \"bg-success-700\",\n    code: 700,\n    hex: \"#027A48\",\n  },\n  {\n    bgClass: \"bg-success-800\",\n    code: 800,\n    hex: \"#05603A\",\n  },\n  {\n    bgClass: \"bg-success-900\",\n    code: 900,\n    hex: \"#054F31\",\n  },\n];\n","import { IOption } from \"../@interfaces\";\n\nexport const prices: IOption[] = [\n  {\n    label: \"Any price\",\n    value: \"-1\",\n  },\n  {\n    label: \"Below 50\",\n    value: \"0\",\n  },\n  {\n    label: \"50 - 100\",\n    value: \"50\",\n  },\n  {\n    label: \"100 - 200\",\n    value: \"100\",\n  },\n  {\n    label: \"200 - 300\",\n    value: \"200\",\n  },\n  {\n    label: \"300 - 400\",\n    value: \"300\",\n  },\n  {\n    label: \"400 - 500\",\n    value: \"400\",\n  },\n  {\n    label: \"500 - 600\",\n    value: \"500\",\n  },\n];\n"],"names":["BadgeSizeClasses","sm","md","lg","BadgeVariantClasses","gray","primary","warning","error","success","buttonVariantClasses","default","hover","focus","disabled","secondary","secondaryGray","tertiary","tertiaryGray","buttonSizeClasses","xl","2xl","buttonIconSizeClasses","TypographyVariantClasses","xs","h6","h5","h4","h3","h2","h1","TypographyWeightClasses","regular","medium","semibold","bold","Typography","_ref","variant","customWeight","customColor","className","children","TypographyVariantClassName","TypographyWeightClassName","Component","includes","React","classNames","tracking-tight","text-black dark:text-white","TextInput","type","value","label","placeholder","helperText","LeadingIcon","TrailingIcon","leadingText","handleChange","setClassName","icon","additionalClass","isValidElement","cloneElement","props","inputId","toLowerCase","replace","htmlFor","flex items-center","text-error-500","text-gray-400","bg-gray-50 dark:bg-gray-700","dark:bg-gray-800","id","onChange","pl-9","pr-9","rounded-l-0 rounded-r-lg","rounded-lg","border-gray-300 dark:border-gray-500 focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20","border-error-300 focus:ring-4 focus:border-error-300 focus:ring-error-100","bg-white dark:bg-gray-800","SubNavItem","inDropdown","isActive","subItem","onClick","key","bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10","text-gray-800 dark:text-white","text-primary-600 dark:text-white","pl-13","pl-4","NavItem","item","activeSubNavItem","open","openDropdown","setProps","iconSize","size","ArrowDown","FiChevronDown","Popover","PopoverButton","as","Fragment","px-4","ml-2 px-2 w-10","-rotate-180","toggleSidebar","text-gray-900","opacity-0 hidden","subItems","length","map","PopoverPanel","images","logo","IN","BE","DE","FR","IT","NL","RU","US","renderLogo","src","alt","countries","city","countryISO","country","Layers","FiLayers","Settings","FiSettings","Flag","FiFlag","MapPin","FiMapPin","CheckSquare","FiCheckSquare","BarChart","FiBarChart2","ArrowLeft","FiArrowLeft","navItemsTop","order","path","FiHome","navItemsBottom","Circle","FiCircle","List","FiList","Grid","FiGrid","options2","content","options3","IconOnly","buttonProps","buttonVariantClassName","[object Object]","mr-2","mr-3","ml-2","ml-3","setIconSize","options","activeOption","setActiveOption","option","index","rounded-l-lg","rounded-r-lg","border-r-0","code","hex","bgClass","toggleOpen","role","width","height","viewBox","xmlns","opacity-0","d","strokeWidth","strokeLinecap","strokeLinejoin","totalPages","page","isMobile","setPage","handlePageChange","ArrowRight","FiArrowRight","cursor-pointer","opacity-50","Pagination","currentPage","edgePageCount","setCurrentPage","truncableText","middlePagesSiblingCount","truncableClassName","PrevButton","PageButton","activeClassName","inactiveClassName","NextButton","selectedOption","setSelectedOption","Check","FiCheck","Listbox","_ref2","ListboxButton","text-gray-900 dark:text-white","text-gray-500 dark:text-gray-300","ml-auto","ml-3.5","ListboxOptions","ListboxOption","_ref3","selected","bg-primary-25 dark:bg-gray-100 dark:bg-opacity-10","rounded-t-lg","rounded-b-lg","username","email","setOpen","Logout","FiLogOut","Search","FiSearch","searchString","setSearchString","useState","activeNavItem","setActiveNavItem","setActiveSubNavItem","openDropdowns","setOpenDropdowns","onClickNavItem","subNavPath","filter","dropdownItem","w-80","w-24","border-r border-gray-300 dark:border-opacity-20","e","target","w-14","w-70"],"mappings":"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"}

package/dist/box-ui.esm.js

@@ -177,6 +177,7 @@ const Paginate = _ref => {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames("flex w-full h-10 items-center", className)
     }, /*#__PURE__*/React.createElement(ArrowLeft, {
+      "data-testid": "prevBtn",
       size: 20,
       className: classNames("mr-3 text-gray-500 dark:text-white", {
         "cursor-pointer": page !== 0,
@@ -190,6 +191,7 @@ const Paginate = _ref => {
     }), /*#__PURE__*/React.createElement("div", {
       className: "flex justify-center flex-grow text-sm text-gray-700 select-none dark:text-white"
     }, `Page ${page} of ${totalPages}`), /*#__PURE__*/React.createElement(ArrowRight, {
+      "data-testid": "nextBtn",
       size: 20,
       className: classNames("ml-3 text-gray-500 dark:text-white", {
         "cursor-pointer": page !== totalPages - 1,
@@ -271,7 +273,8 @@ const Select = _ref => {
         "text-gray-500 dark:text-gray-300": !selectedOption
       }, width)
     }, LeadingIcon && (/*#__PURE__*/React.createElement("div", {
-      className: "w-5 h-5 mr-2 overflow-hidden"
+      className: "w-5 h-5 mr-2 overflow-hidden",
+      "data-testid": "leading-icon"
     }, setProps(LeadingIcon, 20, classNames("text-gray-400")))), selectedOption ? selectedOption.label : placeholder, /*#__PURE__*/React.createElement(ArrowDown, {
       size: 20,
       className: classNames("text-gray-500 dark:text-gray-300 transform duration-100 ease-out", {
@@ -371,12 +374,15 @@ const TextInput = _ref => {
   const {
     setClassName
   } = useIconClassName();
-  return /*#__PURE__*/React.createElement("div", null, label && (/*#__PURE__*/React.createElement(Typography, {
+  const inputId = `textinput-${(label === null || label === void 0 ? void 0 : label.toLowerCase().replace(/\s+/g, '-')) || 'input'}`;
+  return /*#__PURE__*/React.createElement("div", null, label && (/*#__PURE__*/React.createElement("label", {
+    htmlFor: inputId
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: "sm",
     customWeight: "medium",
     customColor: "text-gray-700 dark:text-white",
     className: "mb-1.5"
-  }, label)), /*#__PURE__*/React.createElement("div", {
+  }, label))), /*#__PURE__*/React.createElement("div", {
     className: classNames("relative", {
       "flex items-center": leadingText
     })
@@ -393,6 +399,7 @@ const TextInput = _ref => {
       "dark:bg-gray-800": !disabled
     })
   }, leadingText)), /*#__PURE__*/React.createElement("input", {
+    id: inputId,
     type: type,
     value: value,
     placeholder: placeholder,
@@ -408,14 +415,10 @@ const TextInput = _ref => {
       "bg-white dark:bg-gray-800": !disabled,
       "bg-gray-50 dark:bg-gray-700": disabled
     })
-  })), error && (/*#__PURE__*/React.createElement(Typography, {
-    variant: "sm",
-    customWeight: "regular",
-    className: "mt-1.5 text-error-500"
-  }, error)), helperText && (/*#__PURE__*/React.createElement(Typography, {
-    variant: "sm",
-    customWeight: "regular",
-    className: "mt-1.5 text-gray-500"
+  })), error && (/*#__PURE__*/React.createElement("label", {
+    className: "text-sm font-normal mt-1.5 text-error-500"
+  }, error)), helperText && (/*#__PURE__*/React.createElement("label", {
+    className: "text-sm font-normal mt-1.5 text-gray-500"
   }, helperText)));
 };
 
@@ -590,6 +593,7 @@ const SideNav = _ref => {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "side-nav",
     className: classNames("py-6 flex flex-col flex-grow bg-white dark:bg-gray-900 transform ease-out duration-100 overflow-y-auto xs:overflow-y-visible", {
       "w-80": open,
       "w-24": !open,
@@ -673,6 +677,7 @@ const MobileNavbar = _ref => {
     customWeight: "medium",
     className: "select-none"
   }, "Box UI"), /*#__PURE__*/React.createElement("svg", {
+    role: "button",
     width: "32",
     height: "32",
     viewBox: "0 0 32 32",
@@ -680,6 +685,7 @@ const MobileNavbar = _ref => {
     className: classNames("text-gray-500 transition-all duration-100 ease-out cursor-pointer stroke-current hover:text-gray-900 dark:text-white dark:hover:text-gray-200", {
       "opacity-0": open
     }),
+    "data-testid": "mobile-nav-toggle",
     onClick: toggleOpen
   }, /*#__PURE__*/React.createElement("path", {
     d: "M4 16H22.6667M4 8H28M4 24H28",