@techzyapp/ui-library 1.0.25 → 1.0.28

package/dist/{Loader-B5YqzEYy.cjs.map → Loader-D9nteBXt.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Loader-B5YqzEYy.cjs","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      // a spinner must stay a ring — opt out of the global `square` shape (which flattens every radius)\n      data-tz-keep-radius\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":"gRAmBaA,EAASC,EAAAA,WAAyC,SAC7D,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAO,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAA,EAC3CC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACV,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAH,EACA,KAAK,SACL,aAAYC,EAAE,cAAc,EAE5B,sBAAmB,GAClB,GAAGF,EACJ,UAAWK,EAAAA,KAAKC,EAAO,OAAQA,EAAOV,CAAI,EAAGE,CAAS,EACtD,MAAOD,EAAS,CAAE,MAAO,kBAAkBA,CAAK,IAAK,GAAGE,GAA4BA,CAAA,CAAA,CAG1F,CAAC"}
+{"version":3,"file":"Loader-D9nteBXt.cjs","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":"gRAmBaA,EAASC,EAAAA,WAAyC,SAC7D,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAO,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAA,EAC3CC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACV,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAH,EACA,KAAK,SACL,aAAYC,EAAE,cAAc,EAC3B,GAAGF,EACJ,UAAWK,EAAAA,KAAKC,EAAO,OAAQA,EAAOV,CAAI,EAAGE,CAAS,EACtD,MAAOD,EAAS,CAAE,MAAO,kBAAkBA,CAAK,IAAK,GAAGE,GAA4BA,CAAA,CAAA,CAG1F,CAAC"}

package/dist/MobileFrame-8FSsYA_w.js

@@ -0,0 +1,91 @@
+import { jsxs as M, jsx as g } from "react/jsx-runtime";
+import { forwardRef as T, useRef as x, useCallback as _, useLayoutEffect as P } from "react";
+import { clsx as G } from "clsx";
+const B = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20width='72.5mm'%20height='150mm'%20viewBox='0%200%2072.499999%20150'%20version='1.1'%20id='svg1'%20xml:space='preserve'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs1'%3e%3cmask%20id='screenCutout'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='72.5'%20height='150'%3e%3crect%20x='0'%20y='0'%20width='72.5'%20height='150'%20fill='%23fff'/%3e%3cpath%20d='m%2013.312882,2.4648914%20c%20-5.8047685,0%20-10.4003983,4.5956227%20-10.4003983,10.4003996%20V%20137.13471%20c%200,5.80477%204.5956298,10.4004%2010.4003983,10.4004%20h%2045.87472%20c%205.80478,0%2010.400398,-4.59563%2010.400398,-10.4004%20V%2012.865291%20C%2069.588,7.0605141%2064.992382,2.4648914%2059.187602,2.4648914%20Z'%20fill='%23000'/%3e%3cpath%20d='M%2028.818913,4.80325%20h%2014.862142%20c%201.66928,0%203.013252,1.343978%203.013252,3.0132527%200,1.6692748%20-1.343972,3.0132533%20-3.013252,3.0132533%20H%2028.818913%20c%20-1.66927,0%20-3.012736,-1.3439785%20-3.012736,-3.0132533%200,-1.6692747%201.343466,-3.0132527%203.012736,-3.0132527%20z'%20fill='%23fff'/%3e%3c/mask%3e%3clinearGradient%20id='linearGradient31'%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.02;'%20offset='0'%20id='stop31'%20/%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.1;'%20offset='1'%20id='stop32'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient25'%3e%3cstop%20style='stop-color:%23b697ff;stop-opacity:1;'%20offset='0'%20id='stop26'%20/%3e%3cstop%20style='stop-color:%233600ae;stop-opacity:1;'%20offset='0.56404012'%20id='stop28'%20/%3e%3cstop%20style='stop-color:%23000000;stop-opacity:0;'%20offset='1'%20id='stop27'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient24'%3e%3cstop%20style='stop-color:%2339394e;stop-opacity:1;'%20offset='0'%20id='stop24'%20/%3e%3cstop%20style='stop-color:%231e1e21;stop-opacity:1;'%20offset='1'%20id='stop25'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient12'%3e%3cstop%20style='stop-color:%23686171;stop-opacity:1;'%20offset='0'%20id='stop13'%20/%3e%3cstop%20style='stop-color:%23575360;stop-opacity:1;'%20offset='1'%20id='stop14'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient9'%3e%3cstop%20style='stop-color:%23867e90;stop-opacity:1;'%20offset='0'%20id='stop9'%20/%3e%3cstop%20style='stop-color:%23c5c4d1;stop-opacity:1;'%20offset='0.17473139'%20id='stop12'%20/%3e%3cstop%20style='stop-color:%238d8698;stop-opacity:1'%20offset='0.64714581'%20id='stop11'%20/%3e%3cstop%20style='stop-color:%237a7184;stop-opacity:1;'%20offset='1'%20id='stop10'%20/%3e%3c/linearGradient%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath1'%3e%3crect%20style='fill:%239320d4;stroke-width:2.90343;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect2'%20width='207.90259'%20height='430.15308'%20x='66.161987'%20y='-144.36761'%20/%3e%3c/clipPath%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient10'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.528318,-10.430529)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient14'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.41007042,-0.16084956)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient15'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient16'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient17'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient18'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient19'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient20'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient24'%20id='radialGradient25'%20cx='43.681053'%20cy='7.4308386'%20fx='43.681053'%20fy='7.4308386'%20r='0.92431802'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(1.3383789e-6)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-5.200404,-14.350692)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27-6'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-93.631878,-14.350692)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient31'%20id='linearGradient32'%20x1='36.25'%20y1='0.97257996'%20x2='36.25'%20y2='1.5374033'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0,0.00403118)'%20/%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter32'%20x='-0.006718275'%20y='-0.0031835449'%20width='1.0134365'%20height='1.0063671'%3e%3cfeGaussianBlur%20stdDeviation='0.19764468'%20id='feGaussianBlur32'%20/%3e%3c/filter%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter33'%20x='-0.0091814284'%20y='-0.0043248752'%20width='1.0183629'%20height='1.0086498'%3e%3cfeGaussianBlur%20stdDeviation='0.26705965'%20id='feGaussianBlur33'%20/%3e%3c/filter%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath34'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect35'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='layer2'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g14'%3e%3crect%20style='fill:url(%23linearGradient14);fill-opacity:1;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6'%20width='7.6419992'%20height='6.9724154'%20x='-6.8847655e-10'%20y='30.692017'%20ry='0.30878335'%20/%3e%3crect%20style='fill:url(%23linearGradient10);fill-opacity:1;stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6-2'%20width='7.230288'%20height='6.7202911'%20x='0.061756074'%20y='30.818081'%20ry='0.29761767'%20/%3e%3c/g%3e%3cg%20id='g17'%20transform='translate(-0.24638151)'%3e%3cpath%20id='rect6-27'%20style='fill:url(%23linearGradient15);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9'%20style='fill:url(%23linearGradient16);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-8'%20transform='matrix(-1,0,0,1,72.745556,3.8223925)'%3e%3cpath%20id='rect6-27-6'%20style='fill:url(%23linearGradient19);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2017.177374%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-5'%20style='fill:url(%23linearGradient20);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2016.947582%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-1'%20transform='translate(-0.24638151,14.230005)'%3e%3cpath%20id='rect6-27-3'%20style='fill:url(%23linearGradient17);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-8'%20style='fill:url(%23linearGradient18);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer9'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect32'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/g%3e%3cg%20id='layer7'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g34'%20clip-path='url(%23clipPath34)'%3e%3cpath%20id='rect32-7'%20style='display:inline;mix-blend-mode:normal;fill:%239486a7;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter32)'%20d='m%2013.312381,0.50015231%20c%20-6.8593976,0%20-12.3651366,5.50573999%20-12.3651366,12.36513969%20V%20137.13471%20c%200,6.85939%205.505739,12.36514%2012.3651366,12.36514%20h%2045.875234%20c%206.8594,0%2012.36514,-5.50575%2012.36514,-12.36514%20V%2012.865292%20c%200,-6.8593997%20-5.50574,-12.36513969%20-12.36514,-12.36513969%20z'%20/%3e%3cpath%20id='rect32-4'%20style='display:inline;mix-blend-mode:normal;fill:%23f1eef4;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter33)'%20d='m%2013.312383,0.90038112%20c%20-6.6447174,0%20-11.9667114,5.32043998%20-11.9667114,11.96515988%20V%20137.13495%20c%200,6.64471%205.321994,11.96466%2011.9667114,11.96466%20h%2045.875234%20c%206.64472,0%2011.96671,-5.31995%2011.96671,-11.96466%20V%2012.865541%20c%200,-6.6447199%20-5.32199,-11.96515988%20-11.96671,-11.96515988%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer8'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect34'%20style='fill:%23e7e3ec;fill-opacity:1;stroke:none;stroke-width:13.7539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.465686;paint-order:stroke%20fill%20markers'%20d='M%2056.059111,0%20V%2015.527734%20H%200.44648437%20v%201.055233%20H%2072.053483%20V%2015.527734%20H%2057.114343%20V%200%20Z%20M%200.44648437,133.41718%20v%201.05523%20H%2015.385624%20v%2015.52774%20h%201.055233%20v%20-15.52774%20h%2055.612626%20v%20-1.05523%20z'%20/%3e%3c/g%3e%3cg%20id='layer6'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect32-73'%20style='display:inline;fill:%23000000;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2013.312378,0.97661114%20c%20-6.603655,0%20-11.888676,5.28502136%20-11.888676,11.88868086%20V%20137.13471%20c%200,6.60365%205.285021,11.88868%2011.888676,11.88868%20h%2045.87524%20c%206.60366,0%2011.88868,-5.28503%2011.88868,-11.88868%20V%2012.865292%20c%200,-6.6036595%20-5.28502,-11.88868086%20-11.88868,-11.88868086%20z'%20/%3e%3cpath%20id='path31'%20style='fill:url(%23linearGradient32);stroke:none;stroke-width:1.784;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2029.068268,0.97661114%20c%200.09826,0%200.286648,0.56482346%200.400492,0.56482346%20h%2013.56248%20c%200.113844,0%200.302237,-0.56482346%200.400492,-0.56482346%20z'%20/%3e%3c/g%3e%3cg%20id='layer5'%20style='display:inline'%3e%3cpath%20id='path21'%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.184059;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2043.681055,5.0436198%20a%202.7730749,2.7730756%200%200%200%20-2.772958,2.7729573%202.7730749,2.7730756%200%200%200%202.772958,2.7729579%202.7730749,2.7730756%200%200%200%202.772957,-2.7729579%202.7730749,2.7730756%200%200%200%20-2.772957,-2.7729573%20z%20m%200,1.0407633%20a%201.7323073,1.7323078%200%200%201%201.732194,1.732194%201.7323073,1.7323078%200%200%201%20-1.732194,1.7321941%201.7323073,1.7323078%200%200%201%20-1.732194,-1.7321941%201.7323073,1.7323078%200%200%201%201.732194,-1.732194%20z'%20/%3e%3cpath%20id='path21-0'%20style='fill:%23050505;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke%20fill%20markers'%20d='m%20-28.818913,5.0436198%20a%202.7730749,2.7730756%200%200%201%202.772958,2.7729573%202.7730749,2.7730756%200%200%201%20-2.772958,2.7729579%20h%20-7.292578%20a%202.7730749,2.7730756%200%200%201%20-2.772957,-2.7729579%202.7730749,2.7730756%200%200%201%202.772957,-2.7729573%20z%20m%205.17e-4,0.8919352%20h%20-7.293095%20c%20-1.049389,4.46e-5%20-1.880461,0.8316326%20-1.880505,1.8810221%204.4e-5,1.0493897%200.831116,1.8804608%201.880505,1.8805054%20h%207.293095%20c%201.049389,-4.42e-5%201.880977,-0.8311154%201.881022,-1.8805054%20-4.5e-5,-1.0493897%20-0.831633,-1.8809779%20-1.881022,-1.8810221%20z'%20transform='scale(-1,1)'%20/%3e%3ccircle%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.241269;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path22'%20cx='43.681053'%20cy='7.8165774'%20r='1.5452632'%20/%3e%3ccircle%20style='fill:url(%23radialGradient25);fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path23'%20cx='43.681053'%20cy='7.8165774'%20r='0.92431802'%20/%3e%3ccircle%20style='fill:%23000000;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-4'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27-6);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-42'%20cx='-44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='matrix(-0.96592583,-0.25881905,-0.25881905,0.96592583,0,0)'%20/%3e%3c/g%3e%3c/svg%3e", R = {
+  src: B,
+  viewBox: { width: 72.5, height: 150 },
+  aperture: { x: 2.9125, y: 2.4649, width: 66.6755, height: 145.0702, radius: 10.2004 },
+  label: "iPhone"
+}, $ = "_device_6tm0e_6", C = "_screen_6tm0e_19", F = "_hideScrollbars_6tm0e_35", N = "_frame_6tm0e_43", d = {
+  device: $,
+  screen: C,
+  hideScrollbars: F,
+  frame: N
+}, E = (f, i) => f * i.viewBox.width / i.aperture.width, A = T(function({
+  children: i,
+  screenWidth: n = 440,
+  frame: o = R,
+  screenBackground: w = "var(--tz-color-surface)",
+  alt: v,
+  screenClassName: U,
+  screenStyle: j,
+  onScaleChange: k,
+  hideScrollbars: b = !0,
+  className: z,
+  style: H,
+  ...O
+}, t) {
+  const y = x(null), S = _(
+    (e) => {
+      y.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+    },
+    [t]
+  ), { viewBox: a, aperture: r } = o, p = E(n, o), V = {
+    "--mf-aspect": `${a.width} / ${a.height}`,
+    "--mf-max-width": `${p}px`,
+    "--mf-screen-left": `${r.x / a.width * 100}%`,
+    "--mf-screen-top": `${r.y / a.height * 100}%`,
+    "--mf-screen-width": `${n}px`,
+    "--mf-screen-height": `${n * r.height / r.width}px`,
+    "--mf-screen-radius": `${n * r.radius / r.width}px`,
+    "--mf-screen-bg": w
+  }, s = x(k);
+  return s.current = k, P(() => {
+    const e = y.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const h = (l) => {
+      var m;
+      if (!(l > 0)) return;
+      const c = l / p;
+      e.style.setProperty("--mf-scale", String(c)), (m = s.current) == null || m.call(s, c);
+    };
+    h(e.getBoundingClientRect().width);
+    const u = new ResizeObserver((l) => {
+      for (const c of l) h(c.contentRect.width);
+    });
+    return u.observe(e), () => u.disconnect();
+  }, [p]), /* @__PURE__ */ M(
+    "div",
+    {
+      ref: S,
+      className: G(d.device, z),
+      style: { ...V, ...H },
+      ...O,
+      children: [
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: G(d.screen, b && d.hideScrollbars, U),
+            style: j,
+            children: i
+          }
+        ),
+        /* @__PURE__ */ g(
+          "img",
+          {
+            className: d.frame,
+            src: o.src,
+            alt: v ?? `${o.label} preview`,
+            draggable: !1
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  R as I,
+  A as M,
+  E as f
+};
+//# sourceMappingURL=MobileFrame-8FSsYA_w.js.map

package/dist/MobileFrame-8FSsYA_w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileFrame-8FSsYA_w.js","sources":["../src/components/MobileFrame/assets/iphone.svg","../src/components/MobileFrame/frames.ts","../src/components/MobileFrame/MobileFrame.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20width='72.5mm'%20height='150mm'%20viewBox='0%200%2072.499999%20150'%20version='1.1'%20id='svg1'%20xml:space='preserve'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs1'%3e%3cmask%20id='screenCutout'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='72.5'%20height='150'%3e%3crect%20x='0'%20y='0'%20width='72.5'%20height='150'%20fill='%23fff'/%3e%3cpath%20d='m%2013.312882,2.4648914%20c%20-5.8047685,0%20-10.4003983,4.5956227%20-10.4003983,10.4003996%20V%20137.13471%20c%200,5.80477%204.5956298,10.4004%2010.4003983,10.4004%20h%2045.87472%20c%205.80478,0%2010.400398,-4.59563%2010.400398,-10.4004%20V%2012.865291%20C%2069.588,7.0605141%2064.992382,2.4648914%2059.187602,2.4648914%20Z'%20fill='%23000'/%3e%3cpath%20d='M%2028.818913,4.80325%20h%2014.862142%20c%201.66928,0%203.013252,1.343978%203.013252,3.0132527%200,1.6692748%20-1.343972,3.0132533%20-3.013252,3.0132533%20H%2028.818913%20c%20-1.66927,0%20-3.012736,-1.3439785%20-3.012736,-3.0132533%200,-1.6692747%201.343466,-3.0132527%203.012736,-3.0132527%20z'%20fill='%23fff'/%3e%3c/mask%3e%3clinearGradient%20id='linearGradient31'%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.02;'%20offset='0'%20id='stop31'%20/%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.1;'%20offset='1'%20id='stop32'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient25'%3e%3cstop%20style='stop-color:%23b697ff;stop-opacity:1;'%20offset='0'%20id='stop26'%20/%3e%3cstop%20style='stop-color:%233600ae;stop-opacity:1;'%20offset='0.56404012'%20id='stop28'%20/%3e%3cstop%20style='stop-color:%23000000;stop-opacity:0;'%20offset='1'%20id='stop27'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient24'%3e%3cstop%20style='stop-color:%2339394e;stop-opacity:1;'%20offset='0'%20id='stop24'%20/%3e%3cstop%20style='stop-color:%231e1e21;stop-opacity:1;'%20offset='1'%20id='stop25'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient12'%3e%3cstop%20style='stop-color:%23686171;stop-opacity:1;'%20offset='0'%20id='stop13'%20/%3e%3cstop%20style='stop-color:%23575360;stop-opacity:1;'%20offset='1'%20id='stop14'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient9'%3e%3cstop%20style='stop-color:%23867e90;stop-opacity:1;'%20offset='0'%20id='stop9'%20/%3e%3cstop%20style='stop-color:%23c5c4d1;stop-opacity:1;'%20offset='0.17473139'%20id='stop12'%20/%3e%3cstop%20style='stop-color:%238d8698;stop-opacity:1'%20offset='0.64714581'%20id='stop11'%20/%3e%3cstop%20style='stop-color:%237a7184;stop-opacity:1;'%20offset='1'%20id='stop10'%20/%3e%3c/linearGradient%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath1'%3e%3crect%20style='fill:%239320d4;stroke-width:2.90343;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect2'%20width='207.90259'%20height='430.15308'%20x='66.161987'%20y='-144.36761'%20/%3e%3c/clipPath%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient10'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.528318,-10.430529)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient14'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.41007042,-0.16084956)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient15'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient16'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient17'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient18'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient19'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient20'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient24'%20id='radialGradient25'%20cx='43.681053'%20cy='7.4308386'%20fx='43.681053'%20fy='7.4308386'%20r='0.92431802'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(1.3383789e-6)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-5.200404,-14.350692)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27-6'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-93.631878,-14.350692)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient31'%20id='linearGradient32'%20x1='36.25'%20y1='0.97257996'%20x2='36.25'%20y2='1.5374033'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0,0.00403118)'%20/%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter32'%20x='-0.006718275'%20y='-0.0031835449'%20width='1.0134365'%20height='1.0063671'%3e%3cfeGaussianBlur%20stdDeviation='0.19764468'%20id='feGaussianBlur32'%20/%3e%3c/filter%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter33'%20x='-0.0091814284'%20y='-0.0043248752'%20width='1.0183629'%20height='1.0086498'%3e%3cfeGaussianBlur%20stdDeviation='0.26705965'%20id='feGaussianBlur33'%20/%3e%3c/filter%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath34'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect35'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='layer2'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g14'%3e%3crect%20style='fill:url(%23linearGradient14);fill-opacity:1;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6'%20width='7.6419992'%20height='6.9724154'%20x='-6.8847655e-10'%20y='30.692017'%20ry='0.30878335'%20/%3e%3crect%20style='fill:url(%23linearGradient10);fill-opacity:1;stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6-2'%20width='7.230288'%20height='6.7202911'%20x='0.061756074'%20y='30.818081'%20ry='0.29761767'%20/%3e%3c/g%3e%3cg%20id='g17'%20transform='translate(-0.24638151)'%3e%3cpath%20id='rect6-27'%20style='fill:url(%23linearGradient15);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9'%20style='fill:url(%23linearGradient16);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-8'%20transform='matrix(-1,0,0,1,72.745556,3.8223925)'%3e%3cpath%20id='rect6-27-6'%20style='fill:url(%23linearGradient19);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2017.177374%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-5'%20style='fill:url(%23linearGradient20);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2016.947582%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-1'%20transform='translate(-0.24638151,14.230005)'%3e%3cpath%20id='rect6-27-3'%20style='fill:url(%23linearGradient17);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-8'%20style='fill:url(%23linearGradient18);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer9'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect32'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/g%3e%3cg%20id='layer7'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g34'%20clip-path='url(%23clipPath34)'%3e%3cpath%20id='rect32-7'%20style='display:inline;mix-blend-mode:normal;fill:%239486a7;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter32)'%20d='m%2013.312381,0.50015231%20c%20-6.8593976,0%20-12.3651366,5.50573999%20-12.3651366,12.36513969%20V%20137.13471%20c%200,6.85939%205.505739,12.36514%2012.3651366,12.36514%20h%2045.875234%20c%206.8594,0%2012.36514,-5.50575%2012.36514,-12.36514%20V%2012.865292%20c%200,-6.8593997%20-5.50574,-12.36513969%20-12.36514,-12.36513969%20z'%20/%3e%3cpath%20id='rect32-4'%20style='display:inline;mix-blend-mode:normal;fill:%23f1eef4;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter33)'%20d='m%2013.312383,0.90038112%20c%20-6.6447174,0%20-11.9667114,5.32043998%20-11.9667114,11.96515988%20V%20137.13495%20c%200,6.64471%205.321994,11.96466%2011.9667114,11.96466%20h%2045.875234%20c%206.64472,0%2011.96671,-5.31995%2011.96671,-11.96466%20V%2012.865541%20c%200,-6.6447199%20-5.32199,-11.96515988%20-11.96671,-11.96515988%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer8'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect34'%20style='fill:%23e7e3ec;fill-opacity:1;stroke:none;stroke-width:13.7539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.465686;paint-order:stroke%20fill%20markers'%20d='M%2056.059111,0%20V%2015.527734%20H%200.44648437%20v%201.055233%20H%2072.053483%20V%2015.527734%20H%2057.114343%20V%200%20Z%20M%200.44648437,133.41718%20v%201.05523%20H%2015.385624%20v%2015.52774%20h%201.055233%20v%20-15.52774%20h%2055.612626%20v%20-1.05523%20z'%20/%3e%3c/g%3e%3cg%20id='layer6'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect32-73'%20style='display:inline;fill:%23000000;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2013.312378,0.97661114%20c%20-6.603655,0%20-11.888676,5.28502136%20-11.888676,11.88868086%20V%20137.13471%20c%200,6.60365%205.285021,11.88868%2011.888676,11.88868%20h%2045.87524%20c%206.60366,0%2011.88868,-5.28503%2011.88868,-11.88868%20V%2012.865292%20c%200,-6.6036595%20-5.28502,-11.88868086%20-11.88868,-11.88868086%20z'%20/%3e%3cpath%20id='path31'%20style='fill:url(%23linearGradient32);stroke:none;stroke-width:1.784;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2029.068268,0.97661114%20c%200.09826,0%200.286648,0.56482346%200.400492,0.56482346%20h%2013.56248%20c%200.113844,0%200.302237,-0.56482346%200.400492,-0.56482346%20z'%20/%3e%3c/g%3e%3cg%20id='layer5'%20style='display:inline'%3e%3cpath%20id='path21'%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.184059;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2043.681055,5.0436198%20a%202.7730749,2.7730756%200%200%200%20-2.772958,2.7729573%202.7730749,2.7730756%200%200%200%202.772958,2.7729579%202.7730749,2.7730756%200%200%200%202.772957,-2.7729579%202.7730749,2.7730756%200%200%200%20-2.772957,-2.7729573%20z%20m%200,1.0407633%20a%201.7323073,1.7323078%200%200%201%201.732194,1.732194%201.7323073,1.7323078%200%200%201%20-1.732194,1.7321941%201.7323073,1.7323078%200%200%201%20-1.732194,-1.7321941%201.7323073,1.7323078%200%200%201%201.732194,-1.732194%20z'%20/%3e%3cpath%20id='path21-0'%20style='fill:%23050505;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke%20fill%20markers'%20d='m%20-28.818913,5.0436198%20a%202.7730749,2.7730756%200%200%201%202.772958,2.7729573%202.7730749,2.7730756%200%200%201%20-2.772958,2.7729579%20h%20-7.292578%20a%202.7730749,2.7730756%200%200%201%20-2.772957,-2.7729579%202.7730749,2.7730756%200%200%201%202.772957,-2.7729573%20z%20m%205.17e-4,0.8919352%20h%20-7.293095%20c%20-1.049389,4.46e-5%20-1.880461,0.8316326%20-1.880505,1.8810221%204.4e-5,1.0493897%200.831116,1.8804608%201.880505,1.8805054%20h%207.293095%20c%201.049389,-4.42e-5%201.880977,-0.8311154%201.881022,-1.8805054%20-4.5e-5,-1.0493897%20-0.831633,-1.8809779%20-1.881022,-1.8810221%20z'%20transform='scale(-1,1)'%20/%3e%3ccircle%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.241269;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path22'%20cx='43.681053'%20cy='7.8165774'%20r='1.5452632'%20/%3e%3ccircle%20style='fill:url(%23radialGradient25);fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path23'%20cx='43.681053'%20cy='7.8165774'%20r='0.92431802'%20/%3e%3ccircle%20style='fill:%23000000;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-4'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27-6);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-42'%20cx='-44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='matrix(-0.96592583,-0.25881905,-0.25881905,0.96592583,0,0)'%20/%3e%3c/g%3e%3c/svg%3e\"","import iphone from './assets/iphone.svg'\n\n/** A phone frame: the artwork plus the exact screen aperture cut into it, in the artwork's own units. */\nexport interface MobileFrameSpec {\n  /** The frame artwork, rendered as `<img>` (never inlined — see the component doc). */\n  src: string\n  /** viewBox size of the artwork. */\n  viewBox: { width: number; height: number }\n  /** The screen aperture inside that viewBox, same units. `radius` is the rendered screen corner. */\n  aperture: { x: number; y: number; width: number; height: number; radius: number }\n  /** Default accessible name of the artwork. */\n  label: string\n}\n\n/**\n * The iPhone frame (Inkscape artwork, 72.5 × 150 units — the source is in mm; aspect 1 / 2.069). The\n * aperture is the `screenCutout` mask path: x 2.9125 → 69.5880, y 2.4649 → 147.5351. Its true corner\n * radius is **10.4004**; the rendered screen uses **10.2004** so the screen's anti-aliased edge sits just\n * inside the bezel with no light leak at the corners (the value the consumer tuned at 1× and 0.5×).\n */\nexport const IPHONE_FRAME: MobileFrameSpec = {\n  src: iphone,\n  viewBox: { width: 72.5, height: 150 },\n  aperture: { x: 2.9125, y: 2.4649, width: 66.6755, height: 145.0702, radius: 10.2004 },\n  label: 'iPhone',\n}\n","import {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { IPHONE_FRAME, type MobileFrameSpec } from './frames'\nimport styles from './MobileFrame.module.css'\n\nexport interface MobileFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** What the phone shows. Laid out at exactly `screenWidth` CSS px, then scaled with the frame. */\n  children?: ReactNode\n  /** The screen's layout width in CSS px — the \"true device width\" the content sees (default `440`). */\n  screenWidth?: number\n  /** Which frame (default `IPHONE_FRAME`). */\n  frame?: MobileFrameSpec\n  /** Fill behind the children (a CSS color / var). Default `var(--tz-color-surface)`. */\n  screenBackground?: string\n  /** Accessible name for the artwork (default `frame.label` + \" preview\"). */\n  alt?: string\n  /** Class for the screen element (the scaled `screenWidth` box), e.g. to give it a font or theme vars. */\n  screenClassName?: string\n  /** Style for the screen element. */\n  screenStyle?: CSSProperties\n  /** Fires with the current scale factor whenever the frame is re-measured. */\n  onScaleChange?: (scale: number) => void\n  /**\n   * Hide the scrollbars of every scroller inside the screen (default `true`) — a real phone has no\n   * permanent scrollbar gutter, so a desktop bar drawn inside the frame breaks the illusion. Scrolling\n   * (wheel / touch) still works. `false` shows them again (e.g. while debugging layout).\n   */\n  hideScrollbars?: boolean\n}\n\n/** The frame's rendered width at which the screen is exactly `screenWidth` px (scale 1). */\nexport const frameWidthFor = (screenWidth: number, frame: MobileFrameSpec): number =>\n  (screenWidth * frame.viewBox.width) / frame.aperture.width\n\n/**\n * A phone mockup that renders any content at a **true device width**. The frame artwork is an `<img>`\n * (never inlined — its Inkscape ids are document-global, so two inlined copies would overwrite each\n * other's gradients); the **screen** is positioned exactly in the artwork's aperture, **laid out at a\n * fixed `screenWidth` CSS px** like a real device, and **scaled** (`transform: scale`) to whatever width\n * the frame gets — so children see a viewport that is exactly `screenWidth` px wide (media queries, `%`\n * widths and `vw` do **not** follow the visual size; use container queries on the screen if needed),\n * while the visual size follows the frame. The root fills its container up to the width at which the\n * screen is a true `screenWidth` (≈478px for the iPhone at 440), and shrinks with it below that — two\n * phones in a `Row` share the row and shrink together. The one measurement (`ResizeObserver` on the root)\n * writes `--mf-scale` straight onto the DOM node (no React state, no re-render of the preview) and\n * reports it via `onScaleChange`. Every CSS number is derived from the `frame` spec as inline custom\n * properties — the stylesheet only reads vars. The component knows nothing about the previewed app's\n * light / dark theme: wrap it in your own provider (**outside** `MobileFrame`, or the var is undefined on\n * the screen element) and pass `screenBackground=\"var(--your-canvas)\"`.\n */\nexport const MobileFrame = forwardRef<HTMLDivElement, MobileFrameProps>(function MobileFrame(\n  {\n    children,\n    screenWidth = 440,\n    frame = IPHONE_FRAME,\n    screenBackground = 'var(--tz-color-surface)',\n    alt,\n    screenClassName,\n    screenStyle,\n    onScaleChange,\n    hideScrollbars = true,\n    className,\n    style,\n    ...props\n  },\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const setRoot = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  const { viewBox, aperture } = frame\n  const frameWidth = frameWidthFor(screenWidth, frame)\n  // geometry as data — derived once from the spec, never typed twice\n  const geometry = {\n    '--mf-aspect': `${viewBox.width} / ${viewBox.height}`,\n    '--mf-max-width': `${frameWidth}px`,\n    '--mf-screen-left': `${(aperture.x / viewBox.width) * 100}%`,\n    '--mf-screen-top': `${(aperture.y / viewBox.height) * 100}%`,\n    '--mf-screen-width': `${screenWidth}px`,\n    '--mf-screen-height': `${(screenWidth * aperture.height) / aperture.width}px`,\n    '--mf-screen-radius': `${(screenWidth * aperture.radius) / aperture.width}px`,\n    '--mf-screen-bg': screenBackground,\n  } as CSSProperties\n\n  // the ONE measurement CSS can't do (divide two lengths into a unitless factor): rendered width →\n  // scale. Written to the node directly so a resize never re-renders the previewed app. SSR-safe.\n  const onScaleChangeRef = useRef(onScaleChange)\n  onScaleChangeRef.current = onScaleChange\n  useLayoutEffect(() => {\n    const el = rootRef.current\n    if (!el || typeof ResizeObserver === 'undefined') return\n    const apply = (width: number) => {\n      if (!(width > 0)) return\n      const scale = width / frameWidth\n      el.style.setProperty('--mf-scale', String(scale))\n      onScaleChangeRef.current?.(scale)\n    }\n    apply(el.getBoundingClientRect().width)\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) apply(entry.contentRect.width)\n    })\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [frameWidth])\n\n  return (\n    <div\n      ref={setRoot}\n      className={clsx(styles.device, className)}\n      style={{ ...geometry, ...style }}\n      {...props}\n    >\n      {/* screen first, so the frame (Dynamic Island, bezel corners) paints over the content */}\n      <div\n        className={clsx(styles.screen, hideScrollbars && styles.hideScrollbars, screenClassName)}\n        style={screenStyle}\n      >\n        {children}\n      </div>\n      <img\n        className={styles.frame}\n        src={frame.src}\n        alt={alt ?? `${frame.label} preview`}\n        draggable={false}\n      />\n    </div>\n  )\n})\n"],"names":["iphone","IPHONE_FRAME","frameWidthFor","screenWidth","frame","MobileFrame","forwardRef","children","screenBackground","alt","screenClassName","screenStyle","onScaleChange","hideScrollbars","className","style","props","ref","rootRef","useRef","setRoot","useCallback","node","viewBox","aperture","frameWidth","geometry","onScaleChangeRef","useLayoutEffect","el","apply","width","scale","_a","observer","entries","entry","jsxs","clsx","styles","jsx"],"mappings":"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"}

package/dist/MobileFrame-Dsfgd_4k.cjs

@@ -0,0 +1,2 @@
+"use strict";const k=require("react/jsx-runtime"),i=require("react"),G=require("clsx"),P="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20width='72.5mm'%20height='150mm'%20viewBox='0%200%2072.499999%20150'%20version='1.1'%20id='svg1'%20xml:space='preserve'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs1'%3e%3cmask%20id='screenCutout'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='72.5'%20height='150'%3e%3crect%20x='0'%20y='0'%20width='72.5'%20height='150'%20fill='%23fff'/%3e%3cpath%20d='m%2013.312882,2.4648914%20c%20-5.8047685,0%20-10.4003983,4.5956227%20-10.4003983,10.4003996%20V%20137.13471%20c%200,5.80477%204.5956298,10.4004%2010.4003983,10.4004%20h%2045.87472%20c%205.80478,0%2010.400398,-4.59563%2010.400398,-10.4004%20V%2012.865291%20C%2069.588,7.0605141%2064.992382,2.4648914%2059.187602,2.4648914%20Z'%20fill='%23000'/%3e%3cpath%20d='M%2028.818913,4.80325%20h%2014.862142%20c%201.66928,0%203.013252,1.343978%203.013252,3.0132527%200,1.6692748%20-1.343972,3.0132533%20-3.013252,3.0132533%20H%2028.818913%20c%20-1.66927,0%20-3.012736,-1.3439785%20-3.012736,-3.0132533%200,-1.6692747%201.343466,-3.0132527%203.012736,-3.0132527%20z'%20fill='%23fff'/%3e%3c/mask%3e%3clinearGradient%20id='linearGradient31'%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.02;'%20offset='0'%20id='stop31'%20/%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.1;'%20offset='1'%20id='stop32'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient25'%3e%3cstop%20style='stop-color:%23b697ff;stop-opacity:1;'%20offset='0'%20id='stop26'%20/%3e%3cstop%20style='stop-color:%233600ae;stop-opacity:1;'%20offset='0.56404012'%20id='stop28'%20/%3e%3cstop%20style='stop-color:%23000000;stop-opacity:0;'%20offset='1'%20id='stop27'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient24'%3e%3cstop%20style='stop-color:%2339394e;stop-opacity:1;'%20offset='0'%20id='stop24'%20/%3e%3cstop%20style='stop-color:%231e1e21;stop-opacity:1;'%20offset='1'%20id='stop25'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient12'%3e%3cstop%20style='stop-color:%23686171;stop-opacity:1;'%20offset='0'%20id='stop13'%20/%3e%3cstop%20style='stop-color:%23575360;stop-opacity:1;'%20offset='1'%20id='stop14'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient9'%3e%3cstop%20style='stop-color:%23867e90;stop-opacity:1;'%20offset='0'%20id='stop9'%20/%3e%3cstop%20style='stop-color:%23c5c4d1;stop-opacity:1;'%20offset='0.17473139'%20id='stop12'%20/%3e%3cstop%20style='stop-color:%238d8698;stop-opacity:1'%20offset='0.64714581'%20id='stop11'%20/%3e%3cstop%20style='stop-color:%237a7184;stop-opacity:1;'%20offset='1'%20id='stop10'%20/%3e%3c/linearGradient%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath1'%3e%3crect%20style='fill:%239320d4;stroke-width:2.90343;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect2'%20width='207.90259'%20height='430.15308'%20x='66.161987'%20y='-144.36761'%20/%3e%3c/clipPath%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient10'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.528318,-10.430529)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient14'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.41007042,-0.16084956)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient15'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient16'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient17'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient18'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient19'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient20'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient24'%20id='radialGradient25'%20cx='43.681053'%20cy='7.4308386'%20fx='43.681053'%20fy='7.4308386'%20r='0.92431802'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(1.3383789e-6)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-5.200404,-14.350692)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27-6'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-93.631878,-14.350692)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient31'%20id='linearGradient32'%20x1='36.25'%20y1='0.97257996'%20x2='36.25'%20y2='1.5374033'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0,0.00403118)'%20/%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter32'%20x='-0.006718275'%20y='-0.0031835449'%20width='1.0134365'%20height='1.0063671'%3e%3cfeGaussianBlur%20stdDeviation='0.19764468'%20id='feGaussianBlur32'%20/%3e%3c/filter%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter33'%20x='-0.0091814284'%20y='-0.0043248752'%20width='1.0183629'%20height='1.0086498'%3e%3cfeGaussianBlur%20stdDeviation='0.26705965'%20id='feGaussianBlur33'%20/%3e%3c/filter%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath34'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect35'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='layer2'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g14'%3e%3crect%20style='fill:url(%23linearGradient14);fill-opacity:1;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6'%20width='7.6419992'%20height='6.9724154'%20x='-6.8847655e-10'%20y='30.692017'%20ry='0.30878335'%20/%3e%3crect%20style='fill:url(%23linearGradient10);fill-opacity:1;stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6-2'%20width='7.230288'%20height='6.7202911'%20x='0.061756074'%20y='30.818081'%20ry='0.29761767'%20/%3e%3c/g%3e%3cg%20id='g17'%20transform='translate(-0.24638151)'%3e%3cpath%20id='rect6-27'%20style='fill:url(%23linearGradient15);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9'%20style='fill:url(%23linearGradient16);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-8'%20transform='matrix(-1,0,0,1,72.745556,3.8223925)'%3e%3cpath%20id='rect6-27-6'%20style='fill:url(%23linearGradient19);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2017.177374%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-5'%20style='fill:url(%23linearGradient20);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2016.947582%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-1'%20transform='translate(-0.24638151,14.230005)'%3e%3cpath%20id='rect6-27-3'%20style='fill:url(%23linearGradient17);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-8'%20style='fill:url(%23linearGradient18);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer9'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect32'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/g%3e%3cg%20id='layer7'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g34'%20clip-path='url(%23clipPath34)'%3e%3cpath%20id='rect32-7'%20style='display:inline;mix-blend-mode:normal;fill:%239486a7;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter32)'%20d='m%2013.312381,0.50015231%20c%20-6.8593976,0%20-12.3651366,5.50573999%20-12.3651366,12.36513969%20V%20137.13471%20c%200,6.85939%205.505739,12.36514%2012.3651366,12.36514%20h%2045.875234%20c%206.8594,0%2012.36514,-5.50575%2012.36514,-12.36514%20V%2012.865292%20c%200,-6.8593997%20-5.50574,-12.36513969%20-12.36514,-12.36513969%20z'%20/%3e%3cpath%20id='rect32-4'%20style='display:inline;mix-blend-mode:normal;fill:%23f1eef4;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter33)'%20d='m%2013.312383,0.90038112%20c%20-6.6447174,0%20-11.9667114,5.32043998%20-11.9667114,11.96515988%20V%20137.13495%20c%200,6.64471%205.321994,11.96466%2011.9667114,11.96466%20h%2045.875234%20c%206.64472,0%2011.96671,-5.31995%2011.96671,-11.96466%20V%2012.865541%20c%200,-6.6447199%20-5.32199,-11.96515988%20-11.96671,-11.96515988%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer8'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect34'%20style='fill:%23e7e3ec;fill-opacity:1;stroke:none;stroke-width:13.7539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.465686;paint-order:stroke%20fill%20markers'%20d='M%2056.059111,0%20V%2015.527734%20H%200.44648437%20v%201.055233%20H%2072.053483%20V%2015.527734%20H%2057.114343%20V%200%20Z%20M%200.44648437,133.41718%20v%201.05523%20H%2015.385624%20v%2015.52774%20h%201.055233%20v%20-15.52774%20h%2055.612626%20v%20-1.05523%20z'%20/%3e%3c/g%3e%3cg%20id='layer6'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect32-73'%20style='display:inline;fill:%23000000;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2013.312378,0.97661114%20c%20-6.603655,0%20-11.888676,5.28502136%20-11.888676,11.88868086%20V%20137.13471%20c%200,6.60365%205.285021,11.88868%2011.888676,11.88868%20h%2045.87524%20c%206.60366,0%2011.88868,-5.28503%2011.88868,-11.88868%20V%2012.865292%20c%200,-6.6036595%20-5.28502,-11.88868086%20-11.88868,-11.88868086%20z'%20/%3e%3cpath%20id='path31'%20style='fill:url(%23linearGradient32);stroke:none;stroke-width:1.784;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2029.068268,0.97661114%20c%200.09826,0%200.286648,0.56482346%200.400492,0.56482346%20h%2013.56248%20c%200.113844,0%200.302237,-0.56482346%200.400492,-0.56482346%20z'%20/%3e%3c/g%3e%3cg%20id='layer5'%20style='display:inline'%3e%3cpath%20id='path21'%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.184059;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2043.681055,5.0436198%20a%202.7730749,2.7730756%200%200%200%20-2.772958,2.7729573%202.7730749,2.7730756%200%200%200%202.772958,2.7729579%202.7730749,2.7730756%200%200%200%202.772957,-2.7729579%202.7730749,2.7730756%200%200%200%20-2.772957,-2.7729573%20z%20m%200,1.0407633%20a%201.7323073,1.7323078%200%200%201%201.732194,1.732194%201.7323073,1.7323078%200%200%201%20-1.732194,1.7321941%201.7323073,1.7323078%200%200%201%20-1.732194,-1.7321941%201.7323073,1.7323078%200%200%201%201.732194,-1.732194%20z'%20/%3e%3cpath%20id='path21-0'%20style='fill:%23050505;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke%20fill%20markers'%20d='m%20-28.818913,5.0436198%20a%202.7730749,2.7730756%200%200%201%202.772958,2.7729573%202.7730749,2.7730756%200%200%201%20-2.772958,2.7729579%20h%20-7.292578%20a%202.7730749,2.7730756%200%200%201%20-2.772957,-2.7729579%202.7730749,2.7730756%200%200%201%202.772957,-2.7729573%20z%20m%205.17e-4,0.8919352%20h%20-7.293095%20c%20-1.049389,4.46e-5%20-1.880461,0.8316326%20-1.880505,1.8810221%204.4e-5,1.0493897%200.831116,1.8804608%201.880505,1.8805054%20h%207.293095%20c%201.049389,-4.42e-5%201.880977,-0.8311154%201.881022,-1.8805054%20-4.5e-5,-1.0493897%20-0.831633,-1.8809779%20-1.881022,-1.8810221%20z'%20transform='scale(-1,1)'%20/%3e%3ccircle%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.241269;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path22'%20cx='43.681053'%20cy='7.8165774'%20r='1.5452632'%20/%3e%3ccircle%20style='fill:url(%23radialGradient25);fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path23'%20cx='43.681053'%20cy='7.8165774'%20r='0.92431802'%20/%3e%3ccircle%20style='fill:%23000000;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-4'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27-6);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-42'%20cx='-44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='matrix(-0.96592583,-0.25881905,-0.25881905,0.96592583,0,0)'%20/%3e%3c/g%3e%3c/svg%3e",w={src:P,viewBox:{width:72.5,height:150},aperture:{x:2.9125,y:2.4649,width:66.6755,height:145.0702,radius:10.2004},label:"iPhone"},R="_device_6tm0e_6",T="_screen_6tm0e_19",B="_hideScrollbars_6tm0e_35",$="_frame_6tm0e_43",p={device:R,screen:T,hideScrollbars:B,frame:$},v=(y,n)=>y*n.viewBox.width/n.aperture.width,C=i.forwardRef(function({children:n,screenWidth:o=440,frame:a=w,screenBackground:U="var(--tz-color-surface)",alt:j,screenClassName:b,screenStyle:z,onScaleChange:h,hideScrollbars:H=!0,className:O,style:S,...V},t){const u=i.useRef(null),M=i.useCallback(e=>{u.current=e,typeof t=="function"?t(e):t&&(t.current=e)},[t]),{viewBox:s,aperture:r}=a,f=v(o,a),_={"--mf-aspect":`${s.width} / ${s.height}`,"--mf-max-width":`${f}px`,"--mf-screen-left":`${r.x/s.width*100}%`,"--mf-screen-top":`${r.y/s.height*100}%`,"--mf-screen-width":`${o}px`,"--mf-screen-height":`${o*r.height/r.width}px`,"--mf-screen-radius":`${o*r.radius/r.width}px`,"--mf-screen-bg":U},l=i.useRef(h);return l.current=h,i.useLayoutEffect(()=>{const e=u.current;if(!e||typeof ResizeObserver>"u")return;const m=c=>{var x;if(!(c>0))return;const d=c/f;e.style.setProperty("--mf-scale",String(d)),(x=l.current)==null||x.call(l,d)};m(e.getBoundingClientRect().width);const g=new ResizeObserver(c=>{for(const d of c)m(d.contentRect.width)});return g.observe(e),()=>g.disconnect()},[f]),k.jsxs("div",{ref:M,className:G.clsx(p.device,O),style:{..._,...S},...V,children:[k.jsx("div",{className:G.clsx(p.screen,H&&p.hideScrollbars,b),style:z,children:n}),k.jsx("img",{className:p.frame,src:a.src,alt:j??`${a.label} preview`,draggable:!1})]})});exports.IPHONE_FRAME=w;exports.MobileFrame=C;exports.frameWidthFor=v;
+//# sourceMappingURL=MobileFrame-Dsfgd_4k.cjs.map

package/dist/MobileFrame-Dsfgd_4k.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileFrame-Dsfgd_4k.cjs","sources":["../src/components/MobileFrame/assets/iphone.svg","../src/components/MobileFrame/frames.ts","../src/components/MobileFrame/MobileFrame.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20width='72.5mm'%20height='150mm'%20viewBox='0%200%2072.499999%20150'%20version='1.1'%20id='svg1'%20xml:space='preserve'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs1'%3e%3cmask%20id='screenCutout'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='72.5'%20height='150'%3e%3crect%20x='0'%20y='0'%20width='72.5'%20height='150'%20fill='%23fff'/%3e%3cpath%20d='m%2013.312882,2.4648914%20c%20-5.8047685,0%20-10.4003983,4.5956227%20-10.4003983,10.4003996%20V%20137.13471%20c%200,5.80477%204.5956298,10.4004%2010.4003983,10.4004%20h%2045.87472%20c%205.80478,0%2010.400398,-4.59563%2010.400398,-10.4004%20V%2012.865291%20C%2069.588,7.0605141%2064.992382,2.4648914%2059.187602,2.4648914%20Z'%20fill='%23000'/%3e%3cpath%20d='M%2028.818913,4.80325%20h%2014.862142%20c%201.66928,0%203.013252,1.343978%203.013252,3.0132527%200,1.6692748%20-1.343972,3.0132533%20-3.013252,3.0132533%20H%2028.818913%20c%20-1.66927,0%20-3.012736,-1.3439785%20-3.012736,-3.0132533%200,-1.6692747%201.343466,-3.0132527%203.012736,-3.0132527%20z'%20fill='%23fff'/%3e%3c/mask%3e%3clinearGradient%20id='linearGradient31'%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.02;'%20offset='0'%20id='stop31'%20/%3e%3cstop%20style='stop-color:%23ffffff;stop-opacity:0.1;'%20offset='1'%20id='stop32'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient25'%3e%3cstop%20style='stop-color:%23b697ff;stop-opacity:1;'%20offset='0'%20id='stop26'%20/%3e%3cstop%20style='stop-color:%233600ae;stop-opacity:1;'%20offset='0.56404012'%20id='stop28'%20/%3e%3cstop%20style='stop-color:%23000000;stop-opacity:0;'%20offset='1'%20id='stop27'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient24'%3e%3cstop%20style='stop-color:%2339394e;stop-opacity:1;'%20offset='0'%20id='stop24'%20/%3e%3cstop%20style='stop-color:%231e1e21;stop-opacity:1;'%20offset='1'%20id='stop25'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient12'%3e%3cstop%20style='stop-color:%23686171;stop-opacity:1;'%20offset='0'%20id='stop13'%20/%3e%3cstop%20style='stop-color:%23575360;stop-opacity:1;'%20offset='1'%20id='stop14'%20/%3e%3c/linearGradient%3e%3clinearGradient%20id='linearGradient9'%3e%3cstop%20style='stop-color:%23867e90;stop-opacity:1;'%20offset='0'%20id='stop9'%20/%3e%3cstop%20style='stop-color:%23c5c4d1;stop-opacity:1;'%20offset='0.17473139'%20id='stop12'%20/%3e%3cstop%20style='stop-color:%238d8698;stop-opacity:1'%20offset='0.64714581'%20id='stop11'%20/%3e%3cstop%20style='stop-color:%237a7184;stop-opacity:1;'%20offset='1'%20id='stop10'%20/%3e%3c/linearGradient%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath1'%3e%3crect%20style='fill:%239320d4;stroke-width:2.90343;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect2'%20width='207.90259'%20height='430.15308'%20x='66.161987'%20y='-144.36761'%20/%3e%3c/clipPath%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient10'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.528318,-10.430529)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient14'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.41007042,-0.16084956)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient15'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient16'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient17'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient18'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient12'%20id='linearGradient19'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(-0.16368891,11.918822)'%20x1='1.7565179'%20y1='30.852865'%20x2='1.7565179'%20y2='37.825279'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient9'%20id='linearGradient20'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(1,0,0,1.0187233,10.7747,1.649143)'%20x1='-6.8514175'%20y1='40.490494'%20x2='-6.8514175'%20y2='47.087269'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient24'%20id='radialGradient25'%20cx='43.681053'%20cy='7.4308386'%20fx='43.681053'%20fy='7.4308386'%20r='0.92431802'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(1.3383789e-6)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-5.200404,-14.350692)'%20/%3e%3cradialGradient%20xlink:href='%23linearGradient25'%20id='radialGradient27-6'%20cx='48.734295'%20cy='7.8165774'%20fx='48.734295'%20fy='7.8165774'%20r='0.68189663'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(0.99999932,-3.3487284e-7,-2.1771224e-6,1.3555106,-93.631878,-14.350692)'%20/%3e%3clinearGradient%20xlink:href='%23linearGradient31'%20id='linearGradient32'%20x1='36.25'%20y1='0.97257996'%20x2='36.25'%20y2='1.5374033'%20gradientUnits='userSpaceOnUse'%20gradientTransform='translate(0,0.00403118)'%20/%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter32'%20x='-0.006718275'%20y='-0.0031835449'%20width='1.0134365'%20height='1.0063671'%3e%3cfeGaussianBlur%20stdDeviation='0.19764468'%20id='feGaussianBlur32'%20/%3e%3c/filter%3e%3cfilter%20style='color-interpolation-filters:sRGB'%20id='filter33'%20x='-0.0091814284'%20y='-0.0043248752'%20width='1.0183629'%20height='1.0086498'%3e%3cfeGaussianBlur%20stdDeviation='0.26705965'%20id='feGaussianBlur33'%20/%3e%3c/filter%3e%3cclipPath%20clipPathUnits='userSpaceOnUse'%20id='clipPath34'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect35'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='layer2'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g14'%3e%3crect%20style='fill:url(%23linearGradient14);fill-opacity:1;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6'%20width='7.6419992'%20height='6.9724154'%20x='-6.8847655e-10'%20y='30.692017'%20ry='0.30878335'%20/%3e%3crect%20style='fill:url(%23linearGradient10);fill-opacity:1;stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20id='rect6-2'%20width='7.230288'%20height='6.7202911'%20x='0.061756074'%20y='30.818081'%20ry='0.29761767'%20/%3e%3c/g%3e%3cg%20id='g17'%20transform='translate(-0.24638151)'%3e%3cpath%20id='rect6-27'%20style='fill:url(%23linearGradient15);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9'%20style='fill:url(%23linearGradient16);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-8'%20transform='matrix(-1,0,0,1,72.745556,3.8223925)'%3e%3cpath%20id='rect6-27-6'%20style='fill:url(%23linearGradient19);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2017.177374%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-5'%20style='fill:url(%23linearGradient20);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2016.947582%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3cg%20id='g17-1'%20transform='translate(-0.24638151,14.230005)'%3e%3cpath%20id='rect6-27-3'%20style='fill:url(%23linearGradient17);stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.55516486,42.77169%20H%207.5795974%20c%200.171066,0%200.3087834,0.137718%200.3087834,0.308784%20v%2010.627089%20c%200,0.171066%20-0.1377174,0.308784%20-0.3087834,0.308784%20H%200.55516486%20c%20-0.17106598,0%20-0.30878335,-0.137718%20-0.30878335,-0.308784%20V%2043.080474%20c%200,-0.171066%200.13771737,-0.308784%200.30878335,-0.308784%20z'%20/%3e%3cpath%20id='rect6-2-9-8'%20style='fill:url(%23linearGradient18);stroke-width:0.190988;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.542522;paint-order:stroke%20fill%20markers'%20d='M%200.60575527,42.897755%20H%207.240808%20c%200.1648801,0%200.2976176,0.132737%200.2976176,0.297617%20v%2010.397297%20c%200,0.16488%20-0.1327375,0.297618%20-0.2976176,0.297618%20H%200.60575527%20c%20-0.16488019,0%20-0.29761767,-0.132738%20-0.29761767,-0.297618%20V%2043.195372%20c%200,-0.16488%200.13273748,-0.297617%200.29761767,-0.297617%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer9'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3crect%20style='display:inline;fill:%23716a7b;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='rect32'%20width='71.606865'%20height='150'%20x='0.44656754'%20y='1.4210855e-14'%20ry='12.865973'%20/%3e%3c/g%3e%3cg%20id='layer7'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cg%20id='g34'%20clip-path='url(%23clipPath34)'%3e%3cpath%20id='rect32-7'%20style='display:inline;mix-blend-mode:normal;fill:%239486a7;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter32)'%20d='m%2013.312381,0.50015231%20c%20-6.8593976,0%20-12.3651366,5.50573999%20-12.3651366,12.36513969%20V%20137.13471%20c%200,6.85939%205.505739,12.36514%2012.3651366,12.36514%20h%2045.875234%20c%206.8594,0%2012.36514,-5.50575%2012.36514,-12.36514%20V%2012.865292%20c%200,-6.8593997%20-5.50574,-12.36513969%20-12.36514,-12.36513969%20z'%20/%3e%3cpath%20id='rect32-4'%20style='display:inline;mix-blend-mode:normal;fill:%23f1eef4;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers;filter:url(%23filter33)'%20d='m%2013.312383,0.90038112%20c%20-6.6447174,0%20-11.9667114,5.32043998%20-11.9667114,11.96515988%20V%20137.13495%20c%200,6.64471%205.321994,11.96466%2011.9667114,11.96466%20h%2045.875234%20c%206.64472,0%2011.96671,-5.31995%2011.96671,-11.96466%20V%2012.865541%20c%200,-6.6447199%20-5.32199,-11.96515988%20-11.96671,-11.96515988%20z'%20/%3e%3c/g%3e%3c/g%3e%3cg%20id='layer8'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect34'%20style='fill:%23e7e3ec;fill-opacity:1;stroke:none;stroke-width:13.7539;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.465686;paint-order:stroke%20fill%20markers'%20d='M%2056.059111,0%20V%2015.527734%20H%200.44648437%20v%201.055233%20H%2072.053483%20V%2015.527734%20H%2057.114343%20V%200%20Z%20M%200.44648437,133.41718%20v%201.05523%20H%2015.385624%20v%2015.52774%20h%201.055233%20v%20-15.52774%20h%2055.612626%20v%20-1.05523%20z'%20/%3e%3c/g%3e%3cg%20id='layer6'%20style='display:inline'%20mask='url(%23screenCutout)'%3e%3cpath%20id='rect32-73'%20style='display:inline;fill:%23000000;fill-opacity:1;stroke:none;stroke-width:21.753;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2013.312378,0.97661114%20c%20-6.603655,0%20-11.888676,5.28502136%20-11.888676,11.88868086%20V%20137.13471%20c%200,6.60365%205.285021,11.88868%2011.888676,11.88868%20h%2045.87524%20c%206.60366,0%2011.88868,-5.28503%2011.88868,-11.88868%20V%2012.865292%20c%200,-6.6036595%20-5.28502,-11.88868086%20-11.88868,-11.88868086%20z'%20/%3e%3cpath%20id='path31'%20style='fill:url(%23linearGradient32);stroke:none;stroke-width:1.784;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2029.068268,0.97661114%20c%200.09826,0%200.286648,0.56482346%200.400492,0.56482346%20h%2013.56248%20c%200.113844,0%200.302237,-0.56482346%200.400492,-0.56482346%20z'%20/%3e%3c/g%3e%3cg%20id='layer5'%20style='display:inline'%3e%3cpath%20id='path21'%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.184059;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20d='m%2043.681055,5.0436198%20a%202.7730749,2.7730756%200%200%200%20-2.772958,2.7729573%202.7730749,2.7730756%200%200%200%202.772958,2.7729579%202.7730749,2.7730756%200%200%200%202.772957,-2.7729579%202.7730749,2.7730756%200%200%200%20-2.772957,-2.7729573%20z%20m%200,1.0407633%20a%201.7323073,1.7323078%200%200%201%201.732194,1.732194%201.7323073,1.7323078%200%200%201%20-1.732194,1.7321941%201.7323073,1.7323078%200%200%201%20-1.732194,-1.7321941%201.7323073,1.7323078%200%200%201%201.732194,-1.732194%20z'%20/%3e%3cpath%20id='path21-0'%20style='fill:%23050505;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke%20fill%20markers'%20d='m%20-28.818913,5.0436198%20a%202.7730749,2.7730756%200%200%201%202.772958,2.7729573%202.7730749,2.7730756%200%200%201%20-2.772958,2.7729579%20h%20-7.292578%20a%202.7730749,2.7730756%200%200%201%20-2.772957,-2.7729579%202.7730749,2.7730756%200%200%201%202.772957,-2.7729573%20z%20m%205.17e-4,0.8919352%20h%20-7.293095%20c%20-1.049389,4.46e-5%20-1.880461,0.8316326%20-1.880505,1.8810221%204.4e-5,1.0493897%200.831116,1.8804608%201.880505,1.8805054%20h%207.293095%20c%201.049389,-4.42e-5%201.880977,-0.8311154%201.881022,-1.8805054%20-4.5e-5,-1.0493897%20-0.831633,-1.8809779%20-1.881022,-1.8810221%20z'%20transform='scale(-1,1)'%20/%3e%3ccircle%20style='fill:%23050505;fill-opacity:1;stroke:none;stroke-width:0.241269;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path22'%20cx='43.681053'%20cy='7.8165774'%20r='1.5452632'%20/%3e%3ccircle%20style='fill:url(%23radialGradient25);fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path23'%20cx='43.681053'%20cy='7.8165774'%20r='0.92431802'%20/%3e%3ccircle%20style='fill:%23000000;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-4'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24'%20cx='44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='rotate(15)'%20/%3e%3ccircle%20style='fill:url(%23radialGradient27-6);fill-opacity:0.522059;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:stroke%20fill%20markers'%20id='path24-42'%20cx='-44.215736'%20cy='-3.755255'%20r='0.68189663'%20transform='matrix(-0.96592583,-0.25881905,-0.25881905,0.96592583,0,0)'%20/%3e%3c/g%3e%3c/svg%3e\"","import iphone from './assets/iphone.svg'\n\n/** A phone frame: the artwork plus the exact screen aperture cut into it, in the artwork's own units. */\nexport interface MobileFrameSpec {\n  /** The frame artwork, rendered as `<img>` (never inlined — see the component doc). */\n  src: string\n  /** viewBox size of the artwork. */\n  viewBox: { width: number; height: number }\n  /** The screen aperture inside that viewBox, same units. `radius` is the rendered screen corner. */\n  aperture: { x: number; y: number; width: number; height: number; radius: number }\n  /** Default accessible name of the artwork. */\n  label: string\n}\n\n/**\n * The iPhone frame (Inkscape artwork, 72.5 × 150 units — the source is in mm; aspect 1 / 2.069). The\n * aperture is the `screenCutout` mask path: x 2.9125 → 69.5880, y 2.4649 → 147.5351. Its true corner\n * radius is **10.4004**; the rendered screen uses **10.2004** so the screen's anti-aliased edge sits just\n * inside the bezel with no light leak at the corners (the value the consumer tuned at 1× and 0.5×).\n */\nexport const IPHONE_FRAME: MobileFrameSpec = {\n  src: iphone,\n  viewBox: { width: 72.5, height: 150 },\n  aperture: { x: 2.9125, y: 2.4649, width: 66.6755, height: 145.0702, radius: 10.2004 },\n  label: 'iPhone',\n}\n","import {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { IPHONE_FRAME, type MobileFrameSpec } from './frames'\nimport styles from './MobileFrame.module.css'\n\nexport interface MobileFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** What the phone shows. Laid out at exactly `screenWidth` CSS px, then scaled with the frame. */\n  children?: ReactNode\n  /** The screen's layout width in CSS px — the \"true device width\" the content sees (default `440`). */\n  screenWidth?: number\n  /** Which frame (default `IPHONE_FRAME`). */\n  frame?: MobileFrameSpec\n  /** Fill behind the children (a CSS color / var). Default `var(--tz-color-surface)`. */\n  screenBackground?: string\n  /** Accessible name for the artwork (default `frame.label` + \" preview\"). */\n  alt?: string\n  /** Class for the screen element (the scaled `screenWidth` box), e.g. to give it a font or theme vars. */\n  screenClassName?: string\n  /** Style for the screen element. */\n  screenStyle?: CSSProperties\n  /** Fires with the current scale factor whenever the frame is re-measured. */\n  onScaleChange?: (scale: number) => void\n  /**\n   * Hide the scrollbars of every scroller inside the screen (default `true`) — a real phone has no\n   * permanent scrollbar gutter, so a desktop bar drawn inside the frame breaks the illusion. Scrolling\n   * (wheel / touch) still works. `false` shows them again (e.g. while debugging layout).\n   */\n  hideScrollbars?: boolean\n}\n\n/** The frame's rendered width at which the screen is exactly `screenWidth` px (scale 1). */\nexport const frameWidthFor = (screenWidth: number, frame: MobileFrameSpec): number =>\n  (screenWidth * frame.viewBox.width) / frame.aperture.width\n\n/**\n * A phone mockup that renders any content at a **true device width**. The frame artwork is an `<img>`\n * (never inlined — its Inkscape ids are document-global, so two inlined copies would overwrite each\n * other's gradients); the **screen** is positioned exactly in the artwork's aperture, **laid out at a\n * fixed `screenWidth` CSS px** like a real device, and **scaled** (`transform: scale`) to whatever width\n * the frame gets — so children see a viewport that is exactly `screenWidth` px wide (media queries, `%`\n * widths and `vw` do **not** follow the visual size; use container queries on the screen if needed),\n * while the visual size follows the frame. The root fills its container up to the width at which the\n * screen is a true `screenWidth` (≈478px for the iPhone at 440), and shrinks with it below that — two\n * phones in a `Row` share the row and shrink together. The one measurement (`ResizeObserver` on the root)\n * writes `--mf-scale` straight onto the DOM node (no React state, no re-render of the preview) and\n * reports it via `onScaleChange`. Every CSS number is derived from the `frame` spec as inline custom\n * properties — the stylesheet only reads vars. The component knows nothing about the previewed app's\n * light / dark theme: wrap it in your own provider (**outside** `MobileFrame`, or the var is undefined on\n * the screen element) and pass `screenBackground=\"var(--your-canvas)\"`.\n */\nexport const MobileFrame = forwardRef<HTMLDivElement, MobileFrameProps>(function MobileFrame(\n  {\n    children,\n    screenWidth = 440,\n    frame = IPHONE_FRAME,\n    screenBackground = 'var(--tz-color-surface)',\n    alt,\n    screenClassName,\n    screenStyle,\n    onScaleChange,\n    hideScrollbars = true,\n    className,\n    style,\n    ...props\n  },\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const setRoot = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  const { viewBox, aperture } = frame\n  const frameWidth = frameWidthFor(screenWidth, frame)\n  // geometry as data — derived once from the spec, never typed twice\n  const geometry = {\n    '--mf-aspect': `${viewBox.width} / ${viewBox.height}`,\n    '--mf-max-width': `${frameWidth}px`,\n    '--mf-screen-left': `${(aperture.x / viewBox.width) * 100}%`,\n    '--mf-screen-top': `${(aperture.y / viewBox.height) * 100}%`,\n    '--mf-screen-width': `${screenWidth}px`,\n    '--mf-screen-height': `${(screenWidth * aperture.height) / aperture.width}px`,\n    '--mf-screen-radius': `${(screenWidth * aperture.radius) / aperture.width}px`,\n    '--mf-screen-bg': screenBackground,\n  } as CSSProperties\n\n  // the ONE measurement CSS can't do (divide two lengths into a unitless factor): rendered width →\n  // scale. Written to the node directly so a resize never re-renders the previewed app. SSR-safe.\n  const onScaleChangeRef = useRef(onScaleChange)\n  onScaleChangeRef.current = onScaleChange\n  useLayoutEffect(() => {\n    const el = rootRef.current\n    if (!el || typeof ResizeObserver === 'undefined') return\n    const apply = (width: number) => {\n      if (!(width > 0)) return\n      const scale = width / frameWidth\n      el.style.setProperty('--mf-scale', String(scale))\n      onScaleChangeRef.current?.(scale)\n    }\n    apply(el.getBoundingClientRect().width)\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) apply(entry.contentRect.width)\n    })\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [frameWidth])\n\n  return (\n    <div\n      ref={setRoot}\n      className={clsx(styles.device, className)}\n      style={{ ...geometry, ...style }}\n      {...props}\n    >\n      {/* screen first, so the frame (Dynamic Island, bezel corners) paints over the content */}\n      <div\n        className={clsx(styles.screen, hideScrollbars && styles.hideScrollbars, screenClassName)}\n        style={screenStyle}\n      >\n        {children}\n      </div>\n      <img\n        className={styles.frame}\n        src={frame.src}\n        alt={alt ?? `${frame.label} preview`}\n        draggable={false}\n      />\n    </div>\n  )\n})\n"],"names":["iphone","IPHONE_FRAME","frameWidthFor","screenWidth","frame","MobileFrame","forwardRef","children","screenBackground","alt","screenClassName","screenStyle","onScaleChange","hideScrollbars","className","style","props","ref","rootRef","useRef","setRoot","useCallback","node","viewBox","aperture","frameWidth","geometry","onScaleChangeRef","useLayoutEffect","el","apply","width","scale","_a","observer","entries","entry","jsxs","clsx","styles","jsx"],"mappings":"uFAAAA,EAAe,+tiBCoBFC,EAAgC,CAC3C,IAAKD,EACL,QAAS,CAAE,MAAO,KAAM,OAAQ,GAAA,EAChC,SAAU,CAAE,EAAG,OAAQ,EAAG,OAAQ,MAAO,QAAS,OAAQ,SAAU,OAAQ,OAAA,EAC5E,MAAO,QACT,2ICeaE,EAAgB,CAACC,EAAqBC,IAChDD,EAAcC,EAAM,QAAQ,MAASA,EAAM,SAAS,MAkB1CC,EAAcC,EAAAA,WAA6C,SACtE,CACE,SAAAC,EACA,YAAAJ,EAAc,IACd,MAAAC,EAAQH,EACR,iBAAAO,EAAmB,0BACnB,IAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,GACjB,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAUC,EAAAA,OAA8B,IAAI,EAC5CC,EAAUC,EAAAA,YACbC,GAAgC,CAC/BJ,EAAQ,QAAUI,EACd,OAAOL,GAAQ,WAAYA,EAAIK,CAAI,EAC9BL,MAAS,QAAUK,EAC9B,EACA,CAACL,CAAG,CAAA,EAGA,CAAE,QAAAM,EAAS,SAAAC,CAAA,EAAapB,EACxBqB,EAAavB,EAAcC,EAAaC,CAAK,EAE7CsB,EAAW,CACf,cAAe,GAAGH,EAAQ,KAAK,MAAMA,EAAQ,MAAM,GACnD,iBAAkB,GAAGE,CAAU,KAC/B,mBAAoB,GAAID,EAAS,EAAID,EAAQ,MAAS,GAAG,IACzD,kBAAmB,GAAIC,EAAS,EAAID,EAAQ,OAAU,GAAG,IACzD,oBAAqB,GAAGpB,CAAW,KACnC,qBAAsB,GAAIA,EAAcqB,EAAS,OAAUA,EAAS,KAAK,KACzE,qBAAsB,GAAIrB,EAAcqB,EAAS,OAAUA,EAAS,KAAK,KACzE,iBAAkBhB,CAAA,EAKdmB,EAAmBR,EAAAA,OAAOP,CAAa,EAC7C,OAAAe,EAAiB,QAAUf,EAC3BgB,EAAAA,gBAAgB,IAAM,CACpB,MAAMC,EAAKX,EAAQ,QACnB,GAAI,CAACW,GAAM,OAAO,eAAmB,IAAa,OAClD,MAAMC,EAASC,GAAkB,OAC/B,GAAI,EAAEA,EAAQ,GAAI,OAClB,MAAMC,EAAQD,EAAQN,EACtBI,EAAG,MAAM,YAAY,aAAc,OAAOG,CAAK,CAAC,GAChDC,EAAAN,EAAiB,UAAjB,MAAAM,EAAA,KAAAN,EAA2BK,EAC7B,EACAF,EAAMD,EAAG,sBAAA,EAAwB,KAAK,EACtC,MAAMK,EAAW,IAAI,eAAgBC,GAAY,CAC/C,UAAWC,KAASD,EAASL,EAAMM,EAAM,YAAY,KAAK,CAC5D,CAAC,EACD,OAAAF,EAAS,QAAQL,CAAE,EACZ,IAAMK,EAAS,WAAA,CACxB,EAAG,CAACT,CAAU,CAAC,EAGbY,EAAAA,KAAC,MAAA,CACC,IAAKjB,EACL,UAAWkB,EAAAA,KAAKC,EAAO,OAAQzB,CAAS,EACxC,MAAO,CAAE,GAAGY,EAAU,GAAGX,CAAA,EACxB,GAAGC,EAGJ,SAAA,CAAAwB,EAAAA,IAAC,MAAA,CACC,UAAWF,EAAAA,KAAKC,EAAO,OAAQ1B,GAAkB0B,EAAO,eAAgB7B,CAAe,EACvF,MAAOC,EAEN,SAAAJ,CAAA,CAAA,EAEHiC,EAAAA,IAAC,MAAA,CACC,UAAWD,EAAO,MAClB,IAAKnC,EAAM,IACX,IAAKK,GAAO,GAAGL,EAAM,KAAK,WAC1B,UAAW,EAAA,CAAA,CACb,CAAA,CAAA,CAGN,CAAC"}

