@fanvue/ui 3.5.0 → 3.7.0

package/dist/components/Logo/agenciesIcon.mjs

@@ -0,0 +1,6 @@
+"use client";
+const AGENCIES_ICON_SVG = '<svg width="100%" height="100%" style="display:block" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g clip-path="url(#a)"><path fill="#49f264" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z"/><path fill="url(#b)" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z" style="mix-blend-mode:lighten"/><path fill="url(#c)" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z"/><g style="mix-blend-mode:color-dodge"><mask id="e" width="32" height="32" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="url(#d)" d="M0 0h32v32H0z"/></mask><g mask="url(#e)"><path fill="url(#f)" d="M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z"/></g></g><path stroke="url(#g)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><path stroke="url(#h)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><path stroke="url(#i)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><path stroke="url(#j)" stroke-width=".384064" d="M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z"/><g fill-rule="evenodd" clip-rule="evenodd" filter="url(#k)"><path fill="url(#l)" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z"/><path fill="url(#m)" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z" style="mix-blend-mode:lighten"/></g><path fill="#000" fill-opacity=".01" fill-rule="evenodd" clip-rule="evenodd" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z" clip-rule="evenodd"/><path stroke="url(#n)" stroke-width=".2" d="M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z"/><path stroke="url(#o)" stroke-width=".2" d="M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z"/><mask id="q" width="32" height="32" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="url(#p)" d="M0 0h32v32H0z"/></mask><g mask="url(#q)"><path fill="url(#r)" fill-rule="evenodd" clip-rule="evenodd" d="M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z" clip-rule="evenodd"/></g><rect width="32" height="32" fill="#9772ff" rx="9" style="mix-blend-mode:hue"/></g><defs><radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="matrix(0 23.9175 -30.8218 0 16.1649 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#80f593"/><stop offset="1" stop-color="#49f264"/></radialGradient><radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="matrix(0 -8.2 26.3263 0 16 32)" gradientUnits="userSpaceOnUse"><stop stop-color="#0ec833"/><stop offset="1" stop-color="#49f264" stop-opacity="0"/></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientTransform="rotate(90 8 8)scale(16 216.921)" gradientUnits="userSpaceOnUse"><stop stop-color="#acf6b9"/><stop offset="1" stop-color="#49f264"/></radialGradient><radialGradient id="h" cx="0" cy="0" r="1" gradientTransform="matrix(0 -16 194.49 0 16 32)" gradientUnits="userSpaceOnUse"><stop stop-color="#80f593"/><stop offset="1" stop-color="#49f264" stop-opacity="0"/></radialGradient><radialGradient id="m" cx="0" cy="0" r="1" gradientTransform="matrix(-.05865 17.4934 -29.59743 -.09923 16.4 7.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".05"/><stop offset=".746382" stop-color="#fff" stop-opacity=".2"/></radialGradient><radialGradient id="n" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.4 -19.5245 0 16.4 7.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".4"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="o" cx="0" cy="0" r="1" gradientTransform="matrix(.4 -12.20004 70.05845 2.29703 16 25.2)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="f" x1="16" x2="16" y1="0" y2="32" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".95"/><stop offset=".317308" stop-color="#fff" stop-opacity=".5"/><stop offset="1" stop-color="#fff" stop-opacity=".95"/></linearGradient><linearGradient id="i" x1="16" x2="16" y1="32" y2="31.6" gradientUnits="userSpaceOnUse"><stop stop-color="#acf6b9"/><stop offset="1" stop-color="#49f264" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="16" x2="16" y1=".4" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#49f264" stop-opacity="0"/><stop offset="1" stop-color="#d4f7da"/></linearGradient><linearGradient id="l" x1="16.4" x2="16.4" y1="7.6" y2="20.2" gradientUnits="userSpaceOnUse"><stop stop-color="#2e2e2e"/><stop offset="1" stop-color="#151515"/></linearGradient><linearGradient id="r" x1="16.4" x2="16.4" y1="2.4" y2="25.2" gradientUnits="userSpaceOnUse"><stop stop-color="#737373"/><stop offset="1" stop-color="#333"/></linearGradient><pattern id="d" width="1" height="1" patternContentUnits="objectBoundingBox"><use xlink:href="#s" transform="scale(.00156)"/></pattern><pattern id="p" width="1" height="1" patternContentUnits="objectBoundingBox"><use xlink:href="#s" transform="scale(.00156)"/></pattern><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath><filter id="k" width="29.9125" height="27.7864" x="4.38512" y="7.30703" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".4"/><feGaussianBlur stdDeviation=".4"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.48 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".8" dy="1.2"/><feGaussianBlur stdDeviation=".8"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.42 0"/><feBlend in2="effect1_dropShadow_7301_30525" result="effect2_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1.6" dy="2.8"/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.24 0"/><feBlend in2="effect2_dropShadow_7301_30525" result="effect3_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2.8" dy="4.8"/><feGaussianBlur stdDeviation="1.2"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.07 0"/><feBlend in2="effect3_dropShadow_7301_30525" result="effect4_dropShadow_7301_30525"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="4.4" dy="7.6"/><feGaussianBlur stdDeviation="1.2"/><feColorMatrix values="0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.01 0"/><feBlend in2="effect4_dropShadow_7301_30525" result="effect5_dropShadow_7301_30525"/><feBlend in="SourceGraphic" in2="effect5_dropShadow_7301_30525" result="shape"/></filter></defs></svg>';
+export {
+  AGENCIES_ICON_SVG
+};
+//# sourceMappingURL=agenciesIcon.mjs.map

