@digital-ai/dot-components 2.24.0 → 2.24.1

package/index.esm.js

@@ -2742,8 +2742,9 @@ const StyledIconButton = styled(IconButton).withConfig({
   displayName: "IconButtonstyles__StyledIconButton",
   componentId: "eko0kb-0"
 })(["", ""], ({
-  theme
-}) => css(["&.", "{color:", ";font-size:inherit;padding:10px;&:hover{background-color:", ";}&:active{background-color:", ";}&:focus{background-color:", ";}&.Mui-disabled .dot-icon{color:", ";}&.ripple-disabled{&:hover,&:focus{background:", ";}}&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";&:active{background:", ";}}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}"], rootClassName$U, theme.palette.figma.icon.black, theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.ripple, theme.palette.figma.neutral.active, theme.palette.figma.icon.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.border.defaultButton, theme.spacing(1), theme.palette.figma.toggleTabs.bckg));
+  theme,
+  color
+}) => css(["&.", "{", " ", " font-size:inherit;padding:10px;&:hover{background-color:", ";}&:active{background-color:", ";}&:focus{background-color:", ";}&.Mui-disabled .dot-icon{color:", ";}&.ripple-disabled{&:hover,&:focus{background:", ";}}&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";&:active{background:", ";}}.dot-icon{color:inherit;}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}"], rootClassName$U, color === 'inherit' ? css(["color:inherit;"]) : '', color === 'default' ? css(["color:", ";"], theme.palette.figma.icon.black) : '', theme.palette.figma.neutral.elevated, theme.palette.figma.neutral.ripple, theme.palette.figma.neutral.active, theme.palette.figma.icon.disabled, theme.palette.figma.neutral.elevated, theme.palette.figma.border.defaultButton, theme.spacing(1), theme.palette.figma.toggleTabs.bckg));
 
 const DotIconButton = ({
   ariaLabel,
@@ -6241,19 +6242,18 @@ const CssCell = styled(Cell).withConfig({
   middle: _middle = true,
   md,
   sm,
-  start,
   theme,
   top,
-  width,
   xl,
+  xxl,
   xs
-}) => css(["height:", ";min-width:0;box-sizing:border-box;", ";", ";", ";", ";grid-row-end:", ";", ";", ";", " ", " ", " ", " ", " ", " grid-column:", ";}"], height ? height : '100%', top && `grid-row-start: ${top}`, _center && `text-align: center`, !start && `grid-column-start: ${start}`, !width && `grid-column-end: span ${width}`, height && `span ${height}`, area && `grid-area: ${area}`, _middle && `
+}) => css(["height:", ";min-width:0;box-sizing:border-box;", ";", ";grid-row-end:", ";", ";", ";", " ", " ", " ", " ", " ", " grid-column:", ";}"], height ? height : '100%', top && `grid-row-start: ${top}`, _center && `text-align: center`, height && `span ${height}`, area && `grid-area: ${area}`, _middle && `
     display: inline-flex;
     flex-flow: column wrap;
     justify-content: ${_justifyContent};
     align-items: ${_alignItems};
     justify-self: stretch;
-  `, xs && breakpointsGetter(xs, theme, 'xs'), sm && breakpointsGetter(sm, theme, 'sm'), md && breakpointsGetter(md, theme, 'md'), lg && breakpointsGetter(lg, theme, 'lg'), lg && breakpointsGetter(lg, theme, 'lg'), xl && breakpointsGetter(lg, theme, 'xl'), gridColumn));
+  `, xs && breakpointsGetter(xs, theme, 'xs'), sm && breakpointsGetter(sm, theme, 'sm'), md && breakpointsGetter(md, theme, 'md'), lg && breakpointsGetter(lg, theme, 'lg'), xl && breakpointsGetter(xl, theme, 'xl'), xxl && breakpointsGetter(xxl, theme, 'xxl'), gridColumn));
 
 const gridClassName = 'debug-grid';
 const gridClassContainer = 'debug-grid-container';
@@ -6344,13 +6344,9 @@ const CssGridDebug = ({
     }), jsx(StyledGridOverlay, {
       className: gridClassName,
       rows: "minmax(100vh, 100%)",
-      children: [...Array(columns)].map((item, i) => {
-        return jsx(CssCell, {
-          className: `${cellClassName}`,
-          start: i + 1,
-          width: 1
-        }, i);
-      })
+      children: Array.from(Array(columns), (_item, i) => jsx(CssCell, {
+        className: `${cellClassName}`
+      }, i))
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.24.0",
+  "version": "2.24.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/css-grid/CssCell.d.ts

@@ -28,15 +28,14 @@ export interface CssCellProps extends CommonProps {
     middle?: boolean;
     /** Small column breakpoint */
     sm?: CellSize;
-    /** Column start when Cell column breakpoints are not used */
-    start?: number | string;
     /** Row start override */
     top?: number | string;
-    width?: number;
     /** Extra large column breakpoint */
     xl?: CellSize;
     /** Extra small column breakpoint */
     xs?: CellSize;
+    /** Extra, extra large column breakpoint */
+    xxl?: CellSize;
 }
 export declare const Cell: ({ children, className }: CssCellProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CssCell: import("styled-components").StyledComponent<({ children, className }: CssCellProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;