package/dist/Modal-CQDcYS-Y.cjs

@@ -0,0 +1,2 @@
+"use strict";const l=require("react/jsx-runtime"),n=require("react"),T=require("clsx"),W=require("./names-BJnFU_5m.cjs"),$=require("./Icon-BVULqOJD.cjs"),H=require("./IconButton-A2B0bqC-.cjs"),X=require("react-dom"),Y=require("./useLockBodyScroll-CIXHZo-Q.cjs"),Z=require("./ConfigProvider-BElY0HuV.cjs"),w="_overlay_gwv2a_6",C={overlay:w},K=n.forwardRef(function({open:a,onClose:s,closeOnBackdrop:N=!0,closeOnEscape:E=!0,lockScroll:j=!0,dim:c,className:u,style:o,children:D,onKeyDown:d,onMouseDown:h,onClick:_,...R},M){const S=n.useRef(null),[A,g]=n.useState(!1);Y.useLockBodyScroll(a&&j),n.useEffect(()=>{if(!a){g(!1);return}const t=requestAnimationFrame(()=>g(!0));return()=>cancelAnimationFrame(t)},[a]);const b=t=>{t.key==="Escape"&&(t.stopPropagation(),E&&(s==null||s())),d==null||d(t)},O=t=>{S.current=t.target,h==null||h(t)},x=t=>{N&&t.target===t.currentTarget&&S.current===t.currentTarget&&(s==null||s()),_==null||_(t)};return!a||typeof document>"u"?null:X.createPortal(l.jsx("div",{ref:M,className:T.clsx(C.overlay,u),"data-open":A?"true":"false",style:c!=null?{"--tz-overlay-dim":c,...o}:o,onKeyDown:b,onMouseDown:O,onClick:x,...R,children:D}),document.body)}),ee="_overlay_1lotx_3",te="_modal_1lotx_25",le="_sm_1lotx_48",re="_md_1lotx_51",ne="_lg_1lotx_54",ae="_fullScreen_1lotx_57",se="_header_1lotx_74",ce="_headerDivided_1lotx_83",oe="_headerMain_1lotx_86",ie="_icon_1lotx_93",ue="_headerText_1lotx_96",de="_title_1lotx_103",fe="_subtitle_1lotx_115",_e="_close_1lotx_127",xe="_body_1lotx_132",me="_footer_1lotx_143",r={overlay:ee,modal:te,sm:le,md:re,lg:ne,fullScreen:ae,header:se,headerDivided:ce,headerMain:oe,icon:ie,headerText:ue,title:de,subtitle:fe,close:_e,body:xe,footer:me},he=new Set(W.ICON_NAMES),I='a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])',be=n.forwardRef(function({open:a,onClose:s,size:N="md",scrollBehavior:E="outside",placement:j="center",title:c,description:u,icon:o,color:D="accent",footer:d,bodyClassName:h,showCloseButton:_=!0,closeOnBackdrop:R=!0,closeOnEscape:M=!0,ariaLabel:S,className:A,style:g,children:b,...O},x){const t=Z.useT(),q=n.useRef(null),P=n.useRef(null),k=n.useRef(null),p=n.useId(),z=n.useId();n.useEffect(()=>{var f,y,v;if(!a)return;const e=document.activeElement,i=((f=P.current)==null?void 0:f.querySelector(I))??((y=k.current)==null?void 0:y.querySelector(I))??((v=q.current)==null?void 0:v.querySelector(I))??q.current;return i==null||i.focus({preventScroll:!0}),()=>{var m;e!=null&&e.isConnected&&((m=e.focus)==null||m.call(e))}},[a]);const V=e=>{q.current=e,typeof x=="function"?x(e):x&&(x.current=e)},F=e=>{if(e.key!=="Tab")return;const i=q.current;if(!i)return;const f=[...i.querySelectorAll(I)].filter(L=>L.offsetParent!==null||L===document.activeElement);if(f.length===0){e.preventDefault(),i.focus();return}const y=f[0],v=f[f.length-1],m=document.activeElement;e.shiftKey&&(m===y||m===i)?(e.preventDefault(),v.focus()):!e.shiftKey&&m===v&&(e.preventDefault(),y.focus())};if(!a)return null;const G=j!=="center",B=o==null?null:typeof o=="string"&&he.has(o)?l.jsx($.Icon,{name:o}):o,J=c!=null||u!=null||B!=null||_,Q=b!=null||d!=null;return l.jsx(K,{open:a,onClose:s,closeOnBackdrop:R,closeOnEscape:M,onKeyDown:F,className:r.overlay,"data-size":N,"data-placement":j,"data-scroll":G?"inside":E,children:l.jsxs("div",{ref:V,className:T.clsx(r.modal,r[N],A),role:"dialog","aria-modal":"true","aria-labelledby":c!=null?p:void 0,"aria-label":c==null?S:void 0,"aria-describedby":u!=null?z:void 0,tabIndex:-1,style:g,...O,children:[J&&l.jsxs("div",{className:T.clsx(r.header,Q&&r.headerDivided),children:[l.jsxs("div",{className:r.headerMain,children:[B!=null&&l.jsx(H.IconButton,{variant:"filled",size:"sm",color:D,nonClickable:!0,"aria-hidden":!0,className:r.icon,children:B}),(c!=null||u!=null)&&l.jsxs("div",{className:r.headerText,children:[c!=null&&l.jsx("div",{id:p,className:r.title,children:c}),u!=null&&l.jsx("div",{id:z,className:r.subtitle,children:u})]})]}),_&&l.jsx(H.IconButton,{variant:"filled",color:"primary",size:"sm",className:r.close,"aria-label":t("common.close"),onClick:s,children:l.jsx($.Icon,{name:"Close"})})]}),b!=null&&l.jsx("div",{ref:P,className:T.clsx(r.body,h),children:b}),d!=null&&l.jsx("div",{ref:k,className:r.footer,children:d})]})})});exports.Modal=be;exports.Overlay=K;
+//# sourceMappingURL=Modal-CQDcYS-Y.cjs.map

