@utrecht/root-react 1.0.0 → 1.0.2

package/dist/css.d.ts

@@ -3,6 +3,5 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-import '@utrecht/root-css/src/index.scss';
 export * from './index';
 //# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,kCAAkC,CAAC;AAE1C,cAAc,SAAS,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,cAAc,SAAS,CAAC"}

package/dist/css.mjs

@@ -1,55 +1,28 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
+var css = ".utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}";
 
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
+const insertStyle = function (css) {
+    if (typeof document !== 'undefined') {
+        var head = document.head || document.getElementsByTagName('head')[0];
+        var style = document.createElement('style');
+        style.appendChild(document.createTextNode(css));
+        head.appendChild(style);
     }
-  } else {
-    head.appendChild(style);
-  }
+};
 
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-var css_248z = ".utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility}";
-styleInject(css_248z);
-
-var _excluded = ["children", "className", "Component"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Root = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'html' : _ref$Component,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return jsx(Component, _objectSpread(_objectSpread({}, restProps), {}, {
-    ref: ref,
-    className: clsx('utrecht-root', className),
-    children: children
-  }));
-});
+const Root = forwardRef(({ children, className, Component = 'html', ...restProps }, ref) => (jsx(Component, { ...restProps, ref: ref, className: clsx('utrecht-root', className), children: children })));
 Root.displayName = 'Root';
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+insertStyle(css);
+
 export { Root };
 //# sourceMappingURL=css.mjs.map

