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

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: {
@@ -3508,11 +3499,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 +3519,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,
@@ -5189,6 +5178,7 @@ var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
   slots: [
+    "root",
     "groupText",
     "popoverContent",
     "buttonAction",
@@ -5198,6 +5188,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: {
@@ -3482,11 +3473,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 +3493,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,
@@ -5163,6 +5152,7 @@ var autocompleteSlotRecipe = defineSlotRecipe26({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
   slots: [
+    "root",
     "groupText",
     "popoverContent",
     "buttonAction",
@@ -5172,6 +5162,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-dev.0",
+  "version": "0.4.2-dev.0",
   "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: {
@@ -59,13 +58,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 +79,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,