@qwickapps/react-framework 1.7.0 → 1.7.1

package/README.md

@@ -4,6 +4,20 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
+### February 4, 2026 - Bug Fixes (v1.7.1)
+
+- **MUI v7 TypeScript Compatibility**: Fixed compilation errors in form components by excluding conflicting ViewProps
+- **Component Pattern Compliance**: ImageGallery now uses GridLayout/GridCell instead of direct MUI Grid
+- **Type Safety**: Added explicit TypeScript return types to OptionSelector
+
+See [CHANGELOG.md](./CHANGELOG.md) for full details.
+
+### February 4, 2026 - New Palette & SSR (v1.7.0)
+
+- **PaletteBoutique**: New premium color palette with sophisticated teal, bronze, and navy for retail/fashion brands
+- **ComponentTransformer SSR**: Enhanced HTML parsing with linkedom integration for server-side rendering
+- **Theme Consistency**: Added missing palette variables and replaced hardcoded colors across all palettes
+
 ### January 25, 2026 - E-Commerce Components (v1.5.13)
 
 #### New Components

package/dist/components/blocks/ImageGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGallery.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ImageGallery.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,8BAA8B;IAC9B,MAAM,EAAE,YAAY,EAAE,CAAC;IAEvB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IAEpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE7C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEhD,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AA+XD,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,CAM9D,CAAC;AAEL,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ImageGallery.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ImageGallery.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,8BAA8B;IAC9B,MAAM,EAAE,YAAY,EAAE,CAAC;IAEvB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IAEpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE7C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEhD,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AA+XD,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,CAM9D,CAAC;AAEL,eAAe,YAAY,CAAC"}

package/dist/components/blocks/OptionSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/OptionSelector.tsx"],"names":[],"mappings":"AAkDA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,iCAAiC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IAExB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAEzC,sBAAsB;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAE1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE5C,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE1C,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAqVD,eAAO,MAAM,cAAc,EAAE,qBAAqB,CAAC,mBAAmB,CAMlE,CAAC;AAEL,eAAe,cAAc,CAAC"}
+{"version":3,"file":"OptionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/OptionSelector.tsx"],"names":[],"mappings":"AAkDA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,iCAAiC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IAExB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAEzC,sBAAsB;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAE1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE5C,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE1C,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAoWD,eAAO,MAAM,cAAc,EAAE,qBAAqB,CAAC,mBAAmB,CAMlE,CAAC;AAEL,eAAe,cAAc,CAAC"}

package/dist/components/forms/FormCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormCheckbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AASH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,iBAAiB,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAiED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,CAKhE,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormCheckbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AASH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,iBAAiB,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAgFD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,CAKhE,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/components/forms/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,cAAc,CAAC;IACnF,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACrF,yCAAyC;IACzC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA+GD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,cAAc,CAK1D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,cAAc,CAAC;IACnF,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACrF,yCAAyC;IACzC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA8HD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,cAAc,CAK1D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/forms/FormSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormSelect.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAUH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,eAAe,CAAC;IACrF,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,qDAAqD;IACrD,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAiFD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,eAAe,CAK5D,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormSelect.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAUH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,eAAe,CAAC;IACrF,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,qDAAqD;IACrD,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAgGD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,eAAe,CAK5D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/index.esm.js

