@balena/ui-shared-components 15.2.5-build-remove-column-management-experimental-code-7fcde6d42e2c56ec5437b9b7530d8ea24f8b4eea-2 → 15.2.6-build-fix-safari-date-picker-cc361b88341e93cddd2fa722c3d9709b826b02ca-1

package/dist/theme.js

@@ -9,6 +9,61 @@ export const severityIcons = {
     warning: faWarning,
     danger: faExclamationCircle,
 };
+// SVG calendar icon used for date inputs
+const calendarSvg = `
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="#000"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path d="M5 4 H19 A2 2 0 0 1 21 6 V8 H3 V6 A2 2 0 0 1 5 4 Z" fill="#000" />
+		<line x1="16" y1="2" x2="16" y2="6" />
+		<line x1="8" y1="2" x2="8" y2="6" />
+		<path d="M3 8 H21 V18 A2 2 0 0 1 19 20 H5 A2 2 0 0 1 3 18 V8 Z" />
+	</svg>
+`;
+const calendarDataUrl = `url("data:image/svg+xml;utf8,${encodeURIComponent(calendarSvg)}")`;
+// Fix placeholder text for date inputs in Safari: https://github.com/mui/material-ui/issues/37226
+const safariEmptyDateBugFix = {
+    '@supports (font: -apple-system-body) and (-webkit-appearance: none)': {
+        '&:has(input[type="date"]):not([value]), &:has(input[type="datetime-local"]):not([value])': {
+            color: 'rgba(0,0,0,0)',
+            position: 'relative',
+            minWidth: 120,
+        },
+        '&:has(input[type="date"]):not([value])::before': {
+            content: '"dd / mm / yyyy"',
+            left: 16,
+            color: '#333',
+            display: 'inline-block',
+            position: 'absolute',
+        },
+        '&:has(input[type="datetime-local"]):not([value])::before': {
+            content: '"dd / mm / yyyy, --:--"',
+            left: 16,
+            color: '#333',
+            display: 'inline-block',
+            position: 'absolute',
+        },
+        '&:has(input[type="date"]):not([value])::after, &:has(input[type="datetime-local"]):not([value])::after': {
+            content: '""',
+            position: 'absolute',
+            right: 10,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 16,
+            height: 16,
+            pointerEvents: 'none',
+            backgroundImage: calendarDataUrl,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '16px 16px',
+        },
+    },
+};
 export const theme = createTheme({
     cssVariables: true,
     unstable_sxConfig: {
@@ -1051,24 +1106,19 @@ export const theme = createTheme({
                 notched: false,
             },
             styleOverrides: {
-                root: ({ theme }) => ({
-                    background: 'white',
-                    legend: {
+                root: ({ theme }) => (Object.assign(Object.assign({ background: 'white' }, safariEmptyDateBugFix), { legend: {
                         // We should be able to remove this but there is a css override somewhere that
                         // set the fieldset > legend max-width to 100%, and this invalidate the notched: false rule for some inputs.
                         maxWidth: 0,
-                    },
-                    fieldset: {
+                    }, fieldset: {
                         borderColor: color.border.value,
                         '&:hover': {
                             borderColor: color.border.strong.value,
                         },
-                    },
-                    '[type="color"]': {
+                    }, '[type="color"]': {
                         padding: theme.spacing(1),
                         height: '20px',
-                    },
-                }),
+                    } })),
                 input: {
                     '&:not(.MuiInputBase-inputMultiline)': {
                         paddingTop: '14px',
@@ -1083,17 +1133,13 @@ export const theme = createTheme({
         },
         MuiInput: {
             styleOverrides: {
-                root: {
-                    '&::before': {
+                root: Object.assign(Object.assign({}, safariEmptyDateBugFix), { '&::before': {
                         borderBottom: `1px solid ${color.border.value}`,
-                    },
-                    '&::after': {
+                    }, '&::after': {
                         borderBottomColor: color.border.accent.value,
-                    },
-                    '&:hover:not(.Mui-disabled, .Mui-error)::before': {
+                    }, '&:hover:not(.Mui-disabled, .Mui-error)::before': {
                         borderBottom: `solid 1px ${color.border.strong.value}`,
-                    },
-                },
+                    } }),
             },
         },
         MuiInputLabel: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "15.2.5-build-remove-column-management-experimental-code-7fcde6d42e2c56ec5437b9b7530d8ea24f8b4eea-2",
+  "version": "15.2.6-build-fix-safari-date-picker-cc361b88341e93cddd2fa722c3d9709b826b02ca-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -135,7 +135,7 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-11-18T14:56:53.481Z"
+    "publishedAt": "2025-11-18T15:56:31.869Z"
   },
   "overrides": {
     "storybook": "$storybook",