package/dist/css.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.mjs","sources":["../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport clsx from 'clsx';\nimport { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\nexport interface HtmlRootProps extends HTMLAttributes<HTMLElement> {\n  Component?: 'html';\n}\n\nexport interface DivRootProps extends HTMLAttributes<HTMLElement> {\n  Component: 'div';\n}\n\nexport const Root = forwardRef(\n  (\n    {\n      children,\n      className,\n      Component = 'html',\n      ...restProps\n    }: PropsWithChildren<HtmlRootProps> | PropsWithChildren<DivRootProps>,\n    ref: ForwardedRef<HTMLElement>,\n  ) => (\n    <Component {...restProps} ref={ref as any} className={clsx('utrecht-root', className)}>\n      {children}\n    </Component>\n  ),\n);\n\nRoot.displayName = 'Root';\n"],"names":["Root","forwardRef","_ref","ref","children","className","_ref$Component","Component","restProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","clsx","displayName"],"mappings":";;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;ACRO,IAAMA,IAAI,gBAAGC,UAAU,CAC5B,UAAAC,IAAA,EAOEC,GAA8B,EAAA;AAAA,EAAA,IAL5BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,cAAA,GAAAJ,IAAA,CACTK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,cAAA;AACfE,IAAAA,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA,CAAA;EAAA,OAIdC,GAAA,CAACJ,SAAS,EAAAK,aAAA,CAAAA,aAAA,KAAKJ,SAAS,CAAA,EAAA,EAAA,EAAA;AAAEL,IAAAA,GAAG,EAAEA,GAAU;AAAEE,IAAAA,SAAS,EAAEQ,IAAI,CAAC,cAAc,EAAER,SAAS,CAAC;cAClFD,QAAAA;AAAQ,GAAA,CAAA,CACC,CAAA;AAAA,CACb,EACF;AAEDJ,IAAI,CAACc,WAAW,GAAG,MAAM;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"css.mjs","sources":["../../../../components/root/dist/index.mjs","../src/insert-style.ts","../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../src/index.tsx","../src/css.tsx"],"sourcesContent":["export default \".utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}\";\n","export const insertStyle = function (css: string) {\n  if (typeof document !== 'undefined') {\n    var head = document.head || document.getElementsByTagName('head')[0];\n    var style = document.createElement('style');\n    style.appendChild(document.createTextNode(css));\n    head.appendChild(style);\n  }\n};\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport clsx from 'clsx';\nimport { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\nexport interface HtmlRootProps extends HTMLAttributes<HTMLElement> {\n  Component?: 'html';\n}\n\nexport interface DivRootProps extends HTMLAttributes<HTMLElement> {\n  Component: 'div';\n}\n\nexport const Root = forwardRef(\n  (\n    {\n      children,\n      className,\n      Component = 'html',\n      ...restProps\n    }: PropsWithChildren<HtmlRootProps> | PropsWithChildren<DivRootProps>,\n    ref: ForwardedRef<HTMLElement>,\n  ) => (\n    <Component {...restProps} ref={ref as any} className={clsx('utrecht-root', className)}>\n      {children}\n    </Component>\n  ),\n);\n\nRoot.displayName = 'Root';\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport css from '@utrecht/root-css/dist/index.mjs';\nimport { insertStyle } from './insert-style';\n\ninsertStyle(css);\n\nexport * from './index';\n"],"names":["_jsx"],"mappings":";;;AAAA,UAAe,4aAA4a;;ACApb,MAAM,WAAW,GAAG,UAAU,GAAW,EAAA;AAC9C,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;AACnC,QAAA,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC5C,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AAChD,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;AACH,CAAC;;ACPD,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAQ,SAAS,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;;MCiBlW,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,MAAM,EAClB,GAAG,SAAS,EACuD,EACrE,GAA8B,MAE9BA,GAAA,CAAC,SAAS,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,GAAU,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,YAClF,QAAQ,EAAA,CACC,CACb,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;ACjCzB;;;;AAIG;AAKH,WAAW,CAAC,GAAG,CAAC;;;;","x_google_ignoreList":[2]}

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const Root = forwardRef(({ children, className, Component = 'html', ...restProps }, ref) => (jsx(Component, { ...restProps, ref: ref, className: clsx('utrecht-root', className), children: children })));
+Root.displayName = 'Root';
+
+export { Root };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../src/index.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport clsx from 'clsx';\nimport { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\nexport interface HtmlRootProps extends HTMLAttributes<HTMLElement> {\n  Component?: 'html';\n}\n\nexport interface DivRootProps extends HTMLAttributes<HTMLElement> {\n  Component: 'div';\n}\n\nexport const Root = forwardRef(\n  (\n    {\n      children,\n      className,\n      Component = 'html',\n      ...restProps\n    }: PropsWithChildren<HtmlRootProps> | PropsWithChildren<DivRootProps>,\n    ref: ForwardedRef<HTMLElement>,\n  ) => (\n    <Component {...restProps} ref={ref as any} className={clsx('utrecht-root', className)}>\n      {children}\n    </Component>\n  ),\n);\n\nRoot.displayName = 'Root';\n"],"names":["_jsx"],"mappings":";;;AAAA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAQ,SAAS,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;;MCiBlW,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,MAAM,EAClB,GAAG,SAAS,EACuD,EACrE,GAA8B,MAE9BA,GAAA,CAAC,SAAS,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,GAAU,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,YAClF,QAAQ,EAAA,CACC,CACb,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;","x_google_ignoreList":[0]}

package/dist/insert-style.d.ts

@@ -0,0 +1,2 @@
+export declare const insertStyle: (css: string) => void;
+//# sourceMappingURL=insert-style.d.ts.map

package/dist/insert-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-style.d.ts","sourceRoot":"","sources":["../src/insert-style.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,QAAkB,MAAM,SAO/C,CAAC"}

package/package.json

@@ -1,27 +1,61 @@
 {
   "name": "@utrecht/root-react",
-  "version": "1.0.0",
-  "author": "Community for NL Design System",
+  "version": "1.0.2",
   "description": "Root component for the Municipality of Utrecht based on the NL Design System architecture",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "homepage": "https://github.com/nl-design-system/utrecht/tree/main/packages/components-react/root-react#readme",
+  "bugs": {
+    "url": "https://github.com/nl-design-system/utrecht/issues"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git+https://github.com/nl-design-system/utrecht.git",
+    "directory": "packages/components-react/root-react"
+  },
   "license": "EUPL-1.2",
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
+  "author": "Community for NL Design System",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./css": {
+      "types": "./dist/css.d.ts",
+      "import": "./dist/css.mjs"
+    },
+    "./dist": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./dist/index": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./dist/index.mjs": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./dist/css": {
+      "types": "./dist/css.d.ts",
+      "import": "./dist/css.mjs"
+    },
+    "./dist/css.mjs": {
+      "types": "./dist/css.d.ts",
+      "import": "./dist/css.mjs"
+    }
+  },
   "files": [
     "dist/",
     "src/"
   ],
-  "sideEffects": false,
+  "dependencies": {
+    "clsx": "2.1.1"
+  },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "7.24.7",
-    "@babel/preset-env": "7.24.7",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "26.0.1",
-    "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-typescript": "12.1.0",
     "@testing-library/dom": "8.20.1",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
