@dnanpm/styleguide 3.12.0 → 3.12.2

package/build/es/themes/theme.d.ts

@@ -9,7 +9,14 @@ declare const theme: {
             unit: string;
         };
     };
-    breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
+    breakpoints: {
+        readonly xxl: 1440;
+        readonly xl: 1200;
+        readonly lg: 992;
+        readonly md: 768;
+        readonly sm: 576;
+        readonly xs: 480;
+    };
     color: {
         default: {
             pink: string;
@@ -155,7 +162,7 @@ declare const theme: {
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    media: Record<"xxl" | "xl" | "lg" | "md" | "sm" | "xs", (l: TemplateStringsArray, ...p: (string | number)[]) => ReturnType<typeof import("styled-components").css>>;
     radius: {
         default: string;
         s: string;

package/build/es/themes/themeComponents/breakpoints.d.ts

@@ -1,5 +1,10 @@
-export interface ViewBreakpoints {
-    [key: string]: number;
-}
-declare const breakpoints: ViewBreakpoints;
+declare const breakpoints: {
+    readonly xxl: 1440;
+    readonly xl: 1200;
+    readonly lg: 992;
+    readonly md: 768;
+    readonly sm: 576;
+    readonly xs: 480;
+};
+export type ViewBreakpoints = typeof breakpoints;
 export default breakpoints;

package/build/es/utils/styledUtils.d.ts

@@ -1,3 +1,4 @@
+import { css } from '../themes/styled';
 export declare const getMultipliedSize: (base: {
     value: number;
     unit: string;
@@ -6,4 +7,24 @@ export declare const getDividedSize: (base: {
     value: number;
     unit: string;
 }, divide: number) => string;
-export declare const media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+/**
+ * Media query helpers for responsive design.
+ *
+ * @example
+ * ```ts
+ * const StyledDiv = styled.div`
+ *   font-size: 1rem;
+ *   ${media.md`font-size: 1.2rem;`}
+ *   ${media.lg`font-size: 1.5rem;`}
+ * `;
+ * ```
+ *
+ * Available breakpoints:
+ * - `xs`: 480px
+ * - `sm`: 576px
+ * - `md`: 768px
+ * - `lg`: 992px
+ * - `xl`: 1200px
+ * - `xxl`: 1440px
+ */
+export declare const media: Record<"xxl" | "xl" | "lg" | "md" | "sm" | "xs", (l: TemplateStringsArray, ...p: (string | number)[]) => ReturnType<typeof css>>;

package/build/es/utils/styledUtils.js

@@ -3,12 +3,32 @@ import breakpoints from '../themes/themeComponents/breakpoints.js';
 
 const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
 const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
-const media = Object.keys(breakpoints).reduce((acc, label) => {
-    acc[label] = (literals, ...placeholders) => css `
-                @media (min-width: ${breakpoints[label]}px) {
-                    ${css(literals, ...placeholders)};
-                }
-            `.join('');
+/**
+ * Media query helpers for responsive design.
+ *
+ * @example
+ * ```ts
+ * const StyledDiv = styled.div`
+ *   font-size: 1rem;
+ *   ${media.md`font-size: 1.2rem;`}
+ *   ${media.lg`font-size: 1.5rem;`}
+ * `;
+ * ```
+ *
+ * Available breakpoints:
+ * - `xs`: 480px
+ * - `sm`: 576px
+ * - `md`: 768px
+ * - `lg`: 992px
+ * - `xl`: 1200px
+ * - `xxl`: 1440px
+ */
+const media = Object.keys(breakpoints).reduce((acc, key) => {
+    acc[key] = (literals, ...placeholders) => css `
+            @media (min-width: ${breakpoints[key]}px) {
+                ${css(literals, ...placeholders)}
+            }
+        `;
     return acc;
 }, {});
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.12.0",
+    "version": "v3.12.2",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -18,7 +18,8 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git@github.com:DNA-Online-Services/styleguide.git"
+        "url": "git@github.com:DNA-Online-Services/styleguide.git",
+        "directory": "packages/styleguide"
     },
     "scripts": {
         "build": "rm -rf build && rollup -c",
@@ -48,15 +49,15 @@
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.27.1",
         "@dnanpm/icons": "^2.0.9",
-        "@rollup/plugin-commonjs": "^28.0.3",
-        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-commonjs": "^29.0.0",
+        "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-typescript": "^12.1.2",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^30.0.0",
         "@types/node": "^17.0.45",
-        "@types/ramda": "^0.27.36",
+        "@types/ramda": "^0.31.1",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.1",
         "@types/react-modal": "^3.13.1",
@@ -71,7 +72,7 @@
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "2.32.0",
-        "eslint-plugin-jsdoc": "^60.4.0",
+        "eslint-plugin-jsdoc": "^61.1.4",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.37.4",
@@ -88,18 +89,18 @@
         "react-dom": "^18.3.1",
         "react-styleguidist": "^13.1.4",
         "rollup": "^3.29.4",
-        "rollup-plugin-import-css": "^3.5.8",
+        "rollup-plugin-import-css": "^4.1.0",
         "style-loader": "^3.3.3",
         "styled-components": "^6.1.19",
         "ts-jest": "^29.3.2",
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
         "typescript": "^5.1.6",
-        "webpack": "^5.99.8"
+        "webpack": "^5.102.1"
     },
     "dependencies": {
-        "ramda": "^0.27.1",
-        "react-datepicker": "8.7.0",
+        "ramda": "^0.32.0",
+        "react-datepicker": "8.8.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",
@@ -110,5 +111,8 @@
         "react": ">=17.x <=19.x",
         "react-dom": ">=17.x <=19.x",
         "styled-components": "6.x"
+    },
+    "engines": {
+        "node": ">=20"
     }
 }