@ngrok/mantle 0.19.17 → 0.20.0

package/README.md

@@ -9,7 +9,7 @@
   Mantle Design System
 </h1>
 
-[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s inspired by [shadcn/ui](https://ui.shadcn.com) and uses [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) for styling. It’s documented using [Remix](https://remix.run/docs).
+[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s inspired by [shadcn/ui](https://ui.shadcn.com) and uses [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) for styling. It’s documented using [react-router](https://reactrouter.com/).
 
 ## Documentation
 

package/dist/anchor.d.ts

@@ -54,8 +54,7 @@ type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
  *
  * @note If you need to link to an internal application route, prefer using the
- * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the
- * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).
+ * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)
  */
 declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
     /**

package/dist/anchor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport type { AnchorHTMLAttributes } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { Rel, Target } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<\n\tAnchorHTMLAttributes<HTMLAnchorElement>,\n\t\"rel\" | \"target\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?:\n\t\t\t| Rel\n\t\t\t| (string & {})\n\t\t\t| undefined\n\t\t\t| (Rel | (string & {}) | undefined | null)[];\n\t\t/**\n\t\t * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).\n\t\t *\n\t\t * Note: Setting `target=\"_blank\"` on <a> elements implicitly provides the same rel behavior as setting `rel=\"noopener\"` which does not set `window.opener`.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n\t\t *\n\t\t * @default \"_self\"\n\t\t */\n\t\ttarget?: Target | undefined;\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(\n\t({ asChild, className, rel: propRel, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"a\";\n\t\tconst rel = resolveRel(propRel);\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={anchorClassNames(className)}\n\t\t\t\tref={ref}\n\t\t\t\trel={rel}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel:\n\t\t| Rel\n\t\t| (string & {})\n\t\t| undefined\n\t\t| null\n\t\t| (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAAS,cAAAC,MAAkB,QA8DxB,cAAAC,MAAA,oBArDH,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EA2CKE,EAASC,EACd,CAAC,CAAE,QAAAC,EAAS,UAAAJ,EAAW,IAAKK,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CACxD,IAAMC,EAAYJ,EAAUK,EAAO,IAC7BC,EAAMC,EAAWN,CAAO,EAE9B,OACCP,EAACU,EAAA,CACA,UAAWT,EAAiBC,CAAS,EACrC,IAAKO,EACL,IAAKG,EACJ,GAAGJ,EACL,CAEF,CACD,EACAJ,EAAO,YAAc,SAOrB,SAASS,EACRD,EAMC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKE,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAGXF,GAAK,KAAK,GAAK,MACvB","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","propRel","props","ref","Component","Slot","rel","resolveRel","item"]}
+{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport type { AnchorHTMLAttributes } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { Rel, Target } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<\n\tAnchorHTMLAttributes<HTMLAnchorElement>,\n\t\"rel\" | \"target\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?:\n\t\t\t| Rel\n\t\t\t| (string & {})\n\t\t\t| undefined\n\t\t\t| (Rel | (string & {}) | undefined | null)[];\n\t\t/**\n\t\t * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).\n\t\t *\n\t\t * Note: Setting `target=\"_blank\"` on <a> elements implicitly provides the same rel behavior as setting `rel=\"noopener\"` which does not set `window.opener`.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n\t\t *\n\t\t * @default \"_self\"\n\t\t */\n\t\ttarget?: Target | undefined;\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(\n\t({ asChild, className, rel: propRel, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"a\";\n\t\tconst rel = resolveRel(propRel);\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={anchorClassNames(className)}\n\t\t\t\tref={ref}\n\t\t\t\trel={rel}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel:\n\t\t| Rel\n\t\t| (string & {})\n\t\t| undefined\n\t\t| null\n\t\t| (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAAS,cAAAC,MAAkB,QA6DxB,cAAAC,MAAA,oBApDH,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EA0CKE,EAASC,EACd,CAAC,CAAE,QAAAC,EAAS,UAAAJ,EAAW,IAAKK,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CACxD,IAAMC,EAAYJ,EAAUK,EAAO,IAC7BC,EAAMC,EAAWN,CAAO,EAE9B,OACCP,EAACU,EAAA,CACA,UAAWT,EAAiBC,CAAS,EACrC,IAAKO,EACL,IAAKG,EACJ,GAAGJ,EACL,CAEF,CACD,EACAJ,EAAO,YAAc,SAOrB,SAASS,EACRD,EAMC,CACD,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKE,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAGXF,GAAK,KAAK,GAAK,MACvB","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","propRel","props","ref","Component","Slot","rel","resolveRel","item"]}

package/dist/flag.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** All valid values for a flag
+ * @see https://www.flagpack.xyz/docs/flag-index
+ */
+type Flags = "AD" | "AE" | "AFRUN" | "AG" | "AI" | "AL" | "AM" | "AMS" | "AO" | "AQ" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ-BO" | "BQ-SA" | "BQ-SE" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CF" | "CG" | "CH" | "CI" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CV" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "EU" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB-ENG" | "GB-SCT" | "GB-UKM" | "GB-WLS" | "GB-NIR" | "GD" | "GE" | "GF" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GP" | "GQ" | "GR" | "GS" | "GT" | "GU" | "GW" | "GY" | "HK" | "HM" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN-SK" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MF" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NC" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PM" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RAINBOW" | "RE" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SD" | "SE" | "SG" | "SH" | "SI" | "SJ" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TF" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "UM" | "UNASUR" | "US" | "UY" | "UZ" | "VA" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WF" | "WS" | "YE" | "ZA" | "ZM" | "ZW" | "AF" | "BV" | "AND" | "ARE" | "ATG" | "AIA" | "ALB" | "ARM" | "AGO" | "ATA" | "ARG" | "ASM" | "AUT" | "AUS" | "ABW" | "ALA" | "AZE" | "BIH" | "BRB" | "BGD" | "BEL" | "BFA" | "BGR" | "BHR" | "BDI" | "BEN" | "BLM" | "BMU" | "BRN" | "BOL" | "BRA" | "BHS" | "BTN" | "BWA" | "BLR" | "BLZ" | "CAN" | "CCK" | "COD" | "CAF" | "COG" | "CHE" | "CIV" | "COK" | "CHL" | "CMR" | "CHN" | "COL" | "CRI" | "CUB" | "CPV" | "CUW" | "CXR" | "CYP" | "CZE" | "DEU" | "DJI" | "DNK" | "DMA" | "DOM" | "ECU" | "EST" | "EGY" | "ESH" | "ERI" | "ESP" | "ETH" | "FIN" | "FJI" | "FLK" | "FSM" | "FRO" | "FRA" | "GAB" | "GBR" | "GRD" | "GEO" | "GUF" | "GGY" | "GHA" | "GIB" | "GRL" | "GMB" | "GIN" | "GLP" | "GNQ" | "GRC" | "SGS" | "GTM" | "GUM" | "GNB" | "GUY" | "HKG" | "HMD" | "HND" | "HRV" | "HTI" | "HUN" | "IDN" | "IRL" | "ISR" | "IMN" | "IND" | "IOT" | "IRQ" | "IRN" | "ISL" | "ITA" | "JEY" | "JAM" | "JOR" | "JPN" | "KEN" | "KGZ" | "KHM" | "KIR" | "COM" | "KNA" | "PRK" | "KOR" | "KWT" | "CYM" | "KAZ" | "LAO" | "LBN" | "LCA" | "LIE" | "LKA" | "LBR" | "LSO" | "LTU" | "LUX" | "LVA" | "LBY" | "MAR" | "MCO " | "MDA" | "MNE" | "MAF" | "MDG" | "MHL" | "MKD" | "MLI" | "MMR" | "MNG" | "MAC" | "MNP" | "MTQ" | "MRT" | "MSR" | "MLT" | "MUS" | "MDV" | "MWI" | "MEX" | "MYS" | "MOZ" | "NAM" | "NCL" | "NER" | "NFK" | "NGA" | "NIC" | "NLD" | "NOR" | "NPL" | "NRU" | "NIU" | "NZL" | "OMN" | "PAN" | "PER" | "PYF" | "PNG" | "PHL" | "PAK" | "POL" | "SPM" | "PCN" | "PRI" | "PSE" | "PRT" | "PLW" | "PRY" | "QAT" | "REU" | "ROU" | "SRB" | "RUS" | "RWA" | "SAU" | "SLB" | "SYC" | "SDN" | "SWE" | "SGP" | "SHN" | "SVN" | "SJM" | "SVK" | "SLE" | "SMR" | "SEN" | "SOM" | "SUR" | "SSD" | "STP" | "SLV" | "SXM" | "SYR" | "SWZ" | "TCA" | "TCD" | "ATF" | "TGO" | "THA" | "TJK" | "TKL" | "TLS" | "TKM" | "TUN" | "TON" | "TUR" | "TTO" | "TUV" | "TWN" | "TZA" | "UKR" | "UGA" | "UMI" | "USA" | "URY" | "UZB" | "VAT" | "VCT" | "VEN" | "VGB" | "VIR" | "VNM" | "VUT" | "WLF" | "WSM" | "YEM" | "ZAF" | "ZMB" | "ZWE" | "AFG" | "BVT" | "020" | "784" | "028" | "660" | "008" | "051" | "024" | "010" | "032" | "016" | "040" | "016" | "533" | "248" | "031" | "070" | "052" | "050" | "056" | "854" | "100" | "048" | "108" | "204" | "652" | "060" | "096" | "068" | "076" | "044" | "064" | "072" | "112" | "084" | "124" | "166" | "180" | "140" | "178" | "756" | "384" | "184" | "152" | "120" | "156" | "170" | "188" | "192" | "132" | "531" | "162" | "196" | "203" | "276" | "262" | "208" | "212" | "214" | "218" | "233" | "818" | "732" | "232" | "724" | "231" | "246" | "242" | "238" | "583" | "234" | "250" | "266" | "836" | "308" | "268" | "254" | "831" | "288" | "292" | "304" | "270" | "324" | "312" | "226" | "300" | "239" | "320" | "316" | "624" | "328" | "344" | "334" | "340" | "191" | "332" | "348" | "360" | "372" | "376" | "833" | "356" | "086" | "368" | "364" | "352" | "380" | "832" | "388" | "400" | "392" | "404" | "417" | "116" | "296" | "174" | "659" | "408" | "410" | "414" | "136" | "398" | "418" | "422" | "662" | "438" | "144" | "430" | "426" | "440" | "442" | "428" | "434" | "504" | "492" | "498" | "499" | "663" | "450" | "584" | "807" | "466" | "104" | "496" | "446" | "580" | "474" | "478" | "500" | "470" | "480" | "462" | "454" | "484" | "458" | "508" | "516" | "540" | "562" | "574" | "566" | "558" | "528" | "578" | "524" | "520" | "570" | "554" | "512" | "591" | "604" | "258" | "598" | "608" | "586" | "616" | "666" | "612" | "630" | "275" | "620" | "585" | "600" | "634" | "638" | "642" | "688" | "643" | "646" | "682" | "090" | "690" | "729" | "752" | "702" | "654" | "705" | "744" | "703" | "694" | "674" | "686" | "706" | "740" | "728" | "678" | "222" | "534" | "760" | "748" | "796" | "148" | "260" | "768" | "764" | "762" | "772" | "626" | "795" | "788" | "776" | "792" | "780" | "798" | "158" | "834" | "804" | "800" | "581" | "840" | "858" | "860" | "336" | "670" | "862" | "092" | "850" | "704" | "548" | "876" | "882" | "887" | "710" | "894" | "716" | "004" | "074";
+
+declare const sizes: readonly ["s", "m", "l"];
+type Size = (typeof sizes)[number];
+type Props = Omit<ComponentProps<"div">, "children"> & {
+    /**
+     * The country code for the flag to display
+     * @example "US"
+     */
+    code: Flags;
+    /**
+     * The size of flag to render, "s", "m", or "l"
+     * @default "l"
+     */
+    size?: Size;
+    /**
+     * A string providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading
+     * @default "lazy"
+     */
+    loading?: ComponentProps<"img">["loading"];
+};
+/**
+ * A flag component that displays a flag based on the provided country code.
+ * Inspired by [react-flagpack](https://flagpack.xyz/docs/development/react).
+ */
+declare function Flag({ className, code, size, loading, ...props }: Props): react_jsx_runtime.JSX.Element;
+
+export { Flag, type Props as FlagProps, type Flags };

package/dist/flag.js

@@ -0,0 +1,2 @@
+import{a as r}from"./chunk-AZ56JGNY.js";import{jsx as t}from"react/jsx-runtime";var a="https://assets.ngrok.com";function m({className:p,code:s,size:o="l",loading:e="lazy",...l}){return t("div",{className:r("flag",o==="s"&&"w-4 h-3",o==="m"&&"w-5 h-[0.9375rem]",o==="l"&&"w-8 h-6",p),...l,children:t("img",{className:"h-full w-full block object-cover",src:`${a}/flags/${o}/${s}.svg`,alt:`flag for ${s}`,loading:e})})}export{m as Flag};
+//# sourceMappingURL=flag.js.map

package/dist/flag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/flag/flag.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { Flags } from \"./types.js\";\n\nconst cdnOrigin = \"https://assets.ngrok.com\";\n\nconst sizes = [\"s\", \"m\", \"l\"] as const;\ntype Size = (typeof sizes)[number];\n\ntype Props = Omit<ComponentProps<\"div\">, \"children\"> & {\n\t/**\n\t * The country code for the flag to display\n\t * @example \"US\"\n\t */\n\tcode: Flags;\n\t/**\n\t * The size of flag to render, \"s\", \"m\", or \"l\"\n\t * @default \"l\"\n\t */\n\tsize?: Size;\n\t/**\n\t * A string providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading\n\t * @default \"lazy\"\n\t */\n\tloading?: ComponentProps<\"img\">[\"loading\"];\n};\n\n/**\n * A flag component that displays a flag based on the provided country code.\n * Inspired by [react-flagpack](https://flagpack.xyz/docs/development/react).\n */\nfunction Flag({\n\t//,\n\tclassName,\n\tcode,\n\tsize = \"l\",\n\tloading = \"lazy\",\n\t...props\n}: Props) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\n\t\t\t\t\"flag\",\n\t\t\t\tsize === \"s\" && \"w-4 h-3\",\n\t\t\t\tsize === \"m\" && \"w-5 h-[0.9375rem]\",\n\t\t\t\tsize === \"l\" && \"w-8 h-6\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* Depend on the build configs to make the assets available at this location */}\n\t\t\t<img\n\t\t\t\tclassName=\"h-full w-full block object-cover\"\n\t\t\t\tsrc={`${cdnOrigin}/flags/${size}/${code}.svg`}\n\t\t\t\talt={`flag for ${code}`}\n\t\t\t\tloading={loading}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport {\n\t//,\n\tFlag,\n};\n\nexport type {\n\t//,\n\tProps as FlagProps,\n};\n"],"mappings":"wCAoDG,cAAAA,MAAA,oBAhDH,IAAMC,EAAY,2BA4BlB,SAASC,EAAK,CAEb,UAAAC,EACA,KAAAC,EACA,KAAAC,EAAO,IACP,QAAAC,EAAU,OACV,GAAGC,CACJ,EAAU,CACT,OACCC,EAAC,OACA,UAAWC,EACV,OACAJ,IAAS,KAAO,UAChBA,IAAS,KAAO,oBAChBA,IAAS,KAAO,UAChBF,CACD,EACC,GAAGI,EAGJ,SAAAC,EAAC,OACA,UAAU,mCACV,IAAK,GAAGE,CAAS,UAAUL,CAAI,IAAID,CAAI,OACvC,IAAK,YAAYA,CAAI,GACrB,QAASE,EACV,EACD,CAEF","names":["jsx","cdnOrigin","Flag","className","code","size","loading","props","jsx","cx","cdnOrigin"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.19.17",
+  "version": "0.20.0",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -67,12 +67,10 @@
     "postcss": "8.5.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.29.0",
+    "react-router": "7.1.5",
     "tailwindcss": "3.4.17",
     "tsup": "8.3.6",
     "typescript": "5.7.3",
-    "vite": "5.4.14",
-    "vitest": "3.0.5",
     "zod": "3.24.2",
     "@cfg/tsconfig": "1.0.0"
   },
@@ -175,6 +173,11 @@
       "import": "./dist/dropdown-menu.js",
       "types": "./dist/dropdown-menu.d.ts"
     },
+    "./flag": {
+      "@ngrok/mantle/source": "./src/components/flag/index.ts",
+      "import": "./dist/flag.js",
+      "types": "./dist/flag.d.ts"
+    },
     "./hooks": {
       "@ngrok/mantle/source": "./src/hooks/index.ts",
       "import": "./dist/hooks.js",
@@ -295,7 +298,6 @@
     "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
     "clean": "rm -rf dist",
     "prebuild": "rm -rf dist",
-    "test:ui": "TZ=UTC vitest --ui",
     "test:watch": "TZ=UTC vitest watch",
     "test": "TZ=UTC vitest run",
     "typecheck": "tsc"