@cutting/svg 4.30.1 → 4.31.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cutting/svg
 
+## 4.31.0
+
+### Minor Changes
+
+- 7edd9a89: upgrade to typescript 4.5
+
+### Patch Changes
+
+- Updated dependencies [7edd9a89]
+  - @cutting/use-get-parent-size@1.6.0
+  - @cutting/util@4.29.0
+
 ## 4.30.1
 
 ### Patch Changes

package/demo/App.tsx

@@ -1,17 +1,16 @@
 import '@cutting/component-library/styles.css';
-import type { FC } from 'react';
 import { useRef } from 'react';
-import { ApplicationLayout } from '@cutting/component-library';
+import { ApplicationLayout, cuttingTheme } from '@cutting/component-library';
 import { ParentsizeSVG } from '../src/components/ParentsizeSVG/ParentsizeSVG';
 
-import styles from './global.module.scss';
+import * as styles from './global.css';
 
-export const App: FC = () => {
+export function App(): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   return (
-    <ApplicationLayout heading="@cutting/svg">
+    <ApplicationLayout heading="@cutting/svg" className={cuttingTheme}>
       <div className={styles.container} ref={ref}>
-        <ParentsizeSVG elementRef={ref} options={{ debounceDelay: 0 }}>
+        <ParentsizeSVG elementRef={ref} options={{ debounceDelay: 10 }}>
           <rect
             x="20%"
             y="20%"
@@ -33,4 +32,4 @@ export const App: FC = () => {
       </div>
     </ApplicationLayout>
   );
-};
+}

package/demo/global.css.ts

@@ -0,0 +1,19 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const container = style({
+  border: '1px solid yellow',
+  background: 'grey',
+  color: 'white',
+  overflow: 'hidden',
+  resize: 'both',
+  width: '50%',
+  height: '50%',
+  fontWeight: 'bold',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: '0 auto',
+});
+
+globalStyle('svg', {
+  border: '1px solid royalblue;',
+});

package/demo/tsconfig.json

@@ -1,11 +1,16 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
+    "target": "ESNext",
+    "module": "ESNext",
     "outDir": "dist",
     "rootDir": "."
   },
+  "references": [
+    { "path": "../tsconfig.dist.json" },
+    { "path": "../../hooks/tsconfig.dist.json" },
+    { "path": "../../util/tsconfig.dist.json" }
+  ],
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"],
 }

package/dist/cjs/svg.cjs.development.js

@@ -44,26 +44,24 @@ var ResponsiveSVG = function ResponsiveSVG(_ref) {
       className = _ref.className;
   var aspect = width / height;
   var adjustedHeight = Math.ceil(width / aspect);
-  return jsxRuntime.jsx("div", Object.assign({
+  return jsxRuntime.jsx("div", {
     "data-selector": "cutting-svg-container",
     style: {
       position: 'relative',
       overflow: 'visible',
       height: '1px'
-    }
-  }, {
-    children: jsxRuntime.jsx("svg", Object.assign({
+    },
+    children: jsxRuntime.jsx("svg", {
       style: {
         overflow: 'visible'
       },
       className: className,
       preserveAspectRatio: preserveAspectRatio,
       viewBox: "".concat(origin.x, " ").concat(origin.y, " ").concat(width, " ").concat(adjustedHeight),
-      ref: innerRef
-    }, {
+      ref: innerRef,
       children: children
-    }), void 0)
-  }), void 0);
+    }, void 0)
+  }, void 0);
 };
 
 var _excluded$2 = ["debounceDelay"],
@@ -114,15 +112,14 @@ function ParentsizeSVG(_ref) {
     }
   }, [elementRef, style]);
   var transform = align === 'center' ? "translate(".concat(width / 2, ",").concat(height / 2 - 20, ") scale(").concat(scale, ")") : "0,0) scale(".concat(scale, ")");