@@ -21743,11 +21743,10 @@ function ImageGalleryView({
   if (variant === 'grid') {
     return jsxs(Box, {
       ...restProps,
-      children: [jsx(Grid, {
-        container: true,
-        spacing: 2,
-        children: displayImages.map((image, index) => jsx(Grid, {
-          item: true,
+      children: [jsx(GridLayout, {
+        columns: 4,
+        spacing: "medium",
+        children: displayImages.map((image, index) => jsx(GridCell, {
           xs: 6,
           sm: 4,
           md: 3,
@@ -21807,6 +21806,21 @@ function OptionSelectorView({
   label = 'Select Option',
   dataSource,
   bindingOptions,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleOptionClick = useCallback((optionId, available) => {
@@ -23035,6 +23049,21 @@ function FormFieldView({
   startAdornment,
   endAdornment,
   inputProps,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const fieldId = React.useId();
@@ -23131,6 +23160,21 @@ function FormSelectView({
   fullWidth = true,
   size = 'small',
   placeholder,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleChange = e => {
@@ -23205,6 +23249,21 @@ function FormCheckboxView({
   helperText,
   required = false,
   disabled = false,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleChange = e => {

package/dist/index.js

@@ -21745,11 +21745,10 @@ function ImageGalleryView({
   if (variant === 'grid') {
     return jsxRuntime.jsxs(material.Box, {
       ...restProps,
-      children: [jsxRuntime.jsx(material.Grid, {
-        container: true,
-        spacing: 2,
-        children: displayImages.map((image, index) => jsxRuntime.jsx(material.Grid, {
-          item: true,
+      children: [jsxRuntime.jsx(GridLayout, {
+        columns: 4,
+        spacing: "medium",
+        children: displayImages.map((image, index) => jsxRuntime.jsx(GridCell, {
           xs: 6,
           sm: 4,
           md: 3,
@@ -21809,6 +21808,21 @@ function OptionSelectorView({
   label = 'Select Option',
   dataSource,
   bindingOptions,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleOptionClick = React.useCallback((optionId, available) => {
@@ -23037,6 +23051,21 @@ function FormFieldView({
   startAdornment,
   endAdornment,
   inputProps,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const fieldId = React.useId();
@@ -23133,6 +23162,21 @@ function FormSelectView({
   fullWidth = true,
   size = 'small',
   placeholder,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleChange = e => {
@@ -23207,6 +23251,21 @@ function FormCheckboxView({
   helperText,
   required = false,
   disabled = false,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }) {
   const handleChange = e => {

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "palettes": [
     {
       "id": "default",
@@ -8,11 +8,11 @@
       "description": "Classic blue and neutral color scheme - the original QwickApps palette",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-default.1.7.0.css",
+      "version": "1.7.1",
+      "file": "palette-default.1.7.1.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.7.0.min.css",
+      "fileMinified": "palette-default.1.7.1.min.css",
       "fileLatest": "palette-default.latest.css",
       "fileLatestMinified": "palette-default.latest.min.css"
     },
@@ -22,11 +22,11 @@
       "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-autumn.1.7.0.css",
+      "version": "1.7.1",
+      "file": "palette-autumn.1.7.1.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.7.0.min.css",
+      "fileMinified": "palette-autumn.1.7.1.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Sophisticated teal, bronze, and navy - perfect for premium retail and fashion brands",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-boutique.1.7.0.css",
+      "version": "1.7.1",
+      "file": "palette-boutique.1.7.1.css",
       "primaryColor": "#3ca6b6",
       "inlined": false,
-      "fileMinified": "palette-boutique.1.7.0.min.css",
+      "fileMinified": "palette-boutique.1.7.1.min.css",
       "fileLatest": "palette-boutique.latest.css",
       "fileLatestMinified": "palette-boutique.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-cosmic.1.7.0.css",
+      "version": "1.7.1",
+      "file": "palette-cosmic.1.7.1.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.7.0.min.css",
+      "fileMinified": "palette-cosmic.1.7.1.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-ocean.1.7.0.css",
+      "version": "1.7.1",
+      "file": "palette-ocean.1.7.1.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.7.0.min.css",
+      "fileMinified": "palette-ocean.1.7.1.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-spring.1.7.0.css",
+      "version": "1.7.1",
+      "file": "palette-spring.1.7.1.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.7.0.min.css",
+      "fileMinified": "palette-spring.1.7.1.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -92,11 +92,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.7.0",
-      "file": "palette-winter.1.7.0.css",
+      "version": "1.7.1",
+      "file": "palette-winter.1.7.1.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.7.0.min.css",
+      "fileMinified": "palette-winter.1.7.1.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/blocks/ImageGallery.tsx

@@ -29,7 +29,8 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { Box, IconButton, Modal, Grid, Skeleton } from '@mui/material';
+import { Box, IconButton, Modal, Skeleton } from '@mui/material';
+import { GridLayout, GridCell } from '../layout';
 import CloseIcon from '@mui/icons-material/Close';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -409,9 +410,9 @@ function ImageGalleryView({
   if (variant === 'grid') {
     return (
       <Box {...restProps}>
-        <Grid container spacing={2}>
+        <GridLayout columns={4} spacing="medium">
           {displayImages.map((image, index) => (
-            <Grid item xs={6} sm={4} md={3} key={index}>
+            <GridCell xs={6} sm={4} md={3} key={index}>
               <Box
                 onClick={() => {
                   setSelectedIndex(index);
@@ -441,9 +442,9 @@ function ImageGalleryView({
                   }}
                 />
               </Box>
-            </Grid>
+            </GridCell>
           ))}
-        </Grid>
+        </GridLayout>
         {renderZoomModal()}
       </Box>
     );

package/src/components/blocks/OptionSelector.tsx

@@ -123,6 +123,21 @@ function OptionSelectorView({
   label = 'Select Option',
   dataSource,
   bindingOptions,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }: OptionSelectorProps) {
   const handleOptionClick = useCallback((optionId: string, available: boolean) => {
@@ -226,14 +241,14 @@ function OptionSelectorView({
   }
 
   // Buttons/Grid variant with visual modes
-  const getLayoutStyles = () => {
+  const getLayoutStyles = (): React.CSSProperties => {
     if (variant === 'grid') {
       const minWidth = displayMode === 'text' ? 60 : sizeInPx + 16;
       return {
         display: 'grid',
         gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}px, 1fr))`,
         gap: displayMode === 'text' ? 1 : 2,
-      };
+      } as React.CSSProperties;
     }
 
     return {
@@ -241,7 +256,7 @@ function OptionSelectorView({
       flexDirection: layout === 'vertical' ? 'column' : 'row',
       flexWrap: layout === 'wrap' ? 'wrap' : 'nowrap',
       gap: 1,
-    };
+    } as React.CSSProperties;
   };
 
   return (

package/src/components/forms/FormCheckbox.tsx

@@ -42,6 +42,21 @@ function FormCheckboxView({
   helperText,
   required = false,
   disabled = false,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }: FormCheckboxProps) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

package/src/components/forms/FormField.tsx

@@ -63,6 +63,21 @@ function FormFieldView({
   startAdornment,
   endAdornment,
   inputProps,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }: FormFieldProps) {
   const fieldId = React.useId();

package/src/components/forms/FormSelect.tsx

@@ -54,6 +54,21 @@ function FormSelectView({
   fullWidth = true,
   size = 'small',
   placeholder,
+  // Exclude ViewProps that conflict with MUI FormControl types
+  margin: _margin,
+  marginTop: _marginTop,
+  marginRight: _marginRight,
+  marginBottom: _marginBottom,
+  marginLeft: _marginLeft,
+  marginX: _marginX,
+  marginY: _marginY,
+  padding: _padding,
+  paddingTop: _paddingTop,
+  paddingRight: _paddingRight,
+  paddingBottom: _paddingBottom,
+  paddingLeft: _paddingLeft,
+  paddingX: _paddingX,
+  paddingY: _paddingY,
   ...restProps
 }: FormSelectProps) {
   const handleChange = (e: { target: { value: unknown } }) => {