package/dist/Modal-CQDcYS-Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-CQDcYS-Y.cjs","sources":["../src/components/Overlay/Overlay.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useLockBodyScroll } from '../../hooks/useLockBodyScroll'\nimport styles from './Overlay.module.css'\n\nexport interface OverlayProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the overlay is mounted + shown — gates the portal and drives the fade-in. */\n  open: boolean\n  /** Requested dismiss — fired on a backdrop click (`closeOnBackdrop`) or Escape (`closeOnEscape`). */\n  onClose?: () => void\n  /** Close when the scrim itself (outside the content) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed while focus is within the overlay. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Lock page scroll while open. Defaults to `true`. */\n  lockScroll?: boolean\n  /** Scrim darkness — the black backdrop's alpha (0–1). Defaults to `0.45`. */\n  dim?: number\n  /** Overlay content — typically a centered dialog / box / media. */\n  children?: ReactNode\n}\n\n/**\n * The shared backdrop primitive behind every dimmed, page-blocking surface (`Modal`, the FileUploader\n * lightbox). Portals a fixed full-viewport scrim to `<body>`, locks page scroll, fades in (opacity keyed\n * off a rAF `visible` flag → `data-open`), and dismisses on **backdrop-click** (gated on the pointer-down\n * AND click both landing on the scrim, so a text-selection drag ending on it doesn't close) / **Escape**\n * (swallowed via `stopPropagation` so it can't reach a React-tree ancestor overlay). Centers its children\n * by default; consumers layer their own padding / scroll / placement via `className` + `data-*` and read\n * the shared `data-open` on the scrim for their own box's enter transform. A consumer `onKeyDown` still\n * fires (after the Escape handling) so it can add e.g. a Tab focus-trap. Internal — no `index.ts`, so it's\n * never exposed as a package subpath; import it via `../Overlay/Overlay`. The ref points at the scrim div.\n */\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(function Overlay(\n  {\n    open,\n    onClose,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    lockScroll = true,\n    dim,\n    className,\n    style,\n    children,\n    onKeyDown,\n    onMouseDown,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const mouseDownTarget = useRef<EventTarget | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open && lockScroll)\n\n  // enter animation: flip `visible` on the frame after mount so the opacity transition runs\n  useEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [open])\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      // the overlay owns the page — swallow Escape so it can't reach a React-tree ancestor overlay (e.g.\n      // an outer Modal) even when this one isn't Escape-dismissible\n      event.stopPropagation()\n      if (closeOnEscape) onClose?.()\n    }\n    onKeyDown?.(event)\n  }\n  // remember where the pointer went down so the click handler can tell a scrim click from a drag that\n  // started inside the content and ended on the scrim (a text-selection drag)\n  const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    mouseDownTarget.current = event.target\n    onMouseDown?.(event)\n  }\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (\n      closeOnBackdrop &&\n      event.target === event.currentTarget &&\n      mouseDownTarget.current === event.currentTarget\n    ) {\n      onClose?.()\n    }\n    onClick?.(event)\n  }\n\n  if (!open || typeof document === 'undefined') return null\n\n  return createPortal(\n    <div\n      ref={ref}\n      className={clsx(styles.overlay, className)}\n      data-open={visible ? 'true' : 'false'}\n      style={dim != null ? ({ '--tz-overlay-dim': dim, ...style } as CSSProperties) : style}\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n      {...props}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Overlay } from '../Overlay/Overlay'\nimport styles from './Modal.module.css'\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'fullScreen'\nexport type ModalScrollBehavior = 'inside' | 'outside'\nexport type ModalPlacement = 'center' | 'left' | 'right'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\n/** Focusable descendants used by the focus trap + initial focus. */\n// every clause excludes tabindex=\"-1\" so decorative/programmatic-only nodes (e.g. the header's\n// `nonClickable aria-hidden` IconButton) don't count as trap boundaries or initial-focus targets\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not(:disabled):not([tabindex=\"-1\"]), textarea:not(:disabled):not([tabindex=\"-1\"]), input:not(:disabled):not([tabindex=\"-1\"]), select:not(:disabled):not([tabindex=\"-1\"]), [tabindex]:not([tabindex=\"-1\"])'\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** Whether the modal is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Called when a dismiss is requested (close button, backdrop click, or Escape). */\n  onClose: () => void\n  /** Preset width: `sm` 360 · `md` 620 · `lg` 900 px, or `fullScreen` (fills the viewport). Defaults to `md`. */\n  size?: ModalSize\n  /**\n   * Where overflow scrolls when the content is taller than the viewport: `outside` (default — the\n   * whole dialog grows and the overlay/page scrolls) or `inside` (the body scrolls while the header +\n   * footer stay pinned). Ignored for side-drawer placements (`left`/`right`), which always scroll inside.\n   */\n  scrollBehavior?: ModalScrollBehavior\n  /**\n   * Where the dialog sits: `center` (default — the standard centered modal), or `left` / `right` to\n   * make it a **full-height side drawer** (sheet) that slides in from that edge. A drawer takes its\n   * width from `size`, fills the viewport height, and always scrolls its body inside (header + footer\n   * stay pinned).\n   */\n  placement?: ModalPlacement\n  /** Header title. When set, labels the dialog (`aria-labelledby`). */\n  title?: ReactNode\n  /** Muted description line under the title (e.g. a confirm prompt). */\n  description?: ReactNode\n  /** Leading header icon shown in a tinted box (like `Card`) — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Theme color that tints the leading icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */\n  footer?: ReactNode\n  /** Extra class on the scrollable body element — to tune its padding / layout (e.g. a compact confirm). */\n  bodyClassName?: string\n  /** Show the header × close button. Defaults to `true`. */\n  showCloseButton?: boolean\n  /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Accessible label — used when there's no `title`. */\n  ariaLabel?: string\n  /** Dialog body. */\n  children?: ReactNode\n}\n\n/**\n * A centered, backdrop-dimmed overlay dialog. Portaled to `<body>`, it locks page scroll while open,\n * traps Tab focus inside, restores focus to the previously-focused element on close, and dismisses on\n * close button / backdrop click / Escape (each toggleable). Sizes are `sm`/`md`/`lg` (max-width caps)\n * or `fullScreen`; `scrollBehavior` picks inside-body vs. whole-dialog scrolling. `placement` turns it\n * into a full-height side drawer (`left`/`right`) that slides in from the edge. The header mirrors\n * `Card` — an optional tinted `icon` box + `title` + `description`. Controlled by `open` + `onClose`.\n * The forwarded ref points at the dialog element.\n *\n * @example\n * const { isOpen, open, close } = useDisclosure()\n * <Modal open={isOpen} onClose={close} title=\"Edit\" footer={<Button onClick={close}>Done</Button>}>\n *   …\n * </Modal>\n */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  {\n    open,\n    onClose,\n    size = 'md',\n    scrollBehavior = 'outside',\n    placement = 'center',\n    title,\n    description,\n    icon,\n    color = 'accent',\n    footer,\n    bodyClassName,\n    showCloseButton = true,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    ariaLabel,\n    className,\n    style,\n    children,\n    ...props\n  },\n  forwardedRef,\n) {\n  const t = useT()\n  const panelRef = useRef<HTMLDivElement | null>(null)\n  const bodyRef = useRef<HTMLDivElement | null>(null)\n  const footerRef = useRef<HTMLDivElement | null>(null)\n  const titleId = useId()\n  const descId = useId()\n\n  // portal + scrim + scroll-lock + fade-in + backdrop-dismiss are handled by the shared `<Overlay>`\n\n  // focus management: move focus into the dialog on open — prefer a body field (form modals land on\n  // their first input), else the first footer action (confirm dialogs land on Cancel/Confirm, not the\n  // × button), else any control, else the dialog itself; restore focus to the trigger on close\n  useEffect(() => {\n    if (!open) return\n    const previouslyFocused = document.activeElement as HTMLElement | null\n    const target =\n      bodyRef.current?.querySelector<HTMLElement>(FOCUSABLE) ??\n      footerRef.current?.querySelector<HTMLElement>(FOCUSABLE) ??\n      panelRef.current?.querySelector<HTMLElement>(FOCUSABLE) ??\n      panelRef.current\n    // preventScroll so opening an `outside`-scroll modal doesn't jump the overlay to a below-fold control\n    target?.focus({ preventScroll: true })\n    // only restore if the element is still mounted (it may have unmounted while the modal was open)\n    return () => {\n      if (previouslyFocused?.isConnected) previouslyFocused.focus?.()\n    }\n  }, [open])\n\n  // merge the panel ref (positioning/focus) with the forwarded ref (consumer access)\n  const setPanelRef = (node: HTMLDivElement | null) => {\n    panelRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // trap Tab within the dialog so focus can't strand on the locked page behind it (Escape + backdrop\n  // dismissal live in `<Overlay>`; this fires after the overlay's own handler)\n  const handleTabTrap = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const panel = panelRef.current\n    if (!panel) return\n    const focusables = [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(\n      (el) => el.offsetParent !== null || el === document.activeElement,\n    )\n    if (focusables.length === 0) {\n      event.preventDefault()\n      panel.focus()\n      return\n    }\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    const active = document.activeElement\n    if (event.shiftKey && (active === first || active === panel)) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  // a side drawer (left/right) is always full-height with the body scrolling inside (header/footer pinned)\n  const isDrawer = placement !== 'center'\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} />\n    ) : (\n      icon\n    )\n\n  const hasHeader = title != null || description != null || renderedIcon != null || showCloseButton\n  // a divider sets the header apart from the body/footer, like Card\n  const headerDivided = children != null || footer != null\n\n  return (\n    <Overlay\n      open={open}\n      onClose={onClose}\n      closeOnBackdrop={closeOnBackdrop}\n      closeOnEscape={closeOnEscape}\n      onKeyDown={handleTabTrap}\n      className={styles.overlay}\n      data-size={size}\n      data-placement={placement}\n      data-scroll={isDrawer ? 'inside' : scrollBehavior}\n    >\n      <div\n        ref={setPanelRef}\n        className={clsx(styles.modal, styles[size], className)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title != null ? titleId : undefined}\n        aria-label={title == null ? ariaLabel : undefined}\n        aria-describedby={description != null ? descId : undefined}\n        tabIndex={-1}\n        style={style as CSSProperties}\n        {...props}\n      >\n        {hasHeader && (\n          <div className={clsx(styles.header, headerDivided && styles.headerDivided)}>\n            <div className={styles.headerMain}>\n              {renderedIcon != null && (\n                <IconButton\n                  variant=\"filled\"\n                  size=\"sm\"\n                  color={color}\n                  nonClickable\n                  aria-hidden\n                  className={styles.icon}\n                >\n                  {renderedIcon}\n                </IconButton>\n              )}\n              {(title != null || description != null) && (\n                <div className={styles.headerText}>\n                  {title != null && (\n                    <div id={titleId} className={styles.title}>\n                      {title}\n                    </div>\n                  )}\n                  {description != null && (\n                    <div id={descId} className={styles.subtitle}>\n                      {description}\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n            {showCloseButton && (\n              <IconButton\n                variant=\"filled\"\n                color=\"primary\"\n                size=\"sm\"\n                className={styles.close}\n                aria-label={t('common.close')}\n                onClick={onClose}\n              >\n                <Icon name=\"Close\" />\n              </IconButton>\n            )}\n          </div>\n        )}\n        {children != null && (\n          <div ref={bodyRef} className={clsx(styles.body, bodyClassName)}>\n            {children}\n          </div>\n        )}\n        {footer != null && (\n          <div ref={footerRef} className={styles.footer}>\n            {footer}\n          </div>\n        )}\n      </div>\n    </Overlay>\n  )\n})\n"],"names":["Overlay","forwardRef","open","onClose","closeOnBackdrop","closeOnEscape","lockScroll","dim","className","style","children","onKeyDown","onMouseDown","onClick","props","ref","mouseDownTarget","useRef","visible","setVisible","useState","useLockBodyScroll","useEffect","raf","handleKeyDown","event","handleMouseDown","handleClick","createPortal","jsx","clsx","styles","ICON_NAME_SET","ICON_NAMES","FOCUSABLE","Modal","size","scrollBehavior","placement","title","description","icon","color","footer","bodyClassName","showCloseButton","ariaLabel","forwardedRef","useT","panelRef","bodyRef","footerRef","titleId","useId","descId","previouslyFocused","target","_a","_b","_c","setPanelRef","node","handleTabTrap","panel","focusables","el","first","last","active","isDrawer","renderedIcon","Icon","hasHeader","headerDivided","jsxs","IconButton"],"mappings":"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"}

package/dist/Modal-cz6JIsZn.js

@@ -0,0 +1,196 @@
+import { jsx as a, jsxs as T } from "react/jsx-runtime";
+import { forwardRef as V, useRef as E, useState as Z, useEffect as F, useId as H } from "react";
+import { clsx as D } from "clsx";
+import { a as w } from "./names-r21QPjcU.js";
+import { I as K } from "./Icon-DaTvzLBu.js";
+import { I as U } from "./IconButton-Dq17Fekm.js";
+import { createPortal as C } from "react-dom";
+import { u as ee } from "./useLockBodyScroll-DwBILLPK.js";
+import { a as te } from "./ConfigProvider-B_RSn9bb.js";
+const le = "_overlay_gwv2a_6", ae = {
+  overlay: le
+}, re = V(function({
+  open: r,
+  onClose: n,
+  closeOnBackdrop: v = !0,
+  closeOnEscape: M = !0,
+  lockScroll: N = !0,
+  dim: s,
+  className: i,
+  style: c,
+  children: A,
+  onKeyDown: d,
+  onMouseDown: h,
+  onClick: f,
+  ...O
+}, q) {
+  const S = E(null), [P, g] = Z(!1);
+  ee(r && N), F(() => {
+    if (!r) {
+      g(!1);
+      return;
+    }
+    const t = requestAnimationFrame(() => g(!0));
+    return () => cancelAnimationFrame(t);
+  }, [r]);
+  const b = (t) => {
+    t.key === "Escape" && (t.stopPropagation(), M && (n == null || n())), d == null || d(t);
+  }, k = (t) => {
+    S.current = t.target, h == null || h(t);
+  }, m = (t) => {
+    v && t.target === t.currentTarget && S.current === t.currentTarget && (n == null || n()), f == null || f(t);
+  };
+  return !r || typeof document > "u" ? null : C(
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: q,
+        className: D(ae.overlay, i),
+        "data-open": P ? "true" : "false",
+        style: s != null ? { "--tz-overlay-dim": s, ...c } : c,
+        onKeyDown: b,
+        onMouseDown: k,
+        onClick: m,
+        ...O,
+        children: A
+      }
+    ),
+    document.body
+  );
+}), ne = "_overlay_1lotx_3", se = "_modal_1lotx_25", ce = "_sm_1lotx_48", oe = "_md_1lotx_51", ie = "_lg_1lotx_54", de = "_fullScreen_1lotx_57", ue = "_header_1lotx_74", fe = "_headerDivided_1lotx_83", me = "_headerMain_1lotx_86", _e = "_icon_1lotx_93", he = "_headerText_1lotx_96", be = "_title_1lotx_103", xe = "_subtitle_1lotx_115", ye = "_close_1lotx_127", ve = "_body_1lotx_132", Ne = "_footer_1lotx_143", l = {
+  overlay: ne,
+  modal: se,
+  sm: ce,
+  md: oe,
+  lg: ie,
+  fullScreen: de,
+  header: ue,
+  headerDivided: fe,
+  headerMain: me,
+  icon: _e,
+  headerText: he,
+  title: be,
+  subtitle: xe,
+  close: ye,
+  body: ve,
+  footer: Ne
+}, Se = new Set(w), I = 'a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])', qe = V(function({
+  open: r,
+  onClose: n,
+  size: v = "md",
+  scrollBehavior: M = "outside",
+  placement: N = "center",
+  title: s,
+  description: i,
+  icon: c,
+  color: A = "accent",
+  footer: d,
+  bodyClassName: h,
+  showCloseButton: f = !0,
+  closeOnBackdrop: O = !0,
+  closeOnEscape: q = !0,
+  ariaLabel: S,
+  className: P,
+  style: g,
+  children: b,
+  ...k
+}, m) {
+  const t = te(), p = E(null), R = E(null), j = E(null), B = H(), L = H();
+  F(() => {
+    var u, x, y;
+    if (!r) return;
+    const e = document.activeElement, o = ((u = R.current) == null ? void 0 : u.querySelector(I)) ?? ((x = j.current) == null ? void 0 : x.querySelector(I)) ?? ((y = p.current) == null ? void 0 : y.querySelector(I)) ?? p.current;
+    return o == null || o.focus({ preventScroll: !0 }), () => {
+      var _;
+      e != null && e.isConnected && ((_ = e.focus) == null || _.call(e));
+    };
+  }, [r]);
+  const J = (e) => {
+    p.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+  }, Q = (e) => {
+    if (e.key !== "Tab") return;
+    const o = p.current;
+    if (!o) return;
+    const u = [...o.querySelectorAll(I)].filter(
+      ($) => $.offsetParent !== null || $ === document.activeElement
+    );
+    if (u.length === 0) {
+      e.preventDefault(), o.focus();
+      return;
+    }
+    const x = u[0], y = u[u.length - 1], _ = document.activeElement;
+    e.shiftKey && (_ === x || _ === o) ? (e.preventDefault(), y.focus()) : !e.shiftKey && _ === y && (e.preventDefault(), x.focus());
+  };
+  if (!r) return null;
+  const W = N !== "center", z = c == null ? null : typeof c == "string" && Se.has(c) ? /* @__PURE__ */ a(K, { name: c }) : c, X = s != null || i != null || z != null || f, Y = b != null || d != null;
+  return /* @__PURE__ */ a(
+    re,
+    {
+      open: r,
+      onClose: n,
+      closeOnBackdrop: O,
+      closeOnEscape: q,
+      onKeyDown: Q,
+      className: l.overlay,
+      "data-size": v,
+      "data-placement": N,
+      "data-scroll": W ? "inside" : M,
+      children: /* @__PURE__ */ T(
+        "div",
+        {
+          ref: J,
+          className: D(l.modal, l[v], P),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": s != null ? B : void 0,
+          "aria-label": s == null ? S : void 0,
+          "aria-describedby": i != null ? L : void 0,
+          tabIndex: -1,
+          style: g,
+          ...k,
+          children: [
+            X && /* @__PURE__ */ T("div", { className: D(l.header, Y && l.headerDivided), children: [
+              /* @__PURE__ */ T("div", { className: l.headerMain, children: [
+                z != null && /* @__PURE__ */ a(
+                  U,
+                  {
+                    variant: "filled",
+                    size: "sm",
+                    color: A,
+                    nonClickable: !0,
+                    "aria-hidden": !0,
+                    className: l.icon,
+                    children: z
+                  }
+                ),
+                (s != null || i != null) && /* @__PURE__ */ T("div", { className: l.headerText, children: [
+                  s != null && /* @__PURE__ */ a("div", { id: B, className: l.title, children: s }),
+                  i != null && /* @__PURE__ */ a("div", { id: L, className: l.subtitle, children: i })
+                ] })
+              ] }),
+              f && /* @__PURE__ */ a(
+                U,
+                {
+                  variant: "filled",
+                  color: "primary",
+                  size: "sm",
+                  className: l.close,
+                  "aria-label": t("common.close"),
+                  onClick: n,
+                  children: /* @__PURE__ */ a(K, { name: "Close" })
+                }
+              )
+            ] }),
+            b != null && /* @__PURE__ */ a("div", { ref: R, className: D(l.body, h), children: b }),
+            d != null && /* @__PURE__ */ a("div", { ref: j, className: l.footer, children: d })
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  qe as M,
+  re as O
+};
+//# sourceMappingURL=Modal-cz6JIsZn.js.map