npm - @techzyapp/ui-library - Versions diffs - 1.0.23 → 1.0.27 - Mend

@techzyapp/ui-library 1.0.23 → 1.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (510) hide show

package/dist/MobileFrame-8FSsYA_w.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "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)=>yn.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.width100}%`,"--mf-screen-top":`${r.y/s.height100}%`,"--mf-screen-width":`${o}px`,"--mf-screen-height":`${or.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;
2	+ //# sourceMappingURL=MobileFrame-Dsfgd_4k.cjs.map

package/dist/MobileFrame-Dsfgd_4k.cjs.map ADDED Viewed

@@ -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--e2qGisF.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";const r=require("react/jsx-runtime"),l=require("react"),O=require("clsx"),Q=require("./names-BJnFU_5m.cjs"),L=require("./Icon-BVULqOJD.cjs"),$=require("./IconButton-B87ipBK3.cjs"),W=require("react-dom"),X=require("./useLockBodyScroll-CIXHZo-Q.cjs"),Y=require("./ConfigProvider-BicoaBLj.cjs"),Z="_overlay_gwv2a_6",w={overlay:Z},H=l.forwardRef(function({open:a,onClose:s,closeOnBackdrop:N=!0,closeOnEscape:q=!0,lockScroll:j=!0,dim:c,className:u,style:o,children:I,onKeyDown:d,onMouseDown:_,onClick:b,...T},E){const S=l.useRef(null),[D,h]=l.useState(!1);X.useLockBodyScroll(a&&j),l.useEffect(()=>{if(!a){h(!1);return}const e=requestAnimationFrame(()=>h(!0));return()=>cancelAnimationFrame(e)},[a]);const R=e=>{e.key==="Escape"&&(e.stopPropagation(),q&&(s==null\|\|s())),d==null\|\|d(e)},m=e=>{S.current=e.target,_==null\|\|_(e)},M=e=>{N&&e.target===e.currentTarget&&S.current===e.currentTarget&&(s==null\|\|s()),b==null\|\|b(e)};return!a\|\|typeof document>"u"?null:W.createPortal(r.jsx("div",{ref:E,className:O.clsx(w.overlay,u),"data-open":D?"true":"false",style:c!=null?{"--tz-overlay-dim":c,...o}:o,onKeyDown:R,onMouseDown:m,onClick:M,...T,children:I}),document.body)}),C="_overlay_1tvoh_3",ee="_modal_1tvoh_25",te="_sm_1tvoh_48",re="_md_1tvoh_51",ne="_lg_1tvoh_54",le="_fullScreen_1tvoh_57",ae="_header_1tvoh_74",se="_headerDivided_1tvoh_83",ce="_headerMain_1tvoh_86",oe="_icon_1tvoh_93",ie="_headerText_1tvoh_96",ue="_title_1tvoh_103",de="_subtitle_1tvoh_115",fe="_close_1tvoh_127",_e="_body_1tvoh_132",he="_footer_1tvoh_143",n={overlay:C,modal:ee,sm:te,md:re,lg:ne,fullScreen:le,header:ae,headerDivided:se,headerMain:ce,icon:oe,headerText:ie,title:ue,subtitle:de,close:fe,body:_e,footer:he},me=new Set(Q.ICON_NAMES),g='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"])',ve=l.forwardRef(function({open:a,onClose:s,size:N="md",scrollBehavior:q="outside",placement:j="center",title:c,description:u,icon:o,color:I="accent",footer:d,showCloseButton:_=!0,closeOnBackdrop:b=!0,closeOnEscape:T=!0,ariaLabel:E,className:S,style:D,children:h,...R},m){const M=Y.useT(),e=l.useRef(null),B=l.useRef(null),P=l.useRef(null),k=l.useId(),p=l.useId();l.useEffect(()=>{var f,x,y;if(!a)return;const t=document.activeElement,i=((f=B.current)==null?void 0:f.querySelector(g))??((x=P.current)==null?void 0:x.querySelector(g))??((y=e.current)==null?void 0:y.querySelector(g))??e.current;return i==null\|\|i.focus({preventScroll:!0}),()=>{var v;t!=null&&t.isConnected&&((v=t.focus)==null\|\|v.call(t))}},[a]);const U=t=>{e.current=t,typeof m=="function"?m(t):m&&(m.current=t)},V=t=>{if(t.key!=="Tab")return;const i=e.current;if(!i)return;const f=[...i.querySelectorAll(g)].filter(z=>z.offsetParent!==null\|\|z===document.activeElement);if(f.length===0){t.preventDefault(),i.focus();return}const x=f[0],y=f[f.length-1],v=document.activeElement;t.shiftKey&&(v===x\|\|v===i)?(t.preventDefault(),y.focus()):!t.shiftKey&&v===y&&(t.preventDefault(),x.focus())};if(!a)return null;const F=j!=="center",A=o==null?null:typeof o=="string"&&me.has(o)?r.jsx(L.Icon,{name:o}):o,G=c!=null\|\|u!=null\|\|A!=null\|\|_,J=h!=null\|\|d!=null;return r.jsx(H,{open:a,onClose:s,closeOnBackdrop:b,closeOnEscape:T,onKeyDown:V,className:n.overlay,"data-size":N,"data-placement":j,"data-scroll":F?"inside":q,children:r.jsxs("div",{ref:U,className:O.clsx(n.modal,n[N],S),role:"dialog","aria-modal":"true","aria-labelledby":c!=null?k:void 0,"aria-label":c==null?E:void 0,"aria-describedby":u!=null?p:void 0,tabIndex:-1,style:D,...R,children:[G&&r.jsxs("div",{className:O.clsx(n.header,J&&n.headerDivided),children:[r.jsxs("div",{className:n.headerMain,children:[A!=null&&r.jsx($.IconButton,{variant:"filled",size:"sm",color:I,nonClickable:!0,"aria-hidden":!0,className:n.icon,children:A}),(c!=null\|\|u!=null)&&r.jsxs("div",{className:n.headerText,children:[c!=null&&r.jsx("div",{id:k,className:n.title,children:c}),u!=null&&r.jsx("div",{id:p,className:n.subtitle,children:u})]})]}),_&&r.jsx($.IconButton,{variant:"filled",color:"primary",size:"sm",className:n.close,"aria-label":M("common.close"),onClick:s,children:r.jsx(L.Icon,{name:"Close"})})]}),h!=null&&r.jsx("div",{ref:B,className:n.body,children:h}),d!=null&&r.jsx("div",{ref:P,className:n.footer,children:d})]})})});exports.Modal=ve;exports.Overlay=H;
2	+ //# sourceMappingURL=Modal--e2qGisF.cjs.map

package/dist/{Modal-DXZdMmJh.cjs.map → Modal--e2qGisF.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal-DXZdMmJh.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 /* 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 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={styles.body}>\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","showCloseButton","ariaLabel","forwardedRef","t","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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"}
1	+ {"version":3,"file":"Modal--e2qGisF.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 /* 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 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={styles.body}>\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","showCloseButton","ariaLabel","forwardedRef","t","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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"}