ekm-ui 0.0.13 → 0.0.14

package/dist/stacked-list-item.d.ts

@@ -1,13 +1,14 @@
 type Props = {
     id: number;
     title: string;
-    text: string;
+    text?: string | JSX.Element;
     avatarShow?: boolean;
     avatarColor?: string;
     avatarBorder?: string;
     children?: JSX.Element;
     isLocked?: boolean;
+    icon?: JSX.Element;
 };
-declare function StackedListItem({ id, title, text, avatarShow, avatarColor, avatarBorder, children, isLocked, }: Props): JSX.Element;
+declare function StackedListItem({ id, title, text, avatarShow, avatarColor, avatarBorder, children, isLocked, icon, }: Props): JSX.Element;
 
 export { StackedListItem };

package/dist/stacked-list-item.mjs

@@ -1,20 +1,23 @@
-export { a as StackedListItem } from './chunk-KV5UCUDY.mjs';
+export { a as StackedListItem } from './chunk-KYPV6EAR.mjs';
+import './chunk-RMX72FR3.mjs';
 import './chunk-256SAVHD.mjs';
 import './chunk-3ZCDEN7B.mjs';
 import './chunk-HAQTLD4G.mjs';
 import './chunk-QWPN2UNV.mjs';
+import './chunk-LWDFKEBO.mjs';
+import './chunk-KAQJAKQH.mjs';
 import './chunk-OT256LE6.mjs';
+import './chunk-FRIXS4BL.mjs';
 import './chunk-FJQEJBBY.mjs';
 import './chunk-EWNPNF2B.mjs';
 import './chunk-Y5FSZ56P.mjs';
-import './chunk-ZHQYEIOT.mjs';
+import './chunk-NBWCYEL6.mjs';
 import './chunk-664HOPW7.mjs';
+import './chunk-JKIN7YAI.mjs';
 import './chunk-G676EBCC.mjs';
-import './chunk-ADTTJ2WF.mjs';
-import './chunk-WSFN3NS3.mjs';
+import './chunk-YTTLKTRL.mjs';
+import './chunk-JWLV57CY.mjs';
 import './chunk-ZT7KDTGF.mjs';
-import './chunk-FRIXS4BL.mjs';
-import './chunk-V2Y67DG5.mjs';
 import './chunk-RUPJ2ZHA.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=stacked-list-item.mjs.map

package/dist/text-row.d.ts

@@ -3,7 +3,8 @@ type Props = {
     title: string;
     text: string;
     border?: boolean;
+    className?: string;
 };
-declare function TextRow({ children, title, text, border }: Props): JSX.Element;
+declare function TextRow({ children, title, text, border, className }: Props): JSX.Element;
 
 export { TextRow };

package/dist/text-row.mjs

@@ -1,4 +1,4 @@
-export { a as TextRow } from './chunk-ZHQYEIOT.mjs';
+export { a as TextRow } from './chunk-RMX72FR3.mjs';
 import './chunk-RUPJ2ZHA.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=text-row.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "sideEffects": [
     "**/*.css"
   ],

package/src/alert.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import { HiInformationCircle, HiExclamation } from "react-icons/hi";
+
+type Props = {
+  text: string;
+  type: "warning" | "info";
+};
+
+export function Alert({ text, type }: Props) {
+  return (
+    <div
+      className={clsx(
+        "flex items-center",
+        {
+          info: " text-blue-500  dark:text-blue-200",
+          warning: " text-yellow-500  dark:text-yellow-200",
+        }[type]
+      )}
+    >
+      {type == "warning" && (
+        <HiExclamation className="ml-4 mr-2 h-auto w-5 flex-shrink-0 " />
+      )}
+      {type == "info" && (
+        <HiInformationCircle className="ml-4 mr-2 h-auto w-5 flex-shrink-0 " />
+      )}
+      <p
+        className={clsx(
+          "text-sm font-medium",
+          {
+            info: " text-gray-500 dark:bg-gray-400 ",
+            warning: "",
+          }[type]
+        )}
+      >
+        {text}
+      </p>
+    </div>
+  );
+}

