@synerise/ds-grid 1.1.15 → 1.1.17

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-grid@1.1.16...@synerise/ds-grid@1.1.17) (2026-04-10)
+
+**Note:** Version bump only for package @synerise/ds-grid
+
+## [1.1.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-grid@1.1.15...@synerise/ds-grid@1.1.16) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-grid
+
 ## [1.1.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-grid@1.1.14...@synerise/ds-grid@1.1.15) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-grid

package/dist/Grid.const.js

@@ -1,2 +1,6 @@
-export var DEFAULT_GUTTER = 24;
-export var DEFAULT_COLUMNS_NUMBER = 24;
+const DEFAULT_GUTTER = 24;
+const DEFAULT_COLUMNS_NUMBER = 24;
+export {
+  DEFAULT_COLUMNS_NUMBER,
+  DEFAULT_GUTTER
+};

package/dist/Grid.context.d.ts

@@ -1,4 +1,4 @@
-export declare const GridContext: import("react").Context<{
+export declare const GridContext: import('react').Context<{
     dimensions: {
         width: number;
         height: number;

package/dist/Grid.context.js

@@ -1,7 +1,10 @@
-import { createContext } from 'react';
-export var GridContext = /*#__PURE__*/createContext({
+import { createContext } from "react";
+const GridContext = createContext({
   dimensions: {
     width: window.innerWidth,
     height: window.innerHeight
   }
-});
+});
+export {
+  GridContext
+};

package/dist/Grid.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { type GridProps } from './Grid.types';
+import { default as React } from 'react';
+import { GridProps } from './Grid.types';
 declare const Grid: {
     ({ children, gutter, style }: GridProps): React.JSX.Element;
-    Item: ({ children, contentWrapper, ...props }: import("./Grid.types").GridItemProps) => React.JSX.Element;
+    Item: ({ children, contentWrapper, ...props }: import('./Grid.types').GridItemProps) => React.JSX.Element;
 };
 export default Grid;

package/dist/Grid.js

@@ -1,24 +1,18 @@
-import React from 'react';
-import { useBreakpoint } from '@synerise/ds-utils';
-import { DEFAULT_COLUMNS_NUMBER, DEFAULT_GUTTER } from './Grid.const';
-import { GridContext } from './Grid.context';
-import * as S from './Grid.styles';
-import Item from './GridItem/GridItem';
-var Grid = function Grid(_ref) {
-  var _breakpointData$break;
-  var children = _ref.children,
-    _ref$gutter = _ref.gutter,
-    gutter = _ref$gutter === void 0 ? DEFAULT_GUTTER : _ref$gutter,
-    style = _ref.style;
-  var breakpointData = useBreakpoint();
-  return /*#__PURE__*/React.createElement(S.GridContainer, {
-    style: style,
-    className: "ds-grid",
-    columns: ((_breakpointData$break = breakpointData.breakpoint) == null ? void 0 : _breakpointData$break.columns) || DEFAULT_COLUMNS_NUMBER,
-    gutter: gutter
-  }, /*#__PURE__*/React.createElement(GridContext.Provider, {
-    value: breakpointData
-  }, children));
+import { jsx } from "react/jsx-runtime";
+import { useBreakpoint } from "@synerise/ds-utils";
+import { DEFAULT_GUTTER, DEFAULT_COLUMNS_NUMBER } from "./Grid.const.js";
+import { GridContext } from "./Grid.context.js";
+import { GridContainer } from "./Grid.styles.js";
+import Item from "./GridItem/GridItem.js";
+const Grid = ({
+  children,
+  gutter = DEFAULT_GUTTER,
+  style
+}) => {
+  const breakpointData = useBreakpoint();
+  return /* @__PURE__ */ jsx(GridContainer, { style, className: "ds-grid", columns: breakpointData.breakpoint?.columns || DEFAULT_COLUMNS_NUMBER, gutter, children: /* @__PURE__ */ jsx(GridContext.Provider, { value: breakpointData, children }) });
 };
 Grid.Item = Item;
-export default Grid;
+export {
+  Grid as default
+};

package/dist/Grid.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const GridContainer: import('styled-components').StyledComponent<"div", any, {
     columns: number;
     gutter: number;
 }, never>;
-export declare const GridItem: import("styled-components").StyledComponent<"div", any, {
+export declare const GridItem: import('styled-components').StyledComponent<"div", any, {
     columns?: number;
     contentWrapper: boolean;
     maxColumns: number;

package/dist/Grid.styles.js

@@ -1,21 +1,13 @@
-import styled, { css } from 'styled-components';
-export var GridContainer = styled.div.withConfig({
+import styled, { css } from "styled-components";
+const GridContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Gridstyles__GridContainer",
   componentId: "sc-5newme-0"
-})(["width:100%;display:grid;grid-template-columns:repeat(", ",1fr);grid-row-gap:", ";grid-column-gap:", ";"], function (props) {
-  return props.columns;
-}, function (props) {
-  return props.gutter + "px";
-}, function (props) {
-  return props.gutter + "px";
-});
-export var GridItem = styled.div.withConfig({
+})(["width:100%;display:grid;grid-template-columns:repeat(", ",1fr);grid-row-gap:", ";grid-column-gap:", ";"], (props) => props.columns, (props) => `${props.gutter}px`, (props) => `${props.gutter}px`);
+const GridItem = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Gridstyles__GridItem",
   componentId: "sc-5newme-1"
-})(["grid-column:span ", ";display:", ";", ""], function (props) {
-  return props.columns || 1;
-}, function (props) {
-  return props.columns === 0 ? 'none' : 'inherit';
-}, function (props) {
-  return props.contentWrapper && Boolean(props.maxColumns) && Boolean(props.columns) && css(["grid-column-start:", ";grid-column-end:", ";display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch;& > *{width:100%;margin-bottom:24px;}"], props.maxColumns && props.columns ? (props.maxColumns - props.columns) / 2 + 1 : 'span', props.maxColumns && props.columns ? (props.maxColumns - props.columns) / 2 + 1 + props.columns : 1);
-});
+})(["grid-column:span ", ";display:", ";", ""], (props) => props.columns || 1, (props) => props.columns === 0 ? "none" : "inherit", (props) => props.contentWrapper && Boolean(props.maxColumns) && Boolean(props.columns) && css(["grid-column-start:", ";grid-column-end:", ";display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch;& > *{width:100%;margin-bottom:24px;}"], props.maxColumns && props.columns ? (props.maxColumns - props.columns) / 2 + 1 : "span", props.maxColumns && props.columns ? (props.maxColumns - props.columns) / 2 + 1 + props.columns : 1));
+export {
+  GridContainer,
+  GridItem
+};

package/dist/Grid.types.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export type GridProps = {
     gutter?: number;
     style?: CSSProperties;

package/dist/Grid.types.js

@@ -1 +1 @@
-export {};
+

package/dist/GridItem/GridItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type GridItemProps } from '../Grid.types';
+import { default as React } from 'react';
+import { GridItemProps } from '../Grid.types';
 declare const Item: ({ children, contentWrapper, ...props }: GridItemProps) => React.JSX.Element;
 export default Item;

package/dist/GridItem/GridItem.js

@@ -1,52 +1,45 @@
-var _excluded = ["children", "contentWrapper"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useContext, useMemo } from 'react';
-import { DEFAULT_COLUMNS_NUMBER } from '../Grid.const';
-import { GridContext } from '../Grid.context';
-import * as S from '../Grid.styles';
-var BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-var Item = function Item(_ref) {
-  var _breakpointData$break2;
-  var children = _ref.children,
-    contentWrapper = _ref.contentWrapper,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var breakpointData = useContext(GridContext);
-  var definedBreakpoints = useMemo(function () {
-    return BREAKPOINTS.filter(function (breakpoint) {
-      return props[breakpoint] !== undefined;
-    }).map(function (breakpoint) {
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { DEFAULT_COLUMNS_NUMBER } from "../Grid.const.js";
+import { GridContext } from "../Grid.context.js";
+import { GridItem } from "../Grid.styles.js";
+const BREAKPOINTS = ["xxl", "xl", "lg", "md", "sm", "xs"];
+const Item = ({
+  children,
+  contentWrapper,
+  ...props
+}) => {
+  const breakpointData = useContext(GridContext);
+  const definedBreakpoints = useMemo(() => {
+    return BREAKPOINTS.filter((breakpoint) => props[breakpoint] !== void 0).map((breakpoint) => {
       return {
         name: breakpoint,
         index: BREAKPOINTS.indexOf(breakpoint)
       };
     });
   }, [props]);
-  var breakpointColumns = useMemo(function () {
+  const breakpointColumns = useMemo(() => {
     if (breakpointData.breakpoint) {
-      var name = breakpointData.breakpoint.name;
-      if (props[name] !== undefined) {
+      const {
+        name
+      } = breakpointData.breakpoint;
+      if (props[name] !== void 0) {
         return props[name];
       }
-      var indexOfCurrentBreakpoint = BREAKPOINTS.indexOf(name);
-      var nextAvailableBreakpoint = definedBreakpoints.find(function (breakpoint) {
-        return breakpoint.index >= indexOfCurrentBreakpoint;
-      });
-      return nextAvailableBreakpoint ? props[nextAvailableBreakpoint.name] : undefined;
+      const indexOfCurrentBreakpoint = BREAKPOINTS.indexOf(name);
+      const nextAvailableBreakpoint = definedBreakpoints.find((breakpoint) => breakpoint.index >= indexOfCurrentBreakpoint);
+      return nextAvailableBreakpoint ? props[nextAvailableBreakpoint.name] : void 0;
     }
-    return undefined;
+    return void 0;
   }, [breakpointData.breakpoint, definedBreakpoints, props]);
-  var getColumns = useMemo(function () {
-    var _breakpointData$break;
-    if (breakpointColumns !== undefined) {
+  const getColumns = useMemo(() => {
+    if (breakpointColumns !== void 0) {
       return breakpointColumns;
     }
-    return ((_breakpointData$break = breakpointData.breakpoint) == null ? void 0 : _breakpointData$break.columns) || DEFAULT_COLUMNS_NUMBER;
+    return breakpointData.breakpoint?.columns || DEFAULT_COLUMNS_NUMBER;
   }, [breakpointColumns, breakpointData]);
-  return /*#__PURE__*/React.createElement(S.GridItem, {
-    className: "ds-grid-item",
-    columns: getColumns,
-    maxColumns: (breakpointData == null || (_breakpointData$break2 = breakpointData.breakpoint) == null ? void 0 : _breakpointData$break2.columns) || getColumns,
-    contentWrapper: Boolean(contentWrapper)
-  }, children);
+  return /* @__PURE__ */ jsx(GridItem, { className: "ds-grid-item", columns: getColumns, maxColumns: breakpointData?.breakpoint?.columns || getColumns, contentWrapper: Boolean(contentWrapper), children });
+};
+export {
+  Item as default
 };
-export default Item;

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Grid';
+import { default as default2 } from "./Grid.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-grid",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "Grid UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,15 +16,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
-    "build:css": "node ../../../scripts/style/less.js",
-    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
-    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
-    "test": "jest",
-    "test:watch": "pnpm run test -- --watchAll",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,12 +32,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-utils": "^1.8.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "vitest": "4"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "ce3c6d75efe8573a2b274853636f959b75a6cd32"
 }