styled-components-jsx 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cr0WD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,229 @@
+# 🎨 styled-components-jsx
+
+[![package version](https://img.shields.io/npm/v/styled-components-jsx.svg?style=flat-square)](https://www.npmjs.com/package/styled-components-jsx)
+[![package downloads](https://img.shields.io/npm/dm/styled-components-jsx.svg?style=flat-square)](https://www.npmjs.com/package/styled-components-jsx)
+[![package license](https://img.shields.io/npm/l/styled-components-jsx.svg?style=flat-square)](https://www.npmjs.com/package/styled-components-jsx)
+
+
+Write styles like [`styled-components`](https://www.npmjs.com/package/styled-components), powered by [`styled-jsx`](https://www.npmjs.com/package/styled-jsx) under the hood.
+
+If you love the simplicity and performance of `styled-jsx` but prefer the ergonomic syntax of `styled-components`, this library gives you the best of both worlds.
+
+---
+
+## 🚀 Installation
+> ⚠️ Requires [`styled-jsx`](https://www.npmjs.com/package/styled-jsx) to be installed and configured in your app.
+
+
+With **Yarn**:
+```bash
+yarn add styled-components-jsx
+```
+
+With **npm**:
+```bash
+npm install styled-components-jsx
+```
+
+
+---
+
+## ✨ Basic Usage
+
+```tsx
+import styled from 'styled-components-jsx'
+
+const Button = styled.button`
+  background: dodgerblue;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background: deepskyblue;
+  }
+`
+
+const Title = styled.h1`
+  font-size: 2rem;
+  color: hotpink;
+`
+
+export default function App() {
+  return (
+    <>
+      <Title>Hello</Title>
+      <Button>Click me</Button>
+    </>
+  )
+}
+```
+
+---
+
+## 🧠 How It Works
+
+This library wraps your styles using `styled-jsx`, giving you:
+
+- Full CSS scoping via `styled-jsx`
+- `styled-components`-like API
+- Optional interpolations like `${props => props.color}`
+- Support for both DOM elements and custom React components
+- Automatic prop filtering (`$`-prefixed props are stripped from DOM)
+
+
+---
+
+## 🛠 Configuration
+
+For full setup (e.g., Babel, SSR, Next.js), refer to the [`styled-jsx` documentation](https://github.com/vercel/styled-jsx).
+
+This library builds on top of `styled-jsx` and inherits all of its capabilities.
+
+---
+
+## 🎨 About the `.🎨` class Prefix
+
+`styled-jsx` does not generate any CSS if there are no selectors in the final output.  
+In other words, if your component's styles contain **only raw properties** (without a selector), the CSS will silently be ignored.
+
+To work around this, we **always prefix styles with a dummy class**, and we chose `🎨` as a fun and recognizable default.
+
+For example, this:
+
+```tsx
+const Container = styled.div`
+  max-width: 960px;
+  margin: 0 auto;
+`
+```
+
+Will render internally like this:
+
+```html
+<style id="__jsx-3515400890">
+  .🎨.jsx-3515400890 {
+    max-width: 960px;
+    margin: 0 auto;
+  }
+</style>
+```
+
+### Why `.🎨`?
+
+- It ensures your styles are always emitted correctly
+- It’s unique enough to avoid collisions
+- And hey, it looks kinda nice in DevTools too 😎
+
+---
+
+## 🧩 Interpolations
+
+Inject values with functions that receive props:
+
+```tsx
+const Alert = styled.div`
+  color: ${props => (props.$error ? 'red' : 'green')};
+`
+```
+
+Props prefixed with `$` are automatically excluded from the rendered DOM.
+
+---
+
+## 🧪 Custom Components
+
+```tsx
+const Card = ({ className }: { className?: string }) => (
+  <div className={className}>Styled Card</div>
+)
+
+const StyledCard = styled(Card)`
+  padding: 24px;
+  border-radius: 12px;
+  background: red;
+`
+```
+
+---
+
+## 🧼 Automatic Minification
+
+All styles are **automatically minified** before being passed to `styled-jsx`.
+
+This includes:
+
+- 🧹 Stripping all comments (`/* */` and `//`)
+- 🧱 Removing extra whitespace and newlines
+- 🧵 Trimming spaces around symbols like `:`, `{}`, `;`, etc.
+- ❌ Eliminating redundant `;` before closing braces
+
+### Example
+
+This:
+
+```tsx
+const Box = styled('div')`
+  // This is a comment
+  padding: 16px ;  
+  margin: 0 auto   ;
+`
+```
+
+Turns into:
+
+```css
+.🎨.jsx-123456 {padding:16px;margin:0 auto;}
+```
+
+> The minifier is lightweight and built-in — no extra setup required.
+
+Under the hood, it's powered by a custom function that processes all styles similarly to how LESS/CSS preprocessors do it, but focused purely on cleanup and safe compression.
+
+
+---
+
+## 💻 TypeScript Support
+
+- Fully typed components and props
+- Autocomplete for tag names and styles
+- Works seamlessly with React 18+
+
+---
+
+## 📦 Designed for React
+
+Supports React 18 and 19, and integrates smoothly into any React-based project or framework (including Next.js).
+
+---
+
+## 💡 Why This Exists
+
+`styled-jsx` is powerful, but its tagged template syntax isn’t always ergonomic.  
+This package brings the comfort and beauty of `styled-components` to the world of `styled-jsx`.
+
+**You get the best of both worlds — now with a splash of color. 🎨**
+
+
+Конечно! Вот секция благодарности, оформленная с теплотой и уважением к авторам `styled-jsx` и `styled-components`:
+
+---
+
+## 🙏 Thanks & Credits
+
+A **huge thank you** to the creators and contributors of:
+
+- [`styled-jsx`](https://github.com/vercel/styled-jsx) – for pioneering scoped CSS in React and enabling this project’s core functionality
+- [`styled-components`](https://github.com/styled-components/styled-components) – for inspiring the expressive and elegant developer experience this library builds on
+
+This library wouldn't exist without the incredible work done by these communities.  
+
+If you use and enjoy [`styled-components-jsx`](https://www.npmjs.com/package/styled-components-jsx), consider supporting and starring the original projects too — they made all of this possible.
+
+---
+
+## 📄 License
+
+MIT © [Cr0WD](https://github.com/Cr0WD)

package/dist/helpers/minifyLess.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.
+ *
+ * @param {string} lessString - The LESS string to be minified.
+ * @returns {string} - The minified LESS string.
+ */
+export declare function minifyLess(lessString: string): string;
+//# sourceMappingURL=minifyLess.d.ts.map

package/dist/helpers/minifyLess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"minifyLess.d.ts","sourceRoot":"","sources":["../src/helpers/minifyLess.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAOrD"}

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import React, { ElementType, JSX, ReactNode } from 'react';
+import { minifyLess } from './helpers/minifyLess';
+/**
+ * Type definition for the styled function.
+ * Supports both HTML elements and React components.
+ */
+declare type StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(styles: TemplateStringsArray, ...interpolations: Array<((properties: P) => string | number) | string | number>) => (properties: P & {
+    children?: ReactNode;
+    className?: string;
+}) => JSX.Element;
+/**
+ * Utility type for mapping styled properties to common HTML elements.
+ */
+declare type StyledHTMLTags = {
+    [Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>;
+};
+/**
+ * Proxy-based styled function allowing:
+ * - `styled("div")`
+ * - `styled.div`
+ */
+declare const styled: (<T extends React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">>(Component: T) => StyledComponent<T>) & StyledHTMLTags;
+export { minifyLess };
+export default styled;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD;;;GAGG;AACH,aAAK,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EACxF,MAAM,EAAE,oBAAoB,EAC5B,GAAG,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC,KAC5E,CAAC,UAAU,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,GAAG,CAAC,OAAO,CAAA;AAyDlF;;GAEG;AACH,aAAK,cAAc,GAAG;KACpB,GAAG,IAAI,MAAM,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,GAAG,CAAC;CAC1D,CAAA;AAED;;;;GAIG;AACH,QAAA,MAAM,MAAM,u9DAE8B,CAAA;AAE1C,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,eAAe,MAAM,CAAA"}

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./styled-components-jsx.cjs.production.min.js')
+} else {
+  module.exports = require('./styled-components-jsx.cjs.development.js')
+}

package/dist/styled-components-jsx.cjs.development.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+
+/* Precompile regular expressions */
+var commentRegex = /\/\*[\s\S]*?\*\/|\/\/.*/g;
+var symbolRegex = /\s*([{}:;,>~+()])\s*/g;
+var whitespaceRegex = /\s+/g;
+var semicolonRegex = /;}/g;
+/**
+ * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.
+ *
+ * @param {string} lessString - The LESS string to be minified.
+ * @returns {string} - The minified LESS string.
+ */
+function minifyLess(lessString) {
+  return lessString.replaceAll(commentRegex, '') // Remove multi-line and single-line comments
+  .replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols
+  .replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space
+  .replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces
+  .trim(); // Trim spaces from the beginning and end
+}
+
+/**
+ * Filters out props starting with '$' or custom props not accepted by HTML elements.
+ */
+var filterDollarProperties = function filterDollarProperties(properties) {
+  return Object.fromEntries(Object.entries(properties).filter(function (_ref) {
+    var key = _ref[0];
+    return !key.startsWith('$');
+  }));
+};
+/**
+ * Base function to create styled components.
+ *
+ * @param Component - An HTML tag (e.g., "div", "button") or a React component.
+ * @returns A function that takes CSS styles and returns a styled component.
+ */
+var createStyled = function createStyled(Component) {
+  return function (styles) {
+    for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      interpolations[_key - 1] = arguments[_key];
+    }
+    return function (properties) {
+      // Non-removable class reference for this plugin
+      var classNameReference = '🎨';
+      // Process styles and replace interpolations with actual prop values
+      var processedStyles = styles.map(function (style, index) {
+        var interpolation = interpolations[index];
+        var value = typeof interpolation === 'function' ? interpolation(properties) : interpolation != null ? interpolation : '';
+        return style + value;
+      }).join('');
+      var isCustomComponent = typeof Component !== 'string';
+      var filteredProperties = isCustomComponent ? properties : filterDollarProperties(properties);
+      // Ensure Component is a valid React component or HTML tag
+      var Element = Component;
+      var content = "." + classNameReference + "{" + minifyLess(processedStyles) + "}";
+      return React.createElement(React.Fragment, null, React.createElement(Element, Object.assign({}, filteredProperties, {
+        className: [properties.className, classNameReference].filter(Boolean).join(' ')
+      }), properties.children), React.createElement("style", {
+        jsx: true
+      }, content));
+    };
+  };
+};
+/**
+ * Proxy-based styled function allowing:
+ * - `styled("div")`
+ * - `styled.div`
+ */
+var styled = /*#__PURE__*/new Proxy(createStyled, {
+  get: function get(_, tag) {
+    return createStyled(tag);
+  }
+});
+
+exports.default = styled;
+exports.minifyLess = minifyLess;
+//# sourceMappingURL=styled-components-jsx.cjs.development.js.map

package/dist/styled-components-jsx.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-components-jsx.cjs.development.js","sources":["../src/helpers/minifyLess.ts","../src/index.tsx"],"sourcesContent":["/* Precompile regular expressions */\nconst commentRegex = /\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*/g\nconst symbolRegex = /\\s*([{}:;,>~+()])\\s*/g\nconst whitespaceRegex = /\\s+/g\nconst semicolonRegex = /;}/g\n\n/**\n * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.\n *\n * @param {string} lessString - The LESS string to be minified.\n * @returns {string} - The minified LESS string.\n */\nexport function minifyLess(lessString: string): string {\n\treturn lessString\n\t\t.replaceAll(commentRegex, '') // Remove multi-line and single-line comments\n\t\t.replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols\n\t\t.replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space\n\t\t.replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces\n\t\t.trim() // Trim spaces from the beginning and end\n}\n","import React, { ElementType, JSX, ReactNode } from 'react'\nimport { minifyLess } from './helpers/minifyLess'\n\n/**\n * Type definition for the styled function.\n * Supports both HTML elements and React components.\n */\ntype StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(\n\tstyles: TemplateStringsArray,\n\t...interpolations: Array<((properties: P) => string | number) | string | number>\n) => (properties: P & { children?: ReactNode; className?: string }) => JSX.Element\n\n/**\n * Filters out props starting with '$' or custom props not accepted by HTML elements.\n */\nconst filterDollarProperties = <T extends Record<string, unknown>>(properties: T): Partial<T> =>\n\tObject.fromEntries(\n\t\tObject.entries(properties).filter(([key]) => !key.startsWith('$'))\n\t) as Partial<T>\n\n/**\n * Base function to create styled components.\n *\n * @param Component - An HTML tag (e.g., \"div\", \"button\") or a React component.\n * @returns A function that takes CSS styles and returns a styled component.\n */\nconst createStyled =\n\t<T extends ElementType>(Component: T): StyledComponent<T> =>\n\t(styles, ...interpolations) =>\n\tproperties => {\n\t\t// Non-removable class reference for this plugin\n\t\tconst classNameReference = '🎨'\n\n\t\t// Process styles and replace interpolations with actual prop values\n\t\tconst processedStyles = styles\n\t\t\t.map((style, index) => {\n\t\t\t\tconst interpolation = interpolations[index]\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof interpolation === 'function'\n\t\t\t\t\t\t? interpolation(properties)\n\t\t\t\t\t\t: (interpolation ?? '')\n\t\t\t\treturn style + value\n\t\t\t})\n\t\t\t.join('')\n\n\t\tconst isCustomComponent = typeof Component !== 'string'\n\t\tconst filteredProperties = isCustomComponent\n\t\t\t? properties\n\t\t\t: filterDollarProperties(properties)\n\n\t\t// Ensure Component is a valid React component or HTML tag\n\t\tconst Element: ElementType = Component\n\t\tconst content = `.${classNameReference}{${minifyLess(processedStyles)}}`\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Element\n\t\t\t\t\t{...filteredProperties}\n\t\t\t\t\tclassName={[properties.className, classNameReference].filter(Boolean).join(' ')}\n\t\t\t\t>\n\t\t\t\t\t{properties.children}\n\t\t\t\t</Element>\n\t\t\t\t<style jsx>{content}</style>\n\t\t\t</>\n\t\t)\n\t}\n\n/**\n * Utility type for mapping styled properties to common HTML elements.\n */\ntype StyledHTMLTags = {\n\t[Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>\n}\n\n/**\n * Proxy-based styled function allowing:\n * - `styled(\"div\")`\n * - `styled.div`\n */\nconst styled = new Proxy(createStyled, {\n\tget: (_, tag: keyof JSX.IntrinsicElements) => createStyled(tag),\n}) as typeof createStyled & StyledHTMLTags\n\nexport { minifyLess }\n\nexport default styled\n"],"names":["commentRegex","symbolRegex","whitespaceRegex","semicolonRegex","minifyLess","lessString","replaceAll","trim","filterDollarProperties","properties","Object","fromEntries","entries","filter","_ref","key","startsWith","createStyled","Component","styles","_len","arguments","length","interpolations","Array","_key","classNameReference","processedStyles","map","style","index","interpolation","value","join","isCustomComponent","filteredProperties","Element","content","React","className","Boolean","children","jsx","styled","Proxy","get","_","tag"],"mappings":";;;;;;;;AAAA;AACA,IAAMA,YAAY,GAAG,0BAA0B;AAC/C,IAAMC,WAAW,GAAG,uBAAuB;AAC3C,IAAMC,eAAe,GAAG,MAAM;AAC9B,IAAMC,cAAc,GAAG,KAAK;AAE5B;;;;;;SAMgBC,UAAUA,CAACC,UAAkB;EAC5C,OAAOA,UAAU,CACfC,UAAU,CAACN,YAAY,EAAE,EAAE,CAAC;GAC5BM,UAAU,CAACL,WAAW,EAAE,IAAI,CAAC;GAC7BK,UAAU,CAACJ,eAAe,EAAE,GAAG,CAAC;GAChCI,UAAU,CAACH,cAAc,EAAE,GAAG,CAAC;GAC/BI,IAAI,EAAE,CAAA;AACT;;ACPA;;;AAGA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAuCC,UAAa;EAAA,OAC/EC,MAAM,CAACC,WAAW,CACjBD,MAAM,CAACE,OAAO,CAACH,UAAU,CAAC,CAACI,MAAM,CAAC,UAAAC,IAAA;IAAA,IAAEC,GAAG,GAAAD,IAAA;IAAA,OAAM,CAACC,GAAG,CAACC,UAAU,CAAC,GAAG,CAAC;IAAC,CACpD;AAAA;AAEhB;;;;;;AAMA,IAAMC,YAAY,GACjB,SADKA,YAAYA,CACOC,SAAY;EAAA,OACpC,UAACC,MAAM;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAKC,cAAc,OAAAC,KAAA,CAAAJ,IAAA,OAAAA,IAAA,WAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAdF,cAAc,CAAAE,IAAA,QAAAJ,SAAA,CAAAI,IAAA;;IAAA,OAC1B,UAAAhB,UAAU;;MAET,IAAMiB,kBAAkB,GAAG,IAAI;;MAG/B,IAAMC,eAAe,GAAGR,MAAM,CAC5BS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QACjB,IAAMC,aAAa,GAAGR,cAAc,CAACO,KAAK,CAAC;QAC3C,IAAME,KAAK,GACV,OAAOD,aAAa,KAAK,UAAU,GAChCA,aAAa,CAACtB,UAAU,CAAC,GACxBsB,aAAa,WAAbA,aAAa,GAAI,EAAG;QACzB,OAAOF,KAAK,GAAGG,KAAK;OACpB,CAAC,CACDC,IAAI,CAAC,EAAE,CAAC;MAEV,IAAMC,iBAAiB,GAAG,OAAOhB,SAAS,KAAK,QAAQ;MACvD,IAAMiB,kBAAkB,GAAGD,iBAAiB,GACzCzB,UAAU,GACVD,sBAAsB,CAACC,UAAU,CAAC;;MAGrC,IAAM2B,OAAO,GAAgBlB,SAAS;MACtC,IAAMmB,OAAO,SAAOX,kBAAkB,SAAItB,UAAU,CAACuB,eAAe,CAAC,MAAG;MAExE,OACCW,0CACCA,oBAACF,OAAO,oBACHD,kBAAkB;QACtBI,SAAS,EAAE,CAAC9B,UAAU,CAAC8B,SAAS,EAAEb,kBAAkB,CAAC,CAACb,MAAM,CAAC2B,OAAO,CAAC,CAACP,IAAI,CAAC,GAAG;UAE7ExB,UAAU,CAACgC,QAAQ,CACX,EACVH;QAAOI,GAAG;SAAEL,OAAO,CAAS,CAC1B;KAEJ;;AAAA;AASF;;;;;AAKA,IAAMM,MAAM,gBAAG,IAAIC,KAAK,CAAC3B,YAAY,EAAE;EACtC4B,GAAG,EAAE,SAALA,GAAGA,CAAGC,CAAC,EAAEC,GAAgC;IAAA,OAAK9B,YAAY,CAAC8B,GAAG,CAAC;;CAC/D,CAAyC;;;;;"}

package/dist/styled-components-jsx.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=/\/\*[\s\S]*?\*\/|\/\/.*/g,n=/\s*([{}:;,>~+()])\s*/g,l=/\s+/g,a=/;}/g;function c(e){return e.replaceAll(r,"").replaceAll(n,"$1").replaceAll(l," ").replaceAll(a,"}").trim()}var i=function(e){return Object.fromEntries(Object.entries(e).filter((function(e){return!e[0].startsWith("$")})))},u=function(e){return function(r){for(var n=arguments.length,l=new Array(n>1?n-1:0),a=1;a<n;a++)l[a-1]=arguments[a];return function(n){var a="🎨",u=r.map((function(e,t){var r=l[t];return e+("function"==typeof r?r(n):null!=r?r:"")})).join(""),o="string"!=typeof e?n:i(n),s=e,f="."+a+"{"+c(u)+"}";return t.createElement(t.Fragment,null,t.createElement(s,Object.assign({},o,{className:[n.className,a].filter(Boolean).join(" ")}),n.children),t.createElement("style",{jsx:!0},f))}}};exports.default=new Proxy(u,{get:function(e,t){return u(t)}}),exports.minifyLess=c;
+//# sourceMappingURL=styled-components-jsx.cjs.production.min.js.map

package/dist/styled-components-jsx.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-components-jsx.cjs.production.min.js","sources":["../src/helpers/minifyLess.ts","../src/index.tsx"],"sourcesContent":["/* Precompile regular expressions */\nconst commentRegex = /\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*/g\nconst symbolRegex = /\\s*([{}:;,>~+()])\\s*/g\nconst whitespaceRegex = /\\s+/g\nconst semicolonRegex = /;}/g\n\n/**\n * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.\n *\n * @param {string} lessString - The LESS string to be minified.\n * @returns {string} - The minified LESS string.\n */\nexport function minifyLess(lessString: string): string {\n\treturn lessString\n\t\t.replaceAll(commentRegex, '') // Remove multi-line and single-line comments\n\t\t.replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols\n\t\t.replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space\n\t\t.replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces\n\t\t.trim() // Trim spaces from the beginning and end\n}\n","import React, { ElementType, JSX, ReactNode } from 'react'\nimport { minifyLess } from './helpers/minifyLess'\n\n/**\n * Type definition for the styled function.\n * Supports both HTML elements and React components.\n */\ntype StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(\n\tstyles: TemplateStringsArray,\n\t...interpolations: Array<((properties: P) => string | number) | string | number>\n) => (properties: P & { children?: ReactNode; className?: string }) => JSX.Element\n\n/**\n * Filters out props starting with '$' or custom props not accepted by HTML elements.\n */\nconst filterDollarProperties = <T extends Record<string, unknown>>(properties: T): Partial<T> =>\n\tObject.fromEntries(\n\t\tObject.entries(properties).filter(([key]) => !key.startsWith('$'))\n\t) as Partial<T>\n\n/**\n * Base function to create styled components.\n *\n * @param Component - An HTML tag (e.g., \"div\", \"button\") or a React component.\n * @returns A function that takes CSS styles and returns a styled component.\n */\nconst createStyled =\n\t<T extends ElementType>(Component: T): StyledComponent<T> =>\n\t(styles, ...interpolations) =>\n\tproperties => {\n\t\t// Non-removable class reference for this plugin\n\t\tconst classNameReference = '🎨'\n\n\t\t// Process styles and replace interpolations with actual prop values\n\t\tconst processedStyles = styles\n\t\t\t.map((style, index) => {\n\t\t\t\tconst interpolation = interpolations[index]\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof interpolation === 'function'\n\t\t\t\t\t\t? interpolation(properties)\n\t\t\t\t\t\t: (interpolation ?? '')\n\t\t\t\treturn style + value\n\t\t\t})\n\t\t\t.join('')\n\n\t\tconst isCustomComponent = typeof Component !== 'string'\n\t\tconst filteredProperties = isCustomComponent\n\t\t\t? properties\n\t\t\t: filterDollarProperties(properties)\n\n\t\t// Ensure Component is a valid React component or HTML tag\n\t\tconst Element: ElementType = Component\n\t\tconst content = `.${classNameReference}{${minifyLess(processedStyles)}}`\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Element\n\t\t\t\t\t{...filteredProperties}\n\t\t\t\t\tclassName={[properties.className, classNameReference].filter(Boolean).join(' ')}\n\t\t\t\t>\n\t\t\t\t\t{properties.children}\n\t\t\t\t</Element>\n\t\t\t\t<style jsx>{content}</style>\n\t\t\t</>\n\t\t)\n\t}\n\n/**\n * Utility type for mapping styled properties to common HTML elements.\n */\ntype StyledHTMLTags = {\n\t[Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>\n}\n\n/**\n * Proxy-based styled function allowing:\n * - `styled(\"div\")`\n * - `styled.div`\n */\nconst styled = new Proxy(createStyled, {\n\tget: (_, tag: keyof JSX.IntrinsicElements) => createStyled(tag),\n}) as typeof createStyled & StyledHTMLTags\n\nexport { minifyLess }\n\nexport default styled\n"],"names":["commentRegex","symbolRegex","whitespaceRegex","semicolonRegex","minifyLess","lessString","replaceAll","trim","filterDollarProperties","properties","Object","fromEntries","entries","filter","_ref","startsWith","createStyled","Component","styles","_len","arguments","length","interpolations","Array","_key","classNameReference","processedStyles","map","style","index","interpolation","join","filteredProperties","Element","content","React","className","Boolean","children","jsx","Proxy","get","_","tag"],"mappings":"gJACMA,EAAe,2BACfC,EAAc,wBACdC,EAAkB,OAClBC,EAAiB,eAQPC,EAAWC,GAC1B,OAAOA,EACLC,WAAWN,EAAc,IACzBM,WAAWL,EAAa,MACxBK,WAAWJ,EAAiB,KAC5BI,WAAWH,EAAgB,KAC3BI,OCHH,IAAMC,EAAyB,SAAoCC,GAAa,OAC/EC,OAAOC,YACND,OAAOE,QAAQH,GAAYI,QAAO,SAAAC,GAAK,OAAAA,KAAWC,WAAW,UASzDC,EACL,SAAwBC,GAAY,OACpC,SAACC,GAAM,QAAAC,EAAAC,UAAAC,OAAKC,MAAcC,MAAAJ,IAAAA,OAAAK,IAAAA,EAAAL,EAAAK,IAAdF,EAAcE,KAAAJ,UAAAI,GAAA,OAC1B,SAAAf,GAEC,IAAMgB,EAAqB,KAGrBC,EAAkBR,EACtBS,KAAI,SAACC,EAAOC,GACZ,IAAMC,EAAgBR,EAAeO,GAKrC,OAAOD,GAHmB,mBAAlBE,EACJA,EAAcrB,SACbqB,EAAAA,EAAiB,OAGtBC,KAAK,IAGDC,EADyC,iBAAdf,EAE9BR,EACAD,EAAuBC,GAGpBwB,EAAuBhB,EACvBiB,MAAcT,MAAsBrB,EAAWsB,OAErD,OACCS,gCACCA,gBAACF,mBACID,GACJI,UAAW,CAAC3B,EAAW2B,UAAWX,GAAoBZ,OAAOwB,SAASN,KAAK,OAE1EtB,EAAW6B,UAEbH,yBAAOI,QAAKL,uBAiBD,IAAIM,MAAMxB,EAAc,CACtCyB,IAAK,SAACC,EAAGC,GAAgC,OAAK3B,EAAa2B"}

package/dist/styled-components-jsx.esm.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+/* Precompile regular expressions */
+var commentRegex = /\/\*[\s\S]*?\*\/|\/\/.*/g;
+var symbolRegex = /\s*([{}:;,>~+()])\s*/g;
+var whitespaceRegex = /\s+/g;
+var semicolonRegex = /;}/g;
+/**
+ * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.
+ *
+ * @param {string} lessString - The LESS string to be minified.
+ * @returns {string} - The minified LESS string.
+ */
+function minifyLess(lessString) {
+  return lessString.replaceAll(commentRegex, '') // Remove multi-line and single-line comments
+  .replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols
+  .replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space
+  .replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces
+  .trim(); // Trim spaces from the beginning and end
+}
+
+/**
+ * Filters out props starting with '$' or custom props not accepted by HTML elements.
+ */
+var filterDollarProperties = function filterDollarProperties(properties) {
+  return Object.fromEntries(Object.entries(properties).filter(function (_ref) {
+    var key = _ref[0];
+    return !key.startsWith('$');
+  }));
+};
+/**
+ * Base function to create styled components.
+ *
+ * @param Component - An HTML tag (e.g., "div", "button") or a React component.
+ * @returns A function that takes CSS styles and returns a styled component.
+ */
+var createStyled = function createStyled(Component) {
+  return function (styles) {
+    for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      interpolations[_key - 1] = arguments[_key];
+    }
+    return function (properties) {
+      // Non-removable class reference for this plugin
+      var classNameReference = '🎨';
+      // Process styles and replace interpolations with actual prop values
+      var processedStyles = styles.map(function (style, index) {
+        var interpolation = interpolations[index];
+        var value = typeof interpolation === 'function' ? interpolation(properties) : interpolation != null ? interpolation : '';
+        return style + value;
+      }).join('');
+      var isCustomComponent = typeof Component !== 'string';
+      var filteredProperties = isCustomComponent ? properties : filterDollarProperties(properties);
+      // Ensure Component is a valid React component or HTML tag
+      var Element = Component;
+      var content = "." + classNameReference + "{" + minifyLess(processedStyles) + "}";
+      return React.createElement(React.Fragment, null, React.createElement(Element, Object.assign({}, filteredProperties, {
+        className: [properties.className, classNameReference].filter(Boolean).join(' ')
+      }), properties.children), React.createElement("style", {
+        jsx: true
+      }, content));
+    };
+  };
+};
+/**
+ * Proxy-based styled function allowing:
+ * - `styled("div")`
+ * - `styled.div`
+ */
+var styled = /*#__PURE__*/new Proxy(createStyled, {
+  get: function get(_, tag) {
+    return createStyled(tag);
+  }
+});
+
+export default styled;
+export { minifyLess };
+//# sourceMappingURL=styled-components-jsx.esm.js.map

package/dist/styled-components-jsx.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-components-jsx.esm.js","sources":["../src/helpers/minifyLess.ts","../src/index.tsx"],"sourcesContent":["/* Precompile regular expressions */\nconst commentRegex = /\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*/g\nconst symbolRegex = /\\s*([{}:;,>~+()])\\s*/g\nconst whitespaceRegex = /\\s+/g\nconst semicolonRegex = /;}/g\n\n/**\n * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.\n *\n * @param {string} lessString - The LESS string to be minified.\n * @returns {string} - The minified LESS string.\n */\nexport function minifyLess(lessString: string): string {\n\treturn lessString\n\t\t.replaceAll(commentRegex, '') // Remove multi-line and single-line comments\n\t\t.replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols\n\t\t.replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space\n\t\t.replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces\n\t\t.trim() // Trim spaces from the beginning and end\n}\n","import React, { ElementType, JSX, ReactNode } from 'react'\nimport { minifyLess } from './helpers/minifyLess'\n\n/**\n * Type definition for the styled function.\n * Supports both HTML elements and React components.\n */\ntype StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(\n\tstyles: TemplateStringsArray,\n\t...interpolations: Array<((properties: P) => string | number) | string | number>\n) => (properties: P & { children?: ReactNode; className?: string }) => JSX.Element\n\n/**\n * Filters out props starting with '$' or custom props not accepted by HTML elements.\n */\nconst filterDollarProperties = <T extends Record<string, unknown>>(properties: T): Partial<T> =>\n\tObject.fromEntries(\n\t\tObject.entries(properties).filter(([key]) => !key.startsWith('$'))\n\t) as Partial<T>\n\n/**\n * Base function to create styled components.\n *\n * @param Component - An HTML tag (e.g., \"div\", \"button\") or a React component.\n * @returns A function that takes CSS styles and returns a styled component.\n */\nconst createStyled =\n\t<T extends ElementType>(Component: T): StyledComponent<T> =>\n\t(styles, ...interpolations) =>\n\tproperties => {\n\t\t// Non-removable class reference for this plugin\n\t\tconst classNameReference = '🎨'\n\n\t\t// Process styles and replace interpolations with actual prop values\n\t\tconst processedStyles = styles\n\t\t\t.map((style, index) => {\n\t\t\t\tconst interpolation = interpolations[index]\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof interpolation === 'function'\n\t\t\t\t\t\t? interpolation(properties)\n\t\t\t\t\t\t: (interpolation ?? '')\n\t\t\t\treturn style + value\n\t\t\t})\n\t\t\t.join('')\n\n\t\tconst isCustomComponent = typeof Component !== 'string'\n\t\tconst filteredProperties = isCustomComponent\n\t\t\t? properties\n\t\t\t: filterDollarProperties(properties)\n\n\t\t// Ensure Component is a valid React component or HTML tag\n\t\tconst Element: ElementType = Component\n\t\tconst content = `.${classNameReference}{${minifyLess(processedStyles)}}`\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Element\n\t\t\t\t\t{...filteredProperties}\n\t\t\t\t\tclassName={[properties.className, classNameReference].filter(Boolean).join(' ')}\n\t\t\t\t>\n\t\t\t\t\t{properties.children}\n\t\t\t\t</Element>\n\t\t\t\t<style jsx>{content}</style>\n\t\t\t</>\n\t\t)\n\t}\n\n/**\n * Utility type for mapping styled properties to common HTML elements.\n */\ntype StyledHTMLTags = {\n\t[Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>\n}\n\n/**\n * Proxy-based styled function allowing:\n * - `styled(\"div\")`\n * - `styled.div`\n */\nconst styled = new Proxy(createStyled, {\n\tget: (_, tag: keyof JSX.IntrinsicElements) => createStyled(tag),\n}) as typeof createStyled & StyledHTMLTags\n\nexport { minifyLess }\n\nexport default styled\n"],"names":["commentRegex","symbolRegex","whitespaceRegex","semicolonRegex","minifyLess","lessString","replaceAll","trim","filterDollarProperties","properties","Object","fromEntries","entries","filter","_ref","key","startsWith","createStyled","Component","styles","_len","arguments","length","interpolations","Array","_key","classNameReference","processedStyles","map","style","index","interpolation","value","join","isCustomComponent","filteredProperties","Element","content","React","className","Boolean","children","jsx","styled","Proxy","get","_","tag"],"mappings":";;AAAA;AACA,IAAMA,YAAY,GAAG,0BAA0B;AAC/C,IAAMC,WAAW,GAAG,uBAAuB;AAC3C,IAAMC,eAAe,GAAG,MAAM;AAC9B,IAAMC,cAAc,GAAG,KAAK;AAE5B;;;;;;SAMgBC,UAAUA,CAACC,UAAkB;EAC5C,OAAOA,UAAU,CACfC,UAAU,CAACN,YAAY,EAAE,EAAE,CAAC;GAC5BM,UAAU,CAACL,WAAW,EAAE,IAAI,CAAC;GAC7BK,UAAU,CAACJ,eAAe,EAAE,GAAG,CAAC;GAChCI,UAAU,CAACH,cAAc,EAAE,GAAG,CAAC;GAC/BI,IAAI,EAAE,CAAA;AACT;;ACPA;;;AAGA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAuCC,UAAa;EAAA,OAC/EC,MAAM,CAACC,WAAW,CACjBD,MAAM,CAACE,OAAO,CAACH,UAAU,CAAC,CAACI,MAAM,CAAC,UAAAC,IAAA;IAAA,IAAEC,GAAG,GAAAD,IAAA;IAAA,OAAM,CAACC,GAAG,CAACC,UAAU,CAAC,GAAG,CAAC;IAAC,CACpD;AAAA;AAEhB;;;;;;AAMA,IAAMC,YAAY,GACjB,SADKA,YAAYA,CACOC,SAAY;EAAA,OACpC,UAACC,MAAM;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAKC,cAAc,OAAAC,KAAA,CAAAJ,IAAA,OAAAA,IAAA,WAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAdF,cAAc,CAAAE,IAAA,QAAAJ,SAAA,CAAAI,IAAA;;IAAA,OAC1B,UAAAhB,UAAU;;MAET,IAAMiB,kBAAkB,GAAG,IAAI;;MAG/B,IAAMC,eAAe,GAAGR,MAAM,CAC5BS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QACjB,IAAMC,aAAa,GAAGR,cAAc,CAACO,KAAK,CAAC;QAC3C,IAAME,KAAK,GACV,OAAOD,aAAa,KAAK,UAAU,GAChCA,aAAa,CAACtB,UAAU,CAAC,GACxBsB,aAAa,WAAbA,aAAa,GAAI,EAAG;QACzB,OAAOF,KAAK,GAAGG,KAAK;OACpB,CAAC,CACDC,IAAI,CAAC,EAAE,CAAC;MAEV,IAAMC,iBAAiB,GAAG,OAAOhB,SAAS,KAAK,QAAQ;MACvD,IAAMiB,kBAAkB,GAAGD,iBAAiB,GACzCzB,UAAU,GACVD,sBAAsB,CAACC,UAAU,CAAC;;MAGrC,IAAM2B,OAAO,GAAgBlB,SAAS;MACtC,IAAMmB,OAAO,SAAOX,kBAAkB,SAAItB,UAAU,CAACuB,eAAe,CAAC,MAAG;MAExE,OACCW,0CACCA,oBAACF,OAAO,oBACHD,kBAAkB;QACtBI,SAAS,EAAE,CAAC9B,UAAU,CAAC8B,SAAS,EAAEb,kBAAkB,CAAC,CAACb,MAAM,CAAC2B,OAAO,CAAC,CAACP,IAAI,CAAC,GAAG;UAE7ExB,UAAU,CAACgC,QAAQ,CACX,EACVH;QAAOI,GAAG;SAAEL,OAAO,CAAS,CAC1B;KAEJ;;AAAA;AASF;;;;;AAKA,IAAMM,MAAM,gBAAG,IAAIC,KAAK,CAAC3B,YAAY,EAAE;EACtC4B,GAAG,EAAE,SAALA,GAAGA,CAAGC,CAAC,EAAEC,GAAgC;IAAA,OAAK9B,YAAY,CAAC8B,GAAG,CAAC;;CAC/D,CAAyC;;;;;"}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "version": "1.0.0",
+  "license": "MIT",
+  "name": "styled-components-jsx",
+  "author": {
+    "email": "freshcrowd@gmail.com",
+    "name": "Denis Orlov",
+    "url": "https://github.com/Cr0WD"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Cr0WD/styled-components-jsx"
+  },
+  "keywords": [
+    "css",
+    "styling",
+    "babel-plugin-macros",
+    "styled-jsx",
+    "styled-components",
+    "css-in-js",
+    "react",
+    "reactjs",
+    "react-typescript",
+    "typescript"
+  ],
+  "module": "dist/styled-components-jsx.esm.js",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "lint": "tsdx lint",
+    "prepare": "install-peers && tsdx build",
+    "postinstall": "manypkg fix && manypkg check"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 100,
+    "trailingComma": "es5",
+    "semi": false,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "endOfLine": "lf",
+    "useTabs": true,
+    "tabWidth": 4
+  },
+  "publishConfig": {
+    "access": "public",
+    "branches": [
+      "master"
+    ]
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0 ||^19.0.0",
+    "react": "^18.0.0 ||^19.0.0",
+    "react-dom": "^18.0.0 ||^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "9.24.0",
+    "@manypkg/cli": "0.23.0",
+    "@next/eslint-plugin-next": "^15.3.0",
+    "@types/react": "^18.0.0 ||^19.0.0",
+    "@types/react-dom": "^19.1.2",
+    "@types/styled-jsx": "3.4.4",
+    "@typescript-eslint/eslint-plugin": "8.29.1",
+    "@typescript-eslint/parser": "8.29.1",
+    "eslint": "9.24.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-import-resolver-typescript": "4.3.2",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-security": "3.0.1",
+    "eslint-plugin-unicorn": "58.0.0",
+    "husky": "^9.1.7",
+    "install-peers-cli": "^2.2.0",
+    "prettier": "3.5.3",
+    "react": "^18.0.0 ||^19.0.0",
+    "react-dom": "^18.0.0 ||^19.0.0",
+    "semantic-release": "24.2.3",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.8.1",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.29.1"
+  }
+}