-  return jsxRuntime.jsx(ResponsiveSVG, Object.assign({
+  return jsxRuntime.jsx(ResponsiveSVG, _objectSpread__default["default"](_objectSpread__default["default"]({
     width: width,
     height: height
-  }, rest, {
-    children: jsxRuntime.jsx("g", Object.assign({
-      transform: transform
-    }, {
+  }, rest), {}, {
+    children: jsxRuntime.jsx("g", {
+      transform: transform,
       children: children
-    }), void 0)
+    }, void 0)
   }), void 0);
 }
 
@@ -138,11 +135,11 @@ var Group = function Group(_ref) {
       innerRef = _ref.innerRef,
       restProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
 
-  return jsxRuntime.jsx("g", Object.assign({
+  return jsxRuntime.jsx("g", _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: innerRef,
     className: cx__default["default"]('visx-group', className),
     transform: transform || "translate(".concat(x, ", ").concat(y, ")")
-  }, restProps, {
+  }, restProps), {}, {
     children: children
   }), void 0);
 };
@@ -166,7 +163,7 @@ var Line = function Line(_ref) {
       restProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   var isRectilinear = from.x === to.x || from.y === to.y;
-  return jsxRuntime.jsx("line", Object.assign({
+  return jsxRuntime.jsx("line", _objectSpread__default["default"]({
     ref: innerRef,
     className: cx__default["default"]('visx-line', className),
     x1: from.x,

package/dist/cjs/svg.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg.cjs.development.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","height","width","children","origin","x","y","preserveAspectRatio","innerRef","className","aspect","adjustedHeight","Math","ceil","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","key","value","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"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"}
+{"version":3,"file":"svg.cjs.development.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","height","width","children","origin","x","y","preserveAspectRatio","innerRef","className","aspect","adjustedHeight","Math","ceil","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","key","value","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"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"}

package/dist/cjs/svg.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("@babel/runtime/helpers/objectSpread2"),i=require("@babel/runtime/helpers/objectWithoutProperties"),n=require("react"),s=require("@cutting/use-get-parent-size"),a=require("classnames");function o(e){return e&&e.__esModule?e:{default:e}}var c=o(r),l=o(t),d=o(i),u=o(a);!function(){const e={NODE_ENV:"production"};try{if(process)return process.env=Object.assign({},process.env),void Object.assign(process.env,e)}catch(e){}globalThis.process={env:e}}();var f=function(r){var t=r.width,i=r.children,n=r.origin,s=void 0===n?{x:0,y:0}:n,a=r.preserveAspectRatio,o=void 0===a?"xMaxYMid meet":a,c=r.innerRef,l=r.className,d=Math.ceil(t/(t/r.height));return e.jsx("div",Object.assign({"data-selector":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"}},{children:e.jsx("svg",Object.assign({style:{overflow:"visible"},className:l,preserveAspectRatio:o,viewBox:"".concat(s.x," ").concat(s.y," ").concat(t," ").concat(d),ref:c},{children:i}),void 0)}),void 0)},v=["debounceDelay"],x=["elementRef","children","style","scale","align","options"],p={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"},h=["y","x","transform","className","children","innerRef"],g=["from","to","fill","className","innerRef"];exports.Group=function(r){var t=r.y,i=void 0===t?0:t,n=r.x,s=void 0===n?0:n,a=r.transform,o=r.className,c=r.children,l=r.innerRef,f=d.default(r,h);return e.jsx("g",Object.assign({ref:l,className:u.default("visx-group",o),transform:a||"translate(".concat(s,", ").concat(i,")")},f,{children:c}),void 0)},exports.Line=function(r){var t=r.from,i=void 0===t?{x:0,y:0}:t,n=r.to,s=void 0===n?{x:1,y:1}:n,a=r.fill,o=void 0===a?"transparent":a,c=r.className,l=r.innerRef,f=d.default(r,g),v=i.x===s.x||i.y===s.y;return e.jsx("line",Object.assign({ref:l,className:u.default("visx-line",c),x1:i.x,y1:i.y,x2:s.x,y2:s.y,fill:o,shapeRendering:v?"crispEdges":"auto"},f),void 0)},exports.ParentsizeSVG=function(r){var t=r.elementRef,i=r.children,a=r.style,o=void 0===a?p:a,u=r.scale,h=void 0===u?1:u,g=r.align,b=void 0===g?"none":g,y=r.options,m=(y=void 0===y?{}:y).debounceDelay,j=void 0===m?50:m,O=d.default(y,v),R=d.default(r,x),N=s.useParentSize(t,l.default({debounceDelay:j},O)),w=N.width,q=N.height;n.useEffect((function(){if(t.current)for(var e=0,r=Object.entries(o);e<r.length;e++){var i=c.default(r[e],2);t.current.style[i[0]]=i[1]}}),[t,o]);var D="center"===b?"translate(".concat(w/2,",").concat(q/2-20,") scale(").concat(h,")"):"0,0) scale(".concat(h,")");return e.jsx(f,Object.assign({width:w,height:q},R,{children:e.jsx("g",Object.assign({transform:D},{children:i}),void 0)}),void 0)},exports.ResponsiveSVG=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("@babel/runtime/helpers/objectSpread2"),i=require("@babel/runtime/helpers/objectWithoutProperties"),n=require("react"),s=require("@cutting/use-get-parent-size"),a=require("classnames");function o(e){return e&&e.__esModule?e:{default:e}}var l=o(r),c=o(t),d=o(i),u=o(a);!function(){const e={NODE_ENV:"production"};try{if(process)return process.env=Object.assign({},process.env),void Object.assign(process.env,e)}catch(e){}globalThis.process={env:e}}();var f=function(r){var t=r.width,i=r.children,n=r.origin,s=void 0===n?{x:0,y:0}:n,a=r.preserveAspectRatio,o=void 0===a?"xMaxYMid meet":a,l=r.innerRef,c=r.className,d=Math.ceil(t/(t/r.height));return e.jsx("div",{"data-selector":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"},children:e.jsx("svg",{style:{overflow:"visible"},className:c,preserveAspectRatio:o,viewBox:"".concat(s.x," ").concat(s.y," ").concat(t," ").concat(d),ref:l,children:i},void 0)},void 0)},v=["debounceDelay"],x=["elementRef","children","style","scale","align","options"],p={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"},h=["y","x","transform","className","children","innerRef"],y=["from","to","fill","className","innerRef"];exports.Group=function(r){var t=r.y,i=void 0===t?0:t,n=r.x,s=void 0===n?0:n,a=r.transform,o=r.className,l=r.children,f=r.innerRef,v=d.default(r,h);return e.jsx("g",c.default(c.default({ref:f,className:u.default("visx-group",o),transform:a||"translate(".concat(s,", ").concat(i,")")},v),{},{children:l}),void 0)},exports.Line=function(r){var t=r.from,i=void 0===t?{x:0,y:0}:t,n=r.to,s=void 0===n?{x:1,y:1}:n,a=r.fill,o=void 0===a?"transparent":a,l=r.className,f=r.innerRef,v=d.default(r,y),x=i.x===s.x||i.y===s.y;return e.jsx("line",c.default({ref:f,className:u.default("visx-line",l),x1:i.x,y1:i.y,x2:s.x,y2:s.y,fill:o,shapeRendering:x?"crispEdges":"auto"},v),void 0)},exports.ParentsizeSVG=function(r){var t=r.elementRef,i=r.children,a=r.style,o=void 0===a?p:a,u=r.scale,h=void 0===u?1:u,y=r.align,m=void 0===y?"none":y,g=r.options,b=(g=void 0===g?{}:g).debounceDelay,j=void 0===b?50:b,R=d.default(g,v),N=d.default(r,x),w=s.useParentSize(t,c.default({debounceDelay:j},R)),q=w.width,D=w.height;n.useEffect((function(){if(t.current)for(var e=0,r=Object.entries(o);e<r.length;e++){var i=l.default(r[e],2);t.current.style[i[0]]=i[1]}}),[t,o]);var M="center"===m?"translate(".concat(q/2,",").concat(D/2-20,") scale(").concat(h,")"):"0,0) scale(".concat(h,")");return e.jsx(f,c.default(c.default({width:q,height:D},N),{},{children:e.jsx("g",{transform:M,children:i},void 0)}),void 0)},exports.ResponsiveSVG=f;
 //# sourceMappingURL=svg.cjs.production.min.js.map

package/dist/cjs/svg.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg.cjs.production.min.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"ymBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,2CACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,2BACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,gICJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,yBACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,YAEHxB,0BCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,4BACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,kDFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,YAC/C9B,yBAAGY,UAAWA,aAAYvB"}
+{"version":3,"file":"svg.cjs.production.min.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"ymBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,6BACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,gBAGVC,aACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,WAEJL,uGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,gICJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,+BACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,gBAEHxB,0BCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,wBACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,kDFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,uBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,gBAC/C9B,WAAGY,UAAWA,WAAYvB"}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import r from"@babel/runtime/helpers/esm/slicedToArray";import i from"@babel/runtime/helpers/esm/objectSpread2";import o from"@babel/runtime/helpers/esm/objectWithoutProperties";import{useEffect as n}from"react";import{useParentSize as t}from"@cutting/use-get-parent-size";import s from"classnames";!function(){const e={NODE_ENV:"production"};try{if(process)return process.env=Object.assign({},process.env),void Object.assign(process.env,e)}catch(e){}globalThis.process={env:e}}();var c=function(r){var i=r.width,o=r.children,n=r.origin,t=void 0===n?{x:0,y:0}:n,s=r.preserveAspectRatio,c=void 0===s?"xMaxYMid meet":s,a=r.innerRef,l=r.className,d=Math.ceil(i/(i/r.height));return e("div",{"data-selector":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"},children:e("svg",{style:{overflow:"visible"},className:l,preserveAspectRatio:c,viewBox:"".concat(t.x," ").concat(t.y," ").concat(i," ").concat(d),ref:a,children:o},void 0)},void 0)},a=["debounceDelay"],l=["elementRef","children","style","scale","align","options"],d={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"};function v(s){var v=s.elementRef,f=s.children,m=s.style,p=void 0===m?d:m,h=s.scale,u=void 0===h?1:h,x=s.align,y=void 0===x?"none":x,g=s.options,b=(g=void 0===g?{}:g).debounceDelay,N=void 0===b?50:b,R=o(g,a),w=o(s,l),j=t(v,i({debounceDelay:N},R)),D=j.width,O=j.height;n((function(){if(v.current)for(var e=0,i=Object.entries(p);e<i.length;e++){var o=r(i[e],2);v.current.style[o[0]]=o[1]}}),[v,p]);var A="center"===y?"translate(".concat(D/2,",").concat(O/2-20,") scale(").concat(u,")"):"0,0) scale(".concat(u,")");return e(c,i(i({width:D,height:O},w),{},{children:e("g",{transform:A,children:f},void 0)}),void 0)}var f=["y","x","transform","className","children","innerRef"],m=function(r){var n=r.y,t=void 0===n?0:n,c=r.x,a=void 0===c?0:c,l=r.transform,d=r.className,v=r.children,m=r.innerRef,p=o(r,f);return e("g",i(i({ref:m,className:s("visx-group",d),transform:l||"translate(".concat(a,", ").concat(t,")")},p),{},{children:v}),void 0)},p=["from","to","fill","className","innerRef"],h=function(r){var n=r.from,t=void 0===n?{x:0,y:0}:n,c=r.to,a=void 0===c?{x:1,y:1}:c,l=r.fill,d=void 0===l?"transparent":l,v=r.className,f=r.innerRef,m=o(r,p),h=t.x===a.x||t.y===a.y;return e("line",i({ref:f,className:s("visx-line",v),x1:t.x,y1:t.y,x2:a.x,y2:a.y,fill:d,shapeRendering:h?"crispEdges":"auto"},m),void 0)};export{m as Group,h as Line,v as ParentsizeSVG,c as ResponsiveSVG};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"6gBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,yBACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,gBAGVC,SACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,WAEJL,uGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,mBAGIS,SACdC,IAAAA,WACAxB,IAAAA,aACAY,MAAAA,aAAQK,QACRQ,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,SAC/BC,WAEuBC,EAAcP,KAAcI,cAAAA,GAAkBC,IAAhE9B,IAAAA,MAAOW,IAAAA,OAEfsB,GAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQvB,kBAAQ,iBAEhDY,EAAWS,QAAQrB,oBAEpB,CAACY,EAAYZ,QAEVwB,EACM,WAAVV,sBAAkC3B,EAAQ,cAAKW,EAAS,EAAI,sBAAae,4BAAyBA,cAGlGd,EAACb,OAAcC,MAAOA,EAAOW,OAAQA,GAAYoB,gBAC/CnB,OAAGyB,UAAWA,WAAYpC,mFClCnBqC,EAAwB,oBACnClC,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJkC,IAAAA,UACA9B,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGiC,gBAGD3B,WACEK,IAAKX,EACLC,UAAWiC,EAAG,aAAcjC,GAC5B8B,UAAWA,uBAA0BlC,eAAMC,QACvCmC,gBAEHtC,2DCnBMwC,EAAsB,oBACjCC,KAAAA,aAAO,CAAEvC,EAAG,EAAGC,EAAG,SAClBuC,GAAAA,aAAK,CAAExC,EAAG,EAAGC,EAAG,SAChBwC,KAAAA,aAAO,gBACPrC,IAAAA,UACAD,IAAAA,SACGiC,SAEGM,EAAgBH,EAAKvC,IAAMwC,EAAGxC,GAAKuC,EAAKtC,IAAMuC,EAAGvC,SAGrDQ,YACEK,IAAKX,EACLC,UAAWiC,EAAG,YAAajC,GAC3BuC,GAAIJ,EAAKvC,EACT4C,GAAIL,EAAKtC,EACT4C,GAAIL,EAAGxC,EACP8C,GAAIN,EAAGvC,EACPwC,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CN"}

package/dist/umd/index.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/objectSpread2"),require("@babel/runtime/helpers/objectWithoutProperties"),require("react"),require("@cutting/use-get-parent-size"),require("classnames")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@babel/runtime/helpers/slicedToArray","@babel/runtime/helpers/objectSpread2","@babel/runtime/helpers/objectWithoutProperties","react","@cutting/use-get-parent-size","classnames"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@cutting/svg"]={},e.jsxRuntime,e._slicedToArray,e._objectSpread,e._objectWithoutProperties,e.React,e.useGetParentSize,e.cx)}(this,(function(e,t,r,i,n,s,a,o){"use strict";function c(e){return e&&e.__esModule?e:{default:e}}var l=c(r),d=c(i),u=c(n),f=c(o);!function(){const e={NODE_ENV:"production"};try{if(process)return process.env=Object.assign({},process.env),void Object.assign(process.env,e)}catch(e){}globalThis.process={env:e}}();var v=function(e){var r=e.width,i=e.children,n=e.origin,s=void 0===n?{x:0,y:0}:n,a=e.preserveAspectRatio,o=void 0===a?"xMaxYMid meet":a,c=e.innerRef,l=e.className,d=Math.ceil(r/(r/e.height));return t.jsx("div",{"data-selector":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"},children:t.jsx("svg",{style:{overflow:"visible"},className:l,preserveAspectRatio:o,viewBox:"".concat(s.x," ").concat(s.y," ").concat(r," ").concat(d),ref:c,children:i},void 0)},void 0)},p=["debounceDelay"],h=["elementRef","children","style","scale","align","options"],x={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"},m=["y","x","transform","className","children","innerRef"],b=["from","to","fill","className","innerRef"];e.Group=function(e){var r=e.y,i=void 0===r?0:r,n=e.x,s=void 0===n?0:n,a=e.transform,o=e.className,c=e.children,l=e.innerRef,v=u.default(e,m);return t.jsx("g",d.default(d.default({ref:l,className:f.default("visx-group",o),transform:a||"translate(".concat(s,", ").concat(i,")")},v),{},{children:c}),void 0)},e.Line=function(e){var r=e.from,i=void 0===r?{x:0,y:0}:r,n=e.to,s=void 0===n?{x:1,y:1}:n,a=e.fill,o=void 0===a?"transparent":a,c=e.className,l=e.innerRef,v=u.default(e,b),p=i.x===s.x||i.y===s.y;return t.jsx("line",d.default({ref:l,className:f.default("visx-line",c),x1:i.x,y1:i.y,x2:s.x,y2:s.y,fill:o,shapeRendering:p?"crispEdges":"auto"},v),void 0)},e.ParentsizeSVG=function(e){var r=e.elementRef,i=e.children,n=e.style,o=void 0===n?x:n,c=e.scale,f=void 0===c?1:c,m=e.align,b=void 0===m?"none":m,y=e.options,g=(y=void 0===y?{}:y).debounceDelay,j=void 0===g?50:g,R=u.default(y,p),N=u.default(e,h),w=a.useParentSize(r,d.default({debounceDelay:j},R)),S=w.width,q=w.height;s.useEffect((function(){if(r.current)for(var e=0,t=Object.entries(o);e<t.length;e++){var i=l.default(t[e],2);r.current.style[i[0]]=i[1]}}),[r,o]);var P="center"===b?"translate(".concat(S/2,",").concat(q/2-20,") scale(").concat(f,")"):"0,0) scale(".concat(f,")");return t.jsx(v,d.default(d.default({width:S,height:q},N),{},{children:t.jsx("g",{transform:P,children:i},void 0)}),void 0)},e.ResponsiveSVG=v}));
+//# sourceMappingURL=index.js.map

package/dist/umd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"wkCAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,6BACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,gBAGVC,aACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,WAEJL,uGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,0HCJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,+BACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,gBAEHxB,oBCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,wBACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,4CFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,uBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,gBAC/C9B,WAAGY,UAAWA,WAAYvB"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cutting/svg",
-  "version": "4.30.1",
+  "version": "4.31.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/dagda1/cuttingedge.git"
   },
-  "module": "dist/esm/svg.esm.js",
-  "browser": "dist/umd/svg.umd.js",
+  "module": "dist/esm/index.js",
+  "browser": "dist/umd/index.js",
   "main": "dist/cjs/index.js",
   "sideEffects": [
     "**/*.css",
@@ -15,19 +15,19 @@
   "types": "dist/esm/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@cutting/util": "4.28.2",
-    "@cutting/use-get-parent-size": "1.5.2",
+    "@cutting/use-get-parent-size": "1.6.0",
+    "@cutting/util": "4.29.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@cutting/devtools": "4.30.2",
-    "@cutting/testing": "4.26.2",
-    "@cutting/eslint-config": "4.26.0",
-    "@cutting/useful-types": "4.25.2",
+    "@cutting/devtools": "4.31.0",
+    "@cutting/eslint-config": "4.28.0",
+    "@cutting/testing": "4.27.0",
     "@testing-library/jest-dom": "^5.11.10",
+    "eslint": "^8.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.4.3"
+    "typescript": "^4.5.2"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -35,6 +35,7 @@
   },
   "scripts": {
     "build": "NODE_ENV=development cutting rollup",
+    "lint": "yarn eslint ./src/**/*.{ts,tsx} --fix",
     "start": "PORT=8888 NODE_ENV=development cutting devserver-start",
     "test": "NODE_ENV=test cutting test",
     "test:ci": "CI=true yarn test",
@@ -44,9 +45,9 @@
     "extends": "../../package.json"
   },
   "exports": {
-    "import": "./dist/esm/svg.esm.js",
+    "import": "./dist/esm/index.js",
     "require": "./dist/cjs/index.js",
-    "browser": "./dist/umd/svg.umd.js"
+    "browser": "./dist/umd/index.js"
   },
   "typesVersions": {
     "*": {
@@ -55,4 +56,4 @@
       ]
     }
   }
-}
+}

package/demo/global.module.scss

@@ -1,26 +0,0 @@
-$label-default-color: #fff;
-
-@import '../node_modules/@cutting/component-library/dist/styles/_index.scss';
-:global #root {
-  border: 1px solid green;
-}
-
-
-.container {
-  border: 1px solid yellow;
-  background: grey;
-  color: white;
-  font-weight: bold;
-  overflow: hidden;
-  resize: auto;
-  width: 50%;
-  height: 50%;
-  font-weight: bold;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-}
-
-svg {
-  border: 1px solid royalblue;
-}

package/dist/esm/svg.esm.js

@@ -1,2 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import i from"@babel/runtime/helpers/esm/slicedToArray";import r from"@babel/runtime/helpers/esm/objectSpread2";import n from"@babel/runtime/helpers/esm/objectWithoutProperties";import{useEffect as t}from"react";import{useParentSize as o}from"@cutting/use-get-parent-size";import s from"classnames";!function(){const e={NODE_ENV:"production"};try{if(process)return process.env=Object.assign({},process.env),void Object.assign(process.env,e)}catch(e){}globalThis.process={env:e}}();var c=function(i){var r=i.width,n=i.children,t=i.origin,o=void 0===t?{x:0,y:0}:t,s=i.preserveAspectRatio,c=void 0===s?"xMaxYMid meet":s,a=i.innerRef,l=i.className,d=Math.ceil(r/(r/i.height));return e("div",Object.assign({"data-selector":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"}},{children:e("svg",Object.assign({style:{overflow:"visible"},className:l,preserveAspectRatio:c,viewBox:"".concat(o.x," ").concat(o.y," ").concat(r," ").concat(d),ref:a},{children:n}),void 0)}),void 0)},a=["debounceDelay"],l=["elementRef","children","style","scale","align","options"],d={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"};function v(s){var v=s.elementRef,f=s.children,m=s.style,p=void 0===m?d:m,h=s.scale,u=void 0===h?1:h,g=s.align,x=void 0===g?"none":g,b=s.options,y=(b=void 0===b?{}:b).debounceDelay,j=void 0===y?50:y,N=n(b,a),O=n(s,l),R=o(v,r({debounceDelay:j},N)),w=R.width,D=R.height;t((function(){if(v.current)for(var e=0,r=Object.entries(p);e<r.length;e++){var n=i(r[e],2);v.current.style[n[0]]=n[1]}}),[v,p]);var A="center"===x?"translate(".concat(w/2,",").concat(D/2-20,") scale(").concat(u,")"):"0,0) scale(".concat(u,")");return e(c,Object.assign({width:w,height:D},O,{children:e("g",Object.assign({transform:A},{children:f}),void 0)}),void 0)}var f=["y","x","transform","className","children","innerRef"],m=function(i){var r=i.y,t=void 0===r?0:r,o=i.x,c=void 0===o?0:o,a=i.transform,l=i.className,d=i.children,v=i.innerRef,m=n(i,f);return e("g",Object.assign({ref:v,className:s("visx-group",l),transform:a||"translate(".concat(c,", ").concat(t,")")},m,{children:d}),void 0)},p=["from","to","fill","className","innerRef"],h=function(i){var r=i.from,t=void 0===r?{x:0,y:0}:r,o=i.to,c=void 0===o?{x:1,y:1}:o,a=i.fill,l=void 0===a?"transparent":a,d=i.className,v=i.innerRef,f=n(i,p),m=t.x===c.x||t.y===c.y;return e("line",Object.assign({ref:v,className:s("visx-line",d),x1:t.x,y1:t.y,x2:c.x,y2:c.y,fill:l,shapeRendering:m?"crispEdges":"auto"},f),void 0)};export{m as Group,h as Line,v as ParentsizeSVG,c as ResponsiveSVG};
-//# sourceMappingURL=svg.esm.js.map

package/dist/esm/svg.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"svg.esm.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"6gBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,uCACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,uBACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,mBAGIS,SACdC,IAAAA,WACAxB,IAAAA,aACAY,MAAAA,aAAQK,QACRQ,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,SAC/BC,WAEuBC,EAAcP,KAAcI,cAAAA,GAAkBC,IAAhE9B,IAAAA,MAAOW,IAAAA,OAEfsB,GAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQvB,kBAAQ,iBAEhDY,EAAWS,QAAQrB,oBAEpB,CAACY,EAAYZ,QAEVwB,EACM,WAAVV,sBAAkC3B,EAAQ,cAAKW,EAAS,EAAI,sBAAae,4BAAyBA,cAGlGd,EAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAYoB,YAC/CnB,qBAAGyB,UAAWA,aAAYpC,oFClCnBqC,EAAwB,oBACnClC,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJkC,IAAAA,UACA9B,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGiC,gBAGD3B,qBACEK,IAAKX,EACLC,UAAWiC,EAAG,aAAcjC,GAC5B8B,UAAWA,uBAA0BlC,eAAMC,QACvCmC,YAEHtC,2DCnBMwC,EAAsB,oBACjCC,KAAAA,aAAO,CAAEvC,EAAG,EAAGC,EAAG,SAClBuC,GAAAA,aAAK,CAAExC,EAAG,EAAGC,EAAG,SAChBwC,KAAAA,aAAO,gBACPrC,IAAAA,UACAD,IAAAA,SACGiC,SAEGM,EAAgBH,EAAKvC,IAAMwC,EAAGxC,GAAKuC,EAAKtC,IAAMuC,EAAGvC,SAGrDQ,wBACEK,IAAKX,EACLC,UAAWiC,EAAG,YAAajC,GAC3BuC,GAAIJ,EAAKvC,EACT4C,GAAIL,EAAKtC,EACT4C,GAAIL,EAAGxC,EACP8C,GAAIN,EAAGvC,EACPwC,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CN"}

package/dist/umd/svg.umd.js

@@ -1,2 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/objectSpread2"),require("@babel/runtime/helpers/objectWithoutProperties"),require("react"),require("@cutting/use-get-parent-size"),require("classnames")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@babel/runtime/helpers/slicedToArray","@babel/runtime/helpers/objectSpread2","@babel/runtime/helpers/objectWithoutProperties","react","@cutting/use-get-parent-size","classnames"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@cutting/svg"]={},e.jsxRuntime,e._slicedToArray,e._objectSpread,e._objectWithoutProperties,e.React,e.useGetParentSize,e.cx)}(this,(function(e,t,i,r,n,s,a,o){"use strict";function c(e){return e&&e.__esModule?e:{default:e}}var l=c(i),d=c(r),u=c(n),f=c(o);!function(){const e={NODE_ENV:"production"};try{if(process)return process.env=Object.assign({},process.env),void Object.assign(process.env,e)}catch(e){}globalThis.process={env:e}}();var v=function(e){var i=e.width,r=e.children,n=e.origin,s=void 0===n?{x:0,y:0}:n,a=e.preserveAspectRatio,o=void 0===a?"xMaxYMid meet":a,c=e.innerRef,l=e.className,d=Math.ceil(i/(i/e.height));return t.jsx("div",Object.assign({"data-selector":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"}},{children:t.jsx("svg",Object.assign({style:{overflow:"visible"},className:l,preserveAspectRatio:o,viewBox:"".concat(s.x," ").concat(s.y," ").concat(i," ").concat(d),ref:c},{children:r}),void 0)}),void 0)},p=["debounceDelay"],h=["elementRef","children","style","scale","align","options"],b={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"},x=["y","x","transform","className","children","innerRef"],g=["from","to","fill","className","innerRef"];e.Group=function(e){var i=e.y,r=void 0===i?0:i,n=e.x,s=void 0===n?0:n,a=e.transform,o=e.className,c=e.children,l=e.innerRef,d=u.default(e,x);return t.jsx("g",Object.assign({ref:l,className:f.default("visx-group",o),transform:a||"translate(".concat(s,", ").concat(r,")")},d,{children:c}),void 0)},e.Line=function(e){var i=e.from,r=void 0===i?{x:0,y:0}:i,n=e.to,s=void 0===n?{x:1,y:1}:n,a=e.fill,o=void 0===a?"transparent":a,c=e.className,l=e.innerRef,d=u.default(e,g),v=r.x===s.x||r.y===s.y;return t.jsx("line",Object.assign({ref:l,className:f.default("visx-line",c),x1:r.x,y1:r.y,x2:s.x,y2:s.y,fill:o,shapeRendering:v?"crispEdges":"auto"},d),void 0)},e.ParentsizeSVG=function(e){var i=e.elementRef,r=e.children,n=e.style,o=void 0===n?b:n,c=e.scale,f=void 0===c?1:c,x=e.align,g=void 0===x?"none":x,m=e.options,y=(m=void 0===m?{}:m).debounceDelay,j=void 0===y?50:y,R=u.default(m,p),N=u.default(e,h),O=a.useParentSize(i,d.default({debounceDelay:j},R)),w=O.width,S=O.height;s.useEffect((function(){if(i.current)for(var e=0,t=Object.entries(o);e<t.length;e++){var r=l.default(t[e],2);i.current.style[r[0]]=r[1]}}),[i,o]);var q="center"===g?"translate(".concat(w/2,",").concat(S/2-20,") scale(").concat(f,")"):"0,0) scale(".concat(f,")");return t.jsx(v,Object.assign({width:w,height:S},N,{children:t.jsx("g",Object.assign({transform:q},{children:r}),void 0)}),void 0)},e.ResponsiveSVG=v}));
-//# sourceMappingURL=svg.umd.js.map

package/dist/umd/svg.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"svg.umd.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface ResponsiveSVGProps {\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n}) => {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-selector=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n  elementRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  elementRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!elementRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      elementRef.current.style[key as any] = value;\n    }\n  }, [elementRef, style]);\n\n  const transform =\n    align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import type { FC } from 'react';\nimport cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport const Group: FC<GroupProps> = ({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element => {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n};\n","import type { FC } from 'react';\nimport cx from 'classnames';\nimport { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport const Line: FC<LineProps> = ({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element => {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ResponsiveSVG","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"wkCAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,2CACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,2BACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,0HCJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,yBACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,YAEHxB,oBCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,4BACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,4CFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,YAC/C9B,yBAAGY,UAAWA,aAAYvB"}