@mekari/pixel3-theme 0.0.11 → 0.1.0-dev.0

package/dist/index.mjs

@@ -1029,58 +1029,56 @@ var spinnerRecipe = defineRecipe4({
 
 // src/recipes/accordion.ts
 import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
-var accordion = defineSlotRecipe5({
+var accordionSlotRecipe = defineSlotRecipe5({
   className: "accordion",
-  slots: ["root", "item", "trigger", "content"],
+  slots: ["header", "item", "panel"],
+  jsx: [
+    "MpAccordionHeader",
+    "MpAccordionItem",
+    "MpAccordionPanel",
+    "mp-accordion-header",
+    "mp-accordion-item",
+    "mp-accordion-panel"
+  ],
   base: {
-    root: {
-      divideY: "1px",
-      width: "full"
-    },
-    trigger: {
-      alignItems: "center",
-      color: "fg.default",
-      cursor: "pointer",
+    header: {
       display: "flex",
-      fontWeight: "normal",
-      justifyContent: "space-between",
-      textStyle: "lg",
-      width: "full",
-      fontSize: "lg"
+      alignItems: "center",
+      width: "100%",
+      outline: 0,
+      gap: 4,
+      transition: "all 0.2s",
+      py: 3,
+      fontWeight: "semiBold",
+      fontSize: "md",
+      color: "dark",
+      _disabled: { opacity: "0.4", cursor: "not-allowed" }
     },
-    content: {
-      color: "fg.muted",
-      display: "grid",
-      gridTemplateRows: "0fr",
-      transitionProperty: "grid-template-rows, padding-bottom",
-      transitionDuration: "normal",
-      transitionTimingFunction: "default",
-      _open: {
-        gridTemplateRows: "1fr"
-      },
-      "& > div": {
-        overflow: "hidden"
-      }
+    item: {
+      borderBottomWidth: "1px",
+      borderColor: "gray.100",
+      _last: { borderBottomWidth: "1px", borderColor: "gray.100" }
+    },
+    panel: {
+      py: 3
     }
   },
-  defaultVariants: {
-    size: "md"
-  },
   variants: {
-    size: {
-      md: {
-        trigger: {
-          py: "4"
-        },
-        content: {
-          pb: "6",
-          pr: "8",
-          _closed: {
-            pb: "0"
-          }
+    isClickable: {
+      true: {
+        header: {
+          cursor: "pointer"
+        }
+      },
+      false: {
+        header: {
+          cursor: "default"
         }
       }
     }
+  },
+  defaultVariants: {
+    isClickable: true
   }
 });
 
@@ -1404,21 +1402,38 @@ var tooltipRecipe = defineRecipe8({
 });
 
 // src/recipes/tabs.ts
-import { defineRecipe as defineRecipe9 } from "@pandacss/dev";
-var tabListRecipe = defineRecipe9({
+import { defineRecipe as defineRecipe9, defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
+var tabListSlotRecipe = defineSlotRecipe6({
   className: "tab-list",
   jsx: ["MpTabList", "mp-tab-list"],
+  slots: ["root", "list"],
   base: {
-    display: "flex",
-    overflow: "auto",
-    gap: "1.5rem",
-    fontSize: "md",
-    color: "gray.600",
-    marginBottom: 6,
-    padding: 0.5,
-    alignItems: "center",
-    justifyContent: "flex-start",
-    maxWidth: "full"
+    root: {
+      position: "relative",
+      "&[data-border=true]": {
+        _before: {
+          content: '""',
+          height: "1px",
+          background: "gray.100",
+          position: "absolute",
+          right: 0,
+          left: 0,
+          bottom: "1px"
+        }
+      }
+    },
+    list: {
+      display: "flex",
+      overflow: "auto",
+      gap: "1.5rem",
+      fontSize: "md",
+      color: "gray.600",
+      marginBottom: 6,
+      padding: 0.5,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      maxWidth: "full"
+    }
   }
 });
 var tabRecipe = defineRecipe9({
@@ -1603,8 +1618,8 @@ var selectedBorderRecipe = defineRecipe9({
 });
 
 // src/recipes/checkbox.ts
-import { defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
-var checkboxSlotRecipe = defineSlotRecipe6({
+import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
+var checkboxSlotRecipe = defineSlotRecipe7({
   className: "checkbox",
   jsx: ["MpCheckbox", "mp-checkbox"],
   slots: ["root", "control", "label"],
@@ -1694,8 +1709,8 @@ var checkboxSlotRecipe = defineSlotRecipe6({
 });
 
 // src/recipes/radio.ts
-import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
-var radioSlotRecipe = defineSlotRecipe7({
+import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
+var radioSlotRecipe = defineSlotRecipe8({
   className: "radio",
   jsx: ["MpRadio", "mp-radio"],
   slots: ["root", "control", "label"],
@@ -1794,8 +1809,8 @@ var radioSlotRecipe = defineSlotRecipe7({
 });
 
 // src/recipes/shared.ts
-import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
-var sharedSlotRecipe = defineSlotRecipe8({
+import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
+var sharedSlotRecipe = defineSlotRecipe9({
   className: "shared",
   jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
   slots: ["hidden"],
@@ -1812,8 +1827,8 @@ var sharedSlotRecipe = defineSlotRecipe8({
 });
 
 // src/recipes/toggle.ts
-import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
-var toggleSlotRecipe = defineSlotRecipe9({
+import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
+var toggleSlotRecipe = defineSlotRecipe10({
   className: "toggle",
   jsx: ["MpToggle", "mp-toggle"],
   slots: ["root", "control", "label"],
@@ -2018,8 +2033,8 @@ var tableContainerRecipe = defineRecipe10({
 });
 
 // src/recipes/progress.ts
-import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
-var progressSlotRecipe = defineSlotRecipe10({
+import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
+var progressSlotRecipe = defineSlotRecipe11({
   className: "progress",
   jsx: ["MpProgress", "mp-progress"],
   slots: ["root", "linear", "circularBase", "circularTrack"],
@@ -2092,8 +2107,8 @@ var progressSlotRecipe = defineSlotRecipe10({
 });
 
 // src/recipes/form-control.ts
-import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
-var formControlSlotRecipe = defineSlotRecipe11({
+import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
+var formControlSlotRecipe = defineSlotRecipe12({
   className: "form-control",
   jsx: ["MpFormControl", "mp-form-control"],
   slots: ["root", "label", "required", "helpText", "errorMessage"],
@@ -2131,8 +2146,8 @@ var formControlSlotRecipe = defineSlotRecipe11({
 });
 
 // src/recipes/input-tag.ts
-import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
-var inputTagSlotRecipe = defineSlotRecipe12({
+import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
+var inputTagSlotRecipe = defineSlotRecipe13({
   className: "input-tag",
   jsx: ["MpInputTag", "mp-input-tag"],
   slots: [
@@ -2280,8 +2295,8 @@ var dividerRecipe = defineRecipe11({
 });
 
 // src/recipes/modal.ts
-import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
-var modalSlotRecipe = defineSlotRecipe13({
+import { defineSlotRecipe as defineSlotRecipe14 } from "@pandacss/dev";
+var modalSlotRecipe = defineSlotRecipe14({
   className: "modal",
   description: "The styles for the Modal component",
   jsx: ["MpModal", "mp-modal"],
@@ -2387,8 +2402,8 @@ var modalSlotRecipe = defineSlotRecipe13({
 });
 
 // src/recipes/upload.ts
-import { defineSlotRecipe as defineSlotRecipe14 } from "@pandacss/dev";
-var uploadSlotRecipe = defineSlotRecipe14({
+import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
+var uploadSlotRecipe = defineSlotRecipe15({
   className: "upload",
   jsx: ["MpUpload", "mp-upload"],
   slots: ["root", "resetButton"],
@@ -2441,7 +2456,7 @@ var uploadSlotRecipe = defineSlotRecipe14({
     }
   }
 });
-var uploadListSlotRecipe = defineSlotRecipe14({
+var uploadListSlotRecipe = defineSlotRecipe15({
   className: "upload-list",
   jsx: ["MpUploadList", "mp-upload-list"],
   slots: ["root", "titleWrapper", "actionWrapper"],
@@ -2484,8 +2499,8 @@ var uploadListSlotRecipe = defineSlotRecipe14({
 });
 
 // src/recipes/dropzone.ts
-import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
-var dropzoneSlotRecipe = defineSlotRecipe15({
+import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
+var dropzoneSlotRecipe = defineSlotRecipe16({
   className: "dropzone",
   jsx: ["MpDropzone", "mp-dropzone"],
   slots: [
@@ -2644,8 +2659,8 @@ var dropzoneSlotRecipe = defineSlotRecipe15({
 });
 
 // src/recipes/segmented-control.ts
-import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
-var segmentedControlSlotRecipe = defineSlotRecipe16({
+import { defineSlotRecipe as defineSlotRecipe17 } from "@pandacss/dev";
+var segmentedControlSlotRecipe = defineSlotRecipe17({
   className: "segmented-control",
   jsx: ["MpSegmentedControl", "mp-segmented-control"],
   slots: ["root", "item", "hidden", "control", "label", "icon"],
@@ -2732,8 +2747,8 @@ var segmentedControlSlotRecipe = defineSlotRecipe16({
 });
 
 // src/recipes/toast.ts
-import { defineSlotRecipe as defineSlotRecipe17 } from "@pandacss/dev";
-var toastSlotRecipe = defineSlotRecipe17({
+import { defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
+var toastSlotRecipe = defineSlotRecipe18({
   className: "toast",
   jsx: ["MpToast", "mp-toast"],
   slots: ["root", "icon", "label"],
@@ -2780,8 +2795,8 @@ var toastSlotRecipe = defineSlotRecipe17({
 });
 
 // src/recipes/broadcast.ts
-import { defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
-var broadcastSlotRecipe = defineSlotRecipe18({
+import { defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
+var broadcastSlotRecipe = defineSlotRecipe19({
   className: "broadcast",
   jsx: ["MpBroadcast", "mp-broadcast"],
   slots: ["root", "container", "wrapper", "icon", "label", "textLink", "action", "close"],
@@ -2851,8 +2866,8 @@ var broadcastSlotRecipe = defineSlotRecipe18({
 });
 
 // src/recipes/rich-text-editor.ts
-import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
-var richTextEditorSlotRecipe = defineSlotRecipe19({
+import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
+var richTextEditorSlotRecipe = defineSlotRecipe20({
   className: "rich-text-editor",
   jsx: ["MpRichTextEditor", "mp-rich-text-editor"],
   slots: ["root", "toolbar", "area"],
@@ -2977,8 +2992,8 @@ var RTEStyleProviderRecipe = defineRecipe12({
 });
 
 // src/recipes/date-picker.ts
-import { defineSlotRecipe as defineSlotRecipe20, defineRecipe as defineRecipe13 } from "@pandacss/dev";
-var datePickerSlotRecipe = defineSlotRecipe20({
+import { defineSlotRecipe as defineSlotRecipe21, defineRecipe as defineRecipe13 } from "@pandacss/dev";
+var datePickerSlotRecipe = defineSlotRecipe21({
   className: "datepicker",
   jsx: ["MpDatePicker", "mp-date-picker"],
   slots: ["root", "popoverContent"],
@@ -3012,7 +3027,27 @@ var calendarPanelRangeRecipe = defineRecipe13({
     gridTemplateColumns: "repeat(2, 1fr)"
   }
 });
-var tableDateSlotRecipe = defineSlotRecipe20({
+var timePanelSlotRecipe = defineSlotRecipe21({
+  className: "timePanel",
+  slots: ["root", "column"],
+  jsx: ["TimePanel", "time-panel"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "0.5"
+    },
+    column: {
+      display: "flex",
+      flexDirection: "column",
+      height: "224px",
+      overflowY: "scroll",
+      overflowX: "hidden",
+      py: "10px"
+    }
+  }
+});
+var tableDateSlotRecipe = defineSlotRecipe21({
   className: "tableDate",
   jsx: ["TableDate", "table-date"],
   slots: [
@@ -3037,7 +3072,7 @@ var tableDateSlotRecipe = defineSlotRecipe20({
     }
   }
 });
-var tableMonthSlotRecipe = defineSlotRecipe20({
+var tableMonthSlotRecipe = defineSlotRecipe21({
   className: "tableMonth",
   jsx: ["TableMonth", "table-month"],
   slots: ["headerRoot", "headerLabel", "monthItemRoot", "monthItemWrapper", "shortcutLabelWrapper"],
@@ -3054,7 +3089,7 @@ var tableMonthSlotRecipe = defineSlotRecipe20({
     }
   }
 });
-var tableYearSlotRecipe = defineSlotRecipe20({
+var tableYearSlotRecipe = defineSlotRecipe21({
   className: "tableYear",
   jsx: ["TableYear", "table-year"],
   slots: ["headerRoot", "headerLabel", "yearItemRoot", "yearItemWrapper", "shortcutLabelWrapper"],
@@ -3183,7 +3218,7 @@ var dateItemRecipe = defineRecipe13({
   },
   staticCss: ["*"]
 });
-var pinbarSlotRecipe = defineSlotRecipe20({
+var pinbarSlotRecipe = defineSlotRecipe21({
   className: "pinbar",
   slots: ["root", "pinbar"],
   base: {
@@ -3360,8 +3395,8 @@ var timeItemRecipe = defineRecipe13({
 });
 
 // src/recipes/carousel.ts
-import { defineSlotRecipe as defineSlotRecipe21 } from "@pandacss/dev";
-var carouselSlotRecipe = defineSlotRecipe21({
+import { defineSlotRecipe as defineSlotRecipe22 } from "@pandacss/dev";
+var carouselSlotRecipe = defineSlotRecipe22({
   className: "carousel",
   jsx: ["MpCarousel", "mp-carousel"],
   slots: [
@@ -3409,8 +3444,8 @@ var carouselSlotRecipe = defineSlotRecipe21({
 });
 
 // src/recipes/chart.ts
-import { defineSlotRecipe as defineSlotRecipe22 } from "@pandacss/dev";
-var chartSlotRecipe = defineSlotRecipe22({
+import { defineSlotRecipe as defineSlotRecipe23 } from "@pandacss/dev";
+var chartSlotRecipe = defineSlotRecipe23({
   className: "chart",
   jsx: ["MpChart", "mp-chart"],
   slots: [
@@ -3509,9 +3544,256 @@ var chartSlotRecipe = defineSlotRecipe22({
   }
 });
 
+// src/recipes/autocomplete.ts
+import { defineSlotRecipe as defineSlotRecipe24 } from "@pandacss/dev";
+var autocompleteSlotRecipe = defineSlotRecipe24({
+  className: "autocomplete",
+  jsx: ["MpAutocomplete", "mp-autocomplete"],
+  slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading"],
+  base: {
+    groupText: {
+      px: 3,
+      py: 2
+    },
+    popoverContent: {
+      maxHeight: "300px",
+      overflowY: "auto",
+      position: "relative"
+    },
+    buttonAction: {
+      cursor: "pointer",
+      width: "full",
+      textAlign: "center",
+      roundedTop: "0",
+      borderTopWidth: "1px",
+      borderColor: "blue.50",
+      color: "blue.400",
+      position: "sticky",
+      bottom: "0px",
+      bg: "white",
+      fontSize: "md",
+      zIndex: "999",
+      py: 2,
+      height: "9.5",
+      _hover: { color: "blue.500" }
+    },
+    emptyText: {
+      px: 3,
+      py: 2
+    },
+    contentLoading: {
+      px: 3,
+      py: 2,
+      display: "flex",
+      alignItems: "center",
+      gap: 3
+    }
+  }
+});
+
+// src/recipes/timeline.ts
+import { defineSlotRecipe as defineSlotRecipe25 } from "@pandacss/dev";
+var timelineSlotRecipe = defineSlotRecipe25({
+  className: "timeline",
+  jsx: [
+    "MpTimeline",
+    "MpTimelineBody",
+    "MpTimelineCaption",
+    "MpTimelineContent",
+    "MpTimelineItem",
+    "mp-timeline",
+    "mp-timeline-body",
+    "mp-timeline-caption",
+    "mp-timeline-content",
+    "mp-timeline-item"
+  ],
+  slots: ["root", "body", "caption", "content", "item"],
+  base: {
+    root: {
+      maxWidth: "sm"
+    },
+    body: {
+      marginLeft: "3",
+      paddingTop: "6px",
+      paddingBottom: "3",
+      width: "full"
+    },
+    caption: {
+      fontSize: "sm",
+      color: "gray.400",
+      lineHeight: "sm",
+      marginTop: "0.5"
+    },
+    content: {
+      paddingTop: 3
+    },
+    item: {
+      display: "flex"
+    }
+  }
+});
+var timelineDocumentSlotRecipe = defineSlotRecipe25({
+  className: "timelineDocument",
+  jsx: ["MpTimelineDocument", "mp-timeline-document"],
+  slots: ["root", "content", "title", "description", "fileSize"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      paddingX: "3",
+      paddingY: "2",
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      width: "full",
+      gap: "3"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    title: {
+      fontSize: "sm",
+      lineHeight: "md",
+      fontWeight: "regular",
+      letterSpacing: "normal",
+      color: "dark"
+    },
+    description: {
+      display: "flex",
+      alignItems: "center"
+    },
+    fileSize: {
+      fontSize: "sm",
+      lineHeight: "md",
+      fontWeight: "regular",
+      letterSpacing: "normal",
+      color: "gray.400"
+    }
+  },
+  variants: {
+    icon: {
+      true: { content: { marginLeft: "3" } },
+      false: { content: { marginLeft: "0" } }
+    }
+  },
+  defaultVariants: {
+    icon: false
+  }
+});
+var timelineLogSlotRecipe = defineSlotRecipe25({
+  className: "timelineLog",
+  jsx: ["MpTimelineLog", "MpTimelineLogItem", "mp-timeline-log", "mp-timeline-log-item"],
+  slots: ["root", "log", "logText", "logIcon", "content", "logItem"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    log: {
+      display: "flex",
+      cursor: "pointer"
+    },
+    logText: {
+      color: "gray.400",
+      _groupHover: {
+        color: "blue.500"
+      }
+    },
+    logIcon: {
+      color: "gray.400",
+      _groupHover: { color: "blue.500" }
+    },
+    content: {
+      listStyleType: "disc",
+      paddingLeft: 5
+    },
+    logItem: {
+      color: "gray.600"
+    }
+  }
+});
+var timelineSeparatorSlotRecipe = defineSlotRecipe25({
+  className: "timelineSeparetor",
+  jsx: ["MpTimelineSeparator", "mp-timeline-separator"],
+  slots: ["root", "topConnector", "bottomConnector"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    topConnector: {
+      height: "6px",
+      width: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=first]": {
+        backgroundColor: "transparent"
+      }
+    },
+    bottomConnector: {
+      height: "100%",
+      flexGrow: 1,
+      width: "2px",
+      roundedTop: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=last]": {
+        backgroundColor: "transparent"
+      }
+    }
+  }
+});
+var timelineAccordionSlotRecipe = defineSlotRecipe25({
+  className: "timelineAccordion",
+  jsx: ["MpTimelineAccordion", "mp-timeline-accordion"],
+  slots: ["body", "separator", "icon", "topConnector", "bottomConnector", "title", "label"],
+  base: {
+    body: {
+      display: "flex"
+    },
+    separator: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    icon: {
+      my: 1,
+      cursor: "pointer"
+    },
+    topConnector: {
+      height: "4px",
+      width: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=first]": {
+        backgroundColor: "transparent"
+      },
+      roundedBottom: "full"
+    },
+    bottomConnector: {
+      flexGrow: 1,
+      width: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=last]": {
+        backgroundColor: "transparent"
+      },
+      roundedTop: "full"
+    },
+    title: {
+      paddingTop: 1
+    },
+    label: {
+      fontSize: "md",
+      lineHeight: "md",
+      color: "dark",
+      fontWeight: "semibold",
+      letterSpacing: "normal"
+    }
+  }
+});
+
 // src/recipes/banner.ts
-import { defineRecipe as defineRecipe14, defineSlotRecipe as defineSlotRecipe23 } from "@pandacss/dev";
-var bannerSlotRecipe = defineSlotRecipe23({
+import { defineRecipe as defineRecipe14, defineSlotRecipe as defineSlotRecipe26 } from "@pandacss/dev";
+var bannerSlotRecipe = defineSlotRecipe26({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -3584,7 +3866,7 @@ var bannerDescriptionRecipe = defineRecipe14({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = defineSlotRecipe23({
+var bannerIconSlotRecipe = defineSlotRecipe26({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -3639,6 +3921,208 @@ var bannerCloseButtonRecipe = defineRecipe14({
   defaultVariants: {}
 });
 
+// src/recipes/color-picker.ts
+import { defineSlotRecipe as defineSlotRecipe27 } from "@pandacss/dev";
+var colorPickerSlotRecipe = defineSlotRecipe27({
+  className: "color-picker",
+  jsx: ["MpColorPicker", "mp-color-picker"],
+  slots: [
+    "root",
+    "popoverTrigger",
+    "boxColor",
+    "inputTrigger",
+    "iconDropdown",
+    "popoverContent",
+    "wrapperAdvance",
+    "wrapperBasic",
+    "wrapperSaturation",
+    "wrapperHue",
+    "wrapperInput",
+    "boxPreset",
+    "wrapperPreset",
+    "wrapperBasicPreset"
+  ],
+  base: {
+    root: {
+      width: "280px",
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    popoverTrigger: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      position: "relative",
+      height: "38px",
+      pl: "2",
+      pr: "3",
+      borderRadius: "md",
+      border: "1px solid",
+      _focus: {
+        boxShadow: "outline !important",
+        borderColor: "blue.400 !important",
+        outline: "none"
+      }
+    },
+    boxColor: {
+      flex: "none",
+      width: "6",
+      height: "6",
+      borderWidth: "1px",
+      borderColor: "gray.50",
+      borderRadius: "sm",
+      mr: "2"
+    },
+    inputTrigger: {
+      margin: "-12px",
+      textTransform: "uppercase"
+    },
+    iconDropdown: {
+      position: "absolute",
+      right: "3",
+      ml: "2",
+      _focus: {
+        outline: "none"
+      }
+    },
+    popoverContent: {
+      bg: "white",
+      rounded: "md",
+      shadow: "lg",
+      borderWidth: "1px",
+      borderColor: "gray.400"
+    },
+    wrapperAdvance: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "280px",
+      padding: "3",
+      gap: "3"
+    },
+    wrapperBasic: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "188px",
+      padding: "3",
+      gap: "3"
+    },
+    wrapperSaturation: {
+      position: "relative",
+      width: "100%",
+      height: "144px",
+      overflow: "hidden"
+    },
+    wrapperHue: {
+      position: "relative",
+      height: "28px"
+    },
+    wrapperInput: {
+      position: "relative",
+      display: "flex",
+      gap: "2"
+    },
+    boxPreset: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      position: "relative"
+    },
+    wrapperPreset: {
+      position: "relative",
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "5px"
+    },
+    wrapperBasicPreset: {
+      position: "relative",
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "4px"
+    }
+  }
+});
+
+// src/recipes/slider.ts
+import { defineSlotRecipe as defineSlotRecipe28 } from "@pandacss/dev";
+var sliderSlotRecipe = defineSlotRecipe28({
+  className: "slider",
+  jsx: ["MpSlider", "mp-slider"],
+  slots: [
+    "root",
+    "labelWrapper",
+    "sliderWrapper",
+    "progress",
+    "slider",
+    "inputWrapper",
+    "input",
+    "legendWrapper"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "10px"
+    },
+    labelWrapper: {
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    sliderWrapper: {
+      position: "relative",
+      width: "full",
+      display: "flex",
+      flexDirection: "column"
+    },
+    progress: {
+      position: "relative",
+      height: "2",
+      borderRadius: "100px"
+    },
+    slider: {
+      position: "absolute",
+      height: "2",
+      borderRadius: "100px"
+    },
+    inputWrapper: {
+      position: "relative"
+    },
+    input: {
+      appearance: "none",
+      position: "absolute",
+      width: "full",
+      height: "2",
+      top: "-8px",
+      background: "none",
+      outline: "none",
+      _focusVisible: {
+        borderRadius: "100px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "blue.400",
+        boxShadow: "focus"
+      },
+      "&::-webkit-slider-thumb": {
+        appearance: "none",
+        width: "5",
+        height: "5",
+        borderRadius: "full",
+        borderStyle: "solid",
+        borderColor: "gray.100",
+        boxShadow: "sm",
+        filter: "drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))",
+        transition: "border-color 250ms",
+        pointerEvents: "auto"
+      }
+    }
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -3652,7 +4136,6 @@ var recipes = {
   badgeRecipe,
   textareaRecipe,
   tooltipRecipe,
-  tabListRecipe,
   tabRecipe,
   selectedBorderRecipe,
   tableRecipe,
@@ -3671,7 +4154,7 @@ var recipes = {
   timeItemRecipe
 };
 var slotRecipes = {
-  accordion,
+  accordionSlotRecipe,
   checkboxSlotRecipe,
   radioSlotRecipe,
   sharedSlotRecipe,
@@ -3697,12 +4180,22 @@ var slotRecipes = {
   broadcastSlotRecipe,
   richTextEditorSlotRecipe,
   datePickerSlotRecipe,
+  timePanelSlotRecipe,
   tableDateSlotRecipe,
   tableMonthSlotRecipe,
   tableYearSlotRecipe,
   pinbarSlotRecipe,
   carouselSlotRecipe,
-  chartSlotRecipe
+  chartSlotRecipe,
+  autocompleteSlotRecipe,
+  timelineSlotRecipe,
+  timelineDocumentSlotRecipe,
+  timelineLogSlotRecipe,
+  timelineSeparatorSlotRecipe,
+  timelineAccordionSlotRecipe,
+  tabListSlotRecipe,
+  colorPickerSlotRecipe,
+  sliderSlotRecipe
 };
 
 // src/text-styles.ts