@@ -33,35 +67,22 @@
     "jest-environment-jsdom": "29.7.0",
     "react": "18.3.1",
     "rollup": "4.23.0",
-    "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "7.1.2",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-postcss": "4.0.2",
     "typescript": "5.6.2",
+    "@utrecht/build-utils-react": "0.0.1",
     "@utrecht/root-css": "1.0.0"
   },
-  "keywords": [
-    "nl-design-system"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/utrecht.git",
-    "directory": "packages/components-react/root-react"
-  },
   "peerDependencies": {
     "@babel/runtime": "*",
     "react": "18",
     "react-dom": "18"
   },
-  "dependencies": {
-    "clsx": "2.1.1"
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
-    "clean": "rimraf dist *.tsbuildinfo .rollup.cache coverage",
     "build": "rollup --config ./rollup.config.mjs",
+    "clean": "rimraf dist *.tsbuildinfo .rollup.cache coverage",
+    "init": "init-react-package",
     "test": "mkdir -p pages && jest --coverage --verbose",
     "typecheck": "tsc --noEmit"
   }

package/src/css.tsx

@@ -4,6 +4,9 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import '@utrecht/root-css/src/index.scss';
+import css from '@utrecht/root-css/dist/index.mjs';
+import { insertStyle } from './insert-style';
+
+insertStyle(css);
 
 export * from './index';

package/src/insert-style.ts

@@ -0,0 +1,8 @@
+export const insertStyle = function (css: string) {
+  if (typeof document !== 'undefined') {
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.appendChild(document.createTextNode(css));
+    head.appendChild(style);
+  }
+};

package/dist/css.js

@@ -1,57 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var react = require('react');
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility}";
-styleInject(css_248z);
-
-var _excluded = ["children", "className", "Component"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Root = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'html' : _ref$Component,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return jsxRuntime.jsx(Component, _objectSpread(_objectSpread({}, restProps), {}, {
-    ref: ref,
-    className: clsx('utrecht-root', className),
-    children: children
-  }));
-});
-Root.displayName = 'Root';
-
-exports.Root = Root;
-//# sourceMappingURL=css.js.map

package/dist/css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css.js","sources":["../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport clsx from 'clsx';\nimport { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\nexport interface HtmlRootProps extends HTMLAttributes<HTMLElement> {\n  Component?: 'html';\n}\n\nexport interface DivRootProps extends HTMLAttributes<HTMLElement> {\n  Component: 'div';\n}\n\nexport const Root = forwardRef(\n  (\n    {\n      children,\n      className,\n      Component = 'html',\n      ...restProps\n    }: PropsWithChildren<HtmlRootProps> | PropsWithChildren<DivRootProps>,\n    ref: ForwardedRef<HTMLElement>,\n  ) => (\n    <Component {...restProps} ref={ref as any} className={clsx('utrecht-root', className)}>\n      {children}\n    </Component>\n  ),\n);\n\nRoot.displayName = 'Root';\n"],"names":["Root","forwardRef","_ref","ref","children","className","_ref$Component","Component","restProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","clsx","displayName"],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;ACRO,IAAMA,IAAI,gBAAGC,gBAAU,CAC5B,UAAAC,IAAA,EAOEC,GAA8B,EAAA;AAAA,EAAA,IAL5BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,cAAA,GAAAJ,IAAA,CACTK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,cAAA;AACfE,IAAAA,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA,CAAA;EAAA,OAIdC,cAAA,CAACJ,SAAS,EAAAK,aAAA,CAAAA,aAAA,KAAKJ,SAAS,CAAA,EAAA,EAAA,EAAA;AAAEL,IAAAA,GAAG,EAAEA,GAAU;AAAEE,IAAAA,SAAS,EAAEQ,IAAI,CAAC,cAAc,EAAER,SAAS,CAAC;cAClFD,QAAAA;AAAQ,GAAA,CAAA,CACC,CAAA;AAAA,CACb,EACF;AAEDJ,IAAI,CAACc,WAAW,GAAG,MAAM;;;;","x_google_ignoreList":[0]}