package/src/button-group-item.tsx

@@ -0,0 +1,26 @@
+type Props = {
+  text: string;
+  border: string;
+  active?: boolean;
+  onclick?: () => void;
+};
+
+export function ButtonGroupItem({ text, border, active, onclick }: Props) {
+  return (
+    <button
+      type="button"
+      onClick={onclick}
+      className={`"rounded-l-lg dark:focus:ring-blue-500" border border-gray-200 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-gray-100 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white
+      ${border}
+      ${
+        active
+          ? "bg-primary-600 text-white hover:bg-primary-700 focus:text-white dark:bg-primary-600"
+          : ""
+      }
+
+      `}
+    >
+      {text}
+    </button>
+  );
+}

package/src/color-picker.tsx

@@ -46,7 +46,7 @@ export function ColorPicker({
     <div className="relative">
       <button
         type="button"
-        className=" h-6 w-6 rounded-md border-2 border-solid border-slate-600"
+        className=" h-6 w-6 rounded-md border border-solid border-slate-300"
         style={{
           backgroundColor: `${colour}`,
         }}

package/src/drawer.tsx

@@ -69,7 +69,6 @@ export function Drawer({ show, onClose, children, title }: Props) {
           <span className="sr-only">Close menu</span>
         </button>
       </div>
-
       <div className="flex h-full flex-col p-4 pt-20">{children}</div>
     </div>
   );

package/src/form-row.tsx

@@ -5,7 +5,7 @@ type Props = {
   children: React.ReactNode;
   label: string;
   htmlFor: string;
-  helperText?: string;
+  helperText?: String;
   className?: string;
   errorText?: string;
 };

package/src/index.tsx

@@ -15,5 +15,8 @@ export { ColorPicker } from "./color-picker";
 export { Avatar } from "./avatar";
 export { TextRow } from "./text-row";
 export { PageHeader } from "./page-header";
+export { ButtonGroupItem } from "./button-group-item";
+export { InputAddon } from "./input-addon";
+export { Alert } from "./alert";
 
 import "./styles.css";

package/src/input-addon.tsx

@@ -0,0 +1,30 @@
+type Props = {
+  leftAddon?: any;
+  inputField:any
+  rightAddon?: any;
+};
+
+export function InputAddon({
+  leftAddon,
+  inputField,
+  rightAddon,
+  
+}: Props) {
+  return (
+    <div className="relative rounded-md shadow-sm">
+      {leftAddon && (
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+          <span className="text-gray-500 sm:text-sm">{leftAddon}</span>
+        </div>
+      )}
+      {inputField}
+      {rightAddon && (
+        <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+          <span className="text-gray-500 sm:text-sm" id="price-currency">
+            {rightAddon}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/stacked-list-item.tsx

@@ -4,12 +4,13 @@ import { Badge } from "flowbite-react";
 type Props = {
   id: number;
   title: string;
-  text: string;
+  text?: string | JSX.Element;
   avatarShow?: boolean;
   avatarColor?: string;
   avatarBorder?: string;
   children?: JSX.Element;
   isLocked?: boolean;
+  icon?: JSX.Element;
 };
 
 export function StackedListItem({
@@ -21,6 +22,7 @@ export function StackedListItem({
   avatarBorder,
   children,
   isLocked,
+  icon,
 }: Props) {
   function getFirstAndLastLetters(str: string) {
     var words = str.split(" ");
@@ -40,9 +42,9 @@ export function StackedListItem({
   return (
     <li
       key={id}
-      className="hover:bg-gray-90 relative flex justify-between gap-x-6 px-4 py-5 dark:hover:bg-gray-900 sm:px-6  lg:px-8"
+      className="hover:bg-gray-90 relative flex justify-between gap-x-6 px-4 py-5  dark:hover:bg-gray-900"
     >
-      <div className="flex min-w-0 flex-auto gap-x-4">
+      <div className="flex min-w-0 flex-auto items-center gap-x-4">
         {avatarShow && (
           <Avatar
             placeholderInitials={avatarLetters}
@@ -50,6 +52,7 @@ export function StackedListItem({
             border={avatarBorder}
           />
         )}
+        {icon && icon}
         <div className="min-w-0 flex-auto">
           <div className="flex gap-2">
             <p className="truncate text-sm font-semibold text-gray-900 dark:text-white">
@@ -58,7 +61,7 @@ export function StackedListItem({
             {isLocked && <Badge color="failure">Locked</Badge>}
           </div>
           <p className="mt-1 flex text-xs text-gray-500 dark:text-gray-400">
-            <span className="relative truncate hover:underline">{text}</span>
+            <span className="relative truncate">{text}</span>
           </p>
         </div>
       </div>

package/src/text-row.tsx

@@ -3,13 +3,14 @@ type Props = {
   title: string;
   text: string;
   border?: boolean;
+  className?: string;
 };
 
-export function TextRow({ children, title, text, border }: Props) {
+export function TextRow({ children, title, text, border, className }: Props) {
   return (
     <div
-      className={`flex flex-wrap items-center justify-between gap-4 pt-4 sm:flex-nowrap 
-      ${border ? "border-b pb-4 dark:border-gray-900" : ""}`}
+      className={`${className} flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap 
+      ${border ? "border-b pb-4 dark:border-gray-900" : ""} `}
     >
       <div>
         <p className="mb-1 text-sm font-medium dark:text-white">{title}</p>

package/dist/chunk-KV5UCUDY.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/card-payment-block.tsx","../src/layout/layout.tsx","../shared/sidebar-items.tsx","../src/stacked-list-item.tsx"],"names":["TextInput","Card","Radio","Label","HiCreditCard","Fragment","jsx","jsxs","CardPaymentBlock","cardPayment","enablePayPal","FormRow","useMemo","useState","Sidebar","HiChartPie","HiDocument","HiGlobeAlt","HiPaintBrush","HiShoppingBag","HiTag","HiRocketLaunch","HiStar","SidebarItems","currentPage","Layout","children","hasHeader","isSidebarCollapsed","setIsSidebarCollapsed","showNavbarCloseButton","setShowNavbarCloseButton","is_small_screen_default","Navbar","LoveFooter","Badge","StackedListItem","id","title","text","avatarShow","avatarColor","avatarBorder","isLocked","getFirstAndLastLetters","str","words","firstWord","lastWord","firstLetter","lastLetter","avatarLetters","Avatar"],"mappings":"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","sourcesContent":["import { FormRow } from \"./index\";\nimport { TextInput, Card, Radio, Label } from \"flowbite-react\";\nimport { HiCreditCard } from \"react-icons/hi\";\n\nexport function CardPaymentBlock({\n  cardPayment,\n  enablePayPal,\n}: {\n  cardPayment?: boolean;\n  enablePayPal?: boolean;\n}) {\n  return (\n    <Card className=\"border-0 shadow-sm\t\">\n      <h3 className=\"text-lg font-semibold dark:text-white\">Billing Details</h3>\n      <div className=\"flex items-center justify-between border-b-2 pb-4\">\n        <fieldset className=\"flex w-full flex-col gap-4\" id=\"radio\">\n          <div className=\"flex flex-col gap-2\">\n            <div className=\"flex items-center gap-2\">\n              {enablePayPal && (\n                <Radio\n                  defaultChecked\n                  id=\"creditDebitCard\"\n                  name=\"paymentType\"\n                  value=\"creditDebitCard\"\n                />\n              )}\n\n              <Label htmlFor=\"creditDebitCard\">\n                Pay by Credit or Debit card\n              </Label>\n            </div>\n            <div className={enablePayPal ? \"ml-6 flex gap-2\" : \"flex gap-2\"}>\n              <img\n                src=\"https://shared.ekmcdn.com/images/uifw/cards/visa.png\"\n                alt=\"VISA Card Logo\"\n              />\n              <img\n                src=\"https://shared.ekmcdn.com/images/uifw/cards/mastercard.png\"\n                alt=\"MasterCard Card Logo\"\n              />\n              <img\n                src=\"https://shared.ekmcdn.com/images/uifw/cards/maestro.png\"\n                alt=\"Maestro Card Logo\"\n              />\n              <img\n                src=\"https://shared.ekmcdn.com/images/uifw/cards/amex.png\"\n                alt=\"AMEX Card Logo\"\n              />\n            </div>\n          </div>\n          {cardPayment && (\n            <>\n              <div className=\"grid grid-cols-1 content-start gap-6 sm:grid-cols-2\">\n                <FormRow\n                  label=\"Name on Card *\"\n                  htmlFor=\"nameOnCard\"\n                  helperText=\"This is your name as is appears on the front of your credit or debit card.\"\n                >\n                  <TextInput\n                    id=\"nameOnCard\"\n                    name=\"nameOnCard\"\n                    placeholder=\"Your name\"\n                    type=\"text\"\n                    required\n                  />\n                </FormRow>\n                <FormRow\n                  label=\"Card Number *\"\n                  htmlFor=\"cardNumber\"\n                  helperText=\"This is the long number on the front of your credit or debit card.\"\n                >\n                  <TextInput\n                    id=\"nameOnCard\"\n                    name=\"nameOnCard\"\n                    placeholder=\"0000 0000 0000 0000\"\n                    type=\"number\"\n                    rightIcon={HiCreditCard}\n                    required\n                  />\n                </FormRow>\n              </div>\n              <div className=\"grid grid-cols-1 content-start gap-6 sm:grid-cols-4\">\n                <FormRow\n                  label=\"Expiry Date *\"\n                  htmlFor=\"nameOnCard\"\n                  helperText=\"The expiry date as it appears on your card.\"\n                >\n                  <TextInput\n                    id=\"nameOnCard\"\n                    name=\"nameOnCard\"\n                    placeholder=\"MM / YY\"\n                    type=\"text\"\n                    required\n                  />\n                </FormRow>\n                <FormRow\n                  label=\"Security Code (CVC) *\"\n                  htmlFor=\"cardNumber\"\n                  helperText=\"The last three digits on the back of your card’s signature strip.\"\n                >\n                  <TextInput\n                    id=\"nameOnCard\"\n                    name=\"nameOnCard\"\n                    placeholder=\"123\"\n                    type=\"number\"\n                    rightIcon={HiCreditCard}\n                    required\n                  />\n                </FormRow>\n              </div>\n            </>\n          )}\n          {enablePayPal && (\n            <div className=\"flex flex-col gap-2\">\n              <div className=\"flex items-center gap-2\">\n                <Radio id=\"PayPal\" name=\"paymentType\" value=\"PayPal\" />\n                <Label htmlFor=\"PayPal\">PayPal</Label>\n              </div>\n              <div className=\"ml-6\">\n                <img\n                  src=\"https://shared.ekmcdn.com/images/uifw/cards/paypal.png\"\n                  alt=\"PayPal Icon\"\n                />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </div>\n    </Card>\n  );\n}\n","import { Navbar, Sidebar, LoveFooter } from \"../\";\nimport { useMemo, useState } from \"react\";\nimport isSmallScreen from \"../helpers/is-small-screen\";\nimport { SidebarItems } from \"../../shared/sidebar-items\";\n\ntype Props = {\n  children: JSX.Element;\n  hasHeader?: boolean;\n};\n\nexport function Layout({ children, hasHeader }: Props) {\n  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);\n  const [showNavbarCloseButton, setShowNavbarCloseButton] = useState(false);\n\n  useMemo(() => {\n    if (isSmallScreen() && !isSidebarCollapsed) {\n      setShowNavbarCloseButton(true);\n    }\n  }, [isSidebarCollapsed]);\n\n  return (\n    <>\n      <Navbar\n        onMenuButtonClick={() => {\n          setIsSidebarCollapsed(!isSidebarCollapsed);\n        }}\n        showCloseButton={showNavbarCloseButton}\n        avatarImg=\"https://avatars.githubusercontent.com/u/49406022?v=4\"\n      />\n      <div className=\"flex\">\n        <Sidebar collapsed={isSidebarCollapsed}>\n          <SidebarItems />\n        </Sidebar>\n        <div className=\"flex w-3/4 flex-grow flex-col\">\n          <main\n            className={`\"relative dark:bg-gray-900\" flex h-full flex-grow flex-col gap-4 overflow-y-auto bg-gray-50 ${\n              !hasHeader ? \"p-4\" : \"\"\n            }`}\n          >\n            {children}\n          </main>\n          <LoveFooter />\n        </div>\n      </div>\n    </>\n  );\n}\n","import { Sidebar } from \"flowbite-react\";\n\nimport {\n  HiChartPie,\n  HiClipboard,\n  HiDocument,\n  HiGlobeAlt,\n  HiPaintBrush,\n  HiShoppingBag,\n  HiTag,\n  HiRocketLaunch,\n  HiStar,\n} from \"react-icons/hi2\";\n\nexport function SidebarItems() {\n  const currentPage = \"/\" as string;\n  return (\n    <Sidebar.Items>\n      <Sidebar.ItemGroup>\n        <Sidebar.Item\n          href=\"/\"\n          icon={HiChartPie}\n          className={\"/\" === currentPage ? \"bg-gray-100 dark:bg-gray-700\" : \"\"}\n        >\n          Dashboard\n        </Sidebar.Item>\n        <Sidebar.Item\n          href=\"/products\"\n          icon={HiTag}\n          className={\n            \"/products\" === currentPage ? \"bg-gray-100 dark:bg-gray-700\" : \"\"\n          }\n        >\n          Products\n        </Sidebar.Item>\n        <Sidebar.Item\n          href=\"/orders\"\n          icon={HiShoppingBag}\n          label=\"27\"\n          className={\n            \"/orders\" === currentPage ? \"bg-gray-100 dark:bg-gray-700\" : \"\"\n          }\n        >\n          Orders\n        </Sidebar.Item>\n        <Sidebar.Collapse icon={HiPaintBrush} label=\"Design\">\n          <Sidebar.Item\n            href=\"/design/design\"\n            className={\n              \"/design/theme\" === currentPage\n                ? \"bg-gray-100 dark:bg-gray-700\"\n                : \"\"\n            }\n          >\n            Theme\n          </Sidebar.Item>\n          <Sidebar.Item\n            href=\"/design/editor\"\n            className={\n              \"/e-commerce/billing\" === currentPage\n                ? \"bg-gray-100 dark:bg-gray-700\"\n                : \"\"\n            }\n          >\n            Editor\n          </Sidebar.Item>\n          <Sidebar.Item\n            href=\"/theme/webpages\"\n            className={\n              \"/e-commerce/invoice\" === currentPage\n                ? \"bg-gray-100 dark:bg-gray-700\"\n                : \"\"\n            }\n          >\n            Webpages\n          </Sidebar.Item>\n        </Sidebar.Collapse>\n        <Sidebar.Item\n          href=\"/features\"\n          icon={HiStar}\n          className={\n            \"/features\" === currentPage ? \"bg-gray-100 dark:bg-gray-700\" : \"\"\n          }\n        >\n          Features\n        </Sidebar.Item>\n      </Sidebar.ItemGroup>\n      <Sidebar.ItemGroup>\n        <Sidebar.Item\n          href=\"https://github.com/themesberg/flowbite-react/\"\n          icon={HiDocument}\n        >\n          Docs\n        </Sidebar.Item>\n        <Sidebar.Item href=\"https://flowbite-react.com/\" icon={HiRocketLaunch}>\n          What's New\n        </Sidebar.Item>\n        <Sidebar.Item\n          href=\"https://github.com/themesberg/flowbite-react/issues\"\n          icon={HiGlobeAlt}\n        >\n          Support Centre\n        </Sidebar.Item>\n      </Sidebar.ItemGroup>\n    </Sidebar.Items>\n  );\n}\n","import { Avatar } from \"./\";\nimport { Badge } from \"flowbite-react\";\n\ntype Props = {\n  id: number;\n  title: string;\n  text: string;\n  avatarShow?: boolean;\n  avatarColor?: string;\n  avatarBorder?: string;\n  children?: JSX.Element;\n  isLocked?: boolean;\n};\n\nexport function StackedListItem({\n  id,\n  title,\n  text,\n  avatarShow,\n  avatarColor,\n  avatarBorder,\n  children,\n  isLocked,\n}: Props) {\n  function getFirstAndLastLetters(str: string) {\n    var words = str.split(\" \");\n    var firstWord = words[0];\n    var lastWord = words[words.length - 1];\n    var firstLetter = firstWord.charAt(0);\n    if (firstWord !== lastWord) {\n      var lastLetter = lastWord.charAt(0);\n    } else {\n      var lastLetter = \"\";\n    }\n    return [firstLetter, lastLetter];\n  }\n\n  let avatarLetters = getFirstAndLastLetters(title);\n\n  return (\n    <li\n      key={id}\n      className=\"hover:bg-gray-90 relative flex justify-between gap-x-6 px-4 py-5 dark:hover:bg-gray-900 sm:px-6  lg:px-8\"\n    >\n      <div className=\"flex min-w-0 flex-auto gap-x-4\">\n        {avatarShow && (\n          <Avatar\n            placeholderInitials={avatarLetters}\n            color={avatarColor}\n            border={avatarBorder}\n          />\n        )}\n        <div className=\"min-w-0 flex-auto\">\n          <div className=\"flex gap-2\">\n            <p className=\"truncate text-sm font-semibold text-gray-900 dark:text-white\">\n              {title}\n            </p>\n            {isLocked && <Badge color=\"failure\">Locked</Badge>}\n          </div>\n          <p className=\"mt-1 flex text-xs text-gray-500 dark:text-gray-400\">\n            <span className=\"relative truncate hover:underline\">{text}</span>\n          </p>\n        </div>\n      </div>\n      <div className=\"flex flex-shrink-0  items-center gap-x-4\">\n        <div className=\"sm:flex sm:flex-col sm:items-end\">{children}</div>\n      </div>\n    </li>\n  );\n}\n"]}

package/dist/chunk-ZHQYEIOT.mjs

@@ -1,8 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function n({children:e,title:a,text:s,border:o}){return jsxs("div",{className:`flex flex-wrap items-center justify-between gap-4 pt-4 sm:flex-nowrap 
-      ${o?"border-b pb-4 dark:border-gray-900":""}`,children:[jsxs("div",{children:[jsx("p",{className:"mb-1 text-sm font-medium dark:text-white",children:a}),jsx("p",{className:"flex-shrink text-xs font-normal text-gray-500 dark:text-gray-400",children:s})]}),e&&e]})}
-
-export { n as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-ZHQYEIOT.mjs.map

package/dist/chunk-ZHQYEIOT.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/text-row.tsx"],"names":["jsx","jsxs","TextRow","children","title","text","border"],"mappings":"AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBANC,SAASC,EAAQ,CAAE,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,OAAAC,CAAO,EAAU,CAChE,OACEL,EAAC,OACC,UAAW;AAAA,QACTK,EAAS,qCAAuC,KAElD,UAAAL,EAAC,OACC,UAAAD,EAAC,KAAE,UAAU,2CAA4C,SAAAI,EAAM,EAC/DJ,EAAC,KAAE,UAAU,mEACV,SAAAK,EACH,GACF,EACCF,GAAYA,GACf,CAEJ","sourcesContent":["type Props = {\n  children?: JSX.Element;\n  title: string;\n  text: string;\n  border?: boolean;\n};\n\nexport function TextRow({ children, title, text, border }: Props) {\n  return (\n    <div\n      className={`flex flex-wrap items-center justify-between gap-4 pt-4 sm:flex-nowrap \n      ${border ? \"border-b pb-4 dark:border-gray-900\" : \"\"}`}\n    >\n      <div>\n        <p className=\"mb-1 text-sm font-medium dark:text-white\">{title}</p>\n        <p className=\"flex-shrink text-xs font-normal text-gray-500 dark:text-gray-400\">\n          {text}\n        </p>\n      </div>\n      {children && children}\n    </div>\n  );\n}\n"]}