package/dist/components/Logo/agenciesIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agenciesIcon.mjs","sources":["../../../src/components/Logo/agenciesIcon.ts"],"sourcesContent":["// Fanvue Agencies gradient icon, exported from Figma (vector, raster stripped). The purple\n// is produced by a `mix-blend-mode:hue` layer over the green base, matching the brand spec.\nexport const AGENCIES_ICON_SVG =\n  '<svg width=\"100%\" height=\"100%\" style=\"display:block\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g clip-path=\"url(#a)\"><path fill=\"#49f264\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\"/><path fill=\"url(#b)\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\" style=\"mix-blend-mode:lighten\"/><path fill=\"url(#c)\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\"/><g style=\"mix-blend-mode:color-dodge\"><mask id=\"e\" width=\"32\" height=\"32\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"url(#d)\" d=\"M0 0h32v32H0z\"/></mask><g mask=\"url(#e)\"><path fill=\"url(#f)\" d=\"M0 9.21753C0 4.12683 4.12683 0 9.21753 0H22.7825C27.8732 0 32 4.12683 32 9.21753V22.7825C32 27.8732 27.8732 32 22.7825 32H9.21753C4.12683 32 0 27.8732 0 22.7825z\"/></g></g><path stroke=\"url(#g)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><path stroke=\"url(#h)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><path stroke=\"url(#i)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><path stroke=\"url(#j)\" stroke-width=\".384064\" d=\"M9.21777.192383H22.7822c4.9847 0 9.0254 4.040747 9.0254 9.025387V22.7822c0 4.9847-4.0407 9.0254-9.0254 9.0254H9.21777c-4.98464 0-9.025387-4.0407-9.025387-9.0254V9.21777c0-4.98464 4.040747-9.025387 9.025387-9.025387Z\"/><g fill-rule=\"evenodd\" clip-rule=\"evenodd\" filter=\"url(#k)\"><path fill=\"url(#l)\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\"/><path fill=\"url(#m)\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\" style=\"mix-blend-mode:lighten\"/></g><path fill=\"#000\" fill-opacity=\".01\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\" clip-rule=\"evenodd\"/><path stroke=\"url(#n)\" stroke-width=\".2\" d=\"M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z\"/><path stroke=\"url(#o)\" stroke-width=\".2\" d=\"M19.1363 7.80664h7.3975c.5165.00015.8647.43888.8642.91602-.0004.2358-.0878.47842-.2832.6748-.1956.19642-.5063.35292-.9639.40527-.2461.02816-.6967.09198-1.3154.17579-.6197.08398-1.4106.18888-2.3398.30078h-.001c-.8847.1115-2.3314.3019-3.3623.7881-.5151.2429-.944.5683-1.1377 1.0107-.1965.4495-.1391.9935.2598 1.6446l.0039.0068.0058.0068c.6027.6904 1.5336.9866 2.3584 1.21.4178.1131.8057.2068 1.127.3223.3232.1161.5549.2466.6758.4189l.0009.002c.1808.2467.1905.4956.1075.7177-.0849.2269-.2685.4285-.4747.5606-.3192.2017-.7339.351-1.2226.4853-.4895.1345-1.0406.2513-1.6367.3955-1.1874.2873-2.5304.677-3.7832 1.5059-.8547.5703-1.6243 1.4859-2.2471 2.3564-.6205.8674-1.1094 1.7126-1.3828 2.1231l-.001.001c-.197.299-.4627.5907-.7607.8066-.2989.2166-.623.3516-.9375.3516h-.0137c-.31124 0-.53407-.1321-.66602-.3272-.13357-.1975-.1799-.4687-.11524-.7539v-.001c.0446-.206.13595-.5142.24024-.8867.10355-.3699.21853-.7984.30468-1.2363.08607-.4375.14448-.8885.13575-1.3027-.00875-.413-.08519-.7999-.27735-1.1016-.54613-.8525-1.49407-1.2105-2.35156-1.4609-.43536-.1272-.84117-.2245-1.18164-.3448-.34146-.1206-.58746-.2553-.71485-.4375-.19178-.2797-.19985-.5478-.09863-.7871.10381-.2452.32707-.4687.6084-.6377l.00195-.001c.31549-.2015.70908-.3411 1.16797-.4619.46026-.1211.97354-.2206 1.53321-.3476 1.04421-.2371 2.22539-.565 3.40139-1.294l.2343-.1513c1.3906-.9091 2.6595-2.7466 3.3711-3.83598.5042-.7709.8527-1.21602 1.3262-1.47558.4739-.25964 1.0875-.34179 2.1426-.3418Z\"/><mask id=\"q\" width=\"32\" height=\"32\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"url(#p)\" d=\"M0 0h32v32H0z\"/></mask><g mask=\"url(#q)\"><path fill=\"url(#r)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.0735 25.0934c-.68532 0-1.01866-.588-.8788-1.2039.18182-.8399 1.1306-3.3317.41726-4.4516-1.04897-1.6378-3.65855-1.3998-4.24597-2.2398-.42339-.6163-.04608-1.2161.53963-1.5678 1.3147-.8399 3.86019-.602 6.33578-2.2538 1.3706-.8959 2.6294-2.7157 3.3427-3.80764 1.007-1.53986 1.4405-1.86183 3.5525-1.86183h7.3969c1.1649 0 1.5298 1.97802-.3712 2.19546-.4895.056-1.7949.25201-3.6551.47591-1.7762.224-5.7203.7583-4.1679 3.2921 1.1609 1.3298 3.6085 1.1619 4.1679 1.9598.4047.5523.0467 1.1398-.3939 1.422-1.3287.8399-4.1656.7478-6.6411 2.3856-1.6784 1.1199-3.0432 3.6117-3.6026 4.4516-.4056.6159-1.0968 1.2039-1.7821 1.2039z\" clip-rule=\"evenodd\"/></g><rect width=\"32\" height=\"32\" fill=\"#9772ff\" rx=\"9\" style=\"mix-blend-mode:hue\"/></g><defs><radialGradient id=\"b\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 23.9175 -30.8218 0 16.1649 0)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#80f593\"/><stop offset=\"1\" stop-color=\"#49f264\"/></radialGradient><radialGradient id=\"c\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 -8.2 26.3263 0 16 32)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#0ec833\"/><stop offset=\"1\" stop-color=\"#49f264\" stop-opacity=\"0\"/></radialGradient><radialGradient id=\"g\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"rotate(90 8 8)scale(16 216.921)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#acf6b9\"/><stop offset=\"1\" stop-color=\"#49f264\"/></radialGradient><radialGradient id=\"h\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 -16 194.49 0 16 32)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#80f593\"/><stop offset=\"1\" stop-color=\"#49f264\" stop-opacity=\"0\"/></radialGradient><radialGradient id=\"m\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(-.05865 17.4934 -29.59743 -.09923 16.4 7.6)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".05\"/><stop offset=\".746382\" stop-color=\"#fff\" stop-opacity=\".2\"/></radialGradient><radialGradient id=\"n\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(0 3.4 -19.5245 0 16.4 7.6)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".4\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient><radialGradient id=\"o\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(.4 -12.20004 70.05845 2.29703 16 25.2)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".1\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient><linearGradient id=\"f\" x1=\"16\" x2=\"16\" y1=\"0\" y2=\"32\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\" stop-opacity=\".95\"/><stop offset=\".317308\" stop-color=\"#fff\" stop-opacity=\".5\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".95\"/></linearGradient><linearGradient id=\"i\" x1=\"16\" x2=\"16\" y1=\"32\" y2=\"31.6\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#acf6b9\"/><stop offset=\"1\" stop-color=\"#49f264\" stop-opacity=\"0\"/></linearGradient><linearGradient id=\"j\" x1=\"16\" x2=\"16\" y1=\".4\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#49f264\" stop-opacity=\"0\"/><stop offset=\"1\" stop-color=\"#d4f7da\"/></linearGradient><linearGradient id=\"l\" x1=\"16.4\" x2=\"16.4\" y1=\"7.6\" y2=\"20.2\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#2e2e2e\"/><stop offset=\"1\" stop-color=\"#151515\"/></linearGradient><linearGradient id=\"r\" x1=\"16.4\" x2=\"16.4\" y1=\"2.4\" y2=\"25.2\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#737373\"/><stop offset=\"1\" stop-color=\"#333\"/></linearGradient><pattern id=\"d\" width=\"1\" height=\"1\" patternContentUnits=\"objectBoundingBox\"><use xlink:href=\"#s\" transform=\"scale(.00156)\"/></pattern><pattern id=\"p\" width=\"1\" height=\"1\" patternContentUnits=\"objectBoundingBox\"><use xlink:href=\"#s\" transform=\"scale(.00156)\"/></pattern><clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 0h32v32H0z\"/></clipPath><filter id=\"k\" width=\"29.9125\" height=\"27.7864\" x=\"4.38512\" y=\"7.30703\" color-interpolation-filters=\"sRGB\" filterUnits=\"userSpaceOnUse\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\".4\"/><feGaussianBlur stdDeviation=\".4\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.48 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\".8\" dy=\"1.2\"/><feGaussianBlur stdDeviation=\".8\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.42 0\"/><feBlend in2=\"effect1_dropShadow_7301_30525\" result=\"effect2_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"1.6\" dy=\"2.8\"/><feGaussianBlur stdDeviation=\"1\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.24 0\"/><feBlend in2=\"effect2_dropShadow_7301_30525\" result=\"effect3_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"2.8\" dy=\"4.8\"/><feGaussianBlur stdDeviation=\"1.2\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.07 0\"/><feBlend in2=\"effect3_dropShadow_7301_30525\" result=\"effect4_dropShadow_7301_30525\"/><feColorMatrix in=\"SourceAlpha\" result=\"hardAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"4.4\" dy=\"7.6\"/><feGaussianBlur stdDeviation=\"1.2\"/><feColorMatrix values=\"0 0 0 0 0.12549 0 0 0 0 0.352941 0 0 0 0 0.172549 0 0 0 0.01 0\"/><feBlend in2=\"effect4_dropShadow_7301_30525\" result=\"effect5_dropShadow_7301_30525\"/><feBlend in=\"SourceGraphic\" in2=\"effect5_dropShadow_7301_30525\" result=\"shape\"/></filter></defs></svg>';\n"],"names":[],"mappings":";AAEO,MAAM,oBACX;"}