package/dist/index.cjs.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var react = require('react');
-
-var _excluded = ["children", "className", "Component"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Root = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'html' : _ref$Component,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return jsxRuntime.jsx(Component, _objectSpread(_objectSpread({}, restProps), {}, {
-    ref: ref,
-    className: clsx('utrecht-root', className),
-    children: children
-  }));
-});
-Root.displayName = 'Root';
-
-exports.Root = Root;
-//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport clsx from 'clsx';\nimport { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\nexport interface HtmlRootProps extends HTMLAttributes<HTMLElement> {\n  Component?: 'html';\n}\n\nexport interface DivRootProps extends HTMLAttributes<HTMLElement> {\n  Component: 'div';\n}\n\nexport const Root = forwardRef(\n  (\n    {\n      children,\n      className,\n      Component = 'html',\n      ...restProps\n    }: PropsWithChildren<HtmlRootProps> | PropsWithChildren<DivRootProps>,\n    ref: ForwardedRef<HTMLElement>,\n  ) => (\n    <Component {...restProps} ref={ref as any} className={clsx('utrecht-root', className)}>\n      {children}\n    </Component>\n  ),\n);\n\nRoot.displayName = 'Root';\n"],"names":["Root","forwardRef","_ref","ref","children","className","_ref$Component","Component","restProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","clsx","displayName"],"mappings":";;;;;;;;;;;AAiBO,IAAMA,IAAI,gBAAGC,gBAAU,CAC5B,UAAAC,IAAA,EAOEC,GAA8B,EAAA;AAAA,EAAA,IAL5BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,cAAA,GAAAJ,IAAA,CACTK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,cAAA;AACfE,IAAAA,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA,CAAA;EAAA,OAIdC,cAAA,CAACJ,SAAS,EAAAK,aAAA,CAAAA,aAAA,KAAKJ,SAAS,CAAA,EAAA,EAAA,EAAA;AAAEL,IAAAA,GAAG,EAAEA,GAAU;AAAEE,IAAAA,SAAS,EAAEQ,IAAI,CAAC,cAAc,EAAER,SAAS,CAAC;cAClFD,QAAAA;AAAQ,GAAA,CAAA,CACC,CAAA;AAAA,CACb,EACF;AAEDJ,IAAI,CAACc,WAAW,GAAG,MAAM;;;;"}

package/dist/index.esm.js

@@ -1,25 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-
-var _excluded = ["children", "className", "Component"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Root = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'html' : _ref$Component,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return jsx(Component, _objectSpread(_objectSpread({}, restProps), {}, {
-    ref: ref,
-    className: clsx('utrecht-root', className),
-    children: children
-  }));
-});
-Root.displayName = 'Root';
-
-export { Root };
-//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport clsx from 'clsx';\nimport { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\nexport interface HtmlRootProps extends HTMLAttributes<HTMLElement> {\n  Component?: 'html';\n}\n\nexport interface DivRootProps extends HTMLAttributes<HTMLElement> {\n  Component: 'div';\n}\n\nexport const Root = forwardRef(\n  (\n    {\n      children,\n      className,\n      Component = 'html',\n      ...restProps\n    }: PropsWithChildren<HtmlRootProps> | PropsWithChildren<DivRootProps>,\n    ref: ForwardedRef<HTMLElement>,\n  ) => (\n    <Component {...restProps} ref={ref as any} className={clsx('utrecht-root', className)}>\n      {children}\n    </Component>\n  ),\n);\n\nRoot.displayName = 'Root';\n"],"names":["Root","forwardRef","_ref","ref","children","className","_ref$Component","Component","restProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","clsx","displayName"],"mappings":";;;;;;;;;AAiBO,IAAMA,IAAI,gBAAGC,UAAU,CAC5B,UAAAC,IAAA,EAOEC,GAA8B,EAAA;AAAA,EAAA,IAL5BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,cAAA,GAAAJ,IAAA,CACTK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,cAAA;AACfE,IAAAA,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA,CAAA;EAAA,OAIdC,GAAA,CAACJ,SAAS,EAAAK,aAAA,CAAAA,aAAA,KAAKJ,SAAS,CAAA,EAAA,EAAA,EAAA;AAAEL,IAAAA,GAAG,EAAEA,GAAU;AAAEE,IAAAA,SAAS,EAAEQ,IAAI,CAAC,cAAc,EAAER,SAAS,CAAC;cAClFD,QAAAA;AAAQ,GAAA,CAAA,CACC,CAAA;AAAA,CACb,EACF;AAEDJ,IAAI,CAACc,WAAW,GAAG,MAAM;;;;"}