@mekari/pixel3-theme 0.4.1 → 0.4.2-dev.1

package/dist/index.js

@@ -1154,24 +1154,16 @@ var inputSlotRecipe = (0, import_dev7.defineSlotRecipe)({
       }
     },
     clear: {
-      position: "absolute!",
-      color: "gray.600",
-      border: "none",
+      cursor: "pointer",
+      position: "absolute",
       top: "9px",
       right: "var(--mp-input--right)",
-      width: "5",
-      height: "5",
-      minWidth: "5",
-      padding: "0",
-      transition: "all 250ms!",
+      transition: "all 250ms",
       visibility: "hidden",
       opacity: "0",
       _groupHover: {
         visibility: "var(--mp-input--visibility)",
         opacity: "var(--mp-input--opacity)"
-      },
-      _nextTheme: {
-        color: "icon.default"
       }
     }
   },
@@ -3378,7 +3370,7 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
       px: "3",
       py: "2",
       width: "full",
-      textAlign: "left"
+      textAlign: "center"
     },
     suggestionWrapper: {
       display: "flex",
@@ -3461,8 +3453,7 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
     "header",
     "footer",
     "body",
-    "overlay",
-    "closeButton"
+    "overlay"
   ],
   base: {
     root: {
@@ -3490,6 +3481,7 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
     contentChild: {
       outline: 0,
       width: "100%",
+      height: "100%",
       position: "relative",
       display: "flex",
       flexDir: "column",
@@ -3508,11 +3500,16 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
       }
     },
     header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 1,
       px: 4,
       py: 3,
       position: "relative",
       fontSize: "md",
       fontWeight: "semiBold",
+      color: "dark",
       bg: "background",
       borderTopLeftRadius: "md",
       borderTopRightRadius: "md",
@@ -3523,18 +3520,11 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
         background: "background.neutral.subtle",
         borderBottomColor: "border.default"
       },
-      '&[data-modal-presentation="drawer"]': {
-        borderTopLeftRadius: "none",
-        borderTopRightRadius: "none"
+      '&[data-modal-type="drawer"]': {
+        borderTopLeftRadius: "0",
+        borderTopRightRadius: "0"
       }
     },
-    closeButton: {
-      position: "absolute",
-      top: "10px",
-      right: "12px",
-      bg: "transparent",
-      borderColor: "transparent"
-    },
     footer: {
       display: "flex",
       pt: 2,
@@ -3547,8 +3537,8 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
       bg: "overlay",
       left: "0",
       top: "0",
-      w: "100vw",
-      h: "100vh",
+      bottom: "0",
+      right: "0",
       zIndex: "overlay",
       _nextTheme: {
         background: "background.overlay"
@@ -3562,7 +3552,7 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
           top: "0"
         },
         contentChild: {
-          height: "100vh",
+          height: "100%",
           border: "none",
           borderRadius: "none"
         }
@@ -5189,6 +5179,7 @@ var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
   slots: [
+    "root",
     "groupText",
     "popoverContent",
     "buttonAction",
@@ -5198,6 +5189,9 @@ var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     "infinityScroll"
   ],
   base: {
+    root: {
+      position: "relative"
+    },
     groupText: {
       px: 3,
       py: 2

package/dist/index.mjs

@@ -1128,24 +1128,16 @@ var inputSlotRecipe = defineSlotRecipe4({
       }
     },
     clear: {
-      position: "absolute!",
-      color: "gray.600",
-      border: "none",
+      cursor: "pointer",
+      position: "absolute",
       top: "9px",
       right: "var(--mp-input--right)",
-      width: "5",
-      height: "5",
-      minWidth: "5",
-      padding: "0",
-      transition: "all 250ms!",
+      transition: "all 250ms",
       visibility: "hidden",
       opacity: "0",
       _groupHover: {
         visibility: "var(--mp-input--visibility)",
         opacity: "var(--mp-input--opacity)"
-      },
-      _nextTheme: {
-        color: "icon.default"
       }
     }
   },
@@ -3352,7 +3344,7 @@ var inputTagSlotRecipe = defineSlotRecipe14({
       px: "3",
       py: "2",
       width: "full",
-      textAlign: "left"
+      textAlign: "center"
     },
     suggestionWrapper: {
       display: "flex",
@@ -3435,8 +3427,7 @@ var modalSlotRecipe = defineSlotRecipe16({
     "header",
     "footer",
     "body",
-    "overlay",
-    "closeButton"
+    "overlay"
   ],
   base: {
     root: {
@@ -3464,6 +3455,7 @@ var modalSlotRecipe = defineSlotRecipe16({
     contentChild: {
       outline: 0,
       width: "100%",
+      height: "100%",
       position: "relative",
       display: "flex",
       flexDir: "column",
@@ -3482,11 +3474,16 @@ var modalSlotRecipe = defineSlotRecipe16({
       }
     },
     header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 1,
       px: 4,
       py: 3,
       position: "relative",
       fontSize: "md",
       fontWeight: "semiBold",
+      color: "dark",
       bg: "background",
       borderTopLeftRadius: "md",
       borderTopRightRadius: "md",
@@ -3497,18 +3494,11 @@ var modalSlotRecipe = defineSlotRecipe16({
         background: "background.neutral.subtle",
         borderBottomColor: "border.default"
       },
-      '&[data-modal-presentation="drawer"]': {
-        borderTopLeftRadius: "none",
-        borderTopRightRadius: "none"
+      '&[data-modal-type="drawer"]': {
+        borderTopLeftRadius: "0",
+        borderTopRightRadius: "0"
       }
     },
-    closeButton: {
-      position: "absolute",
-      top: "10px",
-      right: "12px",
-      bg: "transparent",
-      borderColor: "transparent"
-    },
     footer: {
       display: "flex",
       pt: 2,
@@ -3521,8 +3511,8 @@ var modalSlotRecipe = defineSlotRecipe16({
       bg: "overlay",
       left: "0",
       top: "0",
-      w: "100vw",
-      h: "100vh",
+      bottom: "0",
+      right: "0",
       zIndex: "overlay",
       _nextTheme: {
         background: "background.overlay"
@@ -3536,7 +3526,7 @@ var modalSlotRecipe = defineSlotRecipe16({
           top: "0"
         },
         contentChild: {
-          height: "100vh",
+          height: "100%",
           border: "none",
           borderRadius: "none"
         }
@@ -5163,6 +5153,7 @@ var autocompleteSlotRecipe = defineSlotRecipe26({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
   slots: [
+    "root",
     "groupText",
     "popoverContent",
     "buttonAction",
@@ -5172,6 +5163,9 @@ var autocompleteSlotRecipe = defineSlotRecipe26({
     "infinityScroll"
   ],
   base: {
+    root: {
+      position: "relative"
+    },
     groupText: {
       px: 3,
       py: 2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.4.1",
+  "version": "0.4.2-dev.1",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

package/src/recipes/autocomplete.ts

@@ -4,6 +4,7 @@ const autocompleteSlotRecipe = defineSlotRecipe({
   className: 'autocomplete',
   jsx: ['MpAutocomplete', 'mp-autocomplete'],
   slots: [
+    'root',
     'groupText',
     'popoverContent',
     'buttonAction',
@@ -13,6 +14,9 @@ const autocompleteSlotRecipe = defineSlotRecipe({
     'infinityScroll'
   ],
   base: {
+    root: {
+      position: 'relative'
+    },
     groupText: {
       px: 3,
       py: 2

package/src/recipes/input-tag.ts

@@ -155,7 +155,7 @@ const inputTagSlotRecipe = defineSlotRecipe({
       px: '3',
       py: '2',
       width: 'full',
-      textAlign: 'left'
+      textAlign: 'center'
     },
     suggestionWrapper: {
       display: 'flex',

package/src/recipes/input.ts

@@ -52,24 +52,16 @@ const inputSlotRecipe = defineSlotRecipe({
       }
     },
     clear: {
-      position: 'absolute!',
-      color: 'gray.600',
-      border: 'none',
+      cursor: 'pointer',
+      position: 'absolute',
       top: '9px',
       right: 'var(--mp-input--right)',
-      width: '5',
-      height: '5',
-      minWidth: '5',
-      padding: '0',
-      transition: 'all 250ms!',
+      transition: 'all 250ms',
       visibility: 'hidden',
       opacity: '0',
       _groupHover: {
         visibility: 'var(--mp-input--visibility)',
         opacity: 'var(--mp-input--opacity)'
-      },
-      _nextTheme: {
-        color: 'icon.default'
       }
     }
   },

package/src/recipes/modal.ts

@@ -13,8 +13,7 @@ export const modalSlotRecipe = defineSlotRecipe({
     'header',
     'footer',
     'body',
-    'overlay',
-    'closeButton'
+    'overlay'
   ],
   base: {
     root: {
@@ -42,6 +41,7 @@ export const modalSlotRecipe = defineSlotRecipe({
     contentChild: {
       outline: 0,
       width: '100%',
+      height: '100%',
       position: 'relative',
       display: 'flex',
       flexDir: 'column',
@@ -59,13 +59,17 @@ export const modalSlotRecipe = defineSlotRecipe({
         }
       }
     },
-
     header: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 1,
       px: 4,
       py: 3,
       position: 'relative',
       fontSize: 'md',
       fontWeight: 'semiBold',
+      color: 'dark',
       bg: 'background',
       borderTopLeftRadius: 'md',
       borderTopRightRadius: 'md',
@@ -76,18 +80,11 @@ export const modalSlotRecipe = defineSlotRecipe({
         background: 'background.neutral.subtle',
         borderBottomColor: 'border.default'
       },
-      '&[data-modal-presentation="drawer"]': {
-        borderTopLeftRadius: 'none',
-        borderTopRightRadius: 'none'
+      '&[data-modal-type="drawer"]': {
+        borderTopLeftRadius: '0',
+        borderTopRightRadius: '0'
       }
     },
-    closeButton: {
-      position: 'absolute',
-      top: '10px',
-      right: '12px',
-      bg: 'transparent',
-      borderColor: 'transparent'
-    },
     footer: {
       display: 'flex',
       pt: 2,
@@ -100,8 +97,8 @@ export const modalSlotRecipe = defineSlotRecipe({
       bg: 'overlay',
       left: '0',
       top: '0',
-      w: '100vw',
-      h: '100vh',
+      bottom: '0',
+      right: '0',
       zIndex: 'overlay',
       _nextTheme: {
         background: 'background.overlay'
@@ -115,7 +112,7 @@ export const modalSlotRecipe = defineSlotRecipe({
           top: '0'
         },
         contentChild: {
-          height: '100vh',
+          height: '100%',
           border: 'none',
           borderRadius: 'none'
         }