package/dist/components/Tabs/TabsList.mjs

@@ -10,14 +10,16 @@ const alignLeftClasses = {
   lg: "[&>[role=tab]]:lg:flex-initial",
   xl: "[&>[role=tab]]:xl:flex-initial"
 };
-function getLayoutClass(fullWidth, alignLeft) {
+function getLayoutClass(variant, fullWidth, alignLeft) {
+  if (variant === "hug") return "inline-flex";
+  if (variant === "fill") return "flex w-full [&>[role=tab]]:flex-1";
   if (!fullWidth) return "inline-flex";
   const base = "flex w-full [&>[role=tab]]:flex-1";
   if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;
   if (typeof alignLeft === "string") return `${base} ${alignLeftClasses[alignLeft]}`;
   return base;
 }
-const TabsList = React.forwardRef(({ className, children, fullWidth = true, alignLeft, ...props }, ref) => {
+const TabsList = React.forwardRef(({ className, children, fullWidth = true, alignLeft, variant, ...props }, ref) => {
   const innerRef = React.useRef(null);
   const indicatorRef = React.useRef(null);
   React.useImperativeHandle(ref, () => innerRef.current);
@@ -33,15 +35,21 @@ const TabsList = React.forwardRef(({ className, children, fullWidth = true, alig
     const isVertical = list.dataset.orientation === "vertical";
     indicator.style.opacity = "1";
     if (isVertical) {
-      indicator.style.inset = `0 0 auto auto`;
-      indicator.style.width = "4px";
+      indicator.style.background = "linear-gradient(180deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)";
+      indicator.style.inset = `0 -1px auto auto`;
+      indicator.style.width = "1px";
       indicator.style.height = `${activeTab.offsetHeight}px`;
       indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;
     } else {
-      indicator.style.inset = `auto auto 0 0`;
-      indicator.style.height = "4px";
-      indicator.style.width = `${activeTab.offsetWidth}px`;
-      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;
+      indicator.style.background = "linear-gradient(90deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)";
+      const textSpan = activeTab.querySelector("span");
+      const textWidth = (textSpan ?? activeTab).getBoundingClientRect().width;
+      const tabCenter = activeTab.offsetLeft + activeTab.offsetWidth / 2;
+      const indicatorLeft = tabCenter - textWidth / 2;
+      indicator.style.inset = "auto auto 0 0";
+      indicator.style.height = "1px";
+      indicator.style.width = `${textWidth}px`;
+      indicator.style.transform = `translateX(${indicatorLeft}px)`;
     }
   }, []);
   React.useLayoutEffect(() => {
@@ -79,9 +87,9 @@ const TabsList = React.forwardRef(({ className, children, fullWidth = true, alig
       ref: innerRef,
       className: cn(
         "relative",
-        getLayoutClass(fullWidth, alignLeft),
-        "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]",
-        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-200)]",
+        getLayoutClass(variant, fullWidth, alignLeft),
+        "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-border-primary)]",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-border-primary)]",
         className
       ),
       ...props,
@@ -92,7 +100,7 @@ const TabsList = React.forwardRef(({ className, children, fullWidth = true, alig
           {
             ref: indicatorRef,
             "aria-hidden": true,
-            className: "pointer-events-none absolute rounded-full bg-brand-primary-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out",
+            className: "pointer-events-none absolute z-10 rounded-full motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out",
             style: { opacity: 0 }
           }
         )

package/dist/components/Tabs/TabsList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.mjs","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n  always: \"[&>[role=tab]]:flex-initial\",\n  sm: \"[&>[role=tab]]:sm:flex-initial\",\n  md: \"[&>[role=tab]]:md:flex-initial\",\n  lg: \"[&>[role=tab]]:lg:flex-initial\",\n  xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(fullWidth: boolean, alignLeft?: boolean | Breakpoint): string {\n  if (!fullWidth) return \"inline-flex\";\n\n  const base = \"flex w-full [&>[role=tab]]:flex-1\";\n  if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;\n  if (typeof alignLeft === \"string\") return `${base} ${alignLeftClasses[alignLeft]}`;\n  return base;\n}\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n  /**\n   * Controls tab alignment within a full-width container.\n   * - `false` (default): tabs spread evenly\n   * - `true`: tabs left-aligned, sized to content\n   * - `\"md\"` (breakpoint): spread on mobile, left-aligned at breakpoint and up\n   */\n  alignLeft?: boolean | Breakpoint;\n};\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, fullWidth = true, alignLeft, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.inset = `0 0 auto auto`;\n      indicator.style.width = \"4px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.inset = `auto auto 0 0`;\n      indicator.style.height = \"4px\";\n      indicator.style.width = `${activeTab.offsetWidth}px`;\n      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    let cancelled = false;\n    if (document.fonts?.status !== \"loaded\") {\n      document.fonts?.ready.then(() => {\n        if (!cancelled) updateIndicator();\n      });\n    }\n\n    return () => {\n      cancelled = true;\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative\",\n        getLayoutClass(fullWidth, alignLeft),\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-200)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute rounded-full bg-brand-primary-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabsList.mjs","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n  always: \"[&>[role=tab]]:flex-initial\",\n  sm: \"[&>[role=tab]]:sm:flex-initial\",\n  md: \"[&>[role=tab]]:md:flex-initial\",\n  lg: \"[&>[role=tab]]:lg:flex-initial\",\n  xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(\n  variant: \"fill\" | \"hug\" | undefined,\n  fullWidth: boolean,\n  alignLeft?: boolean | Breakpoint,\n): string {\n  if (variant === \"hug\") return \"inline-flex\";\n  if (variant === \"fill\") return \"flex w-full [&>[role=tab]]:flex-1\";\n\n  if (!fullWidth) return \"inline-flex\";\n\n  const base = \"flex w-full [&>[role=tab]]:flex-1\";\n  if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;\n  if (typeof alignLeft === \"string\") return `${base} ${alignLeftClasses[alignLeft]}`;\n  return base;\n}\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n  /**\n   * Controls tab alignment within a full-width container.\n   * - `false` (default): tabs spread evenly\n   * - `true`: tabs left-aligned, sized to content\n   * - `\"md\"` (breakpoint): spread on mobile, left-aligned at breakpoint and up\n   */\n  alignLeft?: boolean | Breakpoint;\n  /** Explicit layout variant. `\"hug\"` sizes the list to its content; `\"fill\"` stretches it full-width with equal-width tabs. Takes precedence over `fullWidth`/`alignLeft`. */\n  variant?: \"fill\" | \"hug\";\n};\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, fullWidth = true, alignLeft, variant, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.background =\n        \"linear-gradient(180deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)\";\n      indicator.style.inset = `0 -1px auto auto`;\n      indicator.style.width = \"1px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.background =\n        \"linear-gradient(90deg, var(--color-buttons-tertiary-default) 0%, var(--color-tab-active) 50%, var(--color-buttons-tertiary-default) 100%)\";\n      const textSpan = activeTab.querySelector(\"span\");\n      const textWidth = (textSpan ?? activeTab).getBoundingClientRect().width;\n      const tabCenter = activeTab.offsetLeft + activeTab.offsetWidth / 2;\n      const indicatorLeft = tabCenter - textWidth / 2;\n      indicator.style.inset = \"auto auto 0 0\";\n      indicator.style.height = \"1px\";\n      indicator.style.width = `${textWidth}px`;\n      indicator.style.transform = `translateX(${indicatorLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    let cancelled = false;\n    if (document.fonts?.status !== \"loaded\") {\n      document.fonts?.ready.then(() => {\n        if (!cancelled) updateIndicator();\n      });\n    }\n\n    return () => {\n      cancelled = true;\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative\",\n        getLayoutClass(variant, fullWidth, alignLeft),\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-border-primary)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-border-primary)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute z-10 rounded-full motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":[],"mappings":"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"}

package/dist/components/Tabs/TabsTrigger.mjs

@@ -9,18 +9,19 @@ const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
     ref,
     className: cn(
       "inline-flex min-w-0 items-center justify-center",
-      "rounded-xs",
-      "typography-body-default-16px-semibold cursor-pointer text-content-primary",
+      "typography-body-default-16px-semibold cursor-pointer",
       "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
       "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
       "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
-      "data-[state=active]:hover:text-buttons-primary-muted",
-      "data-[state=inactive]:hover:text-neutral-alphas-300",
-      "data-[state=active]:active:text-buttons-primary-muted",
-      "data-[state=inactive]:active:text-neutral-alphas-300",
+      "data-[state=active]:text-content-primary",
+      "data-[state=inactive]:text-content-tertiary",
+      "data-[state=active]:hover:text-content-primary/70",
+      "data-[state=inactive]:hover:text-content-primary",
+      "data-[state=active]:active:text-content-primary/70",
+      "data-[state=inactive]:active:text-content-primary",
       "data-disabled:pointer-events-none",
       "data-disabled:data-[state=active]:text-content-tertiary",
-      "data-disabled:data-[state=inactive]:text-neutral-alphas-300",
+      "data-disabled:data-[state=inactive]:text-neutral-alphas-200",
       "focus-visible:shadow-focus-ring focus-visible:outline-none",
       className
     ),

package/dist/components/Tabs/TabsTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-body-default-16px-semibold cursor-pointer text-content-primary\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-buttons-primary-muted\",\n      \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n      \"data-[state=active]:active:text-buttons-primary-muted\",\n      \"data-[state=inactive]:active:text-neutral-alphas-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\n      \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}
+{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"typography-body-default-16px-semibold cursor-pointer\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:text-content-primary\",\n      \"data-[state=inactive]:text-content-tertiary\",\n      \"data-[state=active]:hover:text-content-primary/70\",\n      \"data-[state=inactive]:hover:text-content-primary\",\n      \"data-[state=active]:active:text-content-primary/70\",\n      \"data-[state=inactive]:active:text-content-primary\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-200\",\n      \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}

package/dist/index.d.ts

@@ -1104,6 +1104,21 @@ export declare interface ChatInputProps extends Omit<React_2.TextareaHTMLAttribu
      * Ignored when `toolbarRight` is provided.
      */
     selectOptions?: ChatInputSelectOption[];
+    /**
+     * How the built-in selector presents its options:
+     * - `"menu"` (default) — a dropdown anchored to the trigger, for pointer/desktop.
+     * - `"sheet"` — a bottom sheet, for mobile/touch viewports.
+     *
+     * The viewport decision belongs to the consumer (it owns the breakpoint
+     * source of truth), so pass e.g. `selectVariant={isDesktop ? "menu" : "sheet"}`.
+     * @default "menu"
+     */
+    selectVariant?: "menu" | "sheet";
+    /**
+     * Title shown at the top of the `"sheet"` variant of the built-in selector
+     * (e.g. "Switch AI Model"). @default "Select an option"
+     */
+    selectMenuTitle?: string;
     /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */
     selectValue?: string;
     /** When `true`, disables only the built-in dropdown selector. @default false */
@@ -1133,8 +1148,15 @@ export declare interface ChatInputProps extends Omit<React_2.TextareaHTMLAttribu
 export declare interface ChatInputSelectOption {
     /** Unique value for this option. */
     value: string;
-    /** Display label. */
+    /** Short label shown on the collapsed trigger button (e.g. "Sonnet 4.6"). */
     label: string;
+    /**
+     * Optional longer title shown on the option's row inside the open menu/sheet
+     * (e.g. "Claude Sonnet 4.6"). Falls back to {@link label} when omitted.
+     */
+    menuLabel?: string;
+    /** Optional secondary text shown below the label in the dropdown menu. */
+    description?: string;
     /** Optional icon rendered to the left of the label. */
     icon?: React_2.ReactNode;
 }
@@ -1296,7 +1318,8 @@ export declare interface ChipProps extends React_2.HTMLAttributes<HTMLElement> {
     leftDot?: boolean;
     /**
      * Whether the chip uses a dashed border for add/create affordances.
-     * Has no effect when `variant="dark"` or `selected` is `true`.
+     * When `selected`, it becomes a subtle filled state with a solid border.
+     * Has no effect when `variant="dark"`.
      * @default false
      */
     dotted?: boolean;
@@ -1961,6 +1984,11 @@ export declare interface DrawerContentProps extends React_2.ComponentPropsWithou
      * @default "sm"
      */
     size?: DrawerSize;
+    /**
+     * Visual treatment of the panel. Use `"sheet"` (with `position="bottom"`) for
+     * a bottom sheet with the modal surface treatment. @default "panel"
+     */
+    variant?: DrawerVariant;
     /**
      * Whether to render the default {@link DrawerOverlay} behind the content.
      * Set to `false` to provide your own overlay or omit it entirely.
@@ -2063,6 +2091,16 @@ export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<Omit<Dialo
 /** Props for the {@link DrawerTrigger} component. */
 export declare type DrawerTriggerProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 
+/**
+ * Visual treatment of the drawer panel.
+ *
+ * - `"panel"` (default) — the standard edge-anchored surface.
+ * - `"sheet"` — a bottom-sheet treatment matching the modal surface: large
+ *   top-only radius (32px), modal background/stroke, and menu blur+shadow.
+ *   Intended for `position="bottom"`.
+ */
+export declare type DrawerVariant = "panel" | "sheet";
+
 /** Root component that manages open/close state for a dropdown menu. */
 export declare function DropdownMenu({ open: openProp, defaultOpen, onOpenChange, children, ...props }: DropdownMenuProps): JSX.Element;
 
@@ -2179,6 +2217,12 @@ export declare interface DropdownMenuItemProps extends React_2.ComponentPropsWit
     leadingIcon?: React_2.ReactNode;
     /** Icon (or other node) rendered after the label. */
     trailingIcon?: React_2.ReactNode;
+    /**
+     * Optional secondary text rendered on a second line below the label. When
+     * provided, the row switches to a two-line layout and the leading/trailing
+     * icons align to the title line (top) rather than the row's vertical centre.
+     */
+    description?: React_2.ReactNode;
     /** Marks the item as the current selection in a single-select menu. @default false */
     selected?: boolean;
 }
@@ -2913,12 +2957,14 @@ export declare const LockerOnIcon: React_2.ForwardRefExoticComponent<React_2.SVG
 } & React_2.RefAttributes<SVGSVGElement>>;
 
 /**
- * The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only,
- * and portrait (stacked) layouts with multiple colour schemes.
+ * The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only, and
+ * portrait (stacked) layouts with multiple colour schemes. `version="agencies"` renders the
+ * sub-brand lockup: a glossy purple icon and an "AGENCIES" label beneath the wordmark.
  *
  * @example
  * ```tsx
- * <Logo type="full" color="fullColour" />
+ * <Logo variant="full" color="fullColour" />
+ * <Logo variant="full" version="agencies" />
  * ```
  */
 export declare const Logo: React_2.ForwardRefExoticComponent<LogoProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -2931,10 +2977,12 @@ export declare interface LogoProps extends React_2.HTMLAttributes<HTMLDivElement
     variant?: LogoVariant;
     /** Colour scheme of the logo. @default "fullColour" */
     color?: LogoColor;
+    /** Sub-brand version of the logo. @default "default" */
+    version?: LogoVersion;
     /** Height of the logo in pixels. @default "32" (or "40" when `variant="icon"`) */
     size?: LogoSize;
     /**
-     * Accessible label for the logo. Required when `type` is `"icon"` and
+     * Accessible label for the logo. Required when `variant` is `"icon"` and
      * the logo is used inside interactive contexts (links, buttons).
      *
      * @example "Fanvue home"
@@ -2961,6 +3009,9 @@ export declare type LogoutIconProps = BaseIconProps;
 /** Layout variant of the logo. */
 export declare type LogoVariant = "full" | "icon" | "wordmark" | "portrait";
 
+/** Sub-brand version of the logo. */
+declare type LogoVersion = "default" | "agencies";
+
 /**
  * Love icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -4458,6 +4509,8 @@ export declare const TabsList: React_2.ForwardRefExoticComponent<Omit<TabsPrimit
      * - `"md"` (breakpoint): spread on mobile, left-aligned at breakpoint and up
      */
     alignLeft?: boolean | Breakpoint;
+    /** Explicit layout variant. `"hug"` sizes the list to its content; `"fill"` stretches it full-width with equal-width tabs. Takes precedence over `fullWidth`/`alignLeft`. */
+    variant?: "fill" | "hug";
 } & React_2.RefAttributes<HTMLDivElement>>;
 
 /** Props for the {@link TabsList} component. */
@@ -4471,6 +4524,8 @@ export declare type TabsListProps = React_2.ComponentPropsWithoutRef<typeof Tabs
      * - `"md"` (breakpoint): spread on mobile, left-aligned at breakpoint and up
      */
     alignLeft?: boolean | Breakpoint;
+    /** Explicit layout variant. `"hug"` sizes the list to its content; `"fill"` stretches it full-width with equal-width tabs. Takes precedence over `fullWidth`/`alignLeft`. */
+    variant?: "fill" | "hug";
 };
 
 /** Props for the {@link Tabs} root component. Extends Radix `Tabs.Root` props. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -153,7 +153,7 @@
     "svgo": "4.0.1",
     "tailwindcss": "4.1.18",
     "typescript": "5.9.3",
-    "vite": "7.3.2",
+    "vite": "7.3.5",
     "vite-plugin-dts": "4.5.4",
     "vitest": "4.1.8",
     "vitest-axe": "1.0.0-pre.3"
@@ -167,9 +167,13 @@
       "brace-expansion": ">=5.0.5",
       "yaml": ">=2.8.3",
       "postcss": ">=8.5.10",
-      "tmp": ">=0.2.6",
+      "tmp": ">=0.2.7",
       "ws": ">=8.20.1",
-      "qs": ">=6.15.2"
+      "qs": ">=6.15.2",
+      "esbuild": ">=0.28.1",
+      "vite": "^7.3.5",
+      "js-yaml": ">=4.2.0",
+      "@babel/core": ">=7.29.6"
     }
   },
   